:root {
  --bg: #101319;
  --surface: #171C24;
  --surface-alt: #202733;
  --border: #2B3442;
  --border-strong: #465369;
  --text: #EDF2F8;
  --text-muted: #A4B0C1;
  --accent: #5B8DEF;
  --accent-strong: #A3C0FC;
  --success: #70C8A3;
  --premium: #D8AB59;
  --radius: 10px;
}
body { background: var(--bg); color: var(--text); }
a { text-underline-offset: 4px; }
.site-nav { background: #121720; border-bottom: 1px solid var(--border); padding: 18px max(24px, calc((100vw - 1120px) / 2)); gap: 20px; }
.site-nav .wordmark { font-size: 25px; }
.wordmark span { color: var(--accent-strong); }
.site-nav-links { gap: 22px; }
.site-nav-links a { font-size: 13px; }
.site-nav-links a[aria-current="page"] { border-bottom: 2px solid var(--accent); padding-bottom: 5px; }
.btn-primary, .main .btn-save { background: var(--accent); color: #0C172C; border: 1px solid var(--accent); border-radius: 8px; font-weight: 700; box-shadow: none; }
.btn-primary:hover, .main .btn-save:hover { background: #79A4F8; border-color: #79A4F8; }
.btn-outline { border-color: var(--border-strong); border-radius: 8px; background: var(--surface); }
.btn-outline:hover { background: var(--surface-alt); border-color: #6A83A5; }
.landing-hero { grid-template-columns: 1.05fr 1fr; gap: 76px; padding: 84px 24px 88px; min-height: 620px; }
.hero-copy { gap: 26px; }
.hero-copy h1 { font-size: clamp(40px, 4.5vw, 61px); font-weight: 680; line-height: 1.08; letter-spacing: -.05em; }
.hero-kicker { color: #AAC0E1; letter-spacing: .14em; }
.hero-copy .hero-tagline { font-size: 17px; }
.product-preview { border-radius: 14px; border-color: #40506B; background: #171D28; box-shadow: 0 24px 60px #00000033; }
.preview-top { background: #1D2533; padding: 18px 24px; }
.preview-body { padding: 26px; }
.preview-row { padding: 19px 0; }
.preview-state { background: #233D34; color: #A6DBC4; border: 1px solid #365B4B; }
.preview-foot { background: #151B25; padding: 16px 26px; }
.site-trust-row { display: flex; justify-content: space-between; gap: 24px; max-width: 1072px; margin: 0 auto; padding: 0 24px 32px; font-size: 12px; color: var(--text-muted); }
.site-trust-row span { display: flex; align-items: center; gap: 8px; }
.site-trust-row span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-strong); }
.landing-section { padding: 76px 24px; }
.landing-section-head { margin-bottom: 32px; }
.landing-section-head h2 { font-size: 32px; letter-spacing: -.035em; }
.spotlight-section { background: #151B25; border-block: 1px solid var(--border); }
.spotlight-note { background: #1C2430; border-color: #3D4B60; padding: 30px; }
.spotlight-detail { border-color: var(--border); }
.module-grid { gap: 16px; border: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-card, .module-card:nth-child(even) { padding: 26px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.module-card:hover { background: #1C2430; border-color: var(--border-strong); }
.module-card .nav-icon { color: #A3C0FC; background: #26334B; width: 34px; height: 34px; border-radius: 8px; margin-bottom: 18px; }
.module-card h3 { font-size: 16px; }
.module-card p { font-size: 13px; line-height: 1.7; }
.steps-row { gap: 20px; }
.step-item { background: var(--surface); padding: 58px 24px 24px; border: 1px solid var(--border); border-radius: 10px; }
.steps-row::before { display: none; }
.step-number { top: 20px; left: 24px; width: 25px; height: 25px; border-radius: 6px; font-size: 11px; background: #26334B; border: none; }
.plan-card { padding: 30px; border-radius: 12px; background: var(--surface); }
.plan-card.plan-premium { background: #1F211F; border-color: #796848; }
.plan-name { font-size: 25px; }
.plan-desc { line-height: 1.65; }
.premium-hero { padding-top: 72px; padding-bottom: 64px; }
.premium-hero h1 { letter-spacing: -.045em; }
.premium-kicker { background: #28271F !important; }
.reason-block { gap: 24px; padding: 32px 0; }
.reason-icon { background: #26334B; border-color: var(--border); color: var(--accent-strong); }
.reason-block h3 { font-size: 19px; }
.cost-card, .feature-reason-row { background: var(--surface); padding: 20px; border-radius: 9px; }
.status-summary, .status-card { background: var(--surface); border: 1px solid var(--border); }
.status-card { border-radius: 12px; padding: 24px; }
.status-card-icon { background: #26334B; color: var(--accent-strong); }
.status-value { font-variant-numeric: tabular-nums; }
.ss-header { background: #141A24; padding: 22px 36px; border-bottom: 1px solid var(--border); }
.ss-inner { max-width: 1140px; padding-top: 48px; }
.ss-title { font-size: 38px; letter-spacing: -.04em; }
.ss-toolbar { margin-bottom: 34px; }
.server-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.server-card { padding: 22px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.server-card:hover { background: #202938; border-color: #52698C; }
.server-icon { border-radius: 12px; }
.server-card-name { font-size: 15px; }
.server-card-status { font-size: 12px; margin-top: 5px; }
.module-nav { width: 292px; background: #141A24; border-right: 1px solid var(--border); }
.module-nav-header { padding: 22px 20px; }
.module-nav-body { padding-inline: 18px; }
.module-nav-group-label { margin-top: 16px; color: #8898AF; }
.module-nav-item { font-size: 13px; min-height: 40px; border-radius: 7px; color: #B8C4D6; }
.module-nav-item.active { color: #D9E6FF; background: #263956; }
.module-nav-item.active::before { background: var(--accent); }
.module-nav-item:hover { background: #202B3D; }
.module-nav-item .nav-icon { color: #90A8CE; }
.module-search input, .ss-search input { background: #111722; border-color: #35435B; border-radius: 8px; }
.main { padding: 30px 44px 90px; background: #10151E; }
.workspace-header { max-width: 920px; margin-bottom: 30px; color: #91A2BA; }
.module-panel { max-width: 920px; }
.module-panel > h2 { font-size: 31px; letter-spacing: -.04em; }
.module-panel > h2 + .hint { padding-bottom: 24px; margin-bottom: 28px; }
.module-panel h3 { font-size: 17px; color: #D4E0F4; }
.main .field { max-width: 760px; margin-bottom: 22px; }
.main .field > label { display: block; color: #B9C9E0; font-size: 12px; margin-bottom: 8px; }
.main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .main select, .main textarea { background-color: #171F2B; border: 1px solid #3B4B63; border-radius: 8px; color: var(--text); min-height: 44px; padding: 11px 14px; }
.main select { padding-right: 42px; }
.main input:focus, .main select:focus, .main textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #5B8DEF22; }
.main input::placeholder, .main textarea::placeholder { color: #7D91AB; }
.main .field-checkbox label { background: var(--surface); border-color: var(--border); border-radius: 8px; }
.main .command-item, .main .warn-item, .main .info-card { border-color: var(--border); background: var(--surface); border-radius: 9px; }
.main .btn-save { min-width: 172px; height: 44px; }
.save-status { overflow-wrap: anywhere; }
.highlight-summary { background: #1C2936; border-color: #405978; }
.highlight-preview { background: #1A2330; border-left-color: var(--accent); }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.overview-tile { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 20px; }
.overview-tile strong { display: block; font-size: 24px; font-weight: 650; color: #D7E6FF; margin-bottom: 5px; }
.overview-tile span { font-size: 11px; color: var(--text-muted); }
.overview-shortcuts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.overview-shortcuts button { padding: 10px 14px; background: #202B3B; border: 1px solid #384A65; color: #CFDEFA; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px; }
.toast-stack { position: fixed; bottom: 24px; right: 24px; max-width: min(380px, calc(100vw - 32px)); z-index: 1000; }
.ui-toast { background: #202D40; color: #EEF4FF; border: 1px solid #526B90; box-shadow: 0 12px 30px #0006; border-radius: 10px; padding: 15px 18px; margin-top: 8px; font-size: 13px; }
@media (max-width: 1000px) { .landing-hero { gap: 36px; } .module-nav { width: 270px; } .main { padding-inline: 26px; } }
@media (max-width: 860px) { .module-nav { width: 100%; height: auto; } .main { padding: 24px 18px 72px; } .workspace-header { margin-bottom: 24px; } }
@media (max-width: 760px) {
 .site-nav { padding: 14px 20px; }
 .site-nav-links { gap: 12px; }
 .site-nav-links a { font-size: 12px; }
 .landing-hero { grid-template-columns: 1fr; padding: 46px 20px; gap: 34px; }
 .hero-copy h1 { font-size: 44px; }
 .hero-copy .hero-tagline { font-size: 15px; }
 .site-trust-row { flex-wrap: wrap; gap: 12px 20px; padding-bottom: 28px; }
 .module-grid { grid-template-columns: 1fr; }
 .module-card, .module-card:nth-child(even) { padding: 22px; }
 .landing-section { padding: 52px 20px; }
 .ss-header { padding: 18px; }
 .ss-title { font-size: 30px; }
 .server-grid { grid-template-columns: minmax(0, 1fr); }
 .overview-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
 .overview-tile { padding: 15px 18px; }
 .overview-tile strong { font-size: 21px; }
 .main .field { max-width: none; }
 .main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .main select, .main textarea { font-size: 16px; }
 .toast-stack { bottom: 16px; right: 16px; }
}
.reason-block { grid-template-columns: 44px minmax(0, 1fr); }
.feature-reason-row { grid-template-columns: minmax(0, 1fr) auto 120px; }
.reason-block p, .feature-reason-row, .faq-item p { overflow-wrap: anywhere; }
.active-guild-name, .server-card-name { font-family: inherit; }
@media (max-width: 760px) {
 .feature-reason-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
 .feature-reason-row .frr-why { text-align: left; }
 .frr-tag { justify-self: start; }
 .reason-block { gap: 14px; }
 .free-promise { grid-template-columns: minmax(0, 1fr); }
 .plans-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
 .module-nav-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
 .nav-back-row { grid-column: 1 / -1; }
 .module-nav-header-text { min-width: 0; }
 .active-guild-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
 .module-nav-toggle { margin: 0; font-family: inherit; border-radius: 7px; }
}