/* ============================================================================
 * CodeHub — interface stylesheet (refined)
 * ==========================================================================*/

/* ---------- design tokens ------------------------------------------------- */
:root{
  /* Dark but not pure black — easier on the eyes, feels more polished. */
  --bg:#0b0c0f;
  --bg-soft:#0f1115;
  --panel:#13151a;
  --panel-2:#171a20;
  --panel-3:#1c2028;
  --panel-hi:#22262f;

  --fg:#e6e7ea;
  --fg-strong:#ffffff;
  --muted:#9a9ca4;
  --dim:#6b6e78;

  --line:#1f2229;
  --line-2:#2a2e38;
  --line-3:#383c48;

  --accent:#cfd2da;       /* soft near-white for primary */
  --accent-ink:#0b0c0f;
  --ok:#7fd18f;
  --warn:#e3c37b;
  --err:#ff8f8f;
  --link:#e6e7ea;

  --r-sm:6px;
  --r:9px;
  --r-lg:12px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:22px; --s6:32px; --s7:48px; --s8:72px;

  /* UI uses a clean sans-serif; mono is reserved for code / identifiers. */
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Monaco,
          Consolas, "Liberation Mono", monospace;

  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 16px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);

  --measure:1120px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.03), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(255,255,255,.02), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  letter-spacing:-0.005em;
}
main{flex:1 0 auto; width:100%}
img{max-width:100%; display:block}
::selection{background:#fff; color:#000}

:focus-visible{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:2px;
  border-radius:4px;
}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#262a33; border:2px solid var(--bg); border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#353a46}

.ico{width:15px; height:15px; flex:0 0 auto; vertical-align:-2px; display:inline-block}

a{color:var(--link); text-decoration:none; transition:color .15s var(--ease)}
a:hover{color:var(--fg-strong)}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.015em; color:var(--fg-strong) }
h1{font-size:22px; line-height:1.25}
h2{font-size:15px; line-height:1.35}
h3{font-size:13.5px}
p{margin:0 0 var(--s3)}
hr{border:0; border-top:1px solid var(--line); margin:var(--s5) 0}

code,kbd,samp{
  font-family:var(--mono);
  font-size:12px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  padding:2px 6px;
  color:var(--fg);
}
kbd{background:var(--panel-3); box-shadow:inset 0 -1px 0 rgba(0,0,0,.3)}

.muted{color:var(--muted)}
.dim{color:var(--dim)}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 var(--s5); width:100%}
.grow{flex:1 1 auto; min-width:0}
.right{margin-left:auto}
.center{text-align:center}
.hide-sm{display:initial}

/* ---------- header -------------------------------------------------------- */
.top{
  position:sticky; top:0; z-index:30;
  background:rgba(11,12,15,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{
  max-width:var(--measure); margin:0 auto;
  padding:0 var(--s5); height:60px;
  display:flex; align-items:center; gap:var(--s5);
}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; color:var(--fg-strong)}
.brand:hover{text-decoration:none}
.brand-logo{width:26px; height:26px; border-radius:7px; display:block; background:#111}
.brand-name{font-size:13.5px; font-weight:600; letter-spacing:.01em}
.brand-tag{
  font-size:11px; color:var(--dim);
  border-left:1px solid var(--line-2);
  padding-left:10px; margin-left:2px; letter-spacing:.04em;
}
.nav{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.nav a{
  color:var(--muted); font-size:13px; padding:7px 11px;
  border-radius:var(--r-sm); transition:background .15s var(--ease), color .15s var(--ease);
}
.nav a:hover{color:var(--fg); background:var(--panel-2); text-decoration:none}
.nav a.active{color:var(--fg-strong); background:var(--panel-2)}
.top-search{flex:1 1 auto; max-width:320px; position:relative}
.top-search input{
  width:100%; height:34px; padding:0 30px 0 32px;
  font-size:12.5px; font-family:var(--sans);
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--fg); transition:border-color .15s var(--ease), background .15s var(--ease);
}
.top-search input::placeholder{color:var(--dim)}
.top-search input:focus{outline:none; border-color:var(--line-3); background:var(--panel-2)}
.top-search .mag{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--dim); display:flex; pointer-events:none;
}
.top-search .key{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:10px; color:var(--dim);
  border:1px solid var(--line-2); border-radius:4px;
  padding:0 5px; line-height:16px; pointer-events:none;
  font-family:var(--mono);
}
.auth-slot{display:flex; align-items:center; gap:12px; flex:0 0 auto; font-size:13px}
.auth-slot a{color:var(--muted)}
.auth-slot a:hover{color:var(--fg)}
.userchip{
  display:flex; align-items:center; gap:8px; color:var(--fg);
  font-size:13px; padding:4px 10px 4px 4px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--panel);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.userchip:hover{border-color:var(--line-2); background:var(--panel-2); text-decoration:none}
.avatar{
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg, var(--panel-3), var(--panel-2));
  border:1px solid var(--line-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--muted);
  text-transform:uppercase; flex:0 0 auto;
  font-weight:600;
}
.avatar.lg{width:48px; height:48px; font-size:17px; border-radius:12px}

