:root{--bg:#0b1020;--card:#111a33;--ink:#eaf1ff;--muted:#9fb0d9;--acc:#67c1ff;--ok:#2bd99f;--warn:#ffd166;--err:#ff5d7a}
*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
body{margin:0;background:linear-gradient(160deg,#0b1020,#0b1020 40%,#0a1538);color:var(--ink)}
a{color:#9ad8ff;text-decoration:none}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #223;background:#0b132b;position:sticky;top:0;z-index:10}
.brand{font-weight:800;letter-spacing:.5px}
.brand .muted{color:#9fb0d9;font-weight:600}
.nav a{margin:0 8px;color:#cfe2ff;padding:6px 8px;border-radius:8px}
.nav a.active,.nav a:hover{background:#1b2852}
.right .ghost{background:#1b2852;border:1px solid #2a3e78;color:#cfe2ff;padding:8px 12px;border-radius:10px;cursor:pointer}
.container{max-width:1100px;margin:0 auto;padding:20px 16px}
.page-title{margin:6px 0 12px 0}
.hero{padding:24px;background:var(--card);border:1px solid #213;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.25);margin-bottom:12px}
.hero h1{margin:0 0 8px 0}
.accent{color:var(--acc)}
.lead{color:var(--muted)}
.cta .btn{display:inline-block;margin-right:12px;margin-top:10px}
.btn{background:#3556ff;color:white;border:none;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(53,86,255,.25)}
.btn.ghost{background:#1d2a55;border:1px solid #304080;box-shadow:none}
.btn.full{width:100%}
.features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0 0;padding:0;list-style:none;color:#cfe2ff}
.card{background:var(--card);border:1px solid #213;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.25);padding:14px;margin:12px 0}
.row{display:flex;gap:12px;align-items:center}
.wrap{flex-wrap:wrap}
.col{flex:1;min-width:260px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:12px 0}
label{display:block;margin:8px 0 4px;color:var(--muted);font-size:13px}
input,select,textarea{width:100%;background:#0f1733;color:var(--ink);border:1px solid #314066;border-radius:12px;padding:10px}
textarea{min-height:120px}
.stat{color:#cfe2ff;margin:6px 0}
.notice{background:#0f1733;border:1px solid #314066;padding:10px;border-radius:12px;color:#cfe2ff;margin:8px 0}
.tablewrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #223;padding:8px;text-align:left;font-size:13px}
tbody tr:hover{background:#0f1733}
.footer{padding:14px;border-top:1px solid #223;color:#9fb0d9;display:flex;gap:12px;align-items:center;justify-content:space-between}
.footer .ticker{display:flex;gap:16px;white-space:nowrap;overflow:auto}
.log{font-family:ui-monospace,Consolas,Monaco,monospace;font-size:12px;white-space:pre-wrap;background:#0a122b;border:1px solid #1d2b55;border-radius:10px;padding:10px;max-height:260px;overflow:auto}
.tabs{display:flex;gap:8px;margin-bottom:10px}
.tab{background:#1d2a55;border:1px solid #304080;color:#eaf1ff;padding:8px 12px;border-radius:10px;cursor:pointer}
.tab.active{background:#3556ff;border-color:#3556ff}
@media (max-width: 860px){
  .grid2,.grid3{grid-template-columns:1fr}
  .nav{display:none}
}


/* --- Images & banners --- */
.hero-banner{
  min-height: 360px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border:1px solid #213;
  margin-bottom:12px;
}
.hero-banner .hero-overlay{
  background: linear-gradient(0deg, rgba(11,16,32,0.85), rgba(11,16,32,0.25));
  width:100%; height:100%; padding:30px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.side-img{ width:100%; border-radius:12px; display:block }
.gallery-img{ width:32%; min-width:220px; border-radius:12px; margin-right:1.5%; margin-bottom:8px }
.banner-min .banner-img{ width:100%; border-radius:12px; display:block }


/* AI Chat Floating */
.ai-fab{ position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; background:#3556ff; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.35); z-index:99 }
.ai-panel{ position:fixed; right:18px; bottom:86px; width:340px; background:#111a33; border:1px solid #213; border-radius:14px; box-shadow:0 20px 40px rgba(0,0,0,.45); z-index:99; display:flex; flex-direction:column; overflow:hidden }
.ai-panel.hidden{ display:none }
.ai-header{ padding:8px 10px; background:#0b132b; color:#eaf1ff; font-weight:700; display:flex; align-items:center; justify-content:space-between }
.ai-header #aiClose{ cursor:pointer; opacity:.8 }
.ai-body{ display:flex; flex-direction:column; height:360px }
.ai-log{ flex:1; padding:10px; overflow:auto; font-family:ui-monospace,Consolas,monospace; background:#0a122b }
.ai-msg{ padding:8px 10px; margin:6px 0; border-radius:10px; max-width:90% }
.ai-msg.user{ background:#1d2a55; align-self:flex-end }
.ai-msg.bot{ background:#14204a; align-self:flex-start }
.ai-input{ display:flex; gap:6px; padding:8px; border-top:1px solid #213; background:#0b132b }
.ai-input input{ flex:1 }