/* ==========================================================================
   WOW Forge — visual system
   Identity: a workshop for code. Dark slate "anvil" surfaces, molten gold
   accent used sparingly, monospace as the UI's labelling voice, and a
   code "fingerprint" minimap as the signature element on every card.
   ========================================================================== */

:root {
    color-scheme: dark;

    --ink-950:#080c12;
    --ink-900:#0b1017;
    --ink-850:#0f151e;
    --ink-800:#131b26;
    --ink-750:#18212e;
    --ink-700:#1e2836;
    --line:rgba(255,255,255,.075);
    --line-strong:rgba(255,255,255,.14);

    --text:#e7edf5;
    --text-dim:#aab7c7;
    --muted:#7e8c9e;

    --gold:#f5b942;
    --gold-ink:#2a1e05;
    --gold-soft:rgba(245,185,66,.13);
    --gold-line:rgba(245,185,66,.35);

    --quench:#57bccf;
    --quench-soft:rgba(87,188,207,.12);
    --violet:#9887f2;
    --violet-soft:rgba(152,135,242,.13);

    --ok:#4ec98a;
    --ok-soft:rgba(78,201,138,.13);
    --warn:#efa63f;
    --warn-soft:rgba(239,166,63,.13);
    --bad:#e8656b;
    --bad-soft:rgba(232,101,107,.13);

    --radius-s:4px;
    --radius:8px;
    --radius-l:14px;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.9);

    --font-ui:"Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Naskh Arabic", "Helvetica Neue", Arial, sans-serif;
    --font-mono:ui-monospace, "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --sidebar:242px;
    --topbar:60px;
    --wrap:1280px;
}

[data-theme="light"] {
    color-scheme: light;
    --ink-950:#eef1f5;
    --ink-900:#f4f6f9;
    --ink-850:#ffffff;
    --ink-800:#ffffff;
    --ink-750:#f7f9fb;
    --ink-700:#eef2f6;
    --line:rgba(15,25,40,.10);
    --line-strong:rgba(15,25,40,.2);
    --text:#121a25;
    --text-dim:#3d4b5c;
    --muted:#63748a;
    --gold:#b8791a;
    --gold-ink:#fff6e2;
    --gold-soft:rgba(184,121,26,.11);
    --gold-line:rgba(184,121,26,.32);
    --quench:#1e7f92;
    --quench-soft:rgba(30,127,146,.1);
    --violet:#5f4bcc;
    --violet-soft:rgba(95,75,204,.1);
    --ok:#1d8a56;
    --ok-soft:rgba(29,138,86,.11);
    --warn:#a5691a;
    --warn-soft:rgba(165,105,26,.12);
    --bad:#c33c47;
    --bad-soft:rgba(195,60,71,.11);
    --shadow:0 1px 2px rgba(15,25,40,.06), 0 10px 30px -20px rgba(15,25,40,.5);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    font-family:var(--font-ui);
    background:var(--ink-900);
    color:var(--text);
    font-size:15px;
    line-height:1.6;
    min-height:100vh;
    overflow-wrap:break-word;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
hr{border:0;border-top:1px solid var(--line)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
::selection{background:var(--gold);color:var(--gold-ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{line-height:1.2;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.35rem)}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
h4{font-size:.98rem}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0}

.eyebrow{
    font-family:var(--font-mono);
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--muted);
}
[dir="rtl"] .eyebrow{letter-spacing:.04em}
.mono{font-family:var(--font-mono);font-size:.82rem}
.muted{color:var(--muted)}
.dim{color:var(--text-dim)}
.small{font-size:.82rem}
.tiny{font-size:.74rem}
.strong{font-weight:650}
.center{text-align:center}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- layout shell ---------- */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--gold);color:var(--gold-ink);padding:.6rem 1rem}
.skip:focus{inset-inline-start:0}

.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.main{min-width:0;display:flex;flex-direction:column}
.page{width:100%;max-width:var(--wrap);margin-inline:auto;padding:1.6rem 1.5rem 4rem;flex:1}
.page-narrow{max-width:880px}