/* ---------- controls ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 14px; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  line-height:1; white-space:nowrap;
  background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line-2);
  transition:background .15s var(--ease), border-color .15s var(--ease),
             color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover{background:var(--panel-3); border-color:var(--line-3); text-decoration:none; color:var(--fg-strong)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.busy{opacity:.55; pointer-events:none}
.btn.primary{
  background:var(--fg-strong); border-color:var(--fg-strong);
  color:#0b0c0f; font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset;
}
.btn.primary:hover{background:#eceef2; border-color:#eceef2; color:#0b0c0f}
.btn.danger{color:var(--err); border-color:#3a2426}
.btn.danger:hover{background:#1a1113; border-color:#573035; color:var(--err)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--panel-2); color:var(--fg); border-color:var(--line-2)}
.btn.sm{height:28px; padding:0 10px; font-size:12px; gap:6px}
.btn.sm .ico{width:13px; height:13px}
.btn.wide{width:100%}
.btn .ico{width:14px; height:14px; color:currentColor; opacity:.9}

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--r-sm);
  border:1px solid transparent; background:transparent;
  color:var(--dim); cursor:pointer; padding:0;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.iconbtn:hover{background:var(--panel-3); color:var(--fg); border-color:var(--line-2)}
.iconbtn .ico{width:14px; height:14px}

.field{margin:0 0 var(--s4)}
.field>label,.label{
  display:block; font-size:12px; color:var(--muted);
  margin-bottom:6px; letter-spacing:.01em; font-weight:500;
}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],select,textarea{
  width:100%; height:36px; padding:0 12px;
  font-family:var(--sans); font-size:13px;
  background:var(--bg-soft); color:var(--fg);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:hover,select:hover,textarea:hover{border-color:var(--line-3)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:#4b5160; background:var(--panel);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 15px, calc(100% - 11px) 15px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:32px;
}
textarea{
  height:auto; min-height:220px; padding:12px; line-height:1.65; resize:vertical;
  white-space:pre; overflow-wrap:normal; overflow-x:auto; tab-size:2;
  font-family:var(--mono); font-size:12.5px;
}
.hint{font-size:12px; color:var(--dim); line-height:1.6; margin:6px 0 0}
.hint a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.inline{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.inline.tight{gap:6px}
.inline.between{justify-content:space-between}
.stack{display:flex; flex-direction:column; gap:var(--s3)}
.flex{display:flex; align-items:center; gap:var(--s3)}

.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-size:13px}
.switch input{position:absolute; opacity:0; pointer-events:none}
.switch .track{
  width:36px; height:20px; border-radius:999px;
  background:var(--panel-3); border:1px solid var(--line-2);
  position:relative; transition:background .15s, border-color .15s; flex:0 0 auto;
}
.switch .track::after{
  content:""; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:var(--muted);
  transition:transform .18s var(--ease), background .15s;
}
.switch input:checked+.track{background:#e8eaef; border-color:#e8eaef}
.switch input:checked+.track::after{transform:translateX(16px); background:#0b0c0f}
.switch input:focus-visible+.track{outline:2px solid rgba(255,255,255,.4); outline-offset:2px}
.switch .lbl{color:var(--fg)}

/* ---------- surfaces ------------------------------------------------------ */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
  transition:border-color .2s var(--ease);
}
.card.pad-sm{padding:var(--s4)}
.card.flush{padding:0; overflow:hidden}
.card h2{margin-bottom:var(--s2)}
.card>.hint:first-child,.card>p:first-child{margin-top:0}
.card-head{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);
}
.card-head h2{margin:0}
.card-head .btn{margin-left:auto}
.card-body{padding:var(--s5)}
.card-foot{
  padding:var(--s3) var(--s5);
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  font-size:12px; color:var(--dim);
}

