:root {
  --accent: #35c879;
  --accent-2: #83f0b1;
  --accent-rgb: 53, 200, 121;
  --accent-2-rgb: 131, 240, 177;
  --bg: #07090c;
  --bg-2: #0b0e12;
  --surface: #0f1318;
  --surface-2: #141a20;
  --surface-3: #192128;
  --text: #f3f6f5;
  --muted: #98a3a0;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.13);
  --shadow: 0 26px 70px rgba(0,0,0,.34);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --sidebar: 248px;
}

:root[data-theme="purple"] { --accent:#9468ff; --accent-2:#c5afff; --accent-rgb:148,104,255; --accent-2-rgb:197,175,255; }
:root[data-theme="red"] { --accent:#ef5b5b; --accent-2:#ff9a93; --accent-rgb:239,91,91; --accent-2-rgb:255,154,147; }
:root[data-theme="cobalt"] { --accent:#477dff; --accent-2:#91afff; --accent-rgb:71,125,255; --accent-2-rgb:145,175,255; }
:root[data-theme="teal"] { --accent:#23c8bd; --accent-2:#79ece3; --accent-rgb:35,200,189; --accent-2-rgb:121,236,227; }
:root[data-theme="amber"] { --accent:#e8ae43; --accent-2:#ffd47d; --accent-rgb:232,174,67; --accent-2-rgb:255,212,125; }
:root[data-theme="rose"] { --accent:#e9689d; --accent-2:#f6a6c7; --accent-rgb:233,104,157; --accent-2-rgb:246,166,199; }
:root[data-theme="ice"] { --accent:#82b8dc; --accent-2:#c1e1f4; --accent-rgb:130,184,220; --accent-2-rgb:193,225,244; }

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% -10%, rgba(var(--accent-rgb),.15), transparent 28rem),
    radial-gradient(circle at -10% 100%, rgba(var(--accent-rgb),.07), transparent 35rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .28;
  background-image: radial-gradient(rgba(255,255,255,.12) .7px, transparent .7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 65%);
}
body, .glass, .destination, .service-tile, .theme-popover { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
svg.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

/* Auth */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(420px,.85fr); }
.auth-visual { position: relative; padding: 64px clamp(42px,6vw,92px); overflow: hidden; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); }
.auth-visual::before { content:""; position:absolute; inset:-10%; background: radial-gradient(circle at 36% 38%, rgba(var(--accent-rgb),.25), transparent 20rem), radial-gradient(circle at 75% 70%, rgba(var(--accent-2-rgb),.08), transparent 22rem); filter: blur(10px); }
.auth-copy, .auth-brand, .auth-foot { position: relative; z-index: 1; }
.auth-brand { display:flex; align-items:center; gap:12px; font-weight:750; letter-spacing:.08em; }
.logo { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(145deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.05)); border:1px solid rgba(var(--accent-2-rgb),.28); color:var(--accent-2); box-shadow:inset 0 1px rgba(255,255,255,.08); font-weight:850; }
.auth-copy { max-width:720px; margin:80px 0; }
.kicker { font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); }
.auth-copy h1 { font-size:clamp(3.2rem,6vw,6.7rem); line-height:.96; letter-spacing:-.055em; margin:18px 0 24px; max-width:900px; }
.auth-copy p { max-width:640px; color:var(--muted); font-size:1.05rem; line-height:1.75; }
.auth-foot { color:var(--muted); font-size:.88rem; display:flex; gap:28px; flex-wrap:wrap; }
.auth-panel { display:grid; place-items:center; padding:42px; background:rgba(7,9,12,.6); }
.login-box { width:min(440px,100%); }
.login-box h2 { font-size:2rem; letter-spacing:-.03em; margin:0 0 8px; }
.login-box > p { margin:0 0 30px; color:var(--muted); line-height:1.6; }
.field { margin-bottom:16px; }
.field label { display:block; margin:0 0 8px; font-size:.84rem; color:#c6cfcc; font-weight:650; }
.field input { width:100%; height:52px; border-radius:14px; border:1px solid var(--line-strong); background:#0b0f13; color:var(--text); padding:0 15px; outline:none; }
.field input:focus { border-color:rgba(var(--accent-rgb),.75); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.10); }
.primary-btn { width:100%; height:52px; border:0; border-radius:14px; margin-top:8px; color:#06110b; font-weight:850; cursor:pointer; background:linear-gradient(135deg,var(--accent-2),var(--accent)); box-shadow:0 14px 34px rgba(var(--accent-rgb),.20); }
.primary-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.primary-btn:disabled { opacity:.6; cursor:default; }
.login-meta { display:flex; justify-content:space-between; gap:14px; margin-top:18px; color:var(--muted); font-size:.8rem; }
.login-meta strong { color:#d8dfdc; }
.auth-theme-row { display:flex; gap:9px; margin-top:30px; align-items:center; }
.auth-theme-row span { color:var(--muted); font-size:.8rem; margin-right:5px; }
.mini-swatch { width:24px; height:24px; padding:0; border-radius:50%; border:2px solid transparent; background:var(--swatch); cursor:pointer; box-shadow:0 0 0 1px rgba(255,255,255,.10); }
.mini-swatch.active { border-color:#fff; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }

/* App shell */
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); border-right:1px solid var(--line); background:rgba(8,11,14,.82); backdrop-filter:blur(22px); padding:24px 18px; display:flex; flex-direction:column; z-index:30; }
.side-brand { display:flex; align-items:center; gap:11px; padding:2px 8px 26px; font-weight:780; }
.side-brand .logo { width:38px; height:38px; border-radius:12px; }
.side-brand small { display:block; margin-top:2px; font-size:.68rem; letter-spacing:.13em; color:var(--muted); text-transform:uppercase; font-weight:700; }
.nav-section { margin-top:14px; }
.nav-label { padding:0 12px 8px; font-size:.67rem; color:#68716f; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.side-nav { display:grid; gap:4px; }
.side-nav a { display:flex; align-items:center; gap:12px; height:45px; border-radius:12px; padding:0 12px; color:#9aa5a2; font-size:.9rem; border:1px solid transparent; transition:.18s ease; }
.side-nav a:hover { color:var(--text); background:rgba(255,255,255,.035); }
.side-nav a.active { color:var(--text); background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04)); border-color:rgba(var(--accent-rgb),.18); }
.side-nav a.active .icon { color:var(--accent-2); }
.side-footer { margin-top:auto; display:grid; gap:10px; }
.server-pill { display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.dot { width:8px; height:8px; border-radius:50%; background:#39d782; box-shadow:0 0 12px rgba(57,215,130,.7); flex:none; }
.side-user { display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; border:1px solid var(--line); background:#0d1216; }
.avatar { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.05)); color:var(--accent-2); font-weight:800; }
.side-user div { min-width:0; }
.side-user strong { display:block; font-size:.82rem; }
.side-user small { display:block; color:var(--muted); font-size:.7rem; margin-top:2px; }

.app-main { grid-column:2; min-width:0; }
.topbar { height:76px; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(22px,4vw,52px); border-bottom:1px solid var(--line); background:rgba(7,9,12,.72); backdrop-filter:blur(22px); }
.page-title small { display:block; color:var(--muted); font-size:.72rem; margin-bottom:3px; }
.page-title strong { font-size:.96rem; }
.top-actions { display:flex; align-items:center; gap:9px; }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:#aab4b1; cursor:pointer; }
.icon-btn:hover { color:var(--text); border-color:rgba(var(--accent-rgb),.32); background:rgba(var(--accent-rgb),.06); }
.mobile-menu { display:none; }
.content { padding:38px clamp(22px,4vw,52px) 64px; max-width:1500px; margin:0 auto; }

/* dashboard */
.welcome { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; margin-bottom:28px; }
.welcome h1 { font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.045em; margin:8px 0 10px; line-height:1; }
.welcome p { margin:0; max-width:720px; color:var(--muted); line-height:1.65; }
.health-summary { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.health-chip { min-width:126px; padding:12px 14px; border-radius:14px; background:#0e1317; border:1px solid var(--line); }
.health-chip small { display:block; color:var(--muted); font-size:.67rem; text-transform:uppercase; letter-spacing:.1em; }
.health-chip strong { display:block; margin-top:5px; font-size:.86rem; }
.health-chip .good { color:#7be7ab; }
.destination-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.destination { min-height:290px; border:1px solid var(--line); border-radius:var(--radius-xl); padding:24px; position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.014)); box-shadow:inset 0 1px rgba(255,255,255,.025); display:flex; flex-direction:column; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.destination::before { content:""; position:absolute; width:200px; height:200px; right:-70px; top:-85px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.24),transparent 68%); }
.destination:hover { transform:translateY(-4px); border-color:rgba(var(--accent-rgb),.28); box-shadow:0 22px 60px rgba(0,0,0,.24); }
.dest-icon { width:50px; height:50px; border-radius:15px; display:grid; place-items:center; border:1px solid rgba(var(--accent-rgb),.22); background:rgba(var(--accent-rgb),.08); color:var(--accent-2); }
.destination h2 { font-size:1.65rem; letter-spacing:-.03em; margin:34px 0 10px; }
.destination p { color:var(--muted); line-height:1.6; font-size:.9rem; margin:0; max-width:34ch; }
.dest-meta { margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.dest-meta span { color:var(--muted); font-size:.76rem; }
.open-link { display:flex; align-items:center; gap:7px; color:var(--accent-2)!important; font-weight:800; }
.open-link .icon { width:16px; height:16px; }
.section-row { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:34px 0 14px; }
.section-row h2 { margin:0; font-size:1.08rem; letter-spacing:-.01em; }
.section-row p { margin:4px 0 0; color:var(--muted); font-size:.8rem; }
.quick-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; }
.panel { border:1px solid var(--line); border-radius:var(--radius-lg); background:rgba(255,255,255,.022); overflow:hidden; }
.service-list { padding:8px; }
.service-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:14px; }
.service-row:hover { background:rgba(255,255,255,.03); }
.service-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--accent-2); background:rgba(var(--accent-rgb),.07); border:1px solid rgba(var(--accent-rgb),.14); }
.service-row strong { display:block; font-size:.88rem; }
.service-row small { display:block; color:var(--muted); margin-top:3px; font-size:.73rem; }
.status { display:flex; align-items:center; gap:8px; color:#79daa5; font-size:.72rem; }
.activity-list { padding:6px 16px 12px; }
.activity { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.activity:last-child { border-bottom:0; }
.activity-badge { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#11171c; color:var(--accent-2); flex:none; }
.activity strong { display:block; font-size:.82rem; }
.activity p { margin:3px 0 0; color:var(--muted); font-size:.72rem; line-height:1.5; }

/* general pages */
.page-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:26px; }
.page-head h1 { margin:8px 0 8px; font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.04em; }
.page-head p { margin:0; color:var(--muted); max-width:680px; line-height:1.6; }
.ghost-btn { height:42px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); color:#b8c0be; cursor:pointer; }
.ghost-btn:hover { border-color:rgba(var(--accent-rgb),.3); color:var(--text); }
.feature-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:16px; }
.feature-panel { min-height:310px; padding:26px; position:relative; overflow:hidden; }
.feature-panel::after { content:""; position:absolute; width:340px; height:340px; right:-130px; bottom:-180px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 67%); }
.feature-panel h2 { font-size:2rem; letter-spacing:-.035em; margin:54px 0 10px; position:relative; z-index:1; }
.feature-panel p { color:var(--muted); line-height:1.65; max-width:580px; position:relative; z-index:1; }
.feature-actions { margin-top:28px; display:flex; gap:10px; position:relative; z-index:1; }
.action-btn { display:inline-flex; align-items:center; gap:8px; height:43px; padding:0 15px; border-radius:12px; border:1px solid rgba(var(--accent-rgb),.28); background:rgba(var(--accent-rgb),.10); color:var(--accent-2); font-size:.83rem; font-weight:800; }
.mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.service-tile { min-height:185px; padding:20px; border-radius:var(--radius-lg); border:1px solid var(--line); background:rgba(255,255,255,.022); display:flex; flex-direction:column; }
.service-tile .service-icon { margin-bottom:24px; }
.service-tile h3 { margin:0 0 7px; font-size:1rem; }
.service-tile p { color:var(--muted); margin:0; font-size:.78rem; line-height:1.5; }
.service-tile .tile-bottom { margin-top:auto; padding-top:18px; display:flex; justify-content:space-between; align-items:center; color:var(--accent-2); font-size:.75rem; }

/* Blog */
.blog-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:18px; }
.feature-post { min-height:370px; padding:28px; background:linear-gradient(145deg,rgba(var(--accent-rgb),.10),rgba(255,255,255,.02)); position:relative; }
.feature-post .tag, .post-card .tag { display:inline-flex; height:28px; align-items:center; padding:0 10px; border-radius:999px; font-size:.68rem; color:var(--accent-2); background:rgba(var(--accent-rgb),.09); border:1px solid rgba(var(--accent-rgb),.18); }
.feature-post h2 { margin:110px 0 12px; font-size:2.2rem; letter-spacing:-.04em; max-width:640px; }
.feature-post p { color:var(--muted); line-height:1.6; max-width:700px; }
.post-list { display:grid; gap:12px; }
.post-card { padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.02); }
.post-card h3 { margin:14px 0 8px; font-size:1rem; line-height:1.35; }
.post-card p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.5; }
.post-card footer { display:flex; justify-content:space-between; gap:12px; margin-top:16px; color:#707b78; font-size:.68rem; }

/* Lore */
.lore-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; }
.lore-nav { padding:12px; align-self:start; position:sticky; top:96px; }
.lore-nav input { width:100%; height:40px; border:1px solid var(--line); background:#0b1014; border-radius:11px; padding:0 12px; color:var(--text); outline:none; margin-bottom:12px; }
.lore-nav a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border-radius:10px; color:var(--muted); font-size:.8rem; }
.lore-nav a.active, .lore-nav a:hover { color:var(--text); background:rgba(var(--accent-rgb),.07); }
.lore-article { padding:30px; }
.breadcrumbs { display:flex; gap:8px; color:var(--muted); font-size:.72rem; }
.lore-article h1 { font-size:2.7rem; letter-spacing:-.04em; margin:18px 0 10px; }
.lore-meta { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 26px; }
.lore-meta span { padding:7px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.7rem; }
.prose { color:#bec7c4; line-height:1.8; max-width:860px; }
.prose h2 { color:var(--text); margin-top:34px; font-size:1.3rem; }
.prose a { color:var(--accent-2); }

/* Settings */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.settings-card { padding:22px; }
.settings-card h2 { margin:0 0 6px; font-size:1rem; }
.settings-card > p { margin:0 0 20px; color:var(--muted); font-size:.78rem; line-height:1.55; }
.theme-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.theme-option { min-height:72px; border:1px solid var(--line); border-radius:13px; background:#0e1317; cursor:pointer; padding:10px; color:var(--muted); display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.theme-option:hover, .theme-option.active { border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.06); color:var(--text); }
.theme-option i { width:24px; height:24px; border-radius:8px; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.theme-option span { font-size:.7rem; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.setting-row strong { display:block; font-size:.84rem; }
.setting-row small { display:block; color:var(--muted); margin-top:3px; font-size:.7rem; }
.switch { width:44px; height:24px; border:0; border-radius:999px; padding:3px; background:#2a3238; cursor:pointer; }
.switch::before { content:""; display:block; width:18px; height:18px; border-radius:50%; background:white; transition:.2s; }
.switch.on { background:var(--accent); }
.switch.on::before { transform:translateX(20px); }

/* Theme popover */
.theme-popover { position:fixed; right:28px; top:70px; z-index:80; width:280px; padding:16px; border:1px solid var(--line-strong); border-radius:16px; background:rgba(13,17,21,.96); backdrop-filter:blur(22px); box-shadow:var(--shadow); transform:translateY(-8px) scale(.98); opacity:0; pointer-events:none; transition:.17s ease; }
.theme-popover.open { transform:none; opacity:1; pointer-events:auto; }
.theme-popover header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.theme-popover header strong { font-size:.84rem; }
.pop-theme-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pop-theme { height:48px; border-radius:11px; border:1px solid var(--line); background:#0d1216; display:grid; place-items:center; cursor:pointer; }
.pop-theme i { width:24px; height:24px; border-radius:8px; background:var(--swatch); }
.pop-theme.active { border-color:rgba(var(--accent-rgb),.6); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.1); }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,15px); opacity:0; z-index:90; padding:11px 15px; border-radius:12px; background:#11171c; border:1px solid var(--line-strong); color:#d9dfdd; font-size:.8rem; box-shadow:var(--shadow); pointer-events:none; transition:.2s ease; }
.toast.show { transform:translate(-50%,0); opacity:1; }

@media (max-width:1100px) {
  .destination-grid { grid-template-columns:1fr 1fr; }
  .destination:last-child { grid-column:1/-1; min-height:240px; }
  .feature-grid, .blog-layout { grid-template-columns:1fr; }
  .quick-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  :root { --sidebar: 0px; }
  .app-shell { display:block; }
  .sidebar { transform:translateX(-105%); width:250px; box-shadow:20px 0 60px rgba(0,0,0,.45); transition:.22s ease; }
  body.nav-open .sidebar { transform:translateX(0); }
  .app-main { grid-column:auto; }
  .mobile-menu { display:grid; }
  .topbar { padding:0 18px; }
  .content { padding:28px 18px 54px; }
  .welcome { grid-template-columns:1fr; }
  .health-summary { justify-content:flex-start; }
  .lore-layout { grid-template-columns:1fr; }
  .lore-nav { position:static; }
  .settings-grid { grid-template-columns:1fr; }
  .auth-page { grid-template-columns:1fr; }
  .auth-visual { display:none; }
  .auth-panel { min-height:100vh; padding:28px; }
}
@media (max-width:650px) {
  .destination-grid, .mini-grid { grid-template-columns:1fr; }
  .destination:last-child { grid-column:auto; }
  .destination { min-height:250px; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .theme-grid { grid-template-columns:repeat(2,1fr); }
  .health-summary { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .health-chip { min-width:0; }
  .feature-panel { min-height:280px; }
  .top-actions .hide-mobile { display:none; }
}