/* ---------- sidebar ---------- */
.sidebar{
    background:var(--ink-950);
    border-inline-end:1px solid var(--line);
    position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;
    overflow-y:auto;
    z-index:30;
}
.brand{display:flex;align-items:center;gap:.65rem;padding:1.05rem 1.2rem;border-bottom:1px solid var(--line)}
.brand-mark{width:30px;height:30px;flex:none}
.brand-name{font-weight:750;letter-spacing:-.03em;font-size:1.06rem}
.brand-sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
[dir="rtl"] .brand-sub{letter-spacing:.05em}

.nav{padding:.9rem .7rem;display:flex;flex-direction:column;gap:.15rem}
.nav-group + .nav-group{margin-top:1rem}
.nav-label{
    font-family:var(--font-mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);padding:.35rem .6rem .45rem;
}
[dir="rtl"] .nav-label{letter-spacing:.05em}
.nav-item{
    display:flex;align-items:center;gap:.65rem;
    padding:.5rem .6rem;border-radius:var(--radius);
    color:var(--text-dim);font-size:.9rem;font-weight:500;
    transition:background .12s ease,color .12s ease;
    position:relative;
}
.nav-item:hover{background:var(--ink-800);color:var(--text)}
.nav-item.is-active{background:var(--gold-soft);color:var(--text)}
.nav-item.is-active::before{
    content:"";position:absolute;inset-inline-start:0;top:20%;bottom:20%;
    width:2px;background:var(--gold);border-radius:2px;
}
.nav-item .ic{flex:none;opacity:.85}
.nav-count{margin-inline-start:auto;font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.nav-pill{margin-inline-start:auto;background:var(--gold);color:var(--gold-ink);font-family:var(--font-mono);
    font-size:.66rem;padding:.05rem .35rem;border-radius:99px;font-weight:700}

.sidebar-foot{margin-top:auto;padding:1rem 1.1rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted)}
.sidebar-foot a{color:var(--text-dim)}
.sidebar-foot a:hover{color:var(--gold)}