.section{max-width:var(--measure); margin:var(--s6) auto 0; padding:0 var(--s5)}
.section:first-child{margin-top:var(--s6)}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); margin-bottom:var(--s4);
}
.section-head h2{font-size:15px; display:flex; align-items:center; gap:8px}
.section-head h2 .ico{width:15px; height:15px; color:var(--dim)}
.section-head .count{
  font-size:11px; color:var(--dim); background:var(--panel-2);
  border:1px solid var(--line); border-radius:999px;
  padding:2px 8px; margin-left:6px; font-family:var(--mono);
}
.section-head .more{font-size:12px; color:var(--muted)}
.section-head .more:hover{color:var(--fg)}

.grid{display:grid; gap:var(--s4)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.two-col{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s5); align-items:start}

/* ---------- hero ---------------------------------------------------------- */
.hero{max-width:var(--measure); margin:0 auto; padding:var(--s8) var(--s5) 0}
.hero .eyebrow{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin-bottom:var(--s3); font-weight:500;
}
.hero h1{
  font-size:34px; line-height:1.15; margin-bottom:var(--s3);
  letter-spacing:-.03em; font-weight:600;
}
.hero p{
  color:var(--muted); font-size:14.5px; max-width:62ch;
  margin-bottom:var(--s5); line-height:1.6;
}
.hero .inline{margin-bottom:var(--s2); gap:var(--s2)}

/* ---------- stats --------------------------------------------------------- */
.stat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4) var(--s5); transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.stat-card:hover{border-color:var(--line-2)}
.stat-card .k{
  display:flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
}
.stat-card .v{
  font-size:24px; font-weight:600; color:var(--fg-strong);
  line-height:1.2; margin-top:6px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat-card .ico{width:14px; height:14px; color:var(--dim)}
.stat-card .sub{font-size:12px; color:var(--dim); margin-top:4px; line-height:1.5}
.stat{font-size:24px; font-weight:600}

/* ---------- lists --------------------------------------------------------- */
.list{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--panel);
}
.list>.row+.row,.list>.row+.urow,.list>.urow+.row{border-top:1px solid var(--line)}
.row{
  display:flex; align-items:center; gap:var(--s3);
  padding:12px var(--s5); color:var(--fg);
  transition:background .12s var(--ease);
}
.row:hover{background:var(--panel-2); text-decoration:none}
.row .ico{width:15px; height:15px; color:var(--dim); transition:color .12s var(--ease)}
.row:hover .ico{color:var(--muted)}
.row .name{font-size:13px; color:var(--fg-strong); font-weight:500}
.row .name:hover{text-decoration:none}
.row .desc{
  font-size:12px; color:var(--dim); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row .meta{font-size:12px; color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums}
.row .sub{
  display:block; font-size:12px; color:var(--dim); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row .chev{color:var(--dim); display:flex; flex:0 0 auto; margin-left:4px; opacity:.5; transition:opacity .15s, transform .15s}
.row:hover .chev{opacity:1; transform:translateX(2px)}
.row.tail{
  padding:10px var(--s5); background:var(--bg-soft);
  justify-content:center; font-size:12px;
}
.row.tail a{color:var(--muted)}

/* ---------- chips / badges ----------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 9px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--panel-2);
  font-size:11px; color:var(--muted); letter-spacing:.02em;
  white-space:nowrap; font-weight:500;
}
.chip .ico{width:12px; height:12px; opacity:.9}
.siteicon{
  position:relative; width:18px; height:18px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.siteicon .ico{width:15px; height:15px; color:var(--dim)}
.siteicon img{
  position:absolute; inset:0; width:18px; height:18px;
  border-radius:4px; background:#111; object-fit:contain;
}
.chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.ok{color:var(--ok); border-color:#213a25; background:#0d140e}
.chip.warn{color:var(--warn); border-color:#3c331f; background:#141005}
.chip.err{color:var(--err); border-color:#3f2427; background:#170f11}
.chip.link{transition:border-color .15s, color .15s, background .15s}
.chip.link:hover{border-color:var(--line-3); color:var(--fg); text-decoration:none; background:var(--panel-3)}
.chip.solid{background:var(--panel-3); color:var(--fg)}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--panel-3); color:var(--muted);
  font-size:11px; font-variant-numeric:tabular-nums;
}

/* ---------- page head / breadcrumbs / tabs -------------------------------- */
.pagehead{max-width:var(--measure); margin:0 auto; padding:var(--s6) var(--s5) 0}
.breadcrumb{
  display:flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--muted); margin-bottom:var(--s3); flex-wrap:wrap;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--fg); text-decoration:none}
