/* Reset & tokens */
*{box-sizing:border-box}
:root{
  --bg:#09111b; --bg2:#0e1723; --card:#0f1b2a; --ink:#eaf4ff; --muted:#b1c4d6;
  --acc:#39d0ff; --glow:#7cf3ff; --chip:#12273a; --chipOn:#16344d;
  --radius:16px; --shadow:0 6px 30px rgba(0,0,0,.35);
}

html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 70% -10%, #123b5a22, transparent),
 linear-gradient(#0a1522,#071019) fixed;color:var(--ink);font:500 16px/1.45 system-ui,Segoe UI,Roboto,Inter,sans-serif;}

#grain{position:fixed;inset:0;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><filter id=%22n%22><feTurbulence baseFrequency=%220.8%22 numOctaves=%223%22/></filter><rect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22 opacity=%220.06%22/></svg>');mix-blend-mode:overlay}

#aurora{position:fixed;inset:0;filter:blur(32px);opacity:.6;pointer-events:none}

/* Top bar */
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 20px;background:linear-gradient(180deg, rgba(8,14,23,.9), rgba(8,14,23,.65) 70%, transparent);backdrop-filter: blur(6px);z-index:10}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:#ff595e;display:inline-block;box-shadow:0 0 0 3px #ff595e22}
.brand .online{background:#23d18b;box-shadow:0 0 0 3px #23d18b22}
.brand small{color:var(--muted)}
.actions{display:flex;gap:8px;align-items:center}

/* Shared UI */
.pill{background:var(--chip);border:none;color:var(--ink);padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);cursor:pointer}
.pill:hover{background:var(--chipOn)}
.pill.ghost{background:transparent;border:1px solid #27445f}
.pill.accent{background:linear-gradient(180deg,#1d9bf0,#1786cc);}
.switch{display:flex;align-items:center;gap:8px;margin-left:8px}
.switch input{transform:translateY(1px)}

main{max-width:1100px;margin:0 auto;padding:20px}
.hero h1{font-size:34px;line-height:1.15;margin:20px 0 6px}
.hero p{color:var(--muted);margin:0 0 18px}
.searchbar{display:flex;gap:8px}
.searchbar input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid #27445f;background:#0c1827;color:var(--ink)}
.searchbar button{padding:12px 18px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.chip{background:var(--chip);border:1px solid #27445f;color:var(--ink);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip:hover{background:var(--chipOn)}
.links{margin:10px 0 0}
.links a{color:#9fd9ff;text-decoration:none}
.links a.muted{opacity:.8}

.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0}
.card{background:linear-gradient(180deg,#0f1b2a,#0b1522);border:1px solid #27445f;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;min-height:220px;transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 34px rgba(0,0,0,.55)}
.thumb{height:120px;background:#0a1625 center/cover no-repeat}
.meta{padding:12px 14px}
.title{font-weight:700;margin:2px 0 8px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.badge{font-size:12px;background:#0d2133;border:1px solid #27445f;border-radius:999px;padding:4px 8px;color:#cce9ff}

.empty{opacity:.8;text-align:center;margin:40px 0}
.hidden{display:none}

/* Modal */
dialog{border:none;border-radius:var(--radius);padding:0;background:rgba(12,20,30,.92);backdrop-filter: blur(10px);color:var(--ink);width:min(900px,96vw)}
dialog::backdrop{background:rgba(2,6,12,.65)}
#modalWrap{display:flex;flex-direction:column}
.close{position:absolute;right:12px;top:10px;background:#173149;border:1px solid #27445f;color:#d9f2ff;border-radius:999px;padding:6px 10px;cursor:pointer}
.heroImg{width:100%;height:240px;object-fit:cover;background:#091524}
.modalHead{padding:14px 16px}
.steps{display:grid;gap:10px;padding:0 16px 16px}
.step{background:#0c1a29;border:1px solid #27445f;border-radius:12px;padding:12px}

/* Assistant */
.assistant{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;border:none;background:linear-gradient(180deg,#1d9bf0,#1786cc);color:white;font:700 18px/1 system-ui;box-shadow:0 10px 30px rgba(0,0,0,.35);cursor:pointer}
.assistantPane{position:fixed;right:20px;bottom:80px;width:min(420px,92vw);background:#0b1726;border:1px solid #27445f;border-radius:16px;box-shadow:var(--shadow)}
.paneHead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #243f5a}
.paneBody{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.paneBody .row{display:flex;gap:8px}
.paneBody input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #27445f;background:#0c1827;color:var(--ink)}
.out{max-height:40vh;overflow:auto;border-top:1px dashed #27445f;padding-top:10px}