:root {
  --color-ink: #162231;
  --color-ink-soft: #425064;
  --color-muted: #626e7e;
  --color-navy-950: #101b29;
  --color-navy-900: #162433;
  --color-navy-800: #203247;
  --color-canvas: #f5f1e9;
  --color-surface: #fffdf9;
  --color-surface-soft: #f9f6ef;
  --color-line: #e4ded3;
  --color-line-strong: #d5cec1;
  --color-accent: #bd5738;
  --color-accent-dark: #a84d31;
  --color-accent-soft: #f4dfd5;
  --color-blue: #3d6f8f;
  --color-blue-soft: #e1edf3;
  --color-green: #30745d;
  --color-green-soft: #e0eee8;
  --color-amber: #a56627;
  --color-amber-soft: #f4e7d2;
  --color-red: #a53f3f;
  --color-red-soft: #f5dede;
  --shadow-sm: 0 1px 2px rgba(19, 31, 43, .05), 0 8px 24px rgba(19, 31, 43, .04);
  --shadow-md: 0 18px 48px rgba(19, 31, 43, .13);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --sidebar-width: 246px;
  --topbar-height: 62px;
  --content-max: 1480px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --focus: 0 0 0 3px rgba(61, 111, 143, .3);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--color-canvas); color: var(--color-ink); font-size: 14px; line-height: 1.5; }
[x-cloak] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-bottom: 6px; font-size: 18px; line-height: 1.2; letter-spacing: -.015em; }
h3 { font-size: 15px; }
p { color: var(--color-muted); }
small { color: var(--color-muted); }
button { border: 0; }
:focus-visible { outline: 0; box-shadow: var(--focus); border-radius: var(--radius-sm); }
::selection { color: var(--color-navy-950); background: #efd4c6; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 14px; border-radius: var(--radius-sm); background: white; color: var(--color-navy-950); }
.skip-link:focus { transform: translateY(0); }
.positive { color: var(--color-green) !important; }
.fine-print { font-size: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: white; font-size: 18px; font-weight: 750; letter-spacing: -.03em; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--color-accent); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.brand-mark i { font-size: 19px; }
.brand--public { color: var(--color-navy-950); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--color-accent-dark); font-size: 11px; font-weight: 750; letter-spacing: .105em; text-transform: uppercase; }
.eyebrow--muted { color: var(--color-muted); }