.breadcrumb .sep{color:var(--dim)}
.breadcrumb .here{color:var(--fg)}
.pagehead h1{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:24px;
}
.pagehead h1 .ico{width:20px; height:20px; color:var(--dim)}
.pagehead .sub{color:var(--muted); font-size:13px; margin-top:8px; max-width:76ch; line-height:1.6}
.pagehead .toolbar{margin-top:var(--s4)}
.toolbar{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}

.tabs{
  display:flex; align-items:center; gap:2px;
  border-bottom:1px solid var(--line);
  max-width:var(--measure); margin:var(--s5) auto 0; padding:0 var(--s5);
}
.tabs a{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 14px; font-size:13px;
  color:var(--muted); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .15s var(--ease), border-color .15s var(--ease);
}
.tabs a:hover{color:var(--fg); text-decoration:none}
.tabs a.active{color:var(--fg-strong); border-bottom-color:var(--fg-strong)}
.tabs .ico{width:14px; height:14px}

/* ---------- file table ---------------------------------------------------- */
.files{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--panel);
}
.files .fhead{
  display:grid; grid-template-columns:minmax(0,1fr) 100px 120px;
  gap:var(--s3);
  padding:10px var(--s5);
  background:var(--bg-soft); border-bottom:1px solid var(--line);
  font-size:11px; color:var(--dim); letter-spacing:.06em;
  text-transform:uppercase; font-weight:500;
}
.frow{
  display:grid; grid-template-columns:minmax(0,1fr) 100px 120px;
  gap:var(--s3); align-items:center;
  padding:0 var(--s5);
  border-top:1px solid var(--line);
  color:var(--fg);
  text-decoration:none;
  transition:background .12s var(--ease);
}
.frow:first-of-type{border-top:0}
.frow:hover{background:var(--panel-2); text-decoration:none}
.frow .fname{
  display:flex; align-items:center; gap:10px;
  min-width:0; padding:11px 0; color:var(--fg);
}
.frow .fname-text{
  color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px;
}
.frow:hover .fname-text{color:var(--fg-strong)}
.frow .fname .ico{width:16px; height:16px; color:var(--dim); flex:0 0 auto}
.frow:hover .fname .ico{color:var(--muted)}
.frow .fsize{font-size:12px; color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums}
.frow .factions{
  display:flex; gap:4px; justify-content:flex-end;
  opacity:0; transition:opacity .15s var(--ease);
}
.frow:hover .factions{opacity:1}
.frow.up .fname-text{color:var(--muted)}