/* ---------- topbar ---------- */
.topbar{
    position:sticky;top:0;z-index:25;
    height:var(--topbar);
    display:flex;align-items:center;gap:.75rem;
    padding:0 1.5rem;
    background:color-mix(in srgb,var(--ink-900) 88%,transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.burger{display:none}
.search-form{flex:1;max-width:520px;position:relative}
.search-form input{
    width:100%;padding:.5rem .8rem .5rem 2.2rem;
    background:var(--ink-800);border:1px solid var(--line);border-radius:var(--radius);
    font-size:.86rem;
}
[dir="rtl"] .search-form input{padding:.5rem 2.2rem .5rem .8rem}
.search-form .ic{position:absolute;inset-inline-start:.65rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.search-form input:focus{border-color:var(--gold-line);background:var(--ink-850)}
.topbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.4rem}

.icon-btn{
    width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius);
    color:var(--text-dim);border:1px solid transparent;position:relative;
}
.icon-btn:hover{background:var(--ink-800);color:var(--text)}
.badge-dot{
    position:absolute;top:4px;inset-inline-end:4px;min-width:15px;height:15px;padding:0 3px;
    background:var(--bad);color:#fff;border-radius:99px;font-family:var(--font-mono);
    font-size:.6rem;display:grid;place-items:center;font-weight:700;
}

/* ---------- buttons ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    padding:.52rem .95rem;border-radius:var(--radius);
    font-size:.87rem;font-weight:600;
    border:1px solid var(--line-strong);
    background:var(--ink-750);color:var(--text);
    transition:background .12s ease,border-color .12s ease,transform .08s ease;
    cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--ink-700);border-color:var(--line-strong)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--gold-ink);border-color:transparent;font-weight:700}
.btn-primary:hover{background:#ffc85a;border-color:transparent}
[data-theme="light"] .btn-primary:hover{background:#a56a13}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover{background:var(--ink-800)}
.btn-danger{color:var(--bad);border-color:var(--bad-soft)}
.btn-danger:hover{background:var(--bad-soft)}
.btn-sm{padding:.34rem .66rem;font-size:.79rem}
.btn-xs{padding:.2rem .5rem;font-size:.73rem;border-radius:var(--radius-s)}
.btn-block{width:100%}
.btn[aria-pressed="true"]{border-color:var(--gold-line);color:var(--gold);background:var(--gold-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- surfaces ---------- */
.card{
    background:var(--ink-850);border:1px solid var(--line);border-radius:var(--radius-l);
    position:relative;
}
.card-pad{padding:1.1rem 1.2rem}
.panel{background:var(--ink-850);border:1px solid var(--line);border-radius:var(--radius-l);padding:1.2rem 1.3rem}
.panel + .panel{margin-top:1rem}
.panel-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.panel-head h2,.panel-head h3{margin-inline-end:auto}

.section{margin-top:2.4rem}
.section:first-child{margin-top:0}
.section-head{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.section-head .eyebrow{display:block;margin-bottom:.15rem}
.section-head h2{font-size:1.22rem}
.section-head .link-more{margin-inline-start:auto;font-size:.82rem;color:var(--gold);font-weight:600}
.section-head .link-more:hover{text-decoration:underline}

.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.5rem;align-items:start}
.split-wide{grid-template-columns:minmax(0,1fr) 360px}
.stack{display:flex;flex-direction:column;gap:.85rem}
.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.row-tight{gap:.35rem}
.spacer{margin-inline-start:auto}

/* ---------- hero ---------- */
.hero{
    position:relative;overflow:hidden;
    border:1px solid var(--line);border-radius:var(--radius-l);
    background:
        radial-gradient(1100px 380px at 88% -30%, var(--gold-soft), transparent 60%),
        var(--ink-850);
    padding:2.2rem 2.2rem 2rem;
}
.hero::after{
    content:"";position:absolute;inset-inline-end:-40px;bottom:-60px;width:340px;height:340px;
    background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 11px);
    transform:rotate(8deg);opacity:.7;pointer-events:none;
}
.hero-inner{position:relative;max-width:640px;z-index:1}
.hero h1{margin:.5rem 0 .8rem}
.hero p{color:var(--text-dim);font-size:1.02rem;max-width:56ch}
.hero-actions{display:flex;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.hero-stats{
    display:flex;gap:2rem;margin-top:1.9rem;padding-top:1.3rem;border-top:1px solid var(--line);
    flex-wrap:wrap;position:relative;z-index:1;
}
.hero-stat b{display:block;font-family:var(--font-mono);font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.hero-stat span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
[dir="rtl"] .hero-stat span{letter-spacing:.03em}
.live-dot{width:7px;height:7px;border-radius:99px;background:var(--ok);display:inline-block;
    box-shadow:0 0 0 3px var(--ok-soft)}

/* ---------- code card (signature) ---------- */
.code-card{
    display:flex;flex-direction:column;
    background:var(--ink-850);border:1px solid var(--line);border-radius:var(--radius-l);
    overflow:hidden;transition:border-color .15s ease,transform .15s ease;
}
.code-card:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.code-card-top{padding:.95rem 1.05rem .55rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.code-card h3{font-size:1rem;letter-spacing:-.01em}
.code-card h3 a:hover{color:var(--gold)}
.code-card p{font-size:.85rem;color:var(--text-dim)}
.fingerprint-wrap{
    display:flex;align-items:center;gap:.6rem;
    padding:.5rem 1.05rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--ink-900);
}
.fingerprint{height:20px;flex:1;min-width:0}
.fingerprint rect{fill:var(--quench);opacity:.55}
.code-card:hover .fingerprint rect{fill:var(--gold);opacity:.75}
.fingerprint-meta{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);white-space:nowrap}
.code-card-foot{padding:.6rem 1.05rem .8rem;display:flex;align-items:center;gap:.75rem}
.stat-row{display:flex;gap:.85rem;font-family:var(--font-mono);font-size:.71rem;color:var(--muted)}
.stat-row span{display:inline-flex;align-items:center;gap:.22rem}

/* ---------- chips, tags, badges ---------- */
.chip{
    display:inline-flex;align-items:center;gap:.3rem;
    font-family:var(--font-mono);font-size:.7rem;
    padding:.14rem .45rem;border-radius:var(--radius-s);
    background:var(--ink-750);border:1px solid var(--line);color:var(--text-dim);
}
.chip:hover{border-color:var(--line-strong);color:var(--text)}
.chip-tag::before{content:"#";color:var(--muted)}
.chip-gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.chip-quench{background:var(--quench-soft);border-color:transparent;color:var(--quench)}
.chip-violet{background:var(--violet-soft);border-color:transparent;color:var(--violet)}
.chip-ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.chip-warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.chip-bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.chip-lg{font-size:.76rem;padding:.24rem .6rem}
.tag-list{display:flex;flex-wrap:wrap;gap:.3rem}

.status-dot{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}

/* ---------- avatars ---------- */
.avatar{
    width:34px;height:34px;border-radius:9px;flex:none;object-fit:cover;
    background:var(--ink-700);border:1px solid var(--line);
    display:grid;place-items:center;font-weight:700;font-size:.8rem;
    font-family:var(--font-mono);
    overflow:hidden;
}
.avatar-sm{width:26px;height:26px;border-radius:7px;font-size:.68rem}
.avatar-lg{width:76px;height:76px;border-radius:16px;font-size:1.5rem}
.author{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text-dim)}
.author b{font-weight:600;color:var(--text)}
.author:hover b{color:var(--gold)}
.rep{font-family:var(--font-mono);font-size:.7rem;color:var(--gold)}

