:root {
    --bg: #f3f6f8;
    --surface: #ffffff;
    --surface-alt: #f7f9fa;
    --ink: #101b2b;
    --muted: #647588;
    --border: #d9e1e7;
    --nav: #101b2b;
    --nav-line: #223144;
    --accent: #0e9479;
    --accent-bright: #14b48f;
    --accent-soft: #e4f5f0;
    --warning: #b37216;
    --danger: #bd3d4d;
    --shadow: 0 10px 26px rgba(16, 27, 43, .06);
    font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
}

* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; color: var(--ink); background: var(--bg); font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #08755f; }
h1, h2, p { margin: 0; }
button, input, textarea { font: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Critical homepage layout. Keep this near the top so older/cached partial CSS still lays out the landing page correctly. */
.site-page { background: #f2f6f7 !important; }
.site-shell { min-height: 100vh !important; overflow-x: hidden !important; }
.site-nav {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 22px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}
.site-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--ink) !important;
    flex-shrink: 0 !important;
}
.site-brand span { display: flex !important; flex-direction: column !important; line-height: 1.1 !important; }
.site-nav nav { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 23px !important; }
.hero.hero-premium {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 48px 24px 72px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: 40px !important;
    align-items: center !important;
}
.hero-copy, .hero-board { min-width: 0 !important; max-width: 100% !important; }
.hero h1 {
    font-size: clamp(42px, 4.8vw, 64px) !important;
    line-height: 1.08 !important;
    margin: 0 0 24px !important;
    max-width: 620px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}
.lead { color: #485d70 !important; font-size: 18px !important; line-height: 1.8 !important; max-width: 620px !important; }
.hero-actions, .hero-points { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; }
.hero-actions { margin: 30px 0 !important; }
.hero-screen {
    position: relative !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    padding: 20px !important;
    background: linear-gradient(145deg, #102435 0%, #16344b 62%, #154a4b 100%) !important;
    box-shadow: 0 24px 60px rgba(16, 27, 43, .18) !important;
    overflow: hidden !important;
}
.hero-screen-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 170px !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}
.hero-screen-preview {
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(8, 16, 26, .32) !important;
    border: 1px solid rgba(163, 182, 197, .14) !important;
}
.hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
}
.board-note-grid, .site-band-grid, .flow-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
.board-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 16px !important; }
.site-band, .site-section, .site-footer-inner { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; }
@media (max-width: 940px) {
    .site-nav { align-items: flex-start !important; flex-direction: column !important; }
    .site-nav nav { justify-content: flex-start !important; gap: 14px !important; }
    .hero.hero-premium { grid-template-columns: 1fr !important; padding-top: 30px !important; }
    .hero-screen-main, .site-band-grid, .flow-grid, .board-note-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .hero.hero-premium { padding-left: 16px !important; padding-right: 16px !important; }
    .hero h1 { font-size: 36px !important; }
    .hero-actions { flex-direction: column !important; }
}