/* ---------- code viewer --------------------------------------------------- */
.code{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--panel);
}
.codebar{
  display:flex; align-items:center; gap:var(--s2);
  padding:9px var(--s5);
  border-bottom:1px solid var(--line); background:var(--bg-soft);
}
.codebar .path{
  font-size:12px; font-family:var(--mono);
  color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.code-body{
  margin:0; padding:var(--s4) 0;
  overflow:auto; max-height:72vh;
  font-size:12.5px; line-height:1.7;
  font-family:var(--mono); background:var(--bg-soft);
}
.code-row{display:flex; min-width:max-content}
.code-row .num{
  flex:0 0 auto; width:56px; padding-right:var(--s4); text-align:right;
  color:#515661; user-select:none; -webkit-user-select:none;
  font-variant-numeric:tabular-nums;
}
.code-row .txt{white-space:pre; padding-right:var(--s5); color:var(--fg)}
.code-row:hover{background:rgba(255,255,255,.02)}

/* ---------- markdown ------------------------------------------------------ */
.md{
  padding:var(--s5); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--panel);
  font-size:13px; line-height:1.7; color:var(--muted);
  overflow-wrap:anywhere;
}
.md>*:first-child{margin-top:0}
.md>*:last-child{margin-bottom:0}
.md h1,.md h2,.md h3{color:var(--fg-strong); margin:var(--s5) 0 var(--s3)}
.md h1{font-size:19px; padding-bottom:var(--s3); border-bottom:1px solid var(--line)}
.md h2{font-size:16px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.md h3{font-size:14px}
.md p{margin:0 0 var(--s3)}
.md a{color:var(--fg); text-decoration:underline; text-underline-offset:3px}
.md ul{margin:0 0 var(--s3); padding-left:22px}
.md li{margin:4px 0}
.md pre{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s3) var(--s4);
  overflow:auto; margin:0 0 var(--s3);
}
.md pre code{background:transparent; border:0; padding:0; color:var(--fg)}
.md code{font-size:12px}
.md strong{color:var(--fg-strong)}
.md em{color:var(--fg)}

/* ---------- alerts / empty / loading -------------------------------------- */
.alert{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s3) var(--s4);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--panel-2);
  font-size:12.5px; color:var(--muted); margin:0 0 var(--s4);
  line-height:1.55;
}
.alert .ico{width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--dim)}
.alert strong{color:var(--fg); font-weight:600}
.alert.err{border-color:#3a2426; background:#120c0d; color:#e9bcbc}
.alert.err .ico{color:var(--err)}
.alert.ok{border-color:#20361f; background:#0b110b; color:#c2e3c7}
.alert.ok .ico{color:var(--ok)}
.alert.warn{border-color:#3a3220; background:#100d06; color:#e6d5a8}
.alert.warn .ico{color:var(--warn)}
.alert.plain{background:transparent; border-style:dashed}

.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s2); padding:var(--s7) var(--s5);
  border:1px dashed var(--line-2); border-radius:var(--r-lg);
  text-align:center; color:var(--dim); font-size:12.5px;
}
.empty .ico{width:28px; height:28px; color:var(--line-3)}
.empty .title{color:var(--muted); font-size:13px; font-weight:500}
.empty .cta{margin-top:var(--s2)}

.loading{
  max-width:var(--measure); margin:0 auto;
  padding:var(--s7) var(--s5); color:var(--dim);
  display:flex; align-items:center; gap:10px; font-size:13px;
}
.spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line-2);
  border-top-color:var(--muted);
  animation:spin .7s linear infinite; flex:0 0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

.skel{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,#101012 0%,#17171a 40%,#101012 80%);
  background-size:200% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
  height:12px;
}
@keyframes shimmer{0%{background-position:120% 0} 100%{background-position:-120% 0}}