/* ---------- list rows ---------- */
.list{border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:var(--ink-850)}
.list-row{display:flex;gap:.9rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--line);align-items:flex-start}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--ink-800)}
.list-row h3{font-size:.98rem;margin-bottom:.2rem}
.list-row h3 a:hover{color:var(--gold)}
.list-meta{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.76rem;color:var(--muted);margin-top:.4rem;align-items:center}
.q-metrics{display:flex;gap:.5rem;flex:none}
.metric{
    min-width:52px;text-align:center;border:1px solid var(--line);border-radius:var(--radius);
    padding:.3rem .35rem;font-family:var(--font-mono);
}
.metric b{display:block;font-size:.92rem;line-height:1.2}
.metric span{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.metric-ok{border-color:var(--ok);color:var(--ok)}
.metric-solid{background:var(--ok);border-color:var(--ok);color:#04120b}
[data-theme="light"] .metric-solid{color:#fff}

/* ---------- forms ---------- */
.field{margin-bottom:1.05rem}
.field:last-child{margin-bottom:0}
.field label,.label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem}
.field .hint{font-size:.75rem;color:var(--muted);margin-top:.3rem}
.input,input[type="text"],input[type="email"],input[type="password"],input[type="url"],input[type="search"],select,textarea{
    width:100%;padding:.55rem .7rem;
    background:var(--ink-900);border:1px solid var(--line-strong);border-radius:var(--radius);
    font-size:.88rem;transition:border-color .12s ease,background .12s ease;
}
[data-theme="light"] .input,[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#fff}
textarea{min-height:130px;resize:vertical;line-height:1.6}
.input:focus,input:focus,select:focus,textarea:focus{border-color:var(--gold-line);outline:none}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:2rem}
[dir="rtl"] select{background-position:15px 52%,20px 52%}
.checkbox{display:flex;align-items:flex-start;gap:.55rem;font-size:.86rem;cursor:pointer}
.checkbox input{width:16px;height:16px;margin-top:.22rem;accent-color:var(--gold);flex:none}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}
.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.field-error{color:var(--bad);font-size:.76rem;margin-top:.28rem}
.input-error{border-color:var(--bad)}

.segmented{display:inline-flex;background:var(--ink-900);border:1px solid var(--line);border-radius:var(--radius);padding:2px;gap:2px;flex-wrap:wrap}
.segmented a,.segmented button{padding:.32rem .7rem;border-radius:var(--radius-s);font-size:.8rem;color:var(--muted);font-weight:600}
.segmented a:hover,.segmented button:hover{color:var(--text)}
.segmented .is-active{background:var(--ink-700);color:var(--text)}

/* ---------- filters bar ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin-bottom:1.2rem}
.filters .field{margin:0;min-width:150px}
.filters .field label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[dir="rtl"] .filters .field label{letter-spacing:.02em}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem;overflow-x:auto}
.tab{
    padding:.55rem .85rem;font-size:.86rem;font-weight:600;color:var(--muted);
    border-bottom:2px solid transparent;white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--text);border-bottom-color:var(--gold)}
.tab-count{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);margin-inline-start:.25rem}

/* ---------- code viewer / editor ---------- */
.code-block{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ink-950);
}
.code-head{
    display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;
    background:var(--ink-800);border-bottom:1px solid var(--line);
}
.code-head .filename{font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim)}
.code-head .filename::before{content:"◈";color:var(--quench);margin-inline-end:.35rem}
.code-actions{margin-inline-start:auto;display:flex;gap:.25rem}
.code-scroll{display:flex;overflow:auto;max-height:560px;font-family:var(--font-mono);font-size:.8rem;line-height:1.65}
.code-gutter{
    flex:none;padding:.7rem .55rem;text-align:end;color:var(--muted);opacity:.55;
    user-select:none;background:var(--ink-950);position:sticky;inset-inline-start:0;
    border-inline-end:1px solid var(--line);
}
.code-gutter span{display:block}
.code-body{padding:.7rem .9rem;direction:ltr;text-align:start;flex:1;min-width:0}
.code-body code{display:block;white-space:pre}
.code-line{display:block;min-height:1.65em}
.is-wrapped .code-body code{white-space:pre-wrap}
.code-block.is-fullscreen{position:fixed;inset:0;z-index:80;border-radius:0;max-height:none;display:flex;flex-direction:column}
.code-block.is-fullscreen .code-scroll{max-height:none;flex:1}

