/* ================================================================
   sql-trigger-practice-playground.css — Sqlism Theme
   ================================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --primary:        #8b5cf6;
    --primary-dark:   #7c3aed;
    --secondary:      #10b981;
    --bg-primary:     #ffffff;
    --bg-secondary:   #f8fafc;
    --bg-card:        #ffffff;
    --text-primary:   #1f2937;
    --text-secondary: #6b7280;
    --border:         #e5e7eb;
    --shadow:         rgba(0,0,0,0.10);
    --shadow-lg:      rgba(0,0,0,0.15);
    --navbar-bg:      #ffffff;
    --gradient:       linear-gradient(135deg, #8b5cf6 0%, #10b981 100%);
    --code-bg:        #1e1e2e;
    --code-text:      #cdd6f4;
    --mono:           'IBM Plex Mono', monospace;
    --warning-color:  #f59e0b;
    --danger-color:   #ef4444;
}

[data-theme="dark"] {
    --bg-primary:     #111827;
    --bg-secondary:   #1f2937;
    --bg-card:        #1f2937;
    --text-primary:   #f9fafb;
    --text-secondary: #d1d5db;
    --border:         #374151;
    --shadow:         rgba(0,0,0,0.30);
    --shadow-lg:      rgba(0,0,0,0.50);
    --navbar-bg:      #111827;
    --code-bg:        #0d1117;
    --code-text:      #c9d1d9;
}

html { scroll-behavior:smooth; }
body {
    font-family:'Inter',sans-serif;
    background:var(--bg-secondary);
    color:var(--text-primary);
    line-height:1.6;
    transition:background-color .3s ease, color .3s ease;
    min-height:100vh;
}
button, textarea, input, select { font:inherit; }
code, kbd, pre { font-family:var(--mono); }
a { color:var(--primary); text-decoration:none; }

.hero {
    background:var(--gradient);
    padding:3.8rem 2rem 4.2rem;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
    border-bottom:2px solid var(--border);
}
.hero::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.4;
    pointer-events:none;
}
.hero::after {
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 55% 70% at 8% 60%, rgba(255,255,255,.07) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 92% 20%, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events:none;
}
.hero-content { position:relative; z-index:1; max-width:820px; margin:0 auto; }
.hero-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.18); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.3);
    padding:6px 18px; border-radius:50px;
    font-size:.82rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; margin-bottom:18px;
}
.hero-h1 {
    font-size:clamp(2rem,5vw,3.4rem); font-weight:800; margin-bottom:14px;
    display:block; letter-spacing:-.02em;
}
.hero-para {
    font-size:clamp(.95rem,2vw,1.15rem); opacity:.92;
    margin-bottom:24px; max-width:720px; margin-left:auto; margin-right:auto;
}
.hero-para code {
    background:rgba(255,255,255,.22); padding:2px 7px; border-radius:5px; font-size:.88em;
}
.hero-stats { display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; }
.hero-stats span {
    background:rgba(255,255,255,.18); padding:7px 18px; border-radius:50px;
    display:flex; align-items:center; gap:7px; backdrop-filter:blur(10px); font-size:.88rem;
}

[data-theme="dark"] .hero { background:linear-gradient(to right,#111827,#1f2937); }
[data-theme="dark"] .hero-h1,
[data-theme="dark"] .hero-para,
[data-theme="dark"] .hero-eyebrow {
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .hero-stats span {
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    border:1px solid #7c3aed;
}

.container { max-width:1380px; margin:0 auto; padding:2rem 2rem 3rem; }

.panel {
    background:var(--bg-card);
    border-radius:16px;
    border:2px solid var(--border);
    box-shadow:0 4px 20px var(--shadow);
    overflow:hidden;
}

.panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    background:rgba(139, 92, 246, 0.1);
    border-bottom:2px solid var(--border);
    font-weight:700; font-size:.95rem; color:var(--text-primary);
    flex-wrap:wrap; gap:10px;
}
.panel-header > span { display:flex; align-items:center; gap:8px; }
.panel-header > span i { color:var(--primary); }
.panel-btn-group { display:flex; gap:8px; align-items:center; flex-shrink:0; }

.btn-format, .btn-copy, .btn-download, .btn-clear, .btn-share, .btn-save {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
    color:var(--text-secondary);
    font-size:.82rem; font-weight:600; cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all .2s ease; white-space:nowrap;
}
.btn-format:hover, .btn-copy:hover, .btn-download:hover,
.btn-clear:hover, .btn-share:hover, .btn-save:hover {
    border-color:var(--primary); color:var(--primary);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(139,92,246,.15);
}

.btn-convert {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 26px; border-radius:999px; border:none;
    background:var(--gradient); color:#fff;
    font-size:.95rem; font-weight:700; cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 6px 20px rgba(139,92,246,.35);
    white-space:nowrap;
}
.btn-convert:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(139,92,246,.45); }

.workspace {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.control-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:16px 20px 0;
}
.control-group select {
    width:100%;
    padding:12px 14px;
    border:2px solid var(--border);
    border-radius:12px;
    background:var(--bg-primary);
    color:var(--text-primary);
}
.control-group select:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(139,92,246,.12);
}

.example-strip {
    display:flex; gap:10px; flex-wrap:wrap;
    padding:16px 20px 0;
}
.example-chip {
    text-align:left; padding:10px 14px;
    border:1.5px solid var(--border); border-radius:12px;
    background:var(--bg-secondary); color:var(--text-primary);
    cursor:pointer; transition:all .22s ease;
    display:flex; flex-direction:column; gap:2px;
}
.example-chip:hover {
    border-color:var(--primary);
    background:rgba(139,92,246,.06);
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(139,92,246,.12);
}
.example-chip strong { font-size:.88rem; font-weight:600; color:var(--text-primary); }
.example-chip span { font-size:.76rem; color:var(--text-secondary); }

.editor-wrap { padding:14px 20px 0; }
.editor-label {
    display:block; margin-bottom:8px;
    font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
    color:var(--text-secondary);
}

textarea {
    display:block; width:100%;
    min-height:400px;
    padding:16px 18px;
    border:2px solid var(--border); border-radius:12px;
    resize:vertical;
    background:var(--code-bg); color:var(--code-text);
    line-height:1.7; font-size:.88rem;
    font-family:var(--mono); tab-size:4;
    transition:border-color .25s ease;
}
textarea:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
textarea::placeholder { color:rgba(205,214,244,.28); }

.action-row {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:14px 20px 20px;
}
.microcopy {
    display:flex; align-items:center; gap:6px;
    font-size:.82rem; color:var(--text-secondary); line-height:1.5;
}
.microcopy i { color:var(--primary); flex-shrink:0; }
.microcopy code {
    background:rgba(139,92,246,.1); color:var(--primary);
    padding:1px 5px; border-radius:4px;
    font-family:var(--mono); font-size:.85em;
    border:1px solid rgba(139,92,246,.18);
}

.mode-switch {
    display:flex; gap:8px; padding:16px 20px 0; flex-wrap:wrap;
}
.mode-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px; border-radius:999px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary); color:var(--text-secondary);
    font-size:.86rem; font-weight:600; cursor:pointer;
    font-family:'Inter',sans-serif; transition:all .22s ease;
}
.mode-tab:hover { border-color:var(--primary); color:var(--primary); }
.mode-tab.active {
    background:var(--gradient); color:#fff;
    border-color:transparent;
    box-shadow:0 4px 14px rgba(139,92,246,.32);
}

.status-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px; padding:14px 20px 0;
}
.status-card {
    padding:14px 16px; border-radius:12px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
}
.status-label {
    display:flex; align-items:center; gap:6px;
    font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-secondary); margin-bottom:6px;
}
.status-label i { color:var(--primary); font-size:.8rem; }
.status-card strong {
    display:block; font-size:.9rem; font-weight:700;
    color:var(--text-primary); margin-bottom:4px;
}
.status-card p {
    font-size:.78rem; color:var(--text-secondary);
    line-height:1.5; margin:0;
}

.result-switcher { padding-bottom:20px; }
.result-pane { display:none; }
.result-pane.active { display:block; }

.table-wrap {
    min-height:380px;
    max-height:460px;
    overflow:auto;
    border:2px solid var(--border);
    border-radius:12px;
    background:var(--bg-primary);
}
.empty-state {
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    font-style:italic;
    padding:24px;
}
table {
    width:100%;
    border-collapse:collapse;
    font-size:.86rem;
}
th, td {
    padding:12px 14px;
    text-align:left;
    border-bottom:1px solid var(--border);
    vertical-align:top;
    white-space:nowrap;
}
th {
    position:sticky;
    top:0;
    background:var(--bg-secondary);
    color:var(--text-primary);
    z-index:1;
}
tbody tr:nth-child(even) td {
    background:rgba(139,92,246,.03);
}

.state-grid {
    min-height:380px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}
.state-card {
    border:1.5px solid var(--border);
    border-radius:12px;
    background:var(--bg-secondary);
    overflow:hidden;
}
.state-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border-bottom:1.5px solid var(--border);
    background:rgba(139,92,246,.08);
}
.state-card-header strong {
    font-size:.9rem;
    color:var(--text-primary);
}
.state-card-header span {
    font-size:.74rem;
    color:var(--primary);
    font-weight:700;
}
.state-card-body {
    max-height:300px;
    overflow:auto;
}

.insights {
    display:grid;
    grid-template-columns:1.1fr 1.1fr 0.8fr;
    gap:20px;
}
.insight-content { padding:16px 18px; }
.mission-topline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.mission-topline strong {
    font-size:1rem;
    color:var(--text-primary);
}
.difficulty-badge {
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(139,92,246,.1);
    color:var(--primary);
    font-size:.78rem;
    font-weight:700;
    border:1px solid rgba(139,92,246,.18);
}
.mission-description {
    font-size:.9rem;
    color:var(--text-secondary);
    margin-bottom:12px;
}
.mission-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}
.mission-tag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
    color:var(--text-secondary);
    font-size:.78rem;
    font-weight:600;
}

.profile-strip {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    padding:16px 18px 0;
}
.profile-card {
    padding:14px 16px;
    border-radius:12px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
}
.profile-card strong {
    display:block;
    font-size:1.1rem;
    color:var(--text-primary);
    margin:4px 0;
}
.profile-card span {
    display:block;
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-secondary);
    font-weight:700;
}
.profile-card p {
    font-size:.78rem;
    color:var(--text-secondary);
}

.insight-list {
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:60px;
}
.insight-list.empty-state {
    font-size:.87rem; color:var(--text-secondary);
    line-height:1.6; font-style:italic;
}
.insight-item {
    position:relative;
    padding:12px 14px 12px 18px;
    border-radius:10px; border:1.5px solid var(--border);
    background:var(--bg-secondary);
    font-size:.86rem; line-height:1.6;
}
.insight-item::before {
    content:''; position:absolute;
    left:0; top:12px; bottom:12px;
    width:4px; border-radius:999px;
    background:rgba(16,185,129,.55);
}
.insight-item.warning::before { background:rgba(239,68,68,.65); }
.insight-item strong {
    display:block; margin-bottom:4px;
    font-size:.76rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--secondary);
}
.insight-item.warning strong { color:var(--danger-color); }
.insight-item span { color:var(--text-secondary); }

.cheat-sheet { padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.cheat-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:10px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
}
.cheat-sql {
    font-family:var(--mono); font-size:.82rem; font-weight:700;
    color:var(--primary); min-width:80px; flex-shrink:0;
}
.cheat-arrow { color:var(--text-secondary); font-size:.75rem; flex-shrink:0; }
.cheat-code {
    font-family:var(--mono); font-size:.8rem;
    background:rgba(139,92,246,.1); color:var(--primary);
    padding:2px 8px; border-radius:5px;
    border:1px solid rgba(139,92,246,.18);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.keyword  { color:#c084fc; font-weight:600; }
.function { color:#6ee7b7; }
.string   { color:#fca5a5; }
.number   { color:#fcd34d; }
.comment  { color:#64748b; font-style:italic; }
.operator { color:#94a3b8; }

.notification {
    position:fixed; top:80px; right:20px;
    padding:14px 22px;
    background:var(--gradient); color:#fff;
    border-radius:10px;
    box-shadow:0 4px 20px rgba(139,92,246,.4);
    transform:translateX(calc(100% + 40px)); opacity:0;
    transition:transform .4s ease, opacity .4s ease;
    z-index:1000; font-weight:500;
    display:flex; align-items:center; gap:9px; font-size:.92rem;
    pointer-events:none; cursor:pointer;
}
.notification.show { transform:translateX(0); opacity:1; pointer-events:auto; }
.notification.success { background:linear-gradient(135deg,#10b981,#059669); }
.notification.error { background:linear-gradient(135deg,#ef4444,#dc2626); }
.notification.warning { background:linear-gradient(135deg,#f59e0b,#d97706); }
.btn-copy.copied {
    border-color:var(--secondary); color:var(--secondary);
    background:rgba(16,185,129,.08);
}

@media (max-width:1200px) {
    .insights { grid-template-columns:1fr 1fr; }
    .insights .insight-panel:last-child { grid-column:1 / -1; }
    .cheat-sheet {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:10px;
    }
}

@media (max-width:1024px) {
    .workspace { grid-template-columns:1fr; }
    textarea { min-height:280px; }
    .state-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    .container { padding:1.5rem 1.2rem 2.5rem; }
    .hero { padding:2.8rem 1.5rem 3.2rem; }
    .hero-h1 { font-size:1.9rem; }
    .hero-para { font-size:.95rem; }
    .hero-stats { gap:.8rem; }
    .status-grid { grid-template-columns:1fr; }
    .insights { grid-template-columns:1fr; }
    .insights .insight-panel:last-child { grid-column:auto; }
    .cheat-sheet { display:flex; flex-direction:column; }
    .panel-header { flex-direction:column; align-items:flex-start; gap:10px; }
    .action-row { flex-direction:column; align-items:flex-start; }
    .mode-switch { flex-wrap:wrap; }
    .control-grid { grid-template-columns:1fr; }
    .profile-strip { grid-template-columns:1fr; }
}

@media (max-width:576px) {
    .container { padding:1rem 1rem 2rem; }
    .hero { padding:2.2rem 1rem 2.8rem; }
    .hero-h1 { font-size:1.65rem; }
    .panel-header { padding:12px 14px; }
    .editor-wrap { padding:12px 14px 0; }
    .action-row { padding:12px 14px 16px; }
    .example-strip { padding:12px 14px 0; }
    .status-grid { padding:12px 14px 0; }
    .mode-switch { padding:12px 14px 0; }
    .control-grid { padding:12px 14px 0; }
    textarea { min-height:240px; font-size:.82rem; }
    .table-wrap, .state-grid { min-height:240px; }
    .notification {
        left:10px; right:10px; width:calc(100% - 20px);
        top:70px; transform:translateY(-100px); opacity:0;
    }
    .notification.show { transform:translateY(0); opacity:1; }
}