.topbar {
    height: 68px;
    display: flex;
    align-items: center;
    padding: 0 max(24px, calc((100vw - 1220px) / 2));
    background: var(--nav);
    color: #d6e1e9;
    border-bottom: 1px solid var(--nav-line);
    gap: 42px;
}
.brand { display: flex; align-items: center; gap: 11px; color: #fff; flex-shrink: 0; }
.brand:hover { color: #fff; }
.brand span { display: flex; flex-direction: column; line-height: 1.1; }
.brand strong { font-size: 18px; }
.brand small { font-size: 9px; margin-top: 3px; color: #7f94a7; }
.main-nav { height: 100%; display: flex; gap: 4px; }
.main-nav a { color: #a9b8c7; display: flex; align-items: center; padding: 0 18px; position: relative; }
.main-nav a:hover, .main-nav a.current { color: #fff; }
.main-nav a.current::after { content: ""; position: absolute; height: 3px; left: 18px; right: 18px; bottom: 0; background: var(--accent-bright); }
.account { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.username { color: #d9e3eb; }
.membership { display: inline-flex; border-radius: 4px; padding: 6px 10px; color: var(--muted); background: #e8edf0; font-size: 12px; }
.topbar .membership { color: #aebdcc; background: #1e2c3e; }
.membership.enabled { color: #08715c; background: #d8f2ea; }
.topbar .membership.enabled { color: #54d8b7; background: #113c39; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #adc0cf; background: transparent; cursor: pointer; }
.icon-button:hover { background: #1d2b3d; color: #fff; }

.page { max-width: 1220px; margin: 0 auto; padding: 34px 26px 54px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.page-heading h1 { font-size: 25px; line-height: 1.35; }
.page-heading p { color: var(--muted); margin-top: 6px; }
.button, button.primary {
    min-height: 42px; border: 1px solid var(--border); border-radius: 6px; padding: 0 18px;
    background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
}
.button.primary, button.primary { color: #fff; border-color: var(--accent); background: var(--accent); }
.button.primary:hover, button.primary:hover { color: #fff; background: #0b836c; }
button:disabled { opacity: .45; cursor: not-allowed; }
.button.compact { min-height: 34px; padding: 0 12px; font-size: 13px; }
.flash { margin: 0 0 22px; padding: 13px 16px; border: 1px solid; border-radius: 6px; }
.flash.success { color: #076c56; background: #e3f5ef; border-color: #afdccc; }
.flash.error { color: #a6293d; background: #feecef; border-color: #f2c2c9; }

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
.metric { min-height: 125px; padding: 21px 24px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.metric span { color: var(--muted); display: block; margin-bottom: 11px; }
.metric strong { display: block; font-size: 30px; line-height: 1; margin-bottom: 12px; }
.metric small { color: var(--muted); }
.metric.protection { border-left: 3px solid var(--accent); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 23px 25px; margin-bottom: 20px; }
.panel h2 { font-size: 17px; margin-bottom: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-head h2 { margin: 0; }
.badge { font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 6px 9px; border-radius: 4px; }
.empty { min-height: 76px; color: var(--muted); display: flex; align-items: center; justify-content: center; background: var(--surface-alt); border-radius: 5px; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 0 12px 12px 0; font-size: 12px; color: var(--muted); font-weight: 500; }
.data-table td { border-top: 1px solid #e7edf1; padding: 14px 12px 14px 0; vertical-align: middle; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { color: var(--muted); margin-top: 5px; }
.data-table .message { max-width: 280px; color: var(--muted); }
.status { text-transform: uppercase; display: inline-flex; padding: 5px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #e7edf1; color: #596b7e; }
.status.completed, .status.approved { background: #daf3eb; color: #06725a; }
.status.running { background: #ddf0fc; color: #1470a0; }
.status.failed, .status.rejected { background: #fde6e9; color: #ad283b; }
.status.pending, .status.queued { background: #fff1d9; color: #946216; }

.protect-form { display: grid; gap: 20px; }
.protect-form .panel { margin: 0; }
.upload-panel h2 { margin-bottom: 17px; }
.dropzone { height: 152px; border: 1px dashed #b9c7d2; border-radius: 7px; background: #fafcfd; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 8px; }
.dropzone svg { width: 28px; height: 28px; color: var(--accent); }
.dropzone strong { font-size: 15px; max-width: min(90%, 600px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dropzone span { color: var(--muted); font-size: 12px; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.feature { min-height: 88px; border: 1px solid var(--border); border-radius: 6px; padding: 16px 12px; display: flex; gap: 11px; cursor: pointer; position: relative; }
.feature:hover { border-color: #a7bbb6; }
.feature input { position: absolute; opacity: 0; }
.check { flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid #b9c6d1; border-radius: 3px; margin-top: 1px; position: relative; }
.feature input:checked + .check { background: var(--accent); border-color: var(--accent); }
.feature input:checked + .check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.feature-copy strong { display: block; font-size: 14px; margin-bottom: 8px; }
.feature-copy small { color: var(--muted); line-height: 1.45; display: block; }
.form-action { display: flex; justify-content: flex-end; }
.form-action button { min-width: 152px; }
.callout { padding: 15px 18px; margin-bottom: 20px; color: var(--warning); border: 1px solid #ead09c; border-radius: 6px; background: #fff5df; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 24px; }
.plan h2 { font-size: 17px; }
.plan .price { font-size: 38px; font-weight: 700; margin: 15px 0 10px; }
.plan .price small { font-size: 18px; }
.plan > p:not(.price) { min-height: 38px; color: var(--muted); }
.plan button { width: 100%; margin-top: 17px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.review-row { padding: 12px 0; border-top: 1px solid #e7edf1; display: flex; justify-content: space-between; align-items: center; }
.review-row:first-of-type { border-top: 0; }
.review-row small { display: block; color: var(--muted); margin-top: 4px; }
.review-actions { display: flex; gap: 10px; }
.button.danger, button.danger { color: #fff; border-color: var(--danger); background: var(--danger); }
.button.danger:hover, button.danger:hover { color: #fff; background: #a7303f; }
.search-inline { display: flex; gap: 10px; align-items: center; }
.search-inline input, .user-edit-grid input, .user-edit-grid select {
    min-height: 38px; border: 1px solid #ccd6de; border-radius: 6px; padding: 8px 10px; background: #fff; color: var(--ink);
}
.user-admin-list { display: grid; gap: 14px; }
.user-admin-row { border-top: 1px solid #e7edf1; padding-top: 14px; display: grid; gap: 12px; }
.user-admin-row:first-child { border-top: 0; padding-top: 0; }
.user-meta small { display: block; margin-top: 5px; color: var(--muted); }
.user-edit-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.user-edit-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.user-admin-actions { display: flex; justify-content: flex-end; }
.captcha-row { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center; }
.captcha-box {
    min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border);
    border-radius: 6px; background: #f0f6f4; color: var(--accent); font-size: 24px; font-weight: 700; letter-spacing: 4px;
}
.agreement { display: flex !important; align-items: flex-start; gap: 10px; color: var(--ink) !important; }
.agreement input { width: 16px; height: 16px; margin-top: 3px; min-height: 0; }
.terms-box { border: 1px solid var(--border); border-radius: 7px; padding: 14px; background: #fafcfd; }
.terms-box summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.terms-box div { color: var(--muted); line-height: 1.7; margin-top: 12px; }
.stack { display: grid; gap: 17px; }
.stack label { font-size: 13px; color: var(--muted); display: grid; gap: 8px; }
.stack input, .stack textarea {
    display: block; width: 100%; border: 1px solid #ccd6de; background: #fff; border-radius: 6px; color: var(--ink); min-height: 44px; padding: 11px 13px; outline: none;
}
.stack input:focus, .stack textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 148, 121, .13); }

.auth-page { min-height: 100vh; background: #eef3f5; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 56%) minmax(350px, 44%); }
.identity { background: #101b2b; padding: clamp(40px, 7vh, 66px) clamp(40px, 8vw, 100px); color: #fff; display: flex; flex-direction: column; }
.identity h1 { font-size: 34px; margin-top: 24px; }
.identity p { margin-top: 11px; color: #afbfcc; font-size: 16px; }
.identity-visual { width: min(560px, 100%); margin: auto 0 0; display: block; }
.auth-panel { width: min(400px, calc(100% - 56px)); align-self: center; justify-self: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 37px 38px; box-shadow: var(--shadow); }
.auth-panel header { margin-bottom: 29px; }
.auth-panel h2 { font-size: 25px; margin-bottom: 9px; }
.auth-panel header p { color: var(--muted); }
.auth-panel .primary { width: 100%; margin-top: 7px; }
.switch { text-align: center; color: var(--muted); margin-top: 25px; }
.auth-shell > .flash { position: fixed; right: 32px; top: 26px; width: min(400px, calc(100% - 52px)); z-index: 2; }

.notice-modal { width: min(465px, calc(100% - 38px)); border: 0; border-radius: 8px; padding: 30px; box-shadow: 0 25px 60px rgba(14, 23, 37, .24); }
.notice-modal::backdrop { background: rgba(13, 21, 34, .52); }
.notice-modal .close { position: absolute; right: 13px; top: 12px; color: var(--muted); }
.notice-modal .close:hover { background: #eef2f4; color: var(--ink); }
.notice-modal .label { font-size: 12px; color: var(--accent); font-weight: 700; margin-bottom: 13px; }
.notice-modal h2 { font-size: 21px; margin-bottom: 16px; }
.notice-text { line-height: 1.7; color: #46586b; margin-bottom: 20px; }
.notice-modal time { color: var(--muted); font-size: 12px; }
.error-state { text-align: center; padding-top: 14vh; }
.error-state h1 { font-size: 26px; }
.error-state p { color: var(--muted); margin: 12px 0 28px; }

.site-page { background: #f2f6f7; }
.site-shell { min-height: 100vh; }
.site-shell > .flash {
    max-width: 1180px;
    margin: 20px auto 0;
}
.site-nav {
    max-width: 1180px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between;
}
.site-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.site-brand:hover { color: var(--ink); }
.site-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand strong { font-size: 20px; }
.site-brand small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.site-nav nav { display: flex; align-items: center; gap: 23px; }
.site-nav nav a { color: #405366; }
.site-button {
    display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 6px;
    border: 1px solid #bfd0d9; color: var(--ink); background: #fff;
}
.site-button.strong, .site-nav .site-button { color: #fff; border-color: var(--accent); background: var(--accent); }
.site-button.light { color: var(--accent); border-color: #abd9cf; background: #ecf8f4; }
.hero {
    max-width: 1180px; margin: 0 auto; padding: 48px 24px 72px; display: grid;
}
.hero-premium {
    grid-template-columns: minmax(520px, 1.05fr) minmax(460px, .95fr);
    gap: 40px;
    align-items: center;
}
.hero-copy { min-width: 0; max-width: 620px; padding-right: 12px; }
.eyebrow { color: var(--accent); font-weight: 700; margin-bottom: 18px; }
.hero h1 {
    font-size: clamp(42px, 4.8vw, 64px);
    line-height: 1.08;
    margin-bottom: 24px;
    max-width: 620px;
    width: 100%;
    writing-mode: horizontal-tb;
    white-space: normal;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.lead { color: #485d70; font-size: 18px; line-height: 1.8; max-width: 620px; }
.hero-actions { display: flex; gap: 14px; margin: 30px 0; }
.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    max-width: 660px;
}
.hero-points span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid #dbe5eb;
    color: #476073;
}
.hero-board {
    position: relative;
    min-width: 0;
}
.hero-screen {
    position: relative;
    border-radius: 18px;
    padding: 20px;
    background: linear-gradient(145deg, #102435 0%, #16344b 62%, #154a4b 100%);
    box-shadow: 0 24px 60px rgba(16, 27, 43, .18);
    overflow: hidden;
}
.hero-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at top right, rgba(20, 180, 143, .22), transparent 36%);
    pointer-events: none;
}
.hero-screen-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.screen-status {
    color: #dbe8f0;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.screen-dotset {
    display: inline-flex;
    gap: 7px;
}
.screen-dotset i {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: rgba(214, 230, 239, .48);
}
.hero-screen-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 18px;
    margin-bottom: 18px;
}
.hero-screen-copy {
    min-width: 0;
    padding: 12px 2px 0;
}
.screen-kicker {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(20, 180, 143, .14);
    color: #8be7cf;
    font-size: 12px;
}
.hero-screen-copy h2 {
    margin: 16px 0 10px;
    font-size: 32px;
    color: #fff;
    line-height: 1.15;
}
.hero-screen-copy p {
    color: #adc1cf;
    line-height: 1.8;
    margin-bottom: 18px;
}
.screen-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.screen-tag-row span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(150, 173, 190, .22);
    background: rgba(11, 22, 33, .26);
    color: #dce8ef;
    font-size: 12px;
}
.hero-screen-side {
    display: grid;
    gap: 12px;
}
.hero-screen-side article {
    padding: 16px 14px;
    border-radius: 14px;
    background: rgba(8, 16, 26, .3);
    border: 1px solid rgba(163, 182, 197, .16);
}
.hero-screen-side strong {
    display: block;
    font-size: 26px;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.05;
    word-break: break-word;
}
.hero-screen-side span {
    color: #9fb4c3;
    line-height: 1.5;
    font-size: 12px;
}
.hero-screen-preview {
    position: relative;
    z-index: 1;
    padding: 14px;
    border-radius: 16px;
    background: rgba(8, 16, 26, .32);
    border: 1px solid rgba(163, 182, 197, .14);
}
.hero-visual {
    width: 100%;
    display: block;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}
.board-note-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.board-note-grid article {
    min-height: 94px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(8, 16, 26, .28);
    border: 1px solid rgba(163, 182, 197, .14);
}
.board-note-grid strong {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 8px;
}
.board-note-grid p {
    color: #adc1cf;
    line-height: 1.7;
    margin: 0;
    font-size: 13px;
}
.hero-float {
    position: absolute;
    z-index: 2;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #d7e2e8;
    box-shadow: 0 14px 28px rgba(16, 27, 43, .1);
    color: #203447;
    font-size: 12px;
    white-space: nowrap;
}
.hero-float-a { left: -18px; bottom: 104px; }
.hero-float-b { right: 18px; top: -18px; }
.site-band {
    max-width: 1180px;
    margin: 0 auto 42px;
    padding: 0 24px;
}
.site-band-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.site-band-grid article {
    min-height: 132px;
    padding: 24px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 248, 249, .96));
    border: 1px solid #d9e4ea;
    box-shadow: var(--shadow);
}
.site-band-grid strong {
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
}
.site-band-grid p {
    color: var(--muted);
    line-height: 1.75;
}
.site-section { max-width: 1180px; margin: 0 auto 42px; padding: 0 24px; }
.site-section-head { display: flex; justify-content: space-between; gap: 32px; align-items: flex-end; margin-bottom: 20px; }
.site-section h2 { font-size: 28px; }
.site-section-head p, .site-section.split p { color: var(--muted); line-height: 1.7; max-width: 720px; }
.site-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.site-feature-grid article { background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 22px; min-height: 158px; }
.site-feature-grid h3 { margin: 0 0 13px; font-size: 16px; }
.site-feature-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.site-feature-grid-wide article {
    min-height: 180px;
    padding: 24px;
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.site-section-flow {
    padding-top: 8px;
    padding-bottom: 8px;
}
.flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.flow-grid article {
    min-height: 200px;
    padding: 24px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.flow-grid span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e9f7f3;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 18px;
}
.flow-grid h3 {
    margin: 0 0 12px;
    font-size: 18px;
}
.flow-grid p {
    color: var(--muted);
    line-height: 1.75;
    margin: 0;
}
.site-footer {
    margin-top: 28px;
    border-top: 1px solid #dce5ea;
    background: rgba(255, 255, 255, .58);
}
.site-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.site-footer strong {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
}
.site-footer p {
    color: var(--muted);
}
.site-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 18px;
    color: #32495d;
}
.contact-dock {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-dock span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(16, 27, 43, .98);
    border: 1px solid rgba(90, 122, 149, .75);
    color: #ecf5fa;
    box-shadow: 0 18px 32px rgba(16, 27, 43, .28);
    white-space: nowrap;
    font-weight: 700;
}
.site-section.split { display: flex; justify-content: space-between; align-items: center; background: #101b2b; color: #fff; border-radius: 8px; padding: 30px 34px; }
.site-section.split p { color: #afbfcc; margin-top: 10px; }

.home-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 24px 58px;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr);
    gap: 34px;
    align-items: center;
}
.home-hero-copy h1 {
    max-width: 670px;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.08;
    margin: 18px 0 20px;
}
.home-hero-copy p {
    max-width: 640px;
    color: #4c6173;
    font-size: 17px;
    line-height: 1.85;
}
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: #08755f;
    background: #e4f5f0;
    border: 1px solid #c6e8df;
    font-weight: 700;
}
.hero-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
}
.hero-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.hero-summary-grid article {
    min-height: 86px;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d9e4ea;
    box-shadow: var(--shadow);
}
.hero-summary-grid strong {
    display: block;
    font-size: 24px;
    margin-bottom: 7px;
}
.hero-summary-grid span {
    color: var(--muted);
}
.console-preview {
    min-width: 0;
    border-radius: 18px;
    padding: 18px;
    background: #101b2b;
    border: 1px solid #25384b;
    box-shadow: 0 26px 70px rgba(16, 27, 43, .2);
}
.console-top {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #c8d8e4;
    border-bottom: 1px solid #223448;
    margin-bottom: 18px;
}
.console-top span {
    margin-right: auto;
    font-size: 12px;
    text-transform: uppercase;
}
.console-top i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6f8798;
}
.console-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 14px;
}
.console-card, .signal-card {
    border-radius: 12px;
    padding: 18px;
    background: #152536;
    border: 1px solid rgba(157, 180, 196, .16);
}
.console-card span, .signal-card span {
    display: block;
    color: #94aabd;
    margin-bottom: 14px;
}
.console-card strong {
    display: block;
    color: #fff;
    font-size: 38px;
    line-height: 1;
    margin-bottom: 20px;
}
.meter {
    height: 8px;
    border-radius: 999px;
    background: #263b50;
    overflow: hidden;
}
.meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #22c9a5;
}
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pill-row em {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    background: #0f4a42;
    color: #55e4c4;
    font-style: normal;
}
.signal-card {
    grid-column: 1 / -1;
}
.signal-card img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.home-section {
    max-width: 1180px;
    margin: 0 auto 42px;
    padding: 0 24px;
}
.home-section-head {
    margin-bottom: 20px;
}
.home-section-head > span, .ops-panel > div > span {
    display: inline-block;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 10px;
}
.home-section-head h2, .ops-panel h2 {
    font-size: 30px;
    margin-bottom: 10px;
}
.home-section-head p, .ops-panel p {
    max-width: 720px;
    color: var(--muted);
    line-height: 1.75;
}
.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.capability-grid article, .pipeline-grid article {
    min-height: 220px;
    padding: 22px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #dce5ea;
    box-shadow: var(--shadow);
}
.capability-grid b {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e7f6f2;
    color: var(--accent);
    margin-bottom: 20px;
}
.capability-grid h3, .pipeline-grid strong {
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
}
.capability-grid p, .pipeline-grid p {
    color: var(--muted);
    line-height: 1.7;
}
.capability-grid article > span {
    display: inline-flex;
    margin-top: 18px;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #2b5166;
    background: #eef5f7;
    font-size: 12px;
}
.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.pipeline-grid article {
    min-height: 170px;
    position: relative;
    overflow: hidden;
}
.pipeline-grid article::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    right: -24px;
    bottom: -28px;
    border-radius: 50%;
    background: rgba(20, 180, 143, .14);
}
.pipeline-grid span {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--accent);
    font-weight: 700;
}
.ops-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: center;
    padding: 30px;
    border-radius: 10px;
    background: #101b2b;
    color: #fff;
}
.ops-panel p {
    color: #afbfcc;
}
.ops-checks {
    display: grid;
    gap: 12px;
}
.ops-checks span {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 8px;
    background: #15283a;
    border: 1px solid #294156;
    color: #dce8ef;
}
.engine-deploy-panel .panel-head p {
    color: var(--muted);
    margin-top: 6px;
}
.engine-deploy-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.engine-deploy-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}
.engine-deploy-form input {
    min-height: 40px;
    border: 1px solid #ccd6de;
    border-radius: 6px;
    padding: 9px 11px;
    background: #fff;
    color: var(--ink);
}
.engine-deploy-note {
    grid-column: span 3;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 7px;
    background: #eef7f4;
    border: 1px solid #cde8df;
    color: #315c52;
}
.engine-deploy-note strong {
    color: var(--accent);
}
.engine-deploy-form button {
    min-height: 46px;
}

.install-page { min-height: 100vh; background: #eef3f5; }
.install-shell { max-width: 1060px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
.install-hero { background: #101b2b; color: #fff; border-radius: 8px; padding: 34px; min-height: 360px; }
.install-hero h1 { font-size: 30px; margin: 24px 0 14px; }
.install-hero p { color: #afbfcc; line-height: 1.8; }
.install-panel { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 28px; box-shadow: var(--shadow); }
.install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.install-panel details { border: 1px solid var(--border); border-radius: 7px; padding: 14px; background: #fafcfd; }
.install-panel summary { cursor: pointer; color: var(--ink); font-weight: 700; margin-bottom: 14px; }
.install-panel button.primary, .install-panel .button.primary { width: 100%; }

@media (max-width: 940px) {
    .topbar { gap: 18px; padding: 0 18px; flex-wrap: wrap; height: auto; min-height: 68px; }
    .main-nav { order: 3; width: 100%; overflow-x: auto; height: 52px; }
    .account { margin-left: auto; }
    .page { padding: 26px 16px 40px; }
    .metric-row, .plans, .admin-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-shell { grid-template-columns: 1fr; }
    .identity { display: none; }
    .auth-panel { margin: 42px auto; }
    .site-nav { align-items: flex-start; gap: 16px; flex-direction: column; }
    .site-nav nav { flex-wrap: wrap; gap: 14px; }
    .hero { grid-template-columns: 1fr; padding-top: 30px; }
    .hero-premium, .user-edit-grid, .hero-screen-main, .site-band-grid, .flow-grid, .board-note-grid { grid-template-columns: 1fr; }
    .hero-copy { max-width: none; padding-right: 0; }
    .hero h1 { max-width: none; }
    .hero-float { position: static; margin-top: 12px; }
    .site-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .site-section-head, .site-section.split, .site-footer-inner { flex-direction: column; align-items: flex-start; }
    .home-hero, .ops-panel { grid-template-columns: 1fr; }
    .console-preview { order: -1; }
    .capability-grid, .engine-deploy-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engine-deploy-note { grid-column: 1 / -1; }
    .install-shell { grid-template-columns: 1fr; }
    .install-hero { min-height: auto; }
}
@media (max-width: 600px) {
    .brand span { display: none; }
    .main-nav a { padding: 0 12px; }
    .main-nav a.current::after { left: 12px; right: 12px; }
    .username { display: none; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
    .feature-grid { grid-template-columns: 1fr; }
    .panel { padding: 18px 14px; overflow-x: auto; }
    .data-table { min-width: 620px; }
    .auth-panel { padding: 28px 23px; }
    .site-feature-grid, .install-grid { grid-template-columns: 1fr; }
    .home-hero { padding: 24px 16px 42px; }
    .home-hero-copy h1 { font-size: 34px; }
    .hero-summary-grid, .console-grid, .capability-grid, .pipeline-grid, .engine-deploy-form { grid-template-columns: 1fr; }
    .home-section { padding: 0 16px; }
    .ops-panel { padding: 22px; }
    .home-section-head h2, .ops-panel h2 { font-size: 25px; }
    .engine-deploy-note { align-items: flex-start; flex-direction: column; }
    .hero-actions { flex-direction: column; }
    .hero-screen { padding: 16px; border-radius: 14px; }
    .hero-screen-copy h2 { font-size: 28px; }
    .hero-screen-side strong { font-size: 22px; }
    .site-band-grid article, .flow-grid article, .site-feature-grid-wide article { padding: 20px; }
    .site-contact { justify-content: flex-start; }
    .contact-dock {
        right: 12px;
        left: 12px;
        bottom: 12px;
    }
    .contact-dock span {
        white-space: normal;
    }
    .captcha-row, .search-inline { grid-template-columns: 1fr; display: grid; }
}