/* Lua token colours */
.tok-keyword{color:var(--gold);font-weight:600}
.tok-string{color:#8ed09a}
.tok-comment{color:var(--muted);font-style:italic}
.tok-number{color:var(--violet)}
.tok-builtin{color:var(--quench)}
.tok-call{color:#e4ecf6}
.tok-punct{color:var(--muted)}
[data-theme="light"] .tok-string{color:#1f7a45}
[data-theme="light"] .tok-call{color:#22303f}
[data-theme="light"] .code-block{background:#fbfcfe}
[data-theme="light"] .code-gutter{background:#fbfcfe}

/* editor */
.editor{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--ink-950)}
.editor-tabs{display:flex;align-items:center;gap:.2rem;padding:.35rem .4rem;background:var(--ink-800);border-bottom:1px solid var(--line);overflow-x:auto}
.file-tab{
    display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .55rem;border-radius:var(--radius-s);
    font-family:var(--font-mono);font-size:.76rem;color:var(--muted);white-space:nowrap;border:1px solid transparent;
}
.file-tab:hover{color:var(--text);background:var(--ink-750)}
.file-tab.is-active{background:var(--ink-950);color:var(--text);border-color:var(--line)}
.file-tab .x{opacity:.5;font-size:.9rem;line-height:1}
.file-tab .x:hover{opacity:1;color:var(--bad)}
.editor-toolbar{display:flex;align-items:center;gap:.3rem;padding:.35rem .5rem;background:var(--ink-850);border-bottom:1px solid var(--line);flex-wrap:wrap}
.editor-toolbar .spacer{margin-inline-start:auto}
.editor-status{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);display:flex;gap:.8rem}
.editor-pane{position:relative;height:440px;overflow:hidden;direction:ltr}
.editor-scroll{position:absolute;inset:0;overflow:auto;display:flex}
.editor-gutter{
    flex:none;padding:.7rem .55rem;text-align:end;color:var(--muted);opacity:.5;user-select:none;
    font-family:var(--font-mono);font-size:.8rem;line-height:1.65;border-inline-end:1px solid var(--line);
    background:var(--ink-950);position:sticky;inset-inline-start:0;z-index:2;
}
.editor-code{position:relative;flex:1;min-width:0}
.editor-code pre,.editor-code textarea{
    margin:0;padding:.7rem .9rem;font-family:var(--font-mono);font-size:.8rem;line-height:1.65;
    white-space:pre;overflow-wrap:normal;tab-size:4;border:0;
}
.editor-code pre{pointer-events:none;min-height:100%}
.editor-code textarea{
    position:absolute;inset:0;width:100%;height:100%;resize:none;background:transparent;
    color:transparent;caret-color:var(--gold);overflow:hidden;outline:none;
}
.editor.is-wrapped .editor-code pre,.editor.is-wrapped .editor-code textarea{white-space:pre-wrap;overflow-wrap:anywhere}
.editor.is-fullscreen{position:fixed;inset:0;z-index:80;border-radius:0;display:flex;flex-direction:column}
.editor.is-fullscreen .editor-pane{flex:1;height:auto}
.editor-preview{padding:1rem 1.1rem;max-height:440px;overflow:auto}

/* ---------- prose ---------- */
.prose{font-size:.94rem;line-height:1.75;color:var(--text-dim)}
.prose > * + *{margin-top:.85rem}
.prose h3,.prose h4,.prose h5{color:var(--text);margin-top:1.4rem}
.prose strong{color:var(--text)}
.prose a{color:var(--quench);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{padding-inline-start:1.2rem}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li{margin-top:.3rem}
.prose blockquote{border-inline-start:2px solid var(--gold);padding-inline-start:.9rem;color:var(--muted)}
.prose code{font-family:var(--font-mono);font-size:.84em;background:var(--ink-750);padding:.1rem .3rem;border-radius:3px;color:var(--text)}
.prose .md-code{background:var(--ink-950);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem .9rem;overflow:auto;direction:ltr;text-align:start}
.prose .md-code code{background:none;padding:0;font-size:.8rem;line-height:1.6;white-space:pre}
.prose hr{margin:1.2rem 0}

/* ---------- flash & alerts ---------- */
.flashes{position:fixed;top:70px;inset-inline-end:1.2rem;z-index:60;display:flex;flex-direction:column;gap:.5rem;max-width:340px}
.flash{
    display:flex;gap:.55rem;align-items:flex-start;padding:.65rem .8rem;border-radius:var(--radius);
    background:var(--ink-750);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:.85rem;
    animation:slideIn .22s ease;
}
.flash-success{border-inline-start:3px solid var(--ok)}
.flash-error{border-inline-start:3px solid var(--bad)}
.flash-info{border-inline-start:3px solid var(--quench)}
.flash button{color:var(--muted);margin-inline-start:auto}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.notice{padding:.75rem .9rem;border-radius:var(--radius);font-size:.85rem;border:1px solid var(--line);background:var(--ink-800);color:var(--text-dim)}
.notice-gold{border-color:var(--gold-line);background:var(--gold-soft)}
.notice-bad{border-color:var(--bad);background:var(--bad-soft)}
.error-box{background:var(--bad-soft);border:1px solid var(--bad);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:1rem;font-size:.84rem}
.error-box li{list-style:disc;margin-inline-start:1.1rem}

/* ---------- empty ---------- */
.empty{padding:2.6rem 1.5rem;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--radius-l)}
.empty h3{color:var(--text);margin-bottom:.35rem}
.empty p{font-size:.87rem;max-width:44ch;margin-inline:auto}
.empty .btn{margin-top:1rem}

/* ---------- pagination ---------- */
.pagination{display:flex;gap:.25rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}
.pagination a,.pagination span{
    min-width:34px;height:34px;display:grid;place-items:center;padding:0 .5rem;
    border-radius:var(--radius);font-family:var(--font-mono);font-size:.8rem;
    border:1px solid var(--line);color:var(--text-dim);
}
.pagination a:hover{border-color:var(--gold-line);color:var(--gold)}
.pagination .is-current{background:var(--gold);color:var(--gold-ink);border-color:transparent;font-weight:700}

/* ---------- comments ---------- */
.comment{display:flex;gap:.7rem;padding:.85rem 0;border-top:1px solid var(--line)}
.comment:first-child{border-top:0}
.comment-body{flex:1;min-width:0}
.comment-head{display:flex;align-items:center;gap:.5rem;font-size:.8rem;margin-bottom:.25rem;flex-wrap:wrap}
.comment-actions{display:flex;gap:.7rem;margin-top:.4rem;font-size:.76rem;color:var(--muted)}
.comment-actions button:hover,.comment-actions a:hover{color:var(--gold)}
.comment-replies{margin-inline-start:2.1rem;border-inline-start:1px solid var(--line);padding-inline-start:.9rem}

/* ---------- answers ---------- */
.answer{display:flex;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.answer.is-accepted{background:linear-gradient(90deg,var(--ok-soft),transparent 45%);border-radius:var(--radius);padding-inline:.8rem}
.vote-col{display:flex;flex-direction:column;align-items:center;gap:.2rem;flex:none;width:44px}
.vote-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius);border:1px solid var(--line);color:var(--muted)}
.vote-btn:hover{border-color:var(--gold-line);color:var(--gold)}
.vote-btn[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.vote-score{font-family:var(--font-mono);font-weight:700;font-size:.95rem}
.accept-btn{color:var(--muted)}
.accept-btn:hover,.accept-btn.is-accepted{color:var(--ok)}

/* ---------- profile ---------- */
.profile-head{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.level-bar{height:5px;border-radius:99px;background:var(--ink-700);overflow:hidden;margin-top:.5rem}
.level-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--quench),var(--gold))}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.6rem}
.stat-box{border:1px solid var(--line);border-radius:var(--radius);padding:.65rem .7rem;background:var(--ink-900)}
.stat-box b{display:block;font-family:var(--font-mono);font-size:1.15rem;letter-spacing:-.02em}
.stat-box span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-family:var(--font-mono)}
[dir="rtl"] .stat-box span{letter-spacing:.02em}
.badge-item{display:flex;gap:.6rem;align-items:center;padding:.55rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-900)}
.badge-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--gold-soft);color:var(--gold)}
.badge-silver .badge-icon{background:var(--quench-soft);color:var(--quench)}
.badge-bronze .badge-icon{background:var(--warn-soft);color:var(--warn)}

