:root {
    --navy: #111c34;
    --navy-2: #172541;
    --blue: #3458e6;
    --blue-dark: #2645c7;
    --blue-soft: #eef2ff;
    --orange: #ff8750;
    --green: #17a879;
    --purple: #8b5cf6;
    --red: #e1515f;
    --ink: #1c2942;
    --text: #44516a;
    --muted: #8490a4;
    --line: #e8ebf2;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --shadow: 0 12px 34px rgba(27, 39, 73, .07);
    --radius: 16px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
code { padding: 2px 7px; border-radius: 6px; color: #465473; background: #f0f2f7; font-family: Consolas, monospace; }
.muted { color: var(--muted); }

.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 800; letter-spacing: .02em; }
.brand-light { color: #fff; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px 11px 11px 4px; color: #fff; background: linear-gradient(135deg, #5474ff, #2f4fdd); box-shadow: 0 8px 18px rgba(52, 88, 230, .32); font-size: 17px; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.eyebrow.light { color: #aebdff; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; font-weight: 700; transition: .18s ease; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--blue); box-shadow: 0 8px 20px rgba(52, 88, 230, .2); }
.button.primary:hover { background: var(--blue-dark); box-shadow: 0 10px 25px rgba(52, 88, 230, .28); }
.button.soft { color: #45536e; border-color: var(--line); background: #fff; box-shadow: 0 3px 10px rgba(24, 36, 67, .03); }
.button.soft:hover { color: var(--blue); border-color: #cfd7fb; background: #fbfcff; }
.button.outline { color: var(--blue); border-color: #dbe1fb; background: transparent; }
.button.danger-outline { color: var(--red); border-color: #f2cdd2; background: #fff; }
.button.large { min-height: 50px; padding: 12px 20px; border-radius: 12px; }
.button.full { width: 100%; }
.button-plus { font-size: 18px; line-height: 1; }
.small-button { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.text-link { color: var(--blue); font-weight: 700; }
.text-link span { display: inline-block; margin-left: 3px; transition: transform .15s; }
.text-link:hover span { transform: translateX(3px); }
.row-link { padding: 0; color: var(--blue); border: 0; background: none; font-weight: 700; white-space: nowrap; }
.danger-text { color: var(--red); }
.text-success { color: var(--green); }
.text-warning { color: #ad6827; }
.back-link { color: var(--muted); font-size: 13px; font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { color: #59657a; font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea, .filter-bar select, .search-input { width: 100%; color: var(--ink); border: 1px solid #dfe3ec; border-radius: 10px; outline: 0; background: #fff; transition: .16s; }
.field input, .field select { height: 44px; padding: 0 13px; }
.field textarea { padding: 11px 13px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .filter-bar select:focus, .search-input:focus-within { border-color: #7f97f4; box-shadow: 0 0 0 3px rgba(52, 88, 230, .09); }
.field input::placeholder, .field textarea::placeholder { color: #adb5c3; }
.field-help { color: var(--muted); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-grid.spacious { gap: 20px; }
.span-2 { grid-column: span 2; }
.form-divider { display: flex; align-items: center; gap: 12px; color: #929caf; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.form-divider::before, .form-divider::after { height: 1px; content: ""; background: var(--line); flex: 1; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.form-section-title { display: flex; align-items: center; gap: 11px; margin-top: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.form-section-title > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 800; }
.form-section-title div { display: flex; flex-direction: column; }
.form-section-title strong { font-size: 14px; }
.form-section-title small { color: var(--muted); font-size: 11px; }
.check-field { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.check-field input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.check-field span { display: flex; flex-direction: column; }
.check-field small { color: var(--muted); }

.alert { position: relative; margin-bottom: 18px; padding: 12px 42px 12px 14px; border: 1px solid; border-radius: 10px; font-weight: 600; }
.alert.success { color: #14795b; border-color: #c4eadf; background: #edfbf6; }
.alert.error, .alert.danger { color: #b43f4b; border-color: #f0c8cd; background: #fff1f2; }
.alert.warning { color: #a26224; border-color: #f2dbbb; background: #fff8ed; }
.alert.floating { animation: slideIn .3s ease; }
.alert button { position: absolute; top: 7px; right: 10px; color: inherit; border: 0; background: none; font-size: 20px; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } }

/* Authentication and installation */
.auth-body, .install-body { min-height: 100vh; background: #fff; }
.auth-shell, .install-wrap { display: grid; min-height: 100vh; grid-template-columns: minmax(440px, 52%) minmax(440px, 48%); }
.auth-visual, .install-intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 48px 58px; overflow: hidden; color: #fff; background: linear-gradient(150deg, #121d38 0%, #1d2c58 55%, #243da3 135%); }
.auth-visual::before, .install-intro::before { position: absolute; right: -20%; bottom: -42%; width: 720px; height: 720px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.02); content: ""; }
.auth-hero-copy, .install-copy { position: relative; z-index: 1; max-width: 590px; margin: auto 0; padding: 70px 0; }
.auth-hero-copy h1, .install-copy h1 { margin: 0 0 22px; font-size: clamp(40px, 4.2vw, 64px); line-height: 1.18; letter-spacing: -.04em; }
.auth-hero-copy p, .install-copy p { max-width: 520px; margin: 0; color: #c0c9df; font-size: 16px; line-height: 1.9; }
.auth-metric-row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 25px; border-top: 1px solid rgba(255,255,255,.13); }
.auth-metric-row div { display: flex; flex-direction: column; padding-right: 18px; }
.auth-metric-row strong { font-size: 20px; }
.auth-metric-row span { margin-top: 2px; color: #9faac2; font-size: 11px; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { top: 18%; right: 8%; width: 130px; height: 130px; background: radial-gradient(circle at 30% 30%, rgba(126,148,255,.35), rgba(55,83,207,.06)); }
.orb-two { top: 31%; right: 21%; width: 30px; height: 30px; background: var(--orange); box-shadow: 0 0 40px rgba(255,135,80,.5); }
.auth-panel, .install-panel { display: grid; min-height: 100vh; place-items: center; padding: 48px; background: #fff; }
.auth-form-wrap, .install-form-wrap { width: 100%; max-width: 430px; }
.auth-form-wrap h2, .install-form-wrap h2 { margin: 4px 0 8px; font-size: 31px; letter-spacing: -.03em; }
.auth-form-wrap > .muted, .install-form-wrap > .muted { margin: 0 0 30px; }
.step-label { color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.auth-form { margin-top: 28px; }
.auth-form:not(.form-grid) { display: flex; flex-direction: column; gap: 20px; }
.auth-switch { margin: 25px 0 0; text-align: center; color: var(--muted); }
.auth-switch a { color: var(--blue); font-weight: 800; }
.auth-footnote { margin-top: 42px; color: #abb3c1; text-align: center; font-size: 11px; }
.install-wrap { grid-template-columns: 43% 57%; }
.install-intro { padding: 45px 50px; }
.install-copy h1 { font-size: clamp(34px, 3.4vw, 50px); }
.install-features { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.install-features span { padding: 6px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; color: #bdc7df; font-size: 11px; }
.install-form-wrap { max-width: 590px; }
.install-form { margin-top: 25px; }
.preflight-list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.preflight-list span { display: flex; align-items: center; gap: 7px; color: #b8c4dc; font-size: 10px; }
.preflight-list i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #fff; background: rgba(23,168,121,.7); font-style: normal; }
.preflight-list .fail i { background: rgba(225,81,95,.8); }
.install-security-note { padding: 11px 13px; border-radius: 9px; color: #59705f; background: #eef8f2; font-size: 10px; }
.locked-page { display: flex; width: min(650px,calc(100% - 40px)); min-height: 100vh; margin: auto; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.locked-page h1 { margin: 9px 0; font-size: 30px; }
.locked-page > p { max-width: 560px; margin: 0; color: var(--muted); }
.locked-icon { display: grid; width: 68px; height: 68px; margin-bottom: 20px; place-items: center; border-radius: 20px; color: #fff; background: var(--blue); box-shadow: 0 14px 30px rgba(52,88,230,.25); font-weight: 800; }
.locked-icon.warning { background: var(--orange); box-shadow: 0 14px 30px rgba(255,135,80,.25); }
.locked-note { margin: 25px 0; padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; color: #657188; background: #fff; font-size: 11px; }

/* Main application */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; display: flex; width: 244px; padding: 26px 18px 19px; flex-direction: column; color: #bdc6d9; background: linear-gradient(180deg, #111b31 0%, #14213b 100%); box-shadow: 12px 0 35px rgba(17,28,52,.08); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 25px; }
.sidebar-close { display: none; color: #fff !important; }
.user-card-mini { display: flex; align-items: center; gap: 11px; margin: 2px 3px 20px; padding: 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; background: rgba(255,255,255,.035); }
.avatar { display: inline-grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #5270ec, #3651c0); box-shadow: 0 6px 14px rgba(21,34,67,.2); font-weight: 800; }
.avatar.small { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.avatar.huge { width: 78px; height: 78px; border: 5px solid #fff; border-radius: 23px; font-size: 27px; }
.avatar.staff { background: linear-gradient(145deg, #4973ee, #2f52c9); }
.avatar.user { background: linear-gradient(145deg, #8d99aa, #68758b); }
.user-card-mini div { display: flex; min-width: 0; flex-direction: column; }
.user-card-mini strong { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.user-card-mini span:not(.avatar) { color: #7f8ba3; font-size: 11px; }
.nav-list { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; }
.nav-caption { padding: 17px 12px 7px; color: #657188; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.nav-item { display: flex; width: 100%; min-height: 43px; align-items: center; gap: 12px; margin: 2px 0; padding: 9px 12px; border-radius: 10px; color: #aeb8ca; font-weight: 600; transition: .16s; }
.nav-item i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #92a0b8; background: rgba(255,255,255,.04); font-size: 11px; font-style: normal; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(65,94,221,.85), rgba(54,81,192,.72)); box-shadow: 0 8px 18px rgba(16,29,72,.32); }
.nav-item.active i { color: #fff; background: rgba(255,255,255,.12); }
.sidebar-bottom { padding-top: 11px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-bottom form { margin: 0; }
.nav-button { border: 0; background: none; text-align: left; }
.main-area { width: calc(100% - 244px); min-height: 100vh; margin-left: 244px; }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; min-height: 86px; align-items: center; justify-content: space-between; padding: 15px 34px; border-bottom: 1px solid rgba(229,233,241,.85); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.topbar-title { display: flex; align-items: center; gap: 10px; }
.topbar-title div { display: flex; flex-direction: column; }
.topbar-title span { color: #9aa3b3; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.topbar-title h1 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.topbar-actions { display: flex; gap: 9px; }
.icon-button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; color: #61708b; border: 0; border-radius: 9px; background: transparent; font-size: 20px; }
.menu-toggle { display: none; }
.content-wrap { width: 100%; max-width: 1540px; margin: 0 auto; padding: 28px 34px 46px; }
.sidebar-backdrop { display: none; }

.welcome-row, .page-actions-row, .detail-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.welcome-row h2 { margin: 0 0 4px; font-size: 25px; letter-spacing: -.025em; }
.welcome-row p { margin: 0; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 19px; }
.stat-card { position: relative; display: flex; min-width: 0; min-height: 158px; padding: 20px; flex-direction: column; overflow: hidden; border: 1px solid #edf0f5; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.stat-card::after { position: absolute; right: -25px; bottom: -35px; width: 95px; height: 95px; border-radius: 50%; content: ""; opacity: .07; background: currentColor; }
.stat-card > span { color: #68748a; font-size: 12px; font-weight: 700; }
.stat-card > strong { margin: 7px 0 1px; font-size: 26px; line-height: 1.3; letter-spacing: -.04em; }
.stat-card > strong em { margin-right: 2px; color: var(--muted); font-size: 14px; font-style: normal; letter-spacing: 0; }
.stat-card > small { color: #a0a8b6; font-size: 10px; }
.stat-icon { position: absolute; top: 18px; right: 18px; display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; background: currentColor; color: inherit; font-size: 0; }
.stat-icon::after { color: #fff; content: attr(data-icon); font-size: 12px; }
.accent-blue { color: var(--blue); }
.accent-orange { color: var(--orange); }
.accent-green { color: var(--green); }
.accent-purple { color: var(--purple); }
.stat-card.accent-blue .stat-icon::before { content:"客"; font-size:12px; color:#fff; }
.stat-card.accent-orange .stat-icon::before { content:"审"; font-size:12px; color:#fff; }
.stat-card.accent-green .stat-icon::before { content:"单"; font-size:12px; color:#fff; }
.stat-card.accent-purple .stat-icon::before { content:"益"; font-size:12px; color:#fff; }
.stat-card > span, .stat-card > strong, .stat-card > small { color: var(--ink); }
.stat-card > span { color: #69758a; }
.stat-card > small { color: #9aa4b4; }

.panel { border: 1px solid #eaedf3; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.panel-head { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid #edf0f4; }
.panel-head h3 { margin: 0 0 2px; font-size: 16px; letter-spacing: -.015em; }
.panel-head p { margin: 0; color: var(--muted); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(285px, .82fr); gap: 19px; margin-bottom: 19px; }
.chart-panel { min-height: 335px; }
.bar-chart { display: flex; height: 250px; align-items: flex-end; gap: clamp(12px, 3vw, 36px); padding: 35px 30px 18px; }
.bar-column { display: flex; min-width: 0; height: 100%; flex: 1; align-items: center; flex-direction: column; }
.bar-value { min-height: 20px; color: #8993a5; font-size: 9px; opacity: 0; transition: .18s; }
.bar-column:hover .bar-value { opacity: 1; }
.bar-track { position: relative; width: 100%; max-width: 44px; flex: 1; border-radius: 7px 7px 3px 3px; background: #f1f3f8; overflow: hidden; }
.bar-track i { position: absolute; right: 0; bottom: 0; left: 0; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #6780ef, #3458e6); box-shadow: 0 -5px 15px rgba(52,88,230,.15); }
.bar-column small { margin-top: 9px; color: #8b95a6; font-size: 10px; }
.rule-panel { display: flex; min-height: 335px; flex-direction: column; background: linear-gradient(155deg, #fff 45%, #f6f8ff); }
.rule-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); font-size: 16px; font-weight: 800; }
.rule-highlight { display: flex; align-items: baseline; gap: 10px; padding: 28px 22px 6px; }
.rule-highlight strong { color: var(--blue); font-size: 36px; letter-spacing: -.05em; }
.rule-highlight span { color: #657189; font-size: 12px; font-weight: 700; }
.rule-panel > p { min-height: 58px; margin: 0; padding: 0 22px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.rule-panel > .button { width: auto; margin: auto 20px 20px; }

.pill { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.pill.success { color: #168361; background: #e8f8f2; }
.pill.warning { color: #ad6827; background: #fff1de; }
.pill.info { color: #3657cf; background: #edf1ff; }
.pill.danger { color: #bb4350; background: #ffedf0; }
.pill.neutral { color: #737f93; background: #f0f2f6; }
.table-panel { margin-bottom: 20px; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 18px; color: #8791a4; background: #fafbfc; font-size: 10px; font-weight: 800; letter-spacing: .025em; text-align: left; white-space: nowrap; }
td { padding: 15px 18px; color: #46526a; border-top: 1px solid #f0f2f5; font-size: 12px; vertical-align: middle; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #fbfcff; }
td strong { display: block; color: var(--ink); font-size: 12px; }
td small { display: block; margin-top: 3px; color: #96a0b1; font-size: 10px; }
.money-cell { color: var(--ink); font-weight: 800; white-space: nowrap; }
.money-cell.positive { color: var(--green); }
.money-cell.negative { color: var(--red); }
.person-cell { display: flex; align-items: center; gap: 9px; }
.person-cell > div { min-width: 0; }
.filter-bar { display: flex; align-items: center; gap: 9px; }
.search-input { display: flex; width: min(320px, 34vw); height: 40px; align-items: center; gap: 7px; padding: 0 11px; }
.search-input span { color: #9ba5b5; font-size: 19px; }
.search-input input { width: 100%; border: 0; outline: 0; background: transparent; }
.filter-bar select { width: 130px; height: 40px; padding: 0 10px; }
.pagination { display: flex; justify-content: flex-end; gap: 5px; padding: 14px 18px; border-top: 1px solid var(--line); }
.pagination a { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: #738097; font-size: 11px; }
.pagination a.active { color: #fff; border-color: var(--blue); background: var(--blue); }
.empty-state { display: flex; min-height: 300px; align-items: center; justify-content: center; padding: 35px; flex-direction: column; text-align: center; }
.empty-state > div { display: grid; width: 56px; height: 56px; margin-bottom: 14px; place-items: center; border-radius: 17px; color: var(--blue); background: var(--blue-soft); font-size: 19px; font-weight: 800; }
.empty-state h3, .empty-state h4 { margin: 0 0 5px; font-size: 17px; }
.empty-state p { max-width: 380px; margin: 0 0 17px; color: var(--muted); }
.empty-state.compact { min-height: 225px; }
.empty-state.standalone { min-height: 60vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }

/* Forms and products */
.form-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 20px; }
.form-panel { overflow: hidden; }
.form-panel > form { padding: 23px; }
.side-note-card { padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.side-note-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); font-family: Georgia, serif; font-size: 18px; font-weight: 800; }
.side-note-card h3 { margin: 15px 0 7px; font-size: 16px; }
.side-note-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.side-note-card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.side-note-card li { position: relative; margin: 11px 0; padding-left: 17px; color: #6d7890; font-size: 11px; line-height: 1.7; }
.side-note-card li::before { position: absolute; top: 6px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #6880eb; content: ""; }
.side-note-card.dark { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--navy-2), #243b77); }
.side-note-card.dark p, .side-note-card.dark li { color: #bdc7db; }
.narrow-page { max-width: 760px; margin: 0 auto; }
.product-hero { position: relative; display: flex; min-height: 180px; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 34px 42px; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #172541, #263b7b); box-shadow: 0 18px 40px rgba(25,41,82,.14); }
.product-hero::before { position: absolute; top: -150px; right: -20px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.025), 0 0 0 100px rgba(255,255,255,.02); content: ""; }
.product-hero > div { position: relative; z-index: 1; }
.product-hero h2 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.03em; }
.product-hero p { margin: 0; color: #bac5de; }
.product-hero-badge { display: flex; width: 160px; height: 105px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; flex-direction: column; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.product-hero-badge > span { color: #aeb9d1; font-size: 10px; }
.product-hero-badge strong { font-size: 25px; }
.product-hero-badge small { color: #9fabbe; font-size: 10px; }
.catalog-hero { position: relative; display: flex; min-height: 210px; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 18px; padding: 36px 42px; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(132deg, #12213d 0%, #24469c 64%, #4a67d8 100%); box-shadow: 0 18px 42px rgba(27,47,102,.18); }
.catalog-hero::before { position: absolute; top: -160px; right: -30px; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.035), 0 0 0 104px rgba(255,255,255,.02); content: ""; }
.catalog-hero > div { position: relative; z-index: 1; }
.catalog-hero h2 { margin: 0 0 8px; font-size: 31px; letter-spacing: -.035em; }
.catalog-hero p { max-width: 650px; margin: 0; color: #c7d2ec; line-height: 1.8; }
.catalog-age { display: flex; min-width: 175px; min-height: 112px; align-items: center; justify-content: center; padding: 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; flex-direction: column; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); text-align: center; }
.catalog-age strong { font-size: 28px; letter-spacing: -.04em; }
.catalog-age span { color: #bdc9e3; font-size: 10px; }
.family-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-bottom: 18px; }
.family-card { position: relative; min-height: 190px; padding: 25px 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.family-card::after { position: absolute; right: -45px; bottom: -70px; width: 175px; height: 175px; border-radius: 50%; background: currentColor; content: ""; opacity: .055; }
.family-card > span { display: inline-flex; min-height: 25px; align-items: center; padding: 4px 10px; border-radius: 99px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 800; }
.family-card h3 { margin: 15px 0 6px; font-size: 21px; letter-spacing: -.025em; }
.family-card p { max-width: 580px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.family-card i { display: block; margin-top: 17px; color: var(--blue); font-size: 12px; font-style: normal; font-weight: 800; }
.family-card.plus { color: #d98439; border-color: #f2dfcc; background: linear-gradient(145deg, #fff, #fff9f1); }
.family-card.plus > span { color: #bd6928; background: #ffecd9; }
.family-card.plus h3 { color: var(--ink); }
.family-card.plus i { color: #c96e2c; }
.valuation-rule { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; margin-bottom: 19px; padding: 18px; }
.valuation-rule > div { display: grid; min-width: 0; min-height: 105px; align-content: center; grid-template-columns: auto 1fr; column-gap: 11px; padding: 15px; border-radius: 13px; background: #f8f9fc; }
.valuation-rule > span { display: grid; place-items: center; color: #a5afc0; font-size: 17px; }
.valuation-rule .valuation-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--blue); background: #e8edff; font-weight: 900; grid-row: span 2; }
.valuation-rule strong { align-self: end; font-size: 12px; }
.valuation-rule p { align-self: start; margin: 2px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.product-table-panel { overflow: hidden; }
.family-matrix { margin-bottom: 19px; }
.family-matrix.replacement_plus { border-color: #f0dfcd; }
.family-matrix.replacement_plus .panel-head { background: linear-gradient(90deg, #fff, #fffbf5); }
.product-matrix { min-width: 690px; }
.matrix-row { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); border-top: 1px solid var(--line); }
.matrix-row:first-child { border-top: 0; }
.matrix-row > div { position: relative; display: flex; min-height: 82px; align-items: center; justify-content: center; gap: 7px; padding: 14px; border-left: 1px solid var(--line); }
.matrix-row > div:first-child { align-items: flex-start; padding-left: 24px; flex-direction: column; border-left: 0; }
.matrix-row > div:first-child strong { font-size: 14px; }
.matrix-row > div:first-child small { color: var(--muted); font-size: 10px; }
.matrix-row > div:not(:first-child) > strong { font-size: 17px; }
.matrix-row > div:not(:first-child) > a { position: absolute; right: 7px; bottom: 5px; color: var(--blue); font-size: 9px; font-weight: 700; opacity: 0; }
.matrix-row > div:hover > a { opacity: 1; }
.matrix-head { color: #65728a; background: #f8f9fc; }
.matrix-head > div { min-height: 50px; font-size: 11px; font-weight: 800; }
.matrix-head > div:first-child { justify-content: center; padding-left: 24px; }
.matrix-head span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 6px; color: var(--blue); background: #e9edfc; font-size: 10px; }
.info-banner { display: flex; align-items: center; gap: 14px; margin-top: 19px; padding: 18px 20px; border: 1px solid #dfe4f8; border-radius: 14px; background: #f7f9ff; }
.info-banner-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #fff; background: var(--blue); font-weight: 800; }
.info-banner > div:nth-child(2) { flex: 1; }
.info-banner strong { font-size: 13px; }
.info-banner p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }

/* Purchases */
.purchase-layout { grid-template-columns: minmax(0, 1fr) 310px; }
.price-preview { display: flex; min-height: 86px; align-items: center; justify-content: center; padding: 15px; border: 1px dashed #cbd4f6; border-radius: 12px; flex-direction: column; background: #f8faff; }
.price-preview span { color: var(--muted); font-size: 10px; }
.price-preview strong { margin: 2px 0; color: var(--blue); font-size: 21px; }
.price-preview small { color: #9ba4b3; font-size: 9px; }
.price-preview.invalid { color: var(--red); border-color: #efc4c9; background: #fff5f5; }
.price-preview.invalid strong { color: var(--red); }
.valuation-preview { display: flex; min-height: 96px; align-items: center; justify-content: center; padding: 17px; border: 1px solid #cad6fb; border-radius: 13px; flex-direction: column; background: linear-gradient(145deg, #f8faff, #f2f5ff); text-align: center; }
.valuation-preview > span { color: #6d7a94; font-size: 10px; font-weight: 700; }
.valuation-preview strong { margin: 3px 0; color: var(--blue); font-size: 20px; }
.valuation-preview small { color: #8e99ac; font-size: 10px; }
.valuation-preview.invalid { border-color: #f0c7cd; background: #fff5f6; }
.valuation-preview.invalid strong { color: var(--red); }
.insurance-confirm { border-color: #cfe1db; background: #f3fbf8; }
.insurance-confirm strong { color: #23745e; }
.offline-payment-note { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 1px solid #f1dfbd; border-radius: 12px; background: #fffbf1; }
.offline-payment-note > i { display: grid; flex: 0 0 auto; width: 37px; height: 37px; place-items: center; border-radius: 11px; color: #b87722; background: #ffedc9; font-style: normal; font-weight: 900; }
.offline-payment-note strong { font-size: 12px; }
.offline-payment-note p { margin: 2px 0 0; color: #8e7553; font-size: 10px; line-height: 1.65; }
.upload-field { display: flex; min-height: 165px; align-items: center; justify-content: center; padding: 22px; border: 1px dashed #bfc9e7; border-radius: 13px; flex-direction: column; background: #fafbff; cursor: pointer; transition: .16s; }
.upload-field:hover, .upload-field.dragging { border-color: var(--blue); background: #f5f7ff; }
.upload-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { display: grid; width: 38px; height: 38px; margin-bottom: 8px; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); font-size: 18px; }
.upload-field strong { font-size: 12px; }
.upload-field small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.upload-field em { margin-top: 8px; color: var(--blue); font-size: 11px; font-style: normal; font-weight: 700; }
.purchase-summary-card { position: sticky; top: 108px; padding: 27px; border-radius: var(--radius); color: #fff; background: linear-gradient(160deg, #17243f, #263a72); box-shadow: 0 15px 35px rgba(20,35,70,.16); }
.purchase-summary-card h3 { margin: 6px 0 24px; font-size: 20px; }
.purchase-summary-card ol { margin: 0; padding: 0; list-style: none; }
.purchase-summary-card li { display: flex; gap: 11px; margin: 18px 0; }
.purchase-summary-card li i { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #a9b9f8; font-size: 10px; font-style: normal; }
.purchase-summary-card li span { display: flex; flex-direction: column; }
.purchase-summary-card li strong { font-size: 12px; }
.purchase-summary-card li small { margin-top: 2px; color: #9da9c0; font-size: 10px; }
.secure-note { margin-top: 25px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); color: #aeb9ce; font-size: 9px; }
.detail-header { align-items: center; }
.detail-header h2 { margin: 8px 0 3px; font-size: 23px; }
.detail-header p { margin: 0; color: var(--muted); font-size: 11px; }
.detail-title-row { display: flex; align-items: center; gap: 12px; }
.approved-stamp { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #bfe3d7; border-radius: 11px; color: var(--green); background: #f1fbf7; font-weight: 800; }
.approved-stamp span { font-size: 11px; }
.purchase-family-summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 18px; padding: 22px 25px; border: 1px solid #dce3fb; border-radius: 16px; background: linear-gradient(120deg, #f7f9ff, #fff); box-shadow: var(--shadow); }
.purchase-family-summary > div:first-child { min-width: 0; }
.purchase-family-summary > div:first-child > span { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.purchase-family-summary h3 { margin: 2px 0 4px; font-size: 22px; }
.purchase-family-summary p { max-width: 700px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.purchase-family-summary.replacement_plus { border-color: #efddc7; background: linear-gradient(120deg, #fff9ef, #fff); }
.purchase-family-summary.replacement_plus > div:first-child > span { color: #bf6e2f; }
.family-order-meta { display: flex; flex: 0 0 auto; align-items: flex-end; flex-direction: column; }
.family-order-meta > span { color: var(--muted); font-size: 10px; }
.family-order-meta > strong { font-size: 16px; }
.family-order-meta > small { color: var(--blue); font-size: 11px; font-weight: 800; }
.detail-grid { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(420px, 1.28fr); gap: 19px; }
.purchase-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-card, .proof-card { overflow: hidden; }
.detail-list { margin: 0; padding: 12px 20px 20px; }
.detail-list > div { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid #f0f2f5; }
.detail-list dt { color: var(--muted); font-size: 11px; }
.detail-list dd { margin: 0; color: var(--ink); font-weight: 700; }
.detail-list .highlight { margin-top: 8px; padding: 14px; border: 0; border-radius: 10px; background: #f6f8ff; }
.detail-list .highlight dd { color: var(--blue); font-size: 18px; }
.policy-number { max-width: 58%; overflow-wrap: anywhere; text-align: right; }
.valuation-explainer { display: flex; align-items: center; gap: 11px; margin: 3px 20px 20px; padding: 13px; border-radius: 11px; background: #f4f7ff; }
.valuation-explainer > i { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--blue); background: #e3e9ff; font-style: normal; font-weight: 900; }
.valuation-explainer p { display: flex; margin: 0; flex-direction: column; }
.valuation-explainer strong { font-size: 11px; }
.valuation-explainer span { color: var(--muted); font-size: 9px; line-height: 1.6; }
.review-result { margin: 0 20px 20px; padding: 13px; border-radius: 10px; }
.review-result.success { color: #17785c; background: #edf9f5; }
.review-result.danger { color: #a73c47; background: #fff0f2; }
.review-result span { display: block; font-size: 9px; opacity: .72; }
.review-result p { margin: 7px 0 0; font-size: 11px; }
.image-preview { position: relative; display: grid; min-height: 410px; place-items: center; overflow: hidden; background: #f2f4f8; }
.image-preview img { display: block; width: 100%; max-height: 560px; object-fit: contain; }
.image-preview span { position: absolute; bottom: 14px; left: 50%; padding: 6px 11px; border-radius: 99px; color: #fff; background: rgba(17,28,52,.72); font-size: 9px; opacity: 0; transform: translateX(-50%); transition: .16s; }
.image-preview:hover span { opacity: 1; }
.pdf-preview { display: flex; min-height: 410px; align-items: center; justify-content: center; flex-direction: column; background: #f5f6f9; }
.pdf-preview > span { display: grid; width: 70px; height: 85px; margin-bottom: 13px; place-items: center; border-radius: 8px; color: #fff; background: var(--red); font-weight: 900; }
.pdf-preview small { color: var(--muted); }
.proof-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; margin-top: 19px; }
.compact-proof-card .image-preview, .compact-proof-card .pdf-preview { min-height: 310px; }
.proof-missing { display: flex; min-height: 310px; align-items: center; justify-content: center; padding: 30px; flex-direction: column; color: var(--muted); background: #f7f8fa; text-align: center; }
.proof-missing > span { display: grid; width: 55px; height: 55px; margin-bottom: 12px; place-items: center; border-radius: 16px; color: #8a96aa; background: #e9ecf1; font-size: 18px; font-weight: 900; }
.proof-missing strong { color: #5f6b7e; font-size: 12px; }
.proof-missing small { margin-top: 4px; font-size: 9px; }
.review-panel { margin-top: 19px; overflow: hidden; }
.review-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px; padding: 20px; }
.review-actions { display: flex; gap: 9px; padding-bottom: 1px; }

/* Claims */
.claim-rule-banner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 19px; }
.claim-rule-banner article { display: flex; min-height: 118px; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.claim-rule-banner i { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); font-style: normal; font-weight: 900; }
.claim-rule-banner strong { display: block; font-size: 12px; }
.claim-rule-banner p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.claim-preview { display: flex; min-height: 104px; align-items: center; justify-content: center; padding: 17px; border: 1px solid #d8def0; border-radius: 13px; flex-direction: column; background: #f7f8fc; text-align: center; transition: .16s; }
.claim-preview > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.claim-preview strong { margin: 3px 0; color: var(--ink); font-size: 18px; }
.claim-preview small { color: var(--muted); font-size: 9px; }
.claim-preview.replacement { border-color: #bfe1d6; background: #effaf6; }
.claim-preview.replacement strong { color: #16805e; }
.claim-preview.subsidy { border-color: #f0d9bb; background: #fff8ee; }
.claim-preview.subsidy strong { color: #b96a2c; }
.claim-preview.invalid { border-color: #efc9cf; background: #fff3f5; }
.claim-preview.invalid strong { color: var(--red); }
.claim-result-card { display: flex; min-height: 165px; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 19px; padding: 27px 31px; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1b2c4f, #3657bd); box-shadow: 0 16px 38px rgba(30,48,101,.17); }
.claim-result-card > div:first-child { max-width: 720px; }
.claim-result-card > div:first-child > span { color: #adbee8; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.claim-result-card h3 { margin: 3px 0 7px; font-size: 24px; }
.claim-result-card p { margin: 0; color: #bdc8df; font-size: 10px; line-height: 1.75; }
.claim-result-card.cash_subsidy { background: linear-gradient(135deg, #57331d, #bb6c2d); }
.claim-result-card.not_eligible { background: linear-gradient(135deg, #3f4655, #687386); }
.claim-result-numbers { display: flex; flex: 0 0 auto; min-width: 165px; align-items: flex-end; padding-left: 25px; border-left: 1px solid rgba(255,255,255,.16); flex-direction: column; }
.claim-result-numbers > span { color: rgba(255,255,255,.7); font-size: 9px; }
.claim-result-numbers > strong { font-size: 31px; letter-spacing: -.04em; }
.claim-result-numbers > small { color: #fff1c9; font-size: 10px; }

/* Referral and wallet */
.referral-hero { position: relative; display: flex; min-height: 230px; align-items: center; justify-content: space-between; gap: 35px; margin-bottom: 19px; padding: 35px 42px; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(130deg, #192743, #2d4593); box-shadow: 0 18px 40px rgba(27,44,96,.15); }
.referral-hero::after { position: absolute; right: 9%; width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(255,255,255,.02); content: ""; }
.referral-copy { position: relative; z-index: 2; max-width: 700px; }
.referral-copy h2 { margin: 0 0 11px; font-size: 29px; letter-spacing: -.03em; }
.referral-copy p { max-width: 660px; margin: 0; color: #bbc6de; line-height: 1.9; }
.referral-code-card { position: relative; z-index: 3; display: flex; min-width: 235px; padding: 22px; align-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; flex-direction: column; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.referral-code-card > span { color: #abb7d0; font-size: 10px; }
.referral-code-card > strong { margin: 4px 0 13px; font-family: Consolas, monospace; font-size: 24px; letter-spacing: .12em; }
.copy-button { width: 100%; height: 36px; color: #fff; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; background: rgba(255,255,255,.09); font-size: 11px; font-weight: 800; }
.copy-button.copied { color: #1a765b; background: #dcf6ec; }
.progress-panel { margin-bottom: 19px; padding: 21px 24px; }
.progress-head { display: flex; align-items: center; justify-content: space-between; }
.progress-head > div { display: flex; flex-direction: column; }
.progress-head span { color: var(--muted); font-size: 10px; }
.progress-head strong { font-size: 22px; }
.progress-head em { color: #9ba4b3; font-size: 12px; font-style: normal; }
.reward-total { text-align: right; }
.referral-progress { height: 10px; margin: 15px 0 9px; overflow: hidden; border-radius: 99px; background: #edf0f6; }
.referral-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #516ee9, #765ae8); }
.progress-panel > p { margin: 0; color: var(--muted); font-size: 10px; }
.rule-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 19px; }
.rule-steps > article { display: flex; min-height: 105px; align-items: center; gap: 13px; padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.rule-steps > span { color: #aab2c0; }
.rule-steps i { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font-style: normal; font-weight: 800; }
.rule-steps strong { display: block; font-size: 12px; }
.rule-steps p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.wallet-hero { position: relative; display: flex; min-height: 220px; align-items: center; margin-bottom: 20px; padding: 36px 43px; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(130deg, #192744, #294184); box-shadow: 0 18px 40px rgba(25,42,90,.15); }
.wallet-hero p { margin: 3px 0 0; color: #b9c4db; font-size: 12px; }
.wallet-hero strong { display: block; margin: 2px 0; font-size: 38px; letter-spacing: -.04em; }
.wallet-hero strong em { font-size: 16px; font-style: normal; letter-spacing: 0; }
.wallet-hero small { color: #9faac1; }
.wallet-art { position: absolute; right: 8%; display: grid; width: 145px; height: 145px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.035), 0 0 0 68px rgba(255,255,255,.02); }
.wallet-art span { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #5f7cf2, #3753c8); box-shadow: 0 15px 35px rgba(12,25,67,.35); font-size: 27px; font-weight: 800; transform: rotate(-8deg); }

/* Accounts and settings */
.account-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 19px; }
.settlement-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-bottom: 19px; }
.settlement-summary article { display: flex; min-height: 125px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; flex-direction: column; background: #fff; box-shadow: var(--shadow); }
.settlement-summary span { color: var(--muted); font-size: 11px; }
.settlement-summary strong { margin: 5px 0 2px; font-size: 25px; }
.settlement-summary small { color: #a0a8b6; font-size: 10px; }
.settlement-summary .settlement-rule { color: #fff; border: 0; background: linear-gradient(145deg,#1b2b4c,#3454ba); }
.settlement-summary .settlement-rule span,.settlement-summary .settlement-rule small { color: #b9c4dc; }
.audit-panel { overflow: hidden; }
.audit-list article { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; padding: 17px 22px 17px 40px; border-top: 1px solid var(--line); }
.audit-dot { position: absolute; top: 23px; left: 21px; width: 8px; height: 8px; border: 2px solid #aebcf4; border-radius: 50%; background: #fff; }
.audit-main > div { display: flex; align-items: center; gap: 8px; }
.audit-main strong { font-size: 12px; }
.audit-main p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.audit-meta { display: flex; align-items: flex-end; flex-direction: column; }
.audit-meta strong { font-size: 11px; }
.audit-meta span { color: var(--muted); font-size: 9px; }
.side-action-form { margin-top: 15px; }
.danger-zone { border-color: #f1d4d8; }
.account-stat-row article { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.account-stat-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; font-size: 12px; font-weight: 800; }
.account-stat-icon.staff { color: var(--blue); background: var(--blue-soft); }
.account-stat-icon.user { color: #69778b; background: #eef0f4; }
.account-stat-icon.active { color: var(--green); background: #e9f8f3; }
.account-stat-row div { display: flex; flex-direction: column; }
.account-stat-row strong { font-size: 20px; }
.account-stat-row small { color: var(--muted); font-size: 10px; }
.ref-code-small { color: var(--blue); background: var(--blue-soft); }
.row-actions { display: flex; gap: 10px; }
.modal { position: fixed; z-index: 200; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(13,22,43,.6); backdrop-filter: blur(3px); }
.modal-card { position: relative; z-index: 1; width: min(590px, 100%); overflow: hidden; border-radius: 17px; background: #fff; box-shadow: 0 30px 70px rgba(9,18,41,.3); animation: modalIn .2s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-card > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.modal-card h3 { margin: 3px 0 0; font-size: 19px; }
.modal-card form { padding: 22px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 20px; }
.settings-form { padding: 22px; }
.setting-control { display: grid; grid-template-columns: auto 1fr 140px; align-items: center; gap: 14px; margin-bottom: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; }
.setting-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; font-weight: 800; }
.setting-icon.blue { color: var(--blue); background: var(--blue-soft); }
.setting-icon.orange { color: #d97436; background: #fff1e7; }
.setting-control strong { font-size: 13px; }
.setting-control p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.suffix-input { display: flex; height: 42px; overflow: hidden; border: 1px solid #dce1eb; border-radius: 9px; }
.suffix-input input { min-width: 0; padding: 0 10px; border: 0; outline: 0; text-align: right; flex: 1; }
.suffix-input span { display: grid; min-width: 40px; place-items: center; color: #778298; background: #f4f6f9; font-size: 11px; }
.settings-rule-note { display: flex; gap: 11px; margin: 20px 0; padding: 14px; border-radius: 11px; background: #f5f7fd; }
.settings-rule-note i { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: var(--blue); background: #e7ecff; font-family: Georgia,serif; font-style: normal; }
.settings-rule-note p { margin: 0; color: #68748a; font-size: 10px; line-height: 1.7; }
.settings-rule-note strong { display: block; color: var(--ink); font-size: 11px; }
.settings-side { display: flex; flex-direction: column; gap: 17px; }
.profile-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); align-items: start; gap: 20px; }
.profile-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.profile-cover { height: 105px; background: linear-gradient(135deg, #1b2a4a, #3458d3); }
.profile-main { display: flex; align-items: center; padding: 0 25px 25px; flex-direction: column; }
.profile-main .avatar { margin-top: -39px; }
.profile-main h2 { margin: 10px 0 6px; font-size: 20px; }
.profile-main dl { width: 100%; margin: 22px 0 0; }
.profile-main dl div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); }
.profile-main dt { color: var(--muted); font-size: 10px; }
.profile-main dd { margin: 0; font-size: 11px; font-weight: 700; }
.error-page { display: flex; min-height: 65vh; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.error-page > span { color: #dfe4f4; font-size: 90px; font-weight: 900; line-height: 1; }
.error-page h2 { margin: 12px 0 6px; }
.error-page p { margin: 0 0 20px; color: var(--muted); }

@media (max-width: 1180px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .form-page-grid, .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .side-note-card:not(.dark), .purchase-summary-card { position: static; }
    .purchase-layout .purchase-summary-card { display: none; }
}

@media (max-width: 900px) {
    .auth-shell, .install-wrap { grid-template-columns: 1fr; }
    .auth-visual, .install-intro { display: none; }
    .auth-panel, .install-panel { padding: 35px 22px; }
    .sidebar { transform: translateX(-102%); transition: transform .23s ease; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: grid; }
    .sidebar-backdrop { position: fixed; z-index: 45; inset: 0; background: rgba(12,20,39,.55); }
    .sidebar-backdrop.open { display: block; }
    .main-area { width: 100%; margin-left: 0; }
    .menu-toggle { display: grid; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .purchase-detail-grid, .proof-pair-grid { grid-template-columns: 1fr; }
    .valuation-rule { grid-template-columns: 1fr; }
    .valuation-rule > span { display: none; }
    .claim-rule-banner { grid-template-columns: 1fr; }
    .rule-steps { grid-template-columns: 1fr; }
    .rule-steps > span { display: none; }
    .profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    body { font-size: 13px; }
    .topbar { min-height: 72px; padding: 10px 15px; }
    .topbar-title span { display: none; }
    .topbar-title h1 { font-size: 18px; }
    .topbar-actions .button { min-height: 37px; padding: 8px 11px; font-size: 11px; }
    .hide-mobile { display: none; }
    .content-wrap { padding: 20px 15px 35px; }
    .welcome-row { align-items: flex-start; flex-direction: column; }
    .welcome-row .text-link { display: none; }
    .stat-grid { gap: 11px; }
    .stat-card { min-height: 140px; padding: 16px; }
    .stat-card > strong { font-size: 21px; }
    .dashboard-grid { gap: 14px; }
    .bar-chart { gap: 8px; padding-right: 15px; padding-left: 15px; }
    .panel-head { padding: 14px 15px; }
    .page-actions-row { align-items: stretch; flex-direction: column; }
    .filter-bar { display: grid; grid-template-columns: 1fr auto; }
    .search-input { width: 100%; grid-column: span 2; }
    .page-actions-row > .button { width: 100%; }
    th, td { padding-right: 13px; padding-left: 13px; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .form-panel > form { padding: 17px; }
    .product-hero, .catalog-hero, .referral-hero, .wallet-hero { min-height: auto; padding: 27px 22px; }
    .catalog-hero { align-items: flex-start; flex-direction: column; }
    .catalog-age { width: 100%; min-height: 88px; }
    .catalog-hero h2 { font-size: 24px; }
    .family-card-grid { grid-template-columns: 1fr; }
    .family-card { min-height: 170px; padding: 21px; }
    .product-hero-badge, .referral-code-card { display: none; }
    .product-hero h2, .referral-copy h2 { font-size: 23px; }
    .product-table-panel { overflow-x: auto; }
    .info-banner { align-items: flex-start; flex-wrap: wrap; }
    .info-banner .button { width: 100%; }
    .detail-header { align-items: flex-start; flex-direction: column; }
    .detail-header > div { min-width: 0; max-width: 100%; }
    .detail-title-row { max-width: 100%; flex-wrap: wrap; }
    .detail-title-row h2 { max-width: 100%; overflow-wrap: anywhere; word-break: break-all; }
    .purchase-family-summary { align-items: flex-start; padding: 19px; flex-direction: column; }
    .family-order-meta { align-items: flex-start; }
    .detail-list > div { align-items: flex-start; gap: 14px; }
    .detail-list dd { text-align: right; }
    .policy-number { max-width: 62%; }
    .approved-stamp { display: none; }
    .image-preview, .pdf-preview { min-height: 300px; }
    .compact-proof-card .image-preview, .compact-proof-card .pdf-preview, .proof-missing { min-height: 250px; }
    .review-form { grid-template-columns: 1fr; }
    .review-actions { justify-content: flex-end; }
    .referral-hero { align-items: flex-start; flex-direction: column; }
    .referral-code-card { display: flex; width: 100%; }
    .rule-steps > article { min-height: 90px; }
    .wallet-art { display: none; }
    .account-stat-row { grid-template-columns: 1fr; }
    .settlement-summary { grid-template-columns: 1fr; }
    .audit-list article { grid-template-columns: 1fr; }
    .audit-meta { align-items: flex-start; }
    .claim-result-card { align-items: flex-start; padding: 22px; flex-direction: column; }
    .claim-result-numbers { width: 100%; min-width: 0; align-items: flex-start; padding: 15px 0 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
    .setting-control { grid-template-columns: auto 1fr; }
    .setting-control .suffix-input { grid-column: span 2; }
    .modal-card form { padding: 17px; }
}