.toast{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; flex-direction:column; gap:8px;
  max-width:min(400px,calc(100vw - 40px));
}
.toast>div{
  background:var(--panel-3); border:1px solid var(--line-3);
  border-radius:var(--r); padding:11px 14px;
  font-size:12.5px; color:var(--fg);
  box-shadow:var(--shadow-2);
  animation:toastin .2s var(--ease);
}
.toast>div.ok{border-color:#27492a}
.toast>div.err{border-color:#5a2f33}
@keyframes toastin{
  from{opacity:0; transform:translateY(8px) scale(.98)}
  to{opacity:1; transform:none}
}

/* ---------- auth ---------------------------------------------------------- */
.center-card{max-width:420px; margin:var(--s7) auto var(--s8); padding:0 var(--s5)}
.center-card.wide{max-width:560px}
.auth-card .logo{width:40px; height:40px; border-radius:10px; margin-bottom:var(--s4); display:block}
.auth-card h1{font-size:20px; margin-bottom:8px}
.gbtn{width:100%; height:40px; font-size:13.5px; margin-bottom:var(--s4)}
.sep{
  display:flex; align-items:center; gap:var(--s3);
  margin:var(--s4) 0; color:var(--dim); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}
.sep::before,.sep::after{content:""; flex:1; height:1px; background:var(--line)}
.auth-msg{font-size:12px; color:var(--err); min-height:18px; margin:var(--s2) 0 0}
.auth-foot{font-size:11.5px; color:var(--dim); margin-top:var(--s4); text-align:center; line-height:1.6}

/* ---------- explore ------------------------------------------------------- */
.searchbar{display:flex; gap:var(--s2); margin-bottom:var(--s4)}
.searchbar input{height:40px; font-size:13px}
.filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--s4)}
.filter{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--muted);
  font-size:12px; background:transparent; cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  font-weight:500;
}
.filter:hover{border-color:var(--line-3); color:var(--fg); background:var(--panel-2)}
.filter.active{background:var(--panel-3); color:var(--fg-strong); border-color:var(--line-3)}
.results-meta{font-size:12px; color:var(--dim); margin-bottom:var(--s4)}
.rcard{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px 18px;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.rcard:hover{border-color:var(--line-3); background:var(--panel-2); transform:translateY(-2px)}
.rcard .open{
  font-size:12px; color:var(--dim);
  opacity:0; transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.rcard:hover .open{opacity:1; color:var(--muted); transform:translateX(2px)}
.rcard .top-row{display:flex; align-items:center; gap:var(--s3)}
.rcard .top-row .ico{width:16px; height:16px; color:var(--dim)}
.rcard .rfoot .ico{width:12px; height:12px}
.rcard .rname{
  font-size:13.5px; color:var(--fg-strong); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rcard .rname:hover{text-decoration:none}
.rcard .rname .owner{color:var(--dim); font-weight:500}
.rcard .rdesc{
  font-size:12px; color:var(--dim); line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rcard .rfoot{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  font-size:11.5px; color:var(--dim); margin-top:2px;
}

/* ---------- docs ---------------------------------------------------------- */
.docs{display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--s6); align-items:start}
.docs-nav{
  position:sticky; top:78px; display:flex; flex-direction:column;
  gap:1px; font-size:12.5px;
}
.docs-nav a{
  color:var(--muted); padding:7px 11px; border-radius:var(--r-sm);
  border-left:2px solid transparent; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.docs-nav a:hover{color:var(--fg); background:var(--panel-2); text-decoration:none}
.doc-sec{margin-bottom:var(--s7); scroll-margin-top:80px}
.doc-sec h2{font-size:17px; margin-bottom:var(--s3)}
.doc-sec p,.doc-sec li{color:var(--muted); font-size:13px; line-height:1.65}
.doc-sec ul{padding-left:22px; margin:0 0 var(--s3)}
.doc-sec li{margin:5px 0}
.doc-sec code{font-size:12px}
.doc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3)}
.doc-tile{
  border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); background:var(--panel);
  transition:border-color .15s var(--ease);
}
.doc-tile:hover{border-color:var(--line-2)}
.doc-tile h3{margin-bottom:8px; display:flex; align-items:center; gap:8px}
.doc-tile h3 .ico{width:14px; height:14px; color:var(--dim)}
.doc-tile p{margin:0; font-size:12px; color:var(--dim); line-height:1.6}

/* ---------- status -------------------------------------------------------- */
.status-list{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--panel);
}
.status-row{
  display:flex; align-items:center; gap:var(--s3);
  padding:14px var(--s5); border-top:1px solid var(--line);
}
.status-row:first-child{border-top:0}
.status-row .lbl{font-size:13px; color:var(--fg)}
.status-row .val{
  margin-left:auto; font-size:12px; color:var(--dim); text-align:right;
}
.dot-lg{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--dim);
  box-shadow:0 0 0 4px rgba(255,255,255,.03);
}
.dot-lg.ok{background:var(--ok); box-shadow:0 0 0 4px rgba(127,209,143,.1)}
.dot-lg.err{background:var(--err); box-shadow:0 0 0 4px rgba(255,143,143,.1)}
.dot-lg.warn{background:var(--warn); box-shadow:0 0 0 4px rgba(227,195,123,.1)}
.meter{height:6px; border-radius:999px; background:var(--panel-3); overflow:hidden; margin-top:8px}
.meter>i{display:block; height:100%; background:var(--line-3); border-radius:999px}