/* ---------- activity ---------- */
.activity-row{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.85rem;align-items:flex-start}
.activity-row:last-child{border-bottom:0}
.activity-row .verb{color:var(--muted)}
.activity-icon{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--ink-750);color:var(--muted)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-l)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:start;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);padding:.6rem .8rem;border-bottom:1px solid var(--line);background:var(--ink-900);white-space:nowrap}
[dir="rtl"] th{letter-spacing:.02em}
td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
/* ---------- detail header (code/post pages) ---------- */
.detail-head {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.detail-head h1 {
    margin: 1rem 0 0.5rem;
    font-size: 2.2rem;
    line-height: 1.2;
}
.detail-head .lede {
    font-size: 1.15rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}
.detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding: 0.75rem 1rem;
    background: var(--ink-850);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.detail-meta > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}
.detail-meta > a img {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    object-fit: cover;
}
.detail-meta .rep {
    background: var(--gold-soft);
    color: var(--gold);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}
.detail-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}
.detail-stats span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.detail-stats .ic {
    opacity: 0.7;
}

/* ---------- IDE Container ---------- */
.ide-container {
    background: #1e1e1e;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-l);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    direction: ltr !important;
    text-align: left !important;
    max-width: 100%;
    width: 100%;
}
.monaco-wrapper {
    width: 100%;
    min-width: 0;
    height: 600px;
}
.ide-header {
    display: flex;
    align-items: center;
    background: #181a1f;
    border-bottom: 1px solid #111;
    padding: 0 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.editor-tabs {
    display: flex;
    align-items: center;
    gap: .2rem;
    padding: .35rem .4rem;
    background: #0a001d;
    overflow-x: auto;
    -ms-overflow-style: none; scrollbar-width: none;
    border-radius: var(--radius-s); /* Optional to make the dark background look nice */
}
.editor-tabs::-webkit-scrollbar { display: none; }
.editor-tab {
    padding: 0.8rem 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 4px 4px 0 0;
}
.editor-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
}
.editor-tab.is-active {
    color: #ffffff;
    background: #1e1e1e; /* Matches editor background */
    border-bottom-color: var(--ok, #4ec98a);
}
.editor-tab .close-tab {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.5;
    padding: 0;
    display: grid; place-items: center;
}
.editor-tab .close-tab:hover { opacity: 1; color: var(--bad); }
.ide-actions {
    display: flex;
    gap: 0.5rem;
    margin-inline-start: auto;
}
.ide-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-s);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--font-mono);
    display: flex; align-items: center; gap: 0.3rem;
    white-space: nowrap;
}
.ide-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.monaco-wrapper {
    height: 550px;
    width: 100%;
    background: #1e1e1e;
}


