/* SHADO5 shared design system. Component behavior lives in its existing modules. */
:root {
  color-scheme:dark;
  --bg-base:#080e19; --bg-sidebar:#0b1320; --bg-surface:#101b2b; --bg-surface-hover:#152238; --bg-elevated:#18263a;
  --border-default:#233148; --border-hover:#39526e; --border-active:#337ab6;
  --text-primary:#eaf1fa; --text-secondary:#a4b3c7; --text-muted:#8194ae;
  --accent:#3295fa; --accent-hover:#57acff; --accent-soft:#152e4b;
  --success:#73d9ad; --warning:#e8ba73; --danger:#f58b98; --info:#82c7ff;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --shadow-card:0 4px 16px #00000012; --shadow-elevated:0 20px 60px #0006; --glow-accent:0 0 0 3px #3295fa18;
  --sidebar-width:248px;
  --cs-primary:var(--accent); --cs-primary-2:#78d6ee; --cs-bg:var(--bg-base); --cs-elev-1:var(--bg-surface); --cs-elev-2:var(--bg-elevated);
  --cs-text:var(--text-primary); --cs-text-muted:var(--text-secondary); --cs-border:var(--border-default); --radius:var(--radius-lg); --shadow-1:var(--shadow-card); --shadow-2:var(--shadow-elevated);
}
*,*::before,*::after { box-sizing:border-box; }
* { scrollbar-width:thin; scrollbar-color:#0081ff #101b2c; }
html,body { margin:0; min-height:100%; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg-base); color:var(--text-primary); font-size:14px; line-height:1.5; }
body { background:radial-gradient(ellipse at 85% 0,#16325830,transparent 50%),var(--bg-base); }
button,input,textarea,select { font:inherit; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.hidden { display:none!important; }
.bg-accent-orb { display:none; }
.text-muted { color:var(--text-secondary); }
h1,h2,h3,h4,p { overflow-wrap:anywhere; }
h1 { font-size:clamp(1.8rem,2.7vw,2.5rem); line-height:1.2; letter-spacing:-.04em; }
h2 { letter-spacing:-.025em; }
.icon { width:19px; height:19px; fill:currentColor; flex-shrink:0; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); padding:24px 16px 16px; background:var(--bg-sidebar); border-right:1px solid var(--border-default); display:flex; flex-direction:column; gap:24px; z-index:60; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:12px; padding:0 12px 24px; border-bottom:1px solid var(--border-default); flex-wrap:wrap; }
.brand-logo { width:34px; height:34px; }
.brand-text { color:var(--text-primary); font-size:1.45rem; letter-spacing:.08em; font-weight:800; }
.brand-text span { color:var(--cs-primary-2); }
.brand-subline { flex-basis:100%; padding-left:46px; color:var(--text-muted); font-size:9px; letter-spacing:.12em; margin-top:-17px; }
.nav { display:flex; flex-direction:column; gap:7px; }
.nav-link { display:flex; align-items:center; gap:12px; padding:12px; color:var(--text-secondary); border:1px solid transparent; border-radius:var(--radius-sm); transition:background .15s,border-color .15s,color .15s; }
.nav-link:hover { background:var(--bg-surface); color:var(--text-primary); }
.nav-link.active { color:#f5faff; background:linear-gradient(90deg,#15304c,#111f32); border-color:#285074; box-shadow:inset 2px 0 #63c7f3; }
.nav-link.active .icon { color:#74ccf4; }
.nav-submenu { margin-left:21px; padding-left:12px; border-left:1px solid var(--border-default); }
.nav-child { font-size:.86rem; padding:9px; }
.sidebar-footer { margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.sidebar-footer .btn { justify-content:flex-start; font-size:.84rem; color:var(--text-secondary); }
.credits { border-top:1px solid var(--border-default); padding:16px 8px 0; color:var(--text-muted); font-size:.72rem; }
.main { margin-left:var(--sidebar-width); min-width:0; }
.topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; padding:16px 32px; background:#0c1523f5; border-bottom:1px solid var(--border-default); backdrop-filter:blur(8px); }
.search { position:relative; width:min(390px,100%); }
.search .icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.topbar .search input { padding-left:42px; }
.userbox-container { display:flex; align-items:center; gap:16px; margin-left:auto; min-width:0; }
.neo-userbox,.userbox { display:flex; align-items:center; gap:10px; min-width:0; }
.neo-userbox { padding:5px 0 5px 16px; border-left:1px solid var(--border-default); }
.avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--bg-elevated); }
.avatar-wrap { flex-shrink:0; }
.user-name { font-weight:600; font-size:.84rem; overflow-wrap:anywhere; }
.bot-status { position:relative; font-size:.75rem; padding:5px 9px; border:1px solid var(--border-default); border-radius:6px; white-space:nowrap; }
.bot-status::before { content:""; display:inline-block; width:5px; height:5px; margin-right:7px; background:currentColor; border-radius:50%; }
.bot-status.online { color:var(--success); background:#73d9ad08; border-color:#73d9ad30; }
.bot-status.offline { color:var(--danger); background:#f58b9808; border-color:#f58b9830; }
.bot-status::after { content:attr(data-tooltip); position:absolute; top:calc(100% + 10px); right:0; width:190px; white-space:normal; padding:10px; background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:8px; opacity:0; pointer-events:none; }
.bot-status:hover::after { opacity:1; }
.view { display:none; padding:32px; max-width:1600px; margin:auto; }
.view.active { display:block; animation:reveal .15s ease; }
.hero { margin-bottom:28px; padding:4px 0 20px; border-bottom:1px solid var(--border-default); }
.hero h1 { margin:0 0 10px; }
.hero p { margin:0; color:var(--text-secondary); max-width:780px; line-height:1.7; }
.card,.stat-card,.guild,.guild-card,.team-card,.admin-card,.quick-actions>a { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
.card { padding:24px; }
.btn,.btn-save,.pagination button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:40px; padding:9px 16px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-primary); font-size:.84rem; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s; }
.btn:hover,.btn-save:hover,.pagination button:hover { background:var(--bg-surface-hover); border-color:var(--border-hover); }
.btn-primary,.btn-save { background:#247cdb; border-color:#4098f4; color:white; }
.btn-primary:hover,.btn-save:hover { background:#308ae6; }
.btn-ghost { background:transparent; }
.btn-small { min-height:34px; padding:6px 12px; }
.btn:disabled { pointer-events:none; opacity:.5; }
.cl-danger { background:#f58b9810; border-color:#f58b9840; color:var(--danger); }
input:not([type=checkbox]):not([type=hidden]),select,textarea,.role-trigger,.cl-form input,.cl-form select,.cl-form textarea { min-height:40px; padding:9px 12px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:#0c1625; color:var(--text-primary); width:100%; font-size:.88rem; }
input:focus,textarea:focus,select:focus,.role-trigger[aria-expanded=true] { border-color:var(--accent); box-shadow:var(--glow-accent); outline:none; }
input[type=checkbox] { accent-color:var(--accent); }
.topbar .search input { padding-left:42px; }
label.option-label { display:block; color:var(--text-secondary); font-size:.8rem; margin:14px 0 6px; }
.role-trigger { display:flex; text-align:left; align-items:center; justify-content:space-between; cursor:pointer; }
.role-panel { background:var(--bg-elevated); border-color:var(--border-hover); box-shadow:var(--shadow-elevated); }
.role-choice:hover,.role-choice:has(input:checked),.feature-select-option[aria-selected=true],.feature-select-option.is-focused { background:var(--accent-soft); }
.feature-select-trigger:disabled { background:#101c2b; color:var(--text-muted); }
.eyebrow { font-size:.68rem; font-weight:600; letter-spacing:.14em; color:#8fb9df; }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin:28px 0 16px; flex-wrap:wrap; }
.section-heading h2 { font-size:1.08rem; margin:0; }
.section-heading>span { color:var(--text-muted); font-size:.78rem; }
.home-hero { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:24px; padding:40px; border:1px solid #284562; border-radius:var(--radius-lg); background:radial-gradient(ellipse at 95% 10%,#17457370,transparent 70%),linear-gradient(115deg,#142539,#0c1829); overflow:hidden; }
.home-hero h1 { margin:16px 0; font-size:clamp(2rem,3vw,3rem); max-width:700px; }
.home-hero p { max-width:580px; color:var(--text-secondary); line-height:1.8; margin:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.home-hero-art { position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; }
.home-hero-art img { width:138px; z-index:1; filter:drop-shadow(0 8px 24px #1b91ef30); }
.home-hero-art span { font-size:.58rem; letter-spacing:.18em; color:#7b9eba; }
.shield-orbit { position:absolute; width:210px; height:210px; border:1px solid #3f91cc22; border-radius:50%; top:-25px; }
.shield-orbit::after { content:""; position:absolute; inset:16px; border:1px solid #3f91cc18; border-radius:50%; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.stat-card { display:flex; align-items:flex-start; gap:16px; padding:24px; }
.metric-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid #2b4864; border-radius:10px; background:var(--accent-soft); color:#81bded; flex-shrink:0; font-size:22px; }
.stat-card h2 { margin:7px 0; font-size:clamp(1.3rem,2vw,1.9rem); font-variant-numeric:tabular-nums; }
.stat-card p { color:var(--text-secondary); margin:0; font-size:.82rem; }
.stat-card small { font-size:.72rem; color:var(--text-muted); }
.quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.quick-actions>a { padding:20px; transition:border-color .15s,transform .15s; }
.quick-actions>a:hover { border-color:var(--border-hover); transform:translateY(-1px); }
.quick-actions strong { display:flex; justify-content:space-between; margin-top:12px; font-size:.95rem; }
.quick-actions p { color:var(--text-muted); font-size:.8rem; margin-bottom:0; }
.home-secondary { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:24px; margin-top:8px; align-items:start; }
.home-system { margin-top:28px; }
.home-system .section-heading { margin-top:0; }
.home-system .btn { margin-top:18px; width:100%; }
.home-service-row { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-default); font-size:.8rem; }
.home-service-row span:last-child { text-align:right; }
.top-guilds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.guild-card { padding:18px; display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:12px; align-items:center; }
.guild-card img { width:40px; height:40px; border-radius:10px; grid-row:span 2; }
.guild-card h4 { margin:0; font-size:.85rem; }
.guild-card p { margin:3px 0 0; color:var(--text-muted); font-size:.75rem; }
.members { display:flex; align-items:center; gap:5px; }
.member-icon { width:13px; height:13px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.guild { display:flex; align-items:center; gap:14px; padding:22px; flex-wrap:wrap; transition:border-color .15s; }
.guild:hover { border-color:var(--border-hover); }
.guild-avatar-wrap { width:48px; height:48px; position:relative; flex-shrink:0; }
.guild-avatar { width:48px; height:48px; object-fit:cover; border-radius:12px; }
.guild .guild-info { min-width:0; flex:1; }
.guild-name { margin:0 0 5px; font-size:1rem; }
.guild-meta { margin:0; font-size:.72rem; color:var(--text-muted); }
.guild-actions { flex-basis:100%; padding-top:16px; border-top:1px solid var(--border-default); }
.guild-actions .btn { width:100%; }
.hint { color:var(--text-muted); font-size:.8rem; }
.empty-state { padding:32px; grid-column:1/-1; border:1px dashed var(--border-hover); border-radius:12px; color:var(--text-secondary); }
.empty-state h2 { color:var(--text-primary); font-size:1.15rem; }
.features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#featuresList>.card { padding:24px; min-width:0; transition:border-color .15s; }
#featuresList>.card:hover { border-color:var(--border-hover); }
#featuresList>.card:has(.switch input:checked) { border-color:#2a5579; }
#featuresList strong { font-size:1rem; }
#featuresList small { display:inline-block; margin-top:5px; line-height:1.65; }
.dropdown-content { max-height:0; opacity:0; overflow:hidden; transition:max-height .18s,opacity .18s; }
.dropdown-content.open { max-height:600px; opacity:1; padding-top:10px; }
.switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; border-radius:30px; background:#344258; transition:background .18s; }
.slider::before { content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; border-radius:50%; background:#eaf1fa; transition:transform .18s; }
input:checked+.slider { background:#2c8be9; }
input:checked+.slider::before { transform:translateX(20px); }
.switch:focus-within { outline:2px solid var(--accent); outline-offset:4px; border-radius:30px; }
.guild-section { margin-top:24px; }
.guild-section h3 { margin:0 0 8px; }
.guild-section>p { color:var(--text-secondary); font-size:.85rem; line-height:1.7; }
.role-select { margin-top:18px; }
.guildbar .guild-info { display:flex; gap:14px; align-items:center; min-width:0; }
.guild-icon { width:48px; height:48px; border-radius:12px; object-fit:cover; }
.guild-text h2 { margin:0; font-size:1.1rem; }
.guild-text small { color:var(--text-muted); font-size:.7rem; }
.guildbar #userCard { position:static; max-width:240px; }
.activity-row { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--border-default); }
.activity-row img { width:32px; height:32px; border-radius:50%; }
.activity-row p { margin:4px 0; white-space:pre-wrap; }
.activity-row time { font-size:.75rem; color:var(--text-muted); }
.activity-controls,.pagination { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; }
.activity-pager { display:flex; align-items:center; gap:12px; }
.activity-pager[hidden] { display:none; }
.activity-pager #logsPage { white-space:nowrap; font-variant-numeric:tabular-nums; }
.activity-controls .btn:disabled { opacity:.4; cursor:not-allowed; }
.activity-controls .btn:not(:disabled):hover { background:var(--bg-surface-hover); border-color:var(--accent); }
#logsStatus { min-height:1.5em; margin:8px 0 0; }
.load-status { color:var(--text-secondary); }
.security-popover { background:var(--bg-elevated); border-color:var(--border-hover); box-shadow:var(--shadow-elevated); }
.security-pill { box-shadow:none; border-radius:6px; }
.status-summary { padding:28px; background:linear-gradient(105deg,#122339,#101b2b); }
.status-service,.status-availability,.status-incidents { background:var(--bg-surface); border-color:var(--border-default); }
.status-service:hover { box-shadow:var(--shadow-card); border-color:var(--border-hover); }
.status-service-description { font-size:.82rem; }
.status-metric strong { font-variant-numeric:tabular-nums; }
.status-operational { color:var(--success); } .status-degraded { color:var(--warning); } .status-major_outage { color:var(--danger); } .status-maintenance { color:var(--info); }
.cl-card { border-top:2px solid #2d5076; }
.cl-version { display:inline-block; padding:5px 9px; border-radius:6px; background:var(--accent-soft); font-size:.8rem; }
.cl-card h2 { font-size:1.4rem; }
.team-title { margin:36px 0 20px; font-size:1.3rem; }
.team-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.team-card { padding:24px; }
.team-avatar { width:56px; height:56px; border-radius:14px; object-fit:cover; margin-bottom:16px; }
.team-card h4 { margin:0; font-size:1rem; }
.team-card .role { color:#87b6e3; font-size:.68rem; letter-spacing:.1em; }
.team-card .desc { color:var(--text-secondary); font-size:.84rem; line-height:1.8; }
.admin-card { padding:26px; }
.admin-card h3 { margin-top:0; }
.admin-card p { color:var(--text-secondary); font-size:.87rem; line-height:1.7; }
.toggle-container,.toggle-label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.toggle-container { margin-top:24px; }
.logs { margin-top:32px; padding:24px; border:1px solid var(--border-default); border-radius:12px; }
.log-entry { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--border-default); }
.log-avatar { width:36px; height:36px; border-radius:50%; }
.log-info { flex:1; min-width:0; }
.log-user { font-weight:600; }
.log-action,.log-guild,.log-meta { font-size:.8rem; color:var(--text-secondary); }
.log-meta { text-align:right; }
.vote-dialog,.cl-dialog { background:var(--bg-elevated); border-color:var(--border-hover); border-radius:16px; box-shadow:var(--shadow-elevated); animation:reveal .15s ease; }
.vote-dialog::backdrop,.cl-dialog::backdrop { background:#040914b8; backdrop-filter:blur(4px); }
.vote-badge { color:var(--warning); background:#e8ba730a; border-color:#e8ba7340; }
#notify-container { position:fixed; top:90px; right:24px; width:min(390px,calc(100vw - 32px)); display:flex; flex-direction:column; gap:10px; z-index:2000; }
.notify { display:flex; gap:12px; padding:16px; background:var(--bg-elevated); border:1px solid var(--border-hover); border-radius:12px; box-shadow:var(--shadow-elevated); opacity:0; transform:translateY(-5px); transition:opacity .15s,transform .15s; }
.notify.show { opacity:1; transform:none; }.notify.hide { opacity:0; }
.notify-icon { width:24px; height:24px; flex-shrink:0; }
.notify svg .stroke { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.notify.success .stroke { stroke:var(--success); }.notify.error .stroke { stroke:var(--danger); }.notify.warn .stroke { stroke:var(--warning); }.notify.info .stroke { stroke:var(--info); }
.notify-title { margin:0; font-size:.75rem; }.notify-text { margin:4px 0 0; color:var(--text-secondary); font-size:.84rem; }
.placeholder { min-height:140px; border:1px solid var(--border-default); border-radius:12px; background:var(--bg-surface); padding:24px; }
.skeleton-line,.skeleton-logo { height:12px; border-radius:6px; background:#22344d; margin-bottom:12px; animation:skeleton 1.5s ease-in-out infinite alternate; }
.skeleton-line.short { width:60%; }.skeleton-logo { height:36px; width:36px; }
.guild-avatar-loader { position:absolute; inset:12px; border:2px solid var(--border-default); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes skeleton { to { opacity:.4; } } @keyframes reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.mobile-menu-button,.drawer-close,.drawer-backdrop { display:none; }
@media(max-width:1200px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.team-grid,.quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }.home-secondary { grid-template-columns:1fr; }.home-system { margin-top:0; }.home-hero { grid-template-columns:minmax(0,1fr) 160px; padding:30px; }.home-hero-art img { width:120px; }.shield-orbit { width:170px; height:170px; }.stats { gap:12px; }.stat-card { padding:18px; gap:10px; } }
@media(min-width:701px) and (max-width:1000px) { :root { --sidebar-width:84px; }.sidebar { padding:24px 12px; }.brand { padding:0 10px 20px; }.brand-text,.brand-subline,.nav-link>span,.sidebar-footer .btn>span,.credits { display:none; }.nav-link,.sidebar-footer .btn { justify-content:center; padding:12px; }.sidebar-footer .btn { font-size:.7rem; overflow-wrap:anywhere; }.nav-submenu { margin-left:4px; padding-left:4px; }.home-hero { padding:24px; }.topbar { padding:16px 24px; }.view { padding:24px; } }
@media(max-width:700px) {
  :root { --sidebar-width:0px; }
  .sidebar { width:min(300px,85vw); transform:translateX(-100%); visibility:hidden; z-index:1600; transition:transform .18s,visibility .18s; }
  .drawer-open .sidebar { transform:none; visibility:visible; }.drawer-open { overflow:hidden; }
  .drawer-backdrop { position:fixed; inset:0; border:0; background:#020712b8; backdrop-filter:blur(3px); z-index:1500; width:100%; height:100%; }
  .drawer-open .drawer-backdrop { display:block; }.drawer-close { display:inline-flex; position:absolute; right:12px; top:12px; padding:6px; min-height:28px; background:transparent; border:0; color:var(--text-secondary); }
  .mobile-menu-button { display:inline-flex; padding:8px; min-width:38px; flex-shrink:0; }.mobile-menu-button svg { width:20px; height:20px; }
  .main { margin-left:0; }.topbar { padding:12px 16px; gap:12px; flex-wrap:wrap; min-height:68px; }
  .topbar .search { order:3; width:100%; }.userbox-container { gap:8px; }.user-name { max-width:145px; font-size:.8rem; }.neo-userbox { padding-left:10px; }
  .view,#view-status { padding:20px 16px; }.hero { margin-bottom:20px; }
  .home-hero { grid-template-columns:1fr; padding:26px 22px; }.home-hero-art { display:none; }.home-hero h1 { font-size:2rem; }
  .stats,.grid,.features,#featuresList.features,.quick-actions,.team-grid,.top-guilds { grid-template-columns:minmax(0,1fr); }
  .stat-card { padding:20px; }.stat-card h2 { font-size:1.7rem; }.section-heading { gap:8px; }
  .home-secondary { gap:20px; }.card { padding:20px; }.guild { padding:20px; }
  .guildbar { grid-template-columns:40px minmax(0,1fr); gap:12px; }.guildbar .mobile-menu-button { grid-row:1; grid-column:1; }.guildbar #userCard { grid-row:1; grid-column:2; justify-self:end; }.guildbar .guild-info { grid-row:2; grid-column:1/-1; }.guildbar .security-overview { grid-row:3; grid-column:1/-1; }
  .log-entry { flex-wrap:wrap; }.log-meta { flex-basis:100%; text-align:left; padding-left:50px; }
  #notify-container { right:16px; top:80px; }.status-header { gap:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }

/* ===== About: horizontal project history (scoped; team styles stay unchanged) ===== */
.cs-roadmap {
  min-width:0; max-width:100%; padding:28px;
  background:radial-gradient(ellipse at 95% 0,rgba(0,129,255,.12),transparent 55%),var(--cs-elev-1);
  border-color:rgba(80,153,255,.22);
}
.cs-roadmap-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.cs-roadmap-eyebrow { display:flex; flex-wrap:wrap; gap:16px; margin:0 0 12px; color:var(--cs-primary-2); font-size:.67rem; font-weight:700; letter-spacing:.16em; }
.cs-roadmap-eyebrow span { color:var(--cs-text-muted); letter-spacing:.08em; }
.cs-roadmap h2 { margin:0 0 10px; font-size:clamp(1.5rem,2.6vw,2.25rem); letter-spacing:-.04em; line-height:1.2; }
.cs-roadmap h2 span { color:#72baff; }
.cs-roadmap-intro { max-width:620px; margin:0; color:var(--cs-text-muted); font-size:.9rem; line-height:1.65; }
.cs-roadmap-controls { display:flex; flex-shrink:0; gap:8px; }
.cs-roadmap-controls[hidden] { display:none; }
.cs-roadmap-controls button { width:40px; height:40px; border-radius:50%; border:1px solid var(--cs-border); color:var(--cs-text); background:rgba(0,129,255,.08); font-size:1.2rem; cursor:pointer; transition:background .2s,border-color .2s; }
.cs-roadmap-controls button:hover:not(:disabled) { background:rgba(0,129,255,.2); border-color:var(--cs-primary); }
.cs-roadmap-controls button:disabled { opacity:.3; cursor:default; }
.cs-roadmap-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:4px; scrollbar-width:thin; scrollbar-color:#0081ff #101b2c; border-radius:8px; }
.cs-roadmap-scroll::-webkit-scrollbar { height:6px; }
.cs-roadmap-scroll::-webkit-scrollbar-track { background:#101b2c; border-radius:6px; }
.cs-roadmap-scroll::-webkit-scrollbar-thumb { background:linear-gradient(90deg,var(--cs-primary),var(--cs-primary-2)); border-radius:6px; }
.cs-roadmap-track { position:relative; isolation:isolate; display:flex; width:max-content; gap:20px; margin:0; padding:8px 4px 18px; list-style:none; }
.cs-roadmap-track::before { content:""; position:absolute; top:15px; left:12px; right:calc(304px - 12px); height:2px; background:linear-gradient(90deg,#237edc,var(--cs-primary-2)); box-shadow:0 0 10px rgba(0,129,255,.2); z-index:-1; }
.cs-roadmap-stop { position:relative; width:304px; flex:0 0 auto; scroll-snap-align:start; }
.cs-roadmap-node { position:relative; display:block; width:16px; height:16px; margin:0 0 24px; background:#102b49; border:3px solid #499bea; border-radius:50%; box-shadow:0 0 0 5px rgba(0,129,255,.07); }
.cs-roadmap-node::after { content:""; position:absolute; top:13px; left:4px; height:24px; width:2px; background:linear-gradient(#499bea,rgba(73,155,234,.12)); }
.cs-roadmap-milestone { min-height:286px; height:calc(100% - 40px); padding:22px; border:1px solid var(--cs-border); border-radius:var(--radius-sm); background:linear-gradient(145deg,#111d30,#0d1524); box-shadow:0 8px 18px rgba(0,0,0,.12); transition:transform .25s,border-color .25s,box-shadow .25s; }
.cs-roadmap-date { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#78bbff; font-size:.71rem; font-weight:600; }
.cs-roadmap-number { color:#657b98; font-size:.6rem; letter-spacing:.08em; white-space:nowrap; }
.cs-roadmap-milestone h3 { margin:22px 0 12px; color:var(--cs-text); font-size:1.1rem; line-height:1.4; letter-spacing:-.02em; }
.cs-roadmap-milestone p { margin:0; color:var(--cs-text-muted); font-size:.83rem; line-height:1.7; }
.cs-roadmap-milestone:hover { transform:translateY(-3px); border-color:rgba(0,129,255,.55); box-shadow:0 8px 24px rgba(0,129,255,.1); }
.cs-roadmap-current .cs-roadmap-node { background:#b4efff; border-color:var(--cs-primary-2); box-shadow:0 0 0 5px rgba(0,212,255,.1),0 0 15px rgba(0,129,255,.3); }
.cs-roadmap-current .cs-roadmap-milestone { border-color:rgba(0,157,255,.7); background:linear-gradient(145deg,#132b46,#0d192a); }
.cs-roadmap-badge { border:1px solid rgba(0,212,255,.3); border-radius:5px; padding:4px 6px; color:#85e6ff; background:rgba(0,212,255,.07); font-size:.55rem; letter-spacing:.1em; }
.cs-roadmap-hint { margin:14px 0 0; color:var(--cs-text-muted); font-size:.72rem; }
.cs-roadmap-hint span { margin-left:8px; color:var(--cs-primary-2); }
.cs-roadmap-scroll:focus-visible,.cs-roadmap-controls button:focus-visible { outline:2px solid var(--cs-primary-2); outline-offset:3px; }
.cs-roadmap-reveal .cs-roadmap-milestone { opacity:0; transform:translateY(10px); transition:opacity .4s,transform .4s,border-color .25s,box-shadow .25s; }
.cs-roadmap-reveal.is-visible .cs-roadmap-milestone { opacity:1; transform:translateY(0); }
.cs-roadmap-reveal.is-visible .cs-roadmap-milestone:hover { transform:translateY(-3px); }
@media (max-width:640px) {
  .cs-roadmap { padding:18px 12px; }
  .cs-roadmap-header { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:24px; }
  .cs-roadmap-stop { width:clamp(190px,calc(100vw - 158px),280px); }
  .cs-roadmap-track::before { right:calc(clamp(190px,calc(100vw - 158px),280px) - 12px); }
  .cs-roadmap-milestone { padding:16px; min-height:300px; }
  .cs-roadmap-date { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  .cs-roadmap *, .cs-roadmap *::before, .cs-roadmap *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .cs-roadmap .cs-roadmap-milestone { opacity:1; transform:none!important; }
}

/* ===== Footer ===== */
.credits{margin-top:24px;text-align:center;font-size:.85rem;color:var(--cs-text-muted);border-top:1px solid rgba(255,255,255,.06);padding-top:12px}

.standalone-page { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.standalone-card { max-width:600px; width:100%; padding:40px; }
.standalone-card .eyebrow { margin-top:28px; }.standalone-card h1 { margin:16px 0; }.standalone-card .text-muted { line-height:1.8; }
.standalone-footer { color:var(--text-muted); font-size:.8rem; margin-top:24px; }
@media(max-width:700px){.standalone-card {padding:24px;}}

/* Keep the mobile navigation anchor at the leading edge on every view. */
@media(max-width:700px) { .topbar>.mobile-menu-button { margin-right:auto; } }

.topbar-label { color:var(--text-secondary); font-size:.85rem; }
@media(max-width:700px) { .topbar-label { display:none; } }

/* Reference-driven control center: wide hero, command panels and layered navy. */
:root { --bg-base:#050b16; --sidebar-width:264px; --text-secondary:#b0c3dd; --text-muted:#91a9c5; }
body { background:radial-gradient(ellipse at 100% 0,#0b38614a,transparent 48%),radial-gradient(ellipse at 15% 100%,#007ea01a,transparent 48%),var(--bg-base); }
.sidebar { padding:22px 16px 16px; gap:22px; background:radial-gradient(ellipse at 50% 0,#07508038,transparent 30%),radial-gradient(ellipse at 0 76%,#126db42b,transparent 35%),#071120; border-right-color:#16334c; box-shadow:8px 0 40px #0002; }
.brand { flex-direction:column; flex-wrap:nowrap; gap:0; padding:0 0 24px; }
.brand-logo { width:88px; height:88px; filter:drop-shadow(0 0 15px #00a9ff55); }
.brand-text { font-size:28px; letter-spacing:.07em; line-height:1.3; }
.brand-text span { color:#00baff; }
.brand-subline { flex-basis:auto; padding:0; margin:4px 0 0; font-size:9px; letter-spacing:.19em; }
.nav { gap:8px; }.nav-link { min-height:47px; font-size:14px; gap:15px; }.nav-link .icon { width:22px; height:22px; }
.nav-link.active { background:linear-gradient(100deg,#0873b750,#0d2846aa); border-color:#009fd1; box-shadow:inset 3px 0 #08d9ff,inset 0 0 18px #019fff20,0 0 12px #00a8ef19; }
.sidebar-footer { gap:12px; }.sidebar-footer .join-discord { min-height:64px; background:linear-gradient(125deg,#112c46,#0a1729); border-color:#203d58; padding:14px; }.join-discord .icon { color:#4996ff; width:25px; height:25px; }
.sidebar-account { display:flex; align-items:center; gap:12px; padding:15px 8px; border-top:1px solid #20374e; }.sidebar-account img { width:42px; height:42px; border:1px solid #247fa6; border-radius:50%; }.sidebar-account strong { display:block; overflow-wrap:anywhere; font-size:13px; }.sidebar-account small { color:var(--text-muted); font-size:11px; }
.credits { text-align:center; padding:8px 0 0; font-size:11px; }.credits p { margin:8px 0; }
.topbar { min-height:86px; background:linear-gradient(100deg,#071321f5,#0c1e35f5); border-color:#17334d; }.search { width:min(470px,100%); }.topbar .search input { min-height:46px; border-color:#213e5f; background:#0b1628; padding-left:42px; padding-right:64px; }
.search-shortcut { position:absolute; right:12px; top:50%; transform:translateY(-50%); border:1px solid #294463; border-radius:5px; padding:2px 6px; color:var(--text-muted); font-size:11px; pointer-events:none; }
.neo-userbox { padding:8px 14px; border:1px solid #203a57; border-radius:10px; background:#0b172a; }.avatar { width:38px; height:38px; }.user-name { font-size:13px; }
#view-home { max-width:1600px; padding:0 26px 32px; }
.home-hero { min-height:320px; grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr); position:relative; isolation:isolate; padding:34px 8px; margin-bottom:12px; border:0; border-radius:0; background:radial-gradient(ellipse at 76% 44%,#009cdf38,transparent 43%),radial-gradient(ellipse at 92% 0,#0c3d645c,transparent 60%); }
.home-hero::before { content:''; position:absolute; inset:0 -26px; z-index:-2; background:linear-gradient(100deg,#050d18 28%,transparent 80%),repeating-linear-gradient(120deg,transparent 0 90px,#35bdff07 91px 92px),radial-gradient(ellipse at 73% 45%,#0270bd3b,transparent 55%); }
.home-hero::after { content:''; position:absolute; inset:12% -26px 0 37%; z-index:-1; background:linear-gradient(135deg,#16436a,#071525 45%,#134368 46%,#08101e 70%); clip-path:polygon(0 100%,9% 58%,18% 73%,26% 27%,34% 45%,43% 6%,52% 51%,61% 62%,70% 29%,78% 67%,86% 41%,100% 82%,100% 100%); opacity:.7; }
.home-hero-copy { z-index:2; }.home-hero .eyebrow { display:none; }.home-hero h1 { font-size:clamp(34px,3.1vw,48px); line-height:1.15; letter-spacing:-.035em; margin:0 0 18px; }.home-hero h1 span { color:#04aeef; }.home-hero p { font-size:15px; line-height:1.65; max-width:630px; }.hero-actions { margin-top:24px; gap:16px; }.hero-actions .btn { min-height:46px; padding:12px 24px; min-width:155px; }
.btn-primary { background:linear-gradient(110deg,#00a9ec,#0678f5); border-color:#00abf1; box-shadow:inset 0 1px #77d7ff44,0 5px 20px #007dc319; }
.home-hero-art { display:flex; min-height:245px; justify-content:center; gap:0; }.home-hero-art img { width:250px; height:250px; filter:drop-shadow(0 0 28px #009eff66); }.home-hero-art span { position:absolute; right:0; bottom:0; text-align:right; font-size:9px; line-height:1.8; letter-spacing:.18em; color:#b7e7ff; }.home-hero-art b { color:#24bdff; font-weight:500; }.shield-orbit { width:290px; height:290px; top:50%; left:50%; transform:translate(-50%,-50%); border-color:#1db9ff18; background:radial-gradient(circle,#06bfff1a,transparent 67%); }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.stats:has(#homeAvailabilityCard:not([hidden])) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat-card { align-items:center; padding:22px 18px; min-height:116px; border-color:#1d3a56; border-radius:9px; background:radial-gradient(ellipse at 100% 100%,#13507926,transparent 75%),linear-gradient(130deg,#101e31,#091321); box-shadow:inset 0 1px #91d5ff08,0 8px 25px #0002; gap:18px; transition:border-color .2s,box-shadow .2s; }.stat-card:hover { border-color:#237eaf; box-shadow:0 0 20px #008bd414; }.stat-card[hidden] { display:none; }
.metric-icon { width:52px; height:56px; color:#00baff; border-color:#284c70; background:linear-gradient(145deg,#122f4d,#0e1b30); box-shadow:inset 0 0 18px #178af513; }.metric-icon svg { width:26px; height:26px; }.stat-card>div { display:flex; flex-direction:column; min-width:0; }.stat-card h2 { order:-1; font-size:30px; margin:0 0 3px; line-height:1.3; }.stat-card p { font-size:13px; }.stat-card small { font-size:10px; margin-top:5px; }#uptime { font-size:clamp(17px,1.35vw,23px); }
#homeStatsError:empty { display:none; }.home-command-layout { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(290px,1fr); gap:20px; margin-top:22px; align-items:start; }.home-primary-column,.home-secondary-column { display:grid; gap:18px; min-width:0; }.command-panel { padding:20px; border:1px solid #19334a; border-radius:10px; background:var(--surface-panel); box-shadow:var(--panel-shadow); min-width:0; }.command-panel .section-heading { margin:0 0 20px; }.section-heading h2 { font-size:18px; }.section-heading p { margin:4px 0 0; color:var(--text-secondary); font-size:13px; }
.quick-actions { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.quick-actions>a { padding:18px 14px; border-radius:8px; background:radial-gradient(ellipse at 15% 0,#084f7325,transparent 80%),#0b1727; min-height:150px; border-color:#1b354e; }.action-icon { display:block; color:#00b5ef; margin-bottom:14px; }.action-icon svg { width:28px; height:28px; filter:drop-shadow(0 0 8px #009dff55); }.quick-actions strong { font-size:13px; margin:0; }.quick-actions p { font-size:12px; line-height:1.4; margin-top:8px; color:#a2b8d3; }
.server-table-head { display:grid; grid-template-columns:1fr 110px; color:#7fadd1; font-size:10px; padding:12px 14px; border-bottom:1px solid #1a354e; background:#0b1728; }.top-guilds { display:block; }.guild-card { display:grid; grid-template-columns:minmax(0,1fr) 110px; padding:14px; border:0; border-bottom:1px solid #182e44; border-radius:0; box-shadow:none; background:transparent; }.guild-card:hover { background:#122a4144; }.server-identity { display:flex; gap:13px; align-items:center; min-width:0; }.guild-card img { width:34px; height:34px; border-radius:9px; flex-shrink:0; }.guild-card h4 { font-size:13px; font-weight:500; }.server-members { font-size:13px; font-variant-numeric:tabular-nums; }.overview-note { margin:16px 0 0; font-size:11px; color:var(--text-muted); }
.home-system { display:flex; gap:16px; align-items:center; margin:0; padding:20px; }.home-system h2 { font-size:12px; margin:0 0 5px; font-weight:500; }.home-system p { font-size:16px; font-weight:600; margin:0 0 7px; color:var(--text-secondary); }.home-system a { font-size:12px; color:#9cbbd8; }.status-beacon { width:18px; height:18px; flex-shrink:0; background:#8494a9; border-radius:50%; box-shadow:0 0 0 12px #8392a509; }.home-system[data-status=operational] .status-beacon { background:#32e7b4; box-shadow:0 0 20px #23e4b866,0 0 0 12px #23e4b809; }.home-system[data-status=operational] p { color:#41e8be; }.home-system[data-status=degraded] .status-beacon,.home-system[data-status=partial_outage] .status-beacon { background:var(--warning); }.home-system[data-status=major_outage] .status-beacon { background:var(--danger); }
.home-activity-row { padding:12px 0 12px 13px; border-left:2px solid #05afcf; border-bottom:1px solid #142c40; }.home-activity-row strong { font-size:12px; font-weight:500; display:block; }.home-activity-row small { display:block; font-size:10px; color:var(--text-muted); margin-top:5px; }.insight-link { display:block; margin-top:16px; color:#95c7e5; font-size:12px; }
.home-support { position:relative; overflow:hidden; padding-right:100px; background:radial-gradient(ellipse at 100% 60%,#0648995c,transparent 75%),linear-gradient(135deg,#0c2046,#071225); border-color:#234473; }.home-support h2 { font-size:17px; margin:8px 0; }.home-support p { font-size:12px; line-height:1.65; color:#a5c3e5; }.home-support .eyebrow { font-size:9px; color:#36c5ff; }.home-support .btn { font-size:12px; }.support-crown { position:absolute; right:7px; top:50%; transform:translateY(-50%) rotate(9deg); width:86px; height:95px; filter:drop-shadow(0 10px 18px #006aff50); }.home-motto { display:flex; gap:16px; align-items:center; padding:18px; border:1px solid #19334a; border-radius:10px; background:#091522; }.home-motto>span { color:#00a9ef; font-size:46px; line-height:1; }.home-motto p { font-size:11px; letter-spacing:.08em; margin:0; }.home-motto small { display:block; margin-top:8px; color:var(--text-muted); }
@media(min-width:1001px) and (max-width:1300px) { :root { --sidebar-width:240px; }.stats:has(#homeAvailabilityCard:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)); }.home-command-layout { grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr); }.quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }.home-hero { grid-template-columns:1.5fr 1fr; }.home-hero-art img { width:210px; height:210px; }.home-hero-art span { display:none; } }
@media(min-width:701px) and (max-width:1000px) { :root { --sidebar-width:84px; }.brand { padding:0 0 16px; }.brand-logo { width:48px; height:48px; }.sidebar-account { padding:10px 0; justify-content:center; }.sidebar-account>div { display:none; }.sidebar-footer .join-discord { padding:10px; }.home-hero { grid-template-columns:1.4fr 1fr; }.home-hero-art img { width:190px; height:190px; }.home-hero-art span { display:none; } }
@media(max-width:1000px) { .home-command-layout { grid-template-columns:1fr; }.home-secondary-column { grid-template-columns:repeat(2,minmax(0,1fr)); }.stats,.stats:has(#homeAvailabilityCard:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)); }.quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { :root { --sidebar-width:0px; }.sidebar { gap:16px; }.brand-logo { width:70px; height:70px; }.brand { padding-bottom:16px; }.brand-text { font-size:25px; }.nav { gap:4px; }.nav-link { min-height:44px; }.topbar { min-height:70px; }.search-shortcut { display:none; }.topbar .search input { padding-right:12px; }.neo-userbox { padding:6px 8px; }#view-home { padding:0 16px 24px; }.home-hero { grid-template-columns:1fr; padding:28px 0 12px; gap:12px; }.home-hero h1 { font-size:34px; }.home-hero p { font-size:14px; }.home-hero-art { display:flex; min-height:190px; }.home-hero-art img { width:190px; height:190px; }.home-hero-art span { display:none; }.shield-orbit { width:205px; height:205px; }.home-hero::after { inset:40% -16px 0; }.hero-actions { gap:10px; }.hero-actions .btn { min-width:0; padding:10px 16px; }.stats,.stats:has(#homeAvailabilityCard:not([hidden])) { grid-template-columns:1fr; }.stat-card { min-height:105px; padding:18px 20px; }.stat-card h2 { font-size:28px; }#uptime { font-size:23px; }.home-command-layout { margin-top:20px; }.home-secondary-column { grid-template-columns:1fr; }.command-panel { padding:17px; }.quick-actions { gap:10px; }.quick-actions>a { padding:16px 12px; }.server-table-head,.guild-card { grid-template-columns:minmax(0,1fr) 75px; padding-left:0; padding-right:0; }.server-members { text-align:right; }.server-table-head span:last-child { text-align:right; }.server-overview .section-heading .btn { padding:7px 10px; font-size:11px; }.home-support { padding-right:105px; } }

.sidebar-account[hidden] { display:none; }

/* Shared SHADO5 components, derived from the accepted Home surfaces. */
:root {
  --surface-panel:linear-gradient(120deg,#0b1929eb,#081320f5);
  --surface-module:linear-gradient(130deg,#101e31,#091321);
  --surface-field:#0b1628; --surface-overlay:#0d1e32;
  --border-panel:#19334a; --border-control:#213e5f; --border-highlight:#237eaf;
  --panel-radius:10px; --panel-shadow:inset 0 1px #bddfff05,0 10px 24px #0002;
  --page-gap:24px; --control-height:44px;
}
.surface-card,.guild,.guild-section,.cl-card,.status-service,.status-availability,.status-incidents,.admin-card,.logs,.team-card,.standalone-card {
  background:var(--surface-panel); border:1px solid var(--border-panel); border-radius:var(--panel-radius); box-shadow:var(--panel-shadow);
}
.view:not(#view-home) { max-width:1600px; padding:28px 26px 40px; }
.page-header { position:relative; margin:0 0 26px; padding:28px 30px; border:1px solid var(--border-panel); border-radius:var(--panel-radius); background:radial-gradient(ellipse at 100% 0,#087aaf24,transparent 65%),var(--surface-panel); }
.page-header h1 { font-size:clamp(30px,3vw,40px); margin:8px 0 12px; }.page-header p { color:var(--text-secondary); margin:0; line-height:1.7; font-size:14px; }.page-header .eyebrow { color:var(--accent-hover); }
.section-header { margin:24px 0 18px; }.section-header h2 { font-size:20px; margin:0 0 6px; }.section-header p { font-size:13px; color:var(--text-secondary); margin:0; }
#dashboardIntro,.hero.page-header { min-height:150px; }
.guild { padding:24px; align-items:flex-start; background:radial-gradient(ellipse at 100% 0,#0e5b8125,transparent 75%),var(--surface-panel); }.guild:hover,.team-card:hover,.admin-card:hover,.status-service:hover,.cl-card:hover { border-color:var(--border-highlight); box-shadow:var(--panel-shadow),0 0 18px #008bd410; transform:none; }
.guild-avatar-wrap,.guild-avatar { width:56px; height:56px; }.guild-avatar { border:1px solid var(--border-control); border-radius:12px; }.guild-name { font-size:18px; margin:2px 0 8px; }.guild-meta { font-size:11px; }.guild-access { display:inline-block; font-size:11px; color:#73caff; margin-top:12px; padding:4px 8px; border:1px solid var(--border-control); border-radius:6px; background:#10395333; }.guild.disabled .guild-access { color:var(--text-muted); }.guild-member-count { color:var(--text-secondary); font-size:13px; }.guild-actions { margin-top:4px; }.guild-actions .btn { min-height:var(--control-height); }.no-admin { line-height:1.7; }
.guildbar { padding:18px; background:var(--surface-panel); border:1px solid var(--border-panel); border-radius:var(--panel-radius); box-shadow:var(--panel-shadow); gap:16px; }.guildbar .guild-icon { width:58px; height:58px; border:1px solid var(--border-control); }.guildbar .guild-text h2 { font-size:19px; }.guildbar .guild-text small { font-size:11px; }.guild-view .page-header { margin-bottom:22px; }
#featuresList { align-items:start; gap:20px; }#featuresList>.card { background:var(--surface-module); border-color:var(--border-panel); border-radius:var(--panel-radius); box-shadow:var(--panel-shadow); padding:24px; }#featuresList>.card:has(.switch input:checked) { border-color:var(--border-highlight); background:radial-gradient(ellipse at 0 0,#0086c619,transparent 75%),var(--surface-module); box-shadow:var(--panel-shadow),inset 2px 0 #059bd055; }
.module-heading { display:flex; gap:14px; align-items:flex-start; }.module-icon,.settings-icon { display:grid; place-items:center; width:44px; height:46px; flex-shrink:0; border:1px solid var(--border-control); border-radius:9px; color:#05b9f6; background:linear-gradient(145deg,#12334e,#0e1a2d); }.module-icon svg { width:25px; height:25px; }.module-copy { min-width:0; flex:1; }#featuresList strong { font-size:17px; }#featuresList small { font-size:12px; color:var(--text-secondary); line-height:1.65; }.module-heading .switch { margin-top:10px; }.module-copy .vote-badge { display:inline-flex; margin:6px 0 0; font-size:9px; vertical-align:middle; }.dropdown-content.open { padding-top:20px; }.option-label { display:block; margin:12px 0 7px; color:var(--text-secondary); font-size:12px; }
.guild-section { padding:24px; }.guild-section h3 { font-size:19px; margin-bottom:10px; }#accessTitle::before { content:'◇'; color:var(--accent); margin-right:10px; }.save-area { margin:24px 0; padding:18px 22px; display:flex; align-items:center; flex-wrap:wrap; gap:16px; border:1px solid var(--border-control); border-radius:var(--panel-radius); background:var(--surface-panel); }.save-area .btn { min-height:var(--control-height); }
.activity-row { position:relative; padding:18px 16px; margin:10px 0; border:1px solid var(--border-panel); border-left:2px solid #04a0c5; border-radius:8px; background:var(--surface-module); gap:15px; }.activity-row>div { min-width:0; }.activity-row p { font-size:14px; margin:0 0 7px; }.activity-row strong { font-size:12px; font-weight:500; color:var(--text-secondary); }.activity-row time { display:block; margin-top:4px; font-size:11px; }.activity-row img { width:36px; height:36px; border:1px solid var(--border-control); }
.feature-select-trigger,.role-trigger { min-height:var(--control-height); background:var(--surface-field); border-color:var(--border-control); border-radius:8px; }.feature-select-menu,.role-panel,.security-popover { background:var(--surface-overlay); border-color:var(--border-control); box-shadow:0 18px 45px #0008; }.feature-select-option,.role-choice { border-radius:6px; }.feature-select-option[aria-selected=true],.role-choice:has(input:checked) { background:#124c7044; }.security-pill { background:var(--surface-field); border-color:var(--border-control); border-radius:7px; padding:9px 11px; }.security-popover h3 { font-size:18px; }.security-popover li { padding:9px 0; border-bottom:1px solid var(--border-panel); }.security-ok { color:var(--success); }.security-warning { color:var(--warning); }.security-error { color:var(--danger); }
.cl-card { padding:26px; border-top:1px solid var(--border-control); }.cl-meta { padding-bottom:16px; border-bottom:1px solid var(--border-panel); }.cl-card h2 { font-size:24px; margin:18px 0 8px; }.cl-version,.cl-badge { background:#0b3b6266; border:1px solid var(--border-control); color:#6bcbff; }.cl-change-group { background:#09152666; padding:12px 15px; border-radius:0 6px 6px 0; }.cl-added { color:var(--success); }.cl-changed { color:var(--warning); }.cl-removed { color:var(--danger); }.cl-pager .btn,.cl-pager button,.pagination button,.activity-controls button { min-height:40px; border:1px solid var(--border-control); border-radius:8px; background:var(--surface-field); color:var(--text-primary); padding:9px 14px; }.cl-pager .cl-page-current { background:#0a57924d; border-color:var(--border-highlight); }
.status-summary { padding:28px; border:1px solid var(--border-control); border-radius:var(--panel-radius); background:radial-gradient(ellipse at 0 0,#02c5a316,transparent 65%),var(--surface-panel); box-shadow:var(--panel-shadow); }.status-summary h2 { font-size:26px; }.status-service { padding:24px; }.status-service h3 { font-size:17px; }.status-service-description { font-size:13px; line-height:1.7; }.status-service-icon { border-color:var(--border-control); background:var(--surface-field); }.status-availability { padding:24px; }.status-ranges { border-color:var(--border-control); background:var(--surface-field); }.status-ranges button[aria-pressed=true] { background:#0b4668; border-color:var(--border-highlight); }.status-bars { padding:5px; border:1px solid var(--border-panel); border-radius:7px; background:var(--surface-field); }.status-tooltip { background:var(--surface-overlay); border-color:var(--border-control); }
.cs-roadmap { background:var(--surface-panel); border-color:var(--border-panel); box-shadow:var(--panel-shadow); }.cs-roadmap-milestone { background:var(--surface-module); border-color:var(--border-control); }.team-card { padding:26px; }.team-avatar { width:64px; height:64px; border:1px solid var(--border-control); border-radius:14px; }.team-card h4 { font-size:17px; }.team-card .role { font-size:11px; }.team-card .desc { font-size:13px; }.team-title { font-size:24px; }
.admin-settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-card { padding:26px; position:relative; }.settings-icon { font-size:26px; margin-bottom:18px; }.admin-card h3 { font-size:21px; }.admin-card p { font-size:14px; }.admin-card:has(input:checked) { border-color:var(--border-highlight); }.toggle-container { border-top:1px solid var(--border-panel); padding-top:20px; }.toggle-label { color:var(--text-secondary); }.logs { background:var(--surface-panel); }.log-entry { padding:17px 12px; border-radius:7px; }.log-entry:nth-child(odd) { background:var(--surface-field); }.log-action { color:var(--text-primary); line-height:1.6; }.log-meta { font-size:11px; }
.cl-form input,.cl-form select,.cl-form textarea { background:var(--surface-field); border-color:var(--border-control); border-radius:8px; min-height:var(--control-height); }.cl-form label { color:var(--text-secondary); }.cl-editor-layout>div>h3 { font-size:20px; }.cl-dialog,.vote-dialog { padding:26px; background:var(--surface-overlay); border:1px solid var(--border-control); border-radius:18px; box-shadow:0 24px 80px #0009; }.cl-dialog h2,.vote-dialog h2 { margin:0 0 18px; font-size:24px; }.cl-dialog p,.vote-dialog p { color:var(--text-secondary); line-height:1.7; }.vote-actions,.cl-dialog .cl-actions { border-top:1px solid var(--border-panel); padding-top:18px; }.notify { background:var(--surface-overlay); border-color:var(--border-control); border-radius:12px; }.notify-title { font-size:11px; letter-spacing:.08em; }.notify-text { font-size:13px; }.standalone-card { background:radial-gradient(ellipse at 100% 0,#087aaf24,transparent 65%),var(--surface-panel); border-color:var(--border-control); }
.sidebar-footer .btn.active { border-color:#009fd1; background:linear-gradient(100deg,#0873b750,#0d2846aa); box-shadow:inset 3px 0 #08d9ff; color:var(--text-primary); }
@media(max-width:1100px) { .module-heading { flex-wrap:wrap; }.module-copy { flex-basis:calc(100% - 62px); }.module-heading>.switch { margin:0 0 0 auto; }.guildbar .guild-text h2 { font-size:17px; } }
@media(max-width:700px) { .view:not(#view-home) { padding:20px 16px 30px; }.page-header { padding:22px; }.page-header h1 { font-size:30px; }.page-header p { font-size:13px; }.guildbar { padding:12px; }.guildbar .guild-icon { width:46px; height:46px; }.guildbar .guild-text h2 { font-size:16px; }.guildbar .security-overview { justify-content:flex-start; }.security-pill { font-size:11px; padding:7px 9px; }#featuresList>.card,.guild-section { padding:20px; }.admin-settings-grid { grid-template-columns:1fr; }.module-copy .vote-badge { margin-left:0; }.cl-card,.admin-card,.status-service { padding:20px; }.cl-card h2 { font-size:21px; }.activity-row { padding:14px 10px; }.status-summary h2 { font-size:22px; }.save-area { padding:16px; }.cl-dialog,.vote-dialog { padding:22px; }.log-entry { flex-wrap:wrap; }.section-header h2 { font-size:19px; } }

/* Align module controls without leaving the toggle on a separate mobile row. */
#featuresList { align-items:stretch; }
.module-heading { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:12px; align-items:start; }
.module-heading>.switch { margin:10px 0 0; }
.module-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.module-title-row>strong,.module-title-row>.vote-badge { flex:0 0 auto; }
.module-title-row>.vote-badge { white-space:nowrap; }
.module-copy>small { display:block; }
.module-copy .vote-badge { margin:0; }
.module-copy>br { display:none; }
.setting-state { position:absolute; right:24px; top:28px; font-size:11px; color:var(--text-muted); border:1px solid var(--border-control); border-radius:6px; padding:4px 8px; }
.setting-state::after { content:'Loading…'; }
.admin-card[data-loaded=true] .setting-state::after { content:'Disabled'; }
.admin-card[data-loaded=true]:has(input:checked) .setting-state { color:var(--success); }
.admin-card[data-loaded=true]:has(input:checked) .setting-state::after { content:'Enabled'; }

body { min-height:100dvh; }

.logout-icon { width:20px; height:20px; flex-shrink:0; }
#voteLink { background:linear-gradient(110deg,#00a9ec,#0678f5); border-color:#00abf1; color:var(--text-primary); }

/* The custom rail is an overlay: remove the native page scrollbar's layout space too.
   Native scrolling and nested scrollbars (including the roadmap) remain intact. */
html.page-scrollbar-enabled { scrollbar-width:none; }
html.page-scrollbar-enabled::-webkit-scrollbar { width:0; height:0; display:none; }
html.page-scrollbar-enabled::-webkit-scrollbar-track,
html.page-scrollbar-enabled::-webkit-scrollbar-thumb { background:transparent; }
html.page-scrollbar-enabled::-webkit-scrollbar-button { display:none; width:0; height:0; }
.page-scrollbar { position:fixed; z-index:1450; top:4px; bottom:4px; right:1px; width:12px; opacity:0; transition:opacity 280ms ease; outline:none; touch-action:none; background:transparent; }
.page-scrollbar[hidden] { display:none; }
.page-scrollbar.is-visible,.page-scrollbar:focus-visible { opacity:1; transition-duration:160ms; }
.page-scrollbar-thumb { position:absolute; top:0; right:2px; width:5px; min-height:0; border-radius:999px; background:linear-gradient(180deg,#27c8ff,#0081ff); box-shadow:0 0 5px #0081ff55; cursor:grab; }
.page-scrollbar:hover .page-scrollbar-thumb,.page-scrollbar.is-dragging .page-scrollbar-thumb { background:linear-gradient(180deg,#79e4ff,#199fff); box-shadow:0 0 7px #00bfff66; }
.page-scrollbar.is-dragging .page-scrollbar-thumb { cursor:grabbing; }
.page-scrollbar:focus-visible .page-scrollbar-thumb { outline:1px solid #a4e9ff; outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .page-scrollbar { transition:none; } }

/* Keep the server action gradient stable instead of switching to the legacy
   flat .btn-primary:hover background. Animate its cyan highlight and small lift. */
.guild-actions .config-btn {
  background:linear-gradient(110deg,#00a9ec,#0678f5);
  box-shadow:inset 0 0 0 100px #ffffff00,inset 0 1px #77d7ff44,0 5px 20px #007dc319;
  transform:translateY(0);
  transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}
.guild-actions .config-btn:hover {
  border-color:#87e6ff;
  box-shadow:inset 0 0 0 100px #a3edff40,inset 0 1px #b7f3ff88,0 8px 24px #00b7ff55;
  transform:translateY(-2px);
}
.guild-actions .config-btn:focus-visible { outline:2px solid #73d7ff; outline-offset:3px; }
.guild-actions .config-btn:active {
  box-shadow:inset 0 0 0 100px #001b3310,inset 0 1px #77d7ff44,0 5px 20px #007dc319;
  transform:translateY(0);
}

/* Access labels remain on one line; preserve space for the full admin label. */
.guild-access { white-space:nowrap; }
.guild-access[hidden] { display:none; }
.join-discord .icon { flex-shrink:0; }