/* ---------- history ------------------------------------------------------- */
.commits{display:flex; flex-direction:column}
.commit{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:14px var(--s5); border-top:1px solid var(--line);
  transition:background .12s var(--ease);
}
.commit:first-child{border-top:0}
.commit:hover{background:var(--panel-2)}
.commit>.ico{width:15px; height:15px; color:var(--dim); margin-top:3px}
.commit .msg{font-size:13px; color:var(--fg); overflow-wrap:anywhere}
.commit .who{font-size:12px; color:var(--dim); margin-top:3px}
.commit .sha{
  font-size:11px; color:var(--dim); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:2px 7px;
  background:var(--bg-soft); font-family:var(--mono);
}
.commit .when{font-size:12px; color:var(--dim); white-space:nowrap; margin-left:auto}

/* ---------- profile ------------------------------------------------------- */
.profile-head{display:flex; align-items:flex-start; gap:var(--s4)}
.profile-head .who h1{font-size:22px}
.profile-head .who .sub{color:var(--dim); font-size:12.5px; margin-top:5px}

/* ---------- footer -------------------------------------------------------- */
.foot{
  border-top:1px solid var(--line);
  margin-top:var(--s8); background:var(--bg-soft);
}
.foot-in{
  max-width:var(--measure); margin:0 auto;
  padding:var(--s5) var(--s5) var(--s6);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap;
  font-size:12px; color:var(--dim);
}
.foot-in a{color:var(--muted)}
.foot-in a:hover{color:var(--fg); text-decoration:none}
.foot-in .links{display:flex; gap:var(--s4); flex-wrap:wrap}

/* ---------- preview bar --------------------------------------------------- */
.previewbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  gap:var(--s3); padding:10px var(--s4);
  background:#14110a; border-bottom:1px solid #2f2a18;
  color:#ddd3b4; font-size:12px; text-align:center; flex-wrap:wrap;
}
.previewbar .tag{color:var(--warn); font-weight:600; letter-spacing:.04em}

/* ---------- view transitions --------------------------------------------- */
#view{animation:fadein .2s var(--ease)}
@keyframes fadein{from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none}}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1000px){
  .two-col{grid-template-columns:minmax(0,1fr)}
  .docs{grid-template-columns:minmax(0,1fr)}
  .docs-nav{
    position:static; flex-direction:row; flex-wrap:wrap;
    border-bottom:1px solid var(--line);
    padding-bottom:var(--s3); margin-bottom:var(--s4);
  }
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--s5:16px; --s6:24px; --s7:32px; --s8:48px}
  .top-in{gap:var(--s3); height:54px}
  .brand-tag,.hide-sm{display:none}
  .nav{gap:0}
  .nav a{padding:6px 8px; font-size:12.5px}
  .top-search{max-width:none; flex:1 1 120px}
  .top-search .key{display:none}
  .hero h1{font-size:26px}
  .hero{padding-top:var(--s6)}
  .cols-2,.cols-3,.cols-4,.doc-grid{grid-template-columns:minmax(0,1fr)}
  .fhead{display:none}
  .frow{grid-template-columns:minmax(0,1fr) 80px; gap:var(--s2)}
  .frow .factions{opacity:1}
  .pagehead{padding-top:var(--s5)}
  .tabs{padding:0 var(--s4); overflow-x:auto}
  .foot-in{flex-direction:column; align-items:flex-start}
  textarea{min-height:180px}
}
@media (max-width:520px){
  .nav a.optional{display:none}
  .auth-slot .email{display:none}
  .inline{gap:6px}
  .btn{padding:0 12px}
  h1{font-size:20px}
  .hero h1{font-size:22px}
}