/* ---------- filter bar ---------- */
.filter-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 0.75rem;
    align-items: center;
    background: var(--ink-850);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-l);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

/* Hide scrollbar for clean look but allow scrolling */
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar { -ms-overflow-style: none; scrollbar-width: none; }

.filter-bar input[type="search"],
.filter-bar input[type="text"],
.filter-bar select {
    background: var(--ink-950);
    border: 1px solid var(--line-strong);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    min-width: 120px;
}

.filter-bar input[type="search"]:focus,
.filter-bar input[type="text"]:focus,
.filter-bar select:focus {
    border-color: var(--gold-line);
    background: var(--ink-900);
    box-shadow: 0 0 0 2px var(--gold-soft);
}

.filter-bar .btn {
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,7,11,.72);z-index:70;display:grid;place-items:center;padding:1.2rem}
.modal{background:var(--ink-850);border:1px solid var(--line-strong);border-radius:var(--radius-l);
    max-width:460px;width:100%;box-shadow:var(--shadow);max-height:85vh;overflow:auto}
.modal-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.modal-head h3{margin-inline-end:auto}
.modal-body{padding:1.1rem 1.2rem}
.modal-foot{padding:.9rem 1.2rem;border-top:1px solid var(--line);display:flex;gap:.5rem;justify-content:flex-end}
[hidden]{display:none!important}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:1.6rem 1.5rem;color:var(--muted);font-size:.8rem}
.site-footer .inner{max-width:var(--wrap);margin-inline:auto;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.site-footer a:hover{color:var(--gold)}
.disclaimer{border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .85rem;margin-top:1rem;
    font-size:.75rem;line-height:1.6;color:var(--muted);background:var(--ink-850)}

/* ---------- mobile ---------- */
.mobile-nav{display:none}
@media (max-width:1080px){
    .split,.split-wide{grid-template-columns:minmax(0,1fr)}
    .split aside{order:2}
}
@media (max-width:860px){
    .shell{grid-template-columns:minmax(0,1fr)}
    .sidebar{
        position:fixed;inset-block:0;inset-inline-start:0;width:270px;transform:translateX(-100%);
        transition:transform .2s ease;box-shadow:var(--shadow);
    }
    [dir="rtl"] .sidebar{transform:translateX(100%)}
    .sidebar.is-open{transform:none}
    .burger{display:grid}
    .page{padding:1.1rem 1rem 5.5rem}
    .hero{padding:1.6rem 1.3rem}
    .hero::after{display:none}
    .hero-stats{gap:1.2rem}
    .topbar{padding:0 1rem}
    .flashes{inset-inline:1rem auto;max-width:none;top:66px}
    .mobile-nav{
        display:flex;position:fixed;bottom:0;inset-inline:0;z-index:40;
        background:var(--ink-950);border-top:1px solid var(--line);
        padding:.3rem .4rem env(safe-area-inset-bottom);
    }
    .mobile-nav a{
        flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
        padding:.4rem 0;font-size:.62rem;color:var(--muted);
    }
    .mobile-nav a.is-active{color:var(--gold)}
    .scrim{position:fixed;inset:0;background:rgba(4,7,11,.6);z-index:29}
    .comment-replies{margin-inline-start:1rem}
    .answer{gap:.6rem}
}
@media (max-width:520px){
    .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
    .form-grid{grid-template-columns:minmax(0,1fr)}
    .q-metrics{flex-direction:row}
    .editor-pane{height:340px}
    .monaco-wrapper{height: 380px !important}
    .ide-header { padding: 0.5rem; }
    .ide-actions { width: 100%; justify-content: center; }
}

/* ---------- print ---------- */
@media print{
    .sidebar,.topbar,.mobile-nav,.site-footer,.code-actions{display:none}
    body{background:#fff;color:#000}
}

/* ---------- Google Translate Hiding ---------- */
.vi-s,
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-gadget,
.goog-tooltip,
.goog-tooltip:hover,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.skiptranslate > iframe,
iframe[id^=":"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
}
body {
    top: 0 !important;
    position: static !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}