.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--color-accent); border-radius: 9px; background: var(--color-accent); color: white; font-weight: 680; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.button:hover { border-color: var(--color-accent-dark); background: var(--color-accent-dark); }
.button:active { transform: translateY(1px); }
.button--small { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.button--large { min-height: 50px; padding: 12px 20px; }
.button--full { width: 100%; }
.button--secondary { border-color: var(--color-line-strong); background: var(--color-surface); color: var(--color-ink); }
.button--secondary:hover { border-color: var(--color-ink-soft); background: var(--color-surface-soft); }
.button--light { border-color: rgba(255,255,255,.35); background: white; color: var(--color-accent-dark); }
.button--light:hover { border-color: white; background: #fff7f2; }
.button--danger { border-color: var(--color-red); background: var(--color-red); }
.button--danger:hover { border-color: #833030; background: #833030; }
.text-link { color: var(--color-blue); font-size: 13px; font-weight: 650; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--color-blue); font-weight: 650; }
.icon-button { display: inline-grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid var(--color-line); border-radius: 9px; background: var(--color-surface); color: var(--color-ink-soft); cursor: pointer; }
.icon-button:hover { border-color: var(--color-line-strong); background: var(--color-surface-soft); color: var(--color-ink); }
.icon-button--dark { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #dce3e8; }

.public-body { background: #faf7f1; }
.public-header { display: flex; width: min(1180px, calc(100% - 48px)); height: 76px; align-items: center; justify-content: space-between; margin: 0 auto; }
.public-header nav { display: flex; align-items: center; gap: 26px; color: var(--color-ink-soft); font-weight: 580; }
.public-header nav > a:hover:not(.button) { color: var(--color-accent-dark); }
.hero { display: grid; width: min(1260px, calc(100% - 48px)); min-height: 670px; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 72px; margin: 0 auto; padding: 64px 0 92px; }
.hero-copy h1 { margin-bottom: 24px; font-family: Georgia, serif; font-size: clamp(56px, 6vw, 88px); font-weight: 500; line-height: .95; letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--color-accent); font-weight: 500; }
.hero-copy > p { max-width: 590px; margin-bottom: 28px; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.trust-line { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; color: var(--color-muted); font-size: 12px; }
.trust-line span { display: inline-flex; align-items: center; gap: 6px; }
.trust-line i { color: var(--color-green); }
.hero-product { position: relative; padding: 24px 0 0 24px; }
.hero-product::before { position: absolute; inset: 0 34px 34px 0; border-radius: 48% 52% 45% 55%; background: #e8d8c6; content: ""; transform: rotate(-4deg); }
.mini-window { position: relative; display: grid; min-height: 470px; grid-template-columns: 62px 1fr; overflow: hidden; border: 1px solid rgba(22,34,49,.13); border-radius: 16px; background: var(--color-canvas); box-shadow: 0 30px 80px rgba(27,39,52,.2); transform: rotate(1.6deg); }
.mini-sidebar { display: flex; align-items: center; flex-direction: column; gap: 25px; padding: 17px 0; background: var(--color-navy-950); color: #7e90a1; font-size: 20px; }
.mini-sidebar i.active { color: white; }
.mini-logo { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: var(--color-accent); color: white; }
.mini-content { padding: 0 22px 30px; }
.mini-top { height: 50px; margin: 0 -22px 22px; border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.mini-content h3 { font-size: 22px; }
.mini-priority { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 17px; border-radius: 12px; background: var(--color-accent); color: white; }
.mini-priority > span { width: 10px; height: 38px; border-radius: 10px; background: white; opacity: .75; }
.mini-priority div { display: grid; }
.mini-priority small { color: #ffe9dd; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-grid div { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-surface); }
.mini-grid b { color: var(--color-muted); font-size: 10px; text-transform: uppercase; }
.mini-grid strong { font-size: 24px; }
.mini-table { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-surface); }
.mini-table span { height: 16px; border-radius: 4px; background: linear-gradient(90deg, #e8e3db 35%, #f4f0ea 35%); }
.feature-section, .pricing-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto 112px; }
.section-heading { max-width: 650px; margin-bottom: 36px; }
.section-heading h2, .pricing-section h2 { font-family: Georgia, serif; font-size: clamp(36px, 4vw, 54px); font-weight: 500; line-height: 1.05; }
.section-heading p { font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid article { padding: 30px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.feature-grid article > i { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 22px; border-radius: 12px; background: var(--color-blue-soft); color: var(--color-blue); font-size: 23px; }
.feature-grid article:nth-child(2) > i { background: var(--color-amber-soft); color: var(--color-amber); }
.feature-grid article:nth-child(3) > i { background: var(--color-green-soft); color: var(--color-green); }
.feature-grid h3 { margin-bottom: 10px; font-size: 20px; }
.pricing-section { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 80px; padding: 76px; border-radius: 26px; background: var(--color-navy-950); color: white; }
.pricing-section .eyebrow { color: #f4c7b5; }
.pricing-section > div > p { max-width: 560px; color: #aeb9c4; font-size: 17px; }
.price-card { padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: white; color: var(--color-ink); box-shadow: var(--shadow-md); }
.price-card-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--color-line); }
.price-card-head > span { font-size: 20px; font-weight: 750; }
.price-card-head strong { font-size: 34px; }
.price-card-head small { font-size: 13px; font-weight: 500; }
.price-card ul { display: grid; gap: 13px; margin: 22px 0; padding: 0; list-style: none; }
.price-card li { display: flex; align-items: center; gap: 10px; }
.price-card li i { color: var(--color-green); }
.price-card > small { display: block; margin-top: 12px; text-align: center; }
.public-footer { display: flex; width: min(1180px, calc(100% - 48px)); align-items: center; justify-content: space-between; margin: 0 auto; padding: 34px 0; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 12px; }

.login-body { display: grid; min-height: 100vh; place-items: center; padding: 32px 16px; background: radial-gradient(circle at 25% 5%, #efe3d6 0, transparent 35%), var(--color-canvas); }
.login-shell { display: grid; width: min(430px, 100%); justify-items: center; gap: 24px; }
.login-card, .form-card { width: 100%; padding: 34px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.login-card h1 { font-size: 30px; }
.login-card > p { margin-bottom: 24px; }
.login-switch { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-line); color: var(--color-muted); text-align: center; }
.login-switch a { color: var(--color-blue); font-weight: 650; }
.login-foot { display: flex; align-items: center; gap: 6px; }
.stack-form { display: grid; gap: 16px; }
.stack-form label, .form-grid label { display: grid; gap: 7px; color: var(--color-ink-soft); font-size: 12px; font-weight: 650; }
input, select, textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--color-line-strong); border-radius: 8px; outline: 0; background: white; }
textarea { min-height: 112px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #aeb5bd; }
input:focus, select:focus, textarea:focus { border-color: var(--color-blue); box-shadow: var(--focus); }
input::placeholder { color: #9aa3ad; }
.totp-input { font-size: 26px; font-weight: 750; letter-spacing: .4em; text-align: center; }
.message-card { text-align: center; }
.message-icon { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--color-green-soft); color: var(--color-green); font-size: 26px; }
.message-icon--error { background: var(--color-red-soft); color: var(--color-red); }
.alert { margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 9px; background: var(--color-surface-soft); }
.alert--error { border-color: #e5bcbc; background: var(--color-red-soft); color: #7e3131; }
.alert--warning { border-color: #e4c694; background: var(--color-amber-soft); color: #7c4a17; }
.alert--success { border-color: #bddacf; background: var(--color-green-soft); color: var(--color-green); }
.auth-layout { display: grid; width: min(1080px, calc(100% - 48px)); grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; margin: 60px auto 100px; }
.auth-intro h1 { max-width: 520px; font-family: Georgia, serif; font-size: clamp(42px, 5vw, 64px); font-weight: 500; }
.auth-intro > p { max-width: 500px; font-size: 17px; line-height: 1.7; }
.quiet-list { display: grid; gap: 12px; padding: 0; list-style: none; color: var(--color-ink-soft); }
.quiet-list li { display: flex; align-items: center; gap: 9px; }
.quiet-list i { color: var(--color-green); }
.form-card-head { margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-grid fieldset { display: grid; align-content: center; gap: 5px; margin: 0; padding: 0; border: 0; }
.form-grid legend { margin-bottom: 5px; color: var(--color-ink-soft); font-size: 12px; font-weight: 650; }
.radio { display: flex !important; align-items: center; gap: 8px; }
.radio input { width: 16px; min-height: 16px; }
.span-2 { grid-column: span 2; }

.app-body { overflow-x: hidden; }
.app-frame { min-height: 100vh; }
.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; background: var(--color-navy-950); color: #d7e0e7; }
.sidebar-head { display: flex; height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid rgba(255,255,255,.075); }
.sidebar-close { display: none; }
.club-switcher { display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px; margin: 13px 12px 8px; padding: 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: rgba(255,255,255,.035); }
.club-monogram { display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border-radius: 8px; background: #d7e5e4; color: var(--color-navy-950); font-size: 11px; font-weight: 800; }
.club-switcher > span:nth-child(2) { display: grid; min-width: 0; }
.club-switcher strong, .club-switcher small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-switcher strong { font-size: 11px; }
.club-switcher small { color: #8494a3; font-size: 10px; }
.nav-list { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 2px; overflow-y: auto; padding: 7px 11px 14px; scrollbar-width: thin; }
.nav-list > a { display: flex; min-height: 37px; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px; color: #9cabb8; font-size: 12px; font-weight: 560; }
.nav-list > a i { width: 18px; font-size: 17px; text-align: center; }
.nav-list > a:hover { background: rgba(255,255,255,.055); color: white; }
.nav-list > a.active { background: var(--color-accent); color: white; }
.nav-section { margin: 13px 10px 4px; color: #7f91a1; font-size: 9px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-footer { display: flex; align-items: center; gap: 9px; padding: 13px 12px; border-top: 1px solid rgba(255,255,255,.075); }
.sidebar-user { display: grid; min-width: 0; flex: 1; }
.sidebar-user strong, .sidebar-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: white; font-size: 11px; }
.sidebar-user small { color: #7f8e9d; font-size: 9px; }
.avatar { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e1c0ae; color: #633c2d; font-size: 10px; font-weight: 800; }
.avatar--small { width: 27px; height: 27px; }
.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; height: var(--topbar-height); align-items: center; gap: 13px; padding: 0 22px; border-bottom: 1px solid var(--color-line); background: rgba(255,253,249,.94); backdrop-filter: blur(12px); }
.global-search { position: relative; display: flex; width: min(570px, 60vw); align-items: center; margin-right: auto; }
.global-search > i { position: absolute; left: 12px; color: var(--color-muted); }
.global-search input { min-height: 36px; padding: 7px 50px 7px 36px; border-color: transparent; background: #f4f1eb; }
.global-search kbd { position: absolute; right: 8px; padding: 2px 6px; border: 1px solid var(--color-line); border-radius: 5px; background: white; color: var(--color-muted); font: 10px Inter, sans-serif; }
.topbar-action { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: var(--color-ink-soft); }
.topbar-action:hover { background: var(--color-surface-soft); }
.topbar-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--color-navy-800); color: white; font-size: 10px; font-weight: 800; }
.mobile-menu { display: none; }
.content-shell { width: min(var(--content-max), 100%); margin: 0 auto; padding: 31px 34px 54px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.page-heading h1 { font-size: 30px; }
.page-heading p { margin-bottom: 0; }
.page-date { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 10px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); color: var(--color-muted); font-size: 12px; }
.panel { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 15px; }
.panel-head h2, .panel-head p { margin-bottom: 0; }
.panel-head p { margin-top: 3px; font-size: 12px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 335px; gap: 20px; }
.dashboard-primary, .dashboard-aside { display: grid; align-content: start; gap: 18px; }
.priority-card { display: flex; align-items: center; gap: 17px; min-height: 120px; padding: 20px 22px; border-radius: var(--radius-md); background: linear-gradient(105deg, var(--color-accent), #b55337); color: white; box-shadow: 0 12px 28px rgba(169,74,45,.2); }
.priority-card--quiet { background: linear-gradient(105deg, var(--color-green), #255d4a); }
.priority-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: rgba(255,255,255,.15); font-size: 22px; }
.priority-copy { min-width: 0; flex: 1; }
.priority-copy .eyebrow { margin-bottom: 4px; color: white; }
.priority-copy h2 { margin-bottom: 4px; font-size: 17px; }
.priority-copy p { margin-bottom: 8px; overflow: hidden; color: white; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.meta-row { display: flex; flex-wrap: wrap; gap: 16px; color: white; font-size: 10px; }
.meta-row span { display: inline-flex; align-items: center; gap: 5px; }
.queue-panel { overflow: hidden; }
.queue-tabs { display: flex; gap: 3px; padding: 0 18px; border-bottom: 1px solid var(--color-line); }
.queue-tabs button { position: relative; padding: 10px 11px 12px; background: none; color: var(--color-muted); font-size: 11px; cursor: pointer; }
.queue-tabs button[aria-selected="true"] { color: var(--color-ink); font-weight: 700; }
.queue-tabs button[aria-selected="true"]::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: var(--color-accent); content: ""; }
.queue-tabs span, .count-badge { display: inline-grid; min-width: 20px; height: 20px; place-items: center; margin-left: 4px; border-radius: 10px; background: var(--color-surface-soft); color: var(--color-muted); font-size: 9px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 10px 14px; border-bottom: 1px solid var(--color-line); background: var(--color-surface-soft); color: var(--color-muted); font-size: 9px; font-weight: 750; letter-spacing: .075em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid #eee9e0; color: var(--color-ink-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbf8f2; }
td > strong, td > small { display: block; }
.row-title { display: block; overflow: hidden; max-width: 330px; color: var(--color-ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
td small, .row-title + small { display: block; overflow: hidden; max-width: 330px; margin-top: 2px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.person { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.badge { display: inline-flex; min-height: 22px; align-items: center; padding: 3px 8px; border-radius: 999px; background: #eceff1; color: #596676; font-size: 9px; font-weight: 700; white-space: nowrap; }
.badge--active, .badge--paid, .badge--done, .badge--posted, .badge--sent { background: var(--color-green-soft); color: var(--color-green); }
.badge--approval, .badge--pending, .badge--draft, .badge--qualified, .badge--checkout_sent { background: var(--color-amber-soft); color: var(--color-amber); }
.badge--in_progress, .badge--open, .badge--annual { background: var(--color-blue-soft); color: var(--color-blue); }
.badge--unpaid, .badge--cancelled, .badge--past_due, .badge--failed, .badge--suspended { background: var(--color-red-soft); color: var(--color-red); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metric-grid > a { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
.metric-grid > a:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-sm); }
.metric-grid > a > span:nth-child(2) { display: grid; }
.metric-grid small { font-size: 9px; }
.metric-grid strong { font-size: 16px; }
.metric-grid > a > i { color: var(--color-muted); }
.metric-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; font-size: 18px; }
.metric-icon--blue { background: var(--color-blue-soft); color: var(--color-blue); }
.metric-icon--green { background: var(--color-green-soft); color: var(--color-green); }
.metric-icon--amber { background: var(--color-amber-soft); color: var(--color-amber); }
.timeline { display: grid; padding: 0 16px 14px; }
.timeline a { display: grid; grid-template-columns: 78px 1fr 14px; align-items: center; gap: 11px; padding: 12px 3px; border-top: 1px solid var(--color-line); }
.timeline a:first-child { border-top: 0; }
.timeline a:hover b { color: var(--color-blue); }
.timeline time, .timeline a > span { display: grid; }
.timeline time strong { font-size: 10px; }
.timeline time small, .timeline a > span small { font-size: 9px; }
.timeline b { font-size: 11px; }
.timeline > a > i { color: var(--color-muted); }
.storage-card, .finance-card { padding-bottom: 18px; }
.storage-values { display: flex; align-items: baseline; gap: 5px; padding: 0 20px 8px; }
.storage-values strong { font-size: 23px; }
.storage-values span { color: var(--color-muted); font-size: 11px; }
.progress { width: calc(100% - 40px); height: 7px; margin: 0 20px 9px; overflow: hidden; border: 0; border-radius: 10px; appearance: none; background: #ebe6dc; }
.progress::-webkit-progress-bar { border-radius: 10px; background: #ebe6dc; }
.progress::-webkit-progress-value { border-radius: 10px; background: var(--color-accent); }
.progress::-moz-progress-bar { border-radius: 10px; background: var(--color-accent); }
.storage-card > small { display: block; padding: 0 20px; font-size: 9px; }
.finance-row { display: flex; align-items: center; justify-content: space-between; margin: 0 20px; padding: 9px 0; border-top: 1px solid var(--color-line); font-size: 11px; }
.finance-row span { display: inline-flex; align-items: center; gap: 7px; color: var(--color-muted); }
.finance-row--total { margin-top: 4px; padding-top: 13px; font-size: 13px; }
.empty-state { display: grid; min-height: 250px; place-items: center; align-content: center; padding: 30px; text-align: center; }
.empty-state > i { margin-bottom: 10px; color: var(--color-muted); font-size: 32px; }
.empty-state h2, .empty-state h3 { margin-bottom: 5px; }
.empty-state p { max-width: 420px; margin-bottom: 16px; }
.empty-state--compact { min-height: 140px; }

.resource-panel { overflow: hidden; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; }
.filter-search { position: relative; width: min(330px, 100%); }
.filter-search i { position: absolute; top: 12px; left: 11px; color: var(--color-muted); }
.filter-search input { min-height: 36px; padding-left: 34px; }
.form-panel { max-width: 920px; padding: 26px; }
.form-grid--resource { gap: 20px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.detail-panel { padding: 24px; }
.detail-panel > h2 { margin-bottom: 18px; }
.detail-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.detail-panel dl > div { padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.detail-panel dt { color: var(--color-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.detail-panel dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 560; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding: 18px; border: 1px solid #e5c1c1; border-radius: var(--radius-md); background: #fdf7f5; }
.danger-zone p { margin: 2px 0 0; font-size: 11px; }
.search-results { overflow: hidden; }
.search-results > a { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--color-line); }
.search-results > a:last-child { border-bottom: 0; }
.search-results > a:hover { background: var(--color-surface-soft); }
.search-results small, .search-results strong, .search-results p { display: block; }
.search-results p { margin: 2px 0 0; font-size: 11px; }
.result-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; background: var(--color-blue-soft); color: var(--color-blue); }

.storage-summary { margin-bottom: 18px; padding: 19px 22px; }
.storage-summary > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.storage-summary strong { font-size: 19px; }
.storage-summary strong small { font-size: 11px; }
.storage-summary .progress { width: 100%; margin: 12px 0 8px; }
.storage-summary p { margin: 0; font-size: 10px; }
.file-name { display: inline-flex; align-items: center; gap: 10px; }
.file-name > i { color: var(--color-blue); font-size: 21px; }
.file-name > span { display: grid; }
.dialog { width: min(520px, calc(100% - 30px)); padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.dialog::backdrop { background: rgba(16,27,41,.55); backdrop-filter: blur(3px); }
.dialog form { padding: 24px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-head p { margin-bottom: 0; font-size: 11px; }
.drop-zone { position: relative; place-items: center; padding: 26px; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-surface-soft); text-align: center; cursor: pointer; }
.drop-zone > i { color: var(--color-blue); font-size: 28px; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: 18px; }
.media-list, .gallery-list { display: grid; }
.media-row { display: grid; grid-template-columns: 18px 42px 1fr auto; align-items: center; gap: 11px; padding: 12px 18px; border-top: 1px solid var(--color-line); cursor: pointer; }
.media-row input { width: 16px; min-height: 16px; }
.media-row > span:nth-child(3) { display: grid; }
.media-thumb, .gallery-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 9px; background: var(--color-blue-soft); color: var(--color-blue); font-size: 20px; }
.gallery-list article { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 11px; padding: 12px 18px; border-top: 1px solid var(--color-line); }
.gallery-list article > span:nth-child(2) { display: grid; }
.gallery-create { margin: 16px; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-soft); }
[data-selected-count] { color: var(--color-muted); font-size: 11px; }

.billing-blocked { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 20px; border: 1px solid #e2b5b5; border-radius: var(--radius-md); background: var(--color-red-soft); }
.billing-blocked > span { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: white; color: var(--color-red); font-size: 23px; }
.billing-blocked h2, .billing-blocked p { margin-bottom: 3px; }
.billing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.plan-card, .quota-card { padding: 6px 4px 22px; }
.plan-price { padding: 16px 20px 22px; border-bottom: 1px solid var(--color-line); font-size: 34px; font-weight: 760; }
.plan-price small { font-size: 12px; font-weight: 500; }
.plan-card dl { margin: 0; padding: 8px 20px 18px; }
.plan-card dl > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--color-line); }
.plan-card dt { color: var(--color-muted); }
.plan-card dd { margin: 0; font-weight: 650; }
.plan-card form { padding: 0 20px; }
.quota-card > .panel-head > i { color: var(--color-blue); font-size: 26px; }
.progress--large { height: 11px; margin-top: 20px; }
.quota-numbers { display: flex; justify-content: space-between; padding: 0 20px; color: var(--color-muted); font-size: 10px; }
.quota-card > p, .storage-blocks { margin-right: 20px; margin-left: 20px; }
.storage-blocks { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; padding: 14px; border-radius: var(--radius-md); background: var(--color-surface-soft); }
.storage-blocks strong { font-size: 24px; }
.tax-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.tax-note > i { color: var(--color-green); font-size: 24px; }
.tax-note p { margin: 3px 0 0; font-size: 11px; }

.member-body { background: var(--color-canvas); }
.member-header { display: flex; min-height: 68px; align-items: center; gap: 22px; padding: 0 max(24px, calc((100vw - 1180px)/2)); border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.member-club { flex: 1; color: var(--color-muted); }
.member-account { display: flex; align-items: center; gap: 9px; }
.member-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 70px; }
.member-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.activity-cards, .document-cards { display: grid; }
.activity-cards article { display: grid; grid-template-columns: 95px 1fr auto; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--color-line); }
.activity-cards h3, .activity-cards p { margin-bottom: 0; }
.document-cards a { display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--color-line); }
.document-cards a > i:first-child { color: var(--color-blue); font-size: 22px; }
.document-cards a > span { display: grid; }

.platform-frame { min-height: 100vh; padding-left: 260px; }
.platform-sidebar { position: fixed; inset: 0 auto 0 0; display: flex; width: 260px; flex-direction: column; padding: 18px 12px; background: var(--color-navy-950); }
.platform-sidebar > .brand { padding: 0 8px 20px; }
.platform-sidebar .nav-list { margin: 18px 0; }
.platform-sidebar .sidebar-footer { margin-top: auto; }
.platform-content { width: min(1280px, 100%); margin: 0 auto; padding: 38px; }
.platform-section { margin-bottom: 18px; overflow: hidden; }

.action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.action-row form { margin: 0; }
.icon-button--danger { color: var(--color-red); }
.icon-button--danger:hover { border-color: #e5bcbc; background: var(--color-red-soft); color: #7e3131; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 18px; }
.settings-grid > aside { display: grid; align-content: start; gap: 18px; }
.role-list, .assignment-list, .backup-list, .audit-list, .platform-item-list, .calendar-list { display: grid; }
.role-card { display: grid; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--color-line); }
.role-card > div:first-of-type, .assignment-list span, .backup-list article > div, .audit-list article > div, .platform-item-list div { display: grid; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.permission-grid label { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 9px; padding: 10px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
.permission-grid input { width: 16px; min-height: 16px; margin-top: 2px; }
.permission-grid span { display: grid; }
.permission-grid small { font-size: 9px; }
.assignment-list form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr) 36px; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--color-line); }
.backup-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--color-line); }
.audit-list article { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--color-line); }
.calendar-list > a, .platform-item-list > a, .platform-item-list > article { display: grid; grid-template-columns: 105px 1fr auto 18px; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--color-line); }
.calendar-list time, .calendar-list a > span { display: grid; }
.calendar-list > a:hover, .platform-item-list > a:hover { background: var(--color-surface-soft); }
.platform-item-list > a, .platform-item-list > article { grid-template-columns: 1fr auto 18px; }
.platform-item-list > article { grid-template-columns: 1fr auto; }
.platform-item-list p { margin: 3px 0 0; font-size: 11px; }
.inline-action { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.inline-action--complete { align-items: center; border-color: #bddacf; background: var(--color-green-soft); color: var(--color-green); }
.inline-action--complete i { font-size: 24px; }
.inline-action > div { flex: 1; }
.inline-action p { margin: 3px 0 0; font-size: 11px; }
.inline-action label { display: grid; min-width: min(280px, 100%); gap: 6px; color: var(--color-ink-soft); font-size: 11px; font-weight: 650; }
.workflow-actions { display: grid; gap: 10px; margin-top: 24px; padding-top: 4px; }
.compact-action { display: flex; justify-content: flex-end; }
.finance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.finance-summary > div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
.finance-summary > div span { color: var(--color-muted); font-size: 10px; }
.finance-summary > div strong { font-size: 18px; }
.finance-summary--page { margin: 0 0 18px; }
.year-picker { display: flex; align-items: end; gap: 8px; }
.year-picker label { display: grid; gap: 5px; color: var(--color-muted); font-size: 10px; font-weight: 700; }
.year-picker input { width: 110px; }
.annual-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.annual-card { padding: 18px; }
.annual-card > span { color: var(--color-muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.annual-card dl { margin: 12px 0 0; }
.annual-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--color-line); }
.annual-card dt { color: var(--color-muted); }
.annual-card dd { margin: 0; font-weight: 700; }
.annual-card > small { display: block; margin-top: 9px; }
.export-form { padding: 0 20px 20px; }
.media-row { grid-template-columns: 18px 42px 1fr auto 36px; }
.media-select { display: grid; place-items: center; }
.media-select input { width: 16px; min-height: 16px; }

.gallery-body { background: #f7f3ec; }
.gallery-header { display: flex; height: 70px; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1180px)/2)); border-bottom: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-muted); }
.gallery-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 56px 0 80px; }
.gallery-heading { max-width: 680px; margin-bottom: 30px; }
.gallery-heading h1 { font-family: Georgia, serif; font-size: 48px; font-weight: 500; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery-grid figure { overflow: hidden; margin: 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.gallery-grid figure > a { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: #e9e4da; }
.gallery-grid img, .gallery-grid video { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid figcaption { display: grid; padding: 13px 15px; }
.gallery-footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 28px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; }

@media (max-width: 1120px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-aside > .panel:first-child { grid-column: span 2; }
  .hero { gap: 35px; }
  .pricing-section { gap: 45px; padding: 55px; }
}

@media (max-width: 900px) {
  .sidebar { width: min(290px, 88vw); transform: translateX(-105%); transition: transform .2s ease; }
  .sidebar--open { transform: translateX(0); }
  .sidebar-close, .mobile-menu { display: grid; }
  .sidebar-scrim { position: fixed; z-index: 35; inset: 0; background: rgba(16,27,41,.48); }
  .app-main { margin-left: 0; }
  .content-shell { padding: 28px 22px 48px; }
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .hero-copy { max-width: 720px; }
  .hero-product { width: min(720px, 100%); margin: 0 auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .pricing-section, .auth-layout { grid-template-columns: 1fr; }
  .auth-layout { gap: 35px; }
  .two-column, .member-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .annual-report-grid { grid-template-columns: 1fr; }
  .platform-frame { padding-left: 0; }
  .platform-sidebar { position: static; width: 100%; min-height: auto; }
  .platform-sidebar .nav-list { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .platform-sidebar .sidebar-footer { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .public-header { width: calc(100% - 28px); }
  .public-header nav > a:not(.button) { display: none; }
  .hero, .feature-section, .pricing-section, .public-footer, .auth-layout, .member-content, .gallery-content { width: calc(100% - 28px); }
  .hero { min-height: auto; padding: 42px 0 70px; }
  .hero-copy h1 { font-size: 52px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .trust-line { display: grid; }
  .hero-product { padding-left: 0; }
  .mini-window { min-height: 360px; grid-template-columns: 48px 1fr; }
  .mini-content { padding-right: 12px; padding-left: 12px; }
  .mini-grid { grid-template-columns: 1fr 1fr; }
  .mini-grid div:last-child { display: none; }
  .pricing-section { gap: 25px; padding: 28px 18px; }
  .public-footer { align-items: flex-start; flex-direction: column; gap: 15px; }
  .auth-intro { display: none; }
  .form-card, .login-card { padding: 24px 18px; }
  .form-grid, .form-grid--resource { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .topbar { padding: 0 12px; }
  .global-search { width: auto; min-width: 0; flex: 1; }
  .global-search kbd { display: none; }
  .content-shell { padding: 23px 13px 42px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading > .button { width: 100%; }
  .year-picker { align-items: stretch; flex-direction: column; }
  .year-picker input { width: 100%; }
  .priority-card { align-items: flex-start; flex-wrap: wrap; }
  .priority-copy { min-width: calc(100% - 65px); }
  .priority-card > .button { width: 100%; }
  .queue-tabs { overflow-x: auto; }
  .queue-tabs button { white-space: nowrap; }
  .queue-panel .table-wrap { overflow: visible; }
  .queue-table, .queue-table tbody, .queue-table tr, .queue-table td { display: block; width: 100%; }
  .queue-table thead { display: none; }
  .queue-table tbody { padding: 8px 12px 12px; }
  .queue-table tr { position: relative; margin-bottom: 8px; padding: 11px 38px 10px 11px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); }
  .queue-table td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 3px 0; border: 0; font-size: 11px; }
  .queue-table td::before { color: var(--color-muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; content: attr(data-label); }
  .queue-table td:first-child { display: block; padding-bottom: 8px; }
  .queue-table td:first-child::before { display: none; }
  .queue-table .queue-action { position: absolute; top: 8px; right: 7px; display: block; width: auto; }
  .queue-table .queue-action::before { display: none; }
  .queue-table .person { min-width: 0; }
  .metric-grid, .dashboard-aside, .billing-grid { grid-template-columns: 1fr; }
  .dashboard-aside > .panel:first-child { grid-column: auto; }
  .panel-toolbar { align-items: stretch; flex-direction: column; }
  .filter-search { width: 100%; }
  .form-panel, .detail-panel { padding: 18px 14px; }
  .form-actions, .danger-zone, .inline-action { align-items: stretch; flex-direction: column; }
  .detail-panel dl { grid-template-columns: 1fr; }
  .media-row { grid-template-columns: 18px 42px 1fr 36px; }
  .media-row > .badge { display: none; }
  .permission-grid, .finance-summary { grid-template-columns: 1fr; }
  .assignment-list form { grid-template-columns: 1fr 36px; }
  .assignment-list form select { grid-row: 2; }
  .backup-list article { grid-template-columns: 1fr auto; }
  .calendar-list > a { grid-template-columns: 82px 1fr auto; }
  .calendar-list > a > i { display: none; }
  .gallery-list article { grid-template-columns: 42px 1fr auto; }
  .gallery-list article > .badge { display: none; }
  .member-header { flex-wrap: wrap; padding: 12px 14px; }
  .member-club { order: 3; width: 100%; }
  .member-account > span:not(.avatar) { display: none; }
  .activity-cards article { grid-template-columns: 1fr auto; }
  .activity-cards time { grid-column: span 2; color: var(--color-muted); }
  .platform-content { padding: 24px 14px; }
  .platform-sidebar .nav-list { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-heading h1 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}