:root {
    color-scheme: light;
    --color-bg: oklch(0.978 0.008 275);
    --color-surface: oklch(1 0 0);
    --color-surface-soft: oklch(0.955 0.014 275);
    --color-surface-strong: oklch(0.915 0.026 275);
    --color-ink: oklch(0.22 0.035 278);
    --color-ink-soft: oklch(0.42 0.035 278);
    --color-border: oklch(0.875 0.022 275);
    --color-primary: oklch(0.52 0.19 265);
    --color-primary-hover: oklch(0.45 0.18 265);
    --color-primary-action-hover: oklch(0.45 0.18 265);
    --color-primary-soft: oklch(0.925 0.055 270);
    --color-primary-pale: oklch(0.965 0.026 270);
    --color-sidebar: oklch(0.19 0.045 278);
    --color-sidebar-soft: oklch(0.29 0.085 268);
    --color-success: oklch(0.48 0.13 150);
    --color-success-soft: oklch(0.94 0.045 150);
    --color-danger: oklch(0.57 0.19 25);
    --color-danger-soft: oklch(0.94 0.045 25);
    --color-warning: oklch(0.67 0.14 75);
    --color-warning-soft: oklch(0.95 0.055 85);
    --color-info: oklch(0.52 0.12 245);
    --color-info-soft: oklch(0.94 0.04 245);
    --color-on-accent: oklch(0.99 0.004 275);
    --color-on-dark: oklch(0.97 0.008 275);
    --color-success-ink: oklch(0.31 0.09 150);
    --color-danger-ink: oklch(0.36 0.13 25);
    --color-warning-ink: oklch(0.39 0.095 75);
    --color-info-ink: oklch(0.34 0.08 245);
    --color-divider: oklch(0.93 0.012 275);
    --color-placeholder: oklch(0.5 0.025 278);
    --color-topbar: oklch(0.985 0.006 275 / 0.88);
    --color-sticky: oklch(1 0 0 / 0.9);
    --color-tour-dim: oklch(0.09 0.025 278 / 0.72);
    --color-auth-bg: oklch(0.955 0.028 270);
    --color-auth-bg-end: oklch(0.985 0.01 255);
    --color-auth-panel: oklch(1 0 0 / 0.88);
    --color-auth-shadow: oklch(0.2 0.04 278 / 0.12);
    --color-auth-glow-primary: oklch(0.66 0.2 265 / 0.38);
    --color-auth-glow-secondary: oklch(0.74 0.14 305 / 0.24);
    --color-auth-glow-accent: oklch(0.75 0.16 25 / 0.2);
    --color-auth-shell: radial-gradient(circle at 46% 30%, var(--color-auth-glow-primary), transparent 34%), radial-gradient(circle at 84% 86%, var(--color-auth-glow-secondary), transparent 38%), var(--color-sidebar);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --sidebar-width: 248px;
    --topbar-height: 72px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --z-dropdown: 20;
    --z-sticky: 30;
    --z-backdrop: 40;
    --z-sidebar: 50;
    --z-tour-spotlight: 70;
    --z-tour: 80;
    --z-toast: 90;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: oklch(0.15 0.025 278);
    --color-surface: oklch(0.205 0.027 278);
    --color-surface-soft: oklch(0.235 0.03 278);
    --color-surface-strong: oklch(0.29 0.036 278);
    --color-ink: oklch(0.94 0.012 275);
    --color-ink-soft: oklch(0.74 0.024 275);
    --color-border: oklch(0.34 0.035 278);
    --color-primary: oklch(0.54 0.19 262);
    --color-primary-hover: oklch(0.76 0.135 260);
    --color-primary-action-hover: oklch(0.48 0.18 262);
    --color-primary-soft: oklch(0.31 0.085 267);
    --color-primary-pale: oklch(0.245 0.048 270);
    --color-sidebar: oklch(0.115 0.034 278);
    --color-sidebar-soft: oklch(0.28 0.09 267);
    --color-success: oklch(0.68 0.14 150);
    --color-success-soft: oklch(0.25 0.055 150);
    --color-danger: oklch(0.58 0.19 25);
    --color-danger-soft: oklch(0.27 0.065 25);
    --color-warning: oklch(0.78 0.13 80);
    --color-warning-soft: oklch(0.28 0.055 80);
    --color-info: oklch(0.72 0.115 245);
    --color-info-soft: oklch(0.27 0.055 245);
    --color-success-ink: oklch(0.84 0.1 150);
    --color-danger-ink: oklch(0.84 0.105 25);
    --color-warning-ink: oklch(0.88 0.09 80);
    --color-info-ink: oklch(0.84 0.075 245);
    --color-divider: oklch(0.29 0.03 278);
    --color-placeholder: oklch(0.66 0.022 275);
    --color-topbar: oklch(0.17 0.026 278 / 0.9);
    --color-sticky: oklch(0.19 0.027 278 / 0.92);
    --color-tour-dim: oklch(0.055 0.02 278 / 0.78);
    --color-auth-bg: oklch(0.13 0.032 278);
    --color-auth-bg-end: oklch(0.19 0.045 270);
    --color-auth-panel: oklch(0.205 0.027 278 / 0.86);
    --color-auth-shadow: oklch(0.05 0.025 278 / 0.34);
    --color-auth-glow-primary: oklch(0.5 0.19 265 / 0.3);
    --color-auth-glow-secondary: oklch(0.48 0.15 305 / 0.2);
    --color-auth-glow-accent: oklch(0.5 0.13 25 / 0.15);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--color-ink); background: var(--color-bg); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
svg { fill: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.025em; }
p { text-wrap: pretty; }
form { margin: 0; }
[hidden] { display: none !important; }
::selection { color: var(--color-on-accent); background: var(--color-primary); }
:focus-visible { outline: 3px solid oklch(0.68 0.16 265 / 0.5); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: 0.01em; }

/* Authentication */
.auth-page { min-height: 100vh; background: var(--color-sidebar); }
.auth-shell { min-height: 100vh; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(440px, 0.95fr); background: var(--color-auth-shell); }
.auth-shell > section { position: relative; z-index: 1; }
.auth-scene { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 6vw, 72px); color: var(--color-on-dark); background: transparent; }
.auth-scene > * { position: relative; z-index: 1; }
.auth-ambient { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.auth-ambient span { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.auth-ambient--shell span:nth-child(1) { width: 760px; height: 760px; top: -260px; left: 30%; background: radial-gradient(circle at 46% 46%, var(--color-auth-glow-primary), transparent 68%); filter: blur(10px); animation: auth-float-primary 17s var(--ease-out) infinite; }
.auth-ambient--shell span:nth-child(2) { width: 480px; height: 480px; bottom: -270px; left: 5%; background: radial-gradient(circle at center, var(--color-auth-glow-accent), transparent 70%); filter: blur(14px); animation: auth-float-secondary 21s var(--ease-out) infinite reverse; }
.auth-ambient--shell span:nth-child(3) { width: 520px; height: 520px; top: 36%; right: -120px; background: radial-gradient(circle at center, var(--color-auth-glow-secondary), transparent 72%); filter: blur(12px); animation: auth-float-tertiary 19s var(--ease-out) infinite; }
.auth-ambient--shell span:nth-child(4) { width: 150px; height: 880px; top: -12%; left: 48%; border-radius: 999px; background: linear-gradient(180deg, transparent, oklch(0.72 0.13 265 / 0.1), transparent); filter: blur(32px); transform: rotate(24deg); animation: auth-light-sweep 20s ease-in-out infinite; }
.auth-scene__message { max-width: 610px; margin-block: auto; padding-block: 48px; }
.auth-scene__date { display: inline-flex; padding: 7px 11px; margin-bottom: 24px; border-radius: 999px; color: oklch(0.91 0.03 275); background: oklch(1 0 0 / 0.08); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; }
.auth-scene__message h1 { max-width: 11ch; margin-bottom: 22px; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 0.98; letter-spacing: -0.04em; }
.auth-scene__message > p:last-child { max-width: 50ch; margin-bottom: 0; color: oklch(0.86 0.025 275); font-size: 1.05rem; }
.brand { min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--color-on-dark); font-size: 1rem; font-weight: 750; }
.brand__mark { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--color-sidebar); background: var(--color-on-dark); font-size: 0.75rem; font-weight: 850; letter-spacing: -0.03em; }
.brand__copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renewal-window { width: min(480px, 100%); display: grid; gap: 2px; padding: 10px; border-radius: var(--radius-lg); background: oklch(1 0 0 / 0.07); backdrop-filter: blur(14px); }
.renewal-window__row { min-height: 50px; display: grid; grid-template-columns: 70px 1fr 100px; align-items: center; gap: 16px; padding: 0 14px; border-radius: 10px; color: oklch(0.87 0.025 275); background: oklch(1 0 0 / 0.055); font-size: 0.83rem; }
.renewal-window__row i { height: 2px; position: relative; overflow: hidden; background: oklch(0.72 0.13 265 / 0.34); }
.renewal-window__row i::after { content: ""; position: absolute; inset: 0; background: oklch(0.79 0.12 260 / 0.92); transform: scaleX(0); transform-origin: left center; animation: renewal-progress 5.4s var(--ease-out) infinite; }
.renewal-window__row:nth-child(2) i::after { animation-delay: 0.45s; }
.renewal-window__row:nth-child(3) i::after { animation-delay: 0.9s; }
.renewal-window__row strong { color: var(--color-on-dark); text-align: right; }
.auth-content { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 36px; background: transparent; }
.auth-panel { width: min(480px, 100%); position: relative; z-index: 1; padding: clamp(28px, 5vw, 48px); border-radius: var(--radius-lg); background: var(--color-auth-panel); box-shadow: 0 4px 8px var(--color-auth-shadow); backdrop-filter: blur(18px) saturate(1.08); transition: background 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.auth-theme-toggle { position: absolute; z-index: 2; top: max(24px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); color: var(--color-on-dark); background: oklch(1 0 0 / 0.1); box-shadow: 0 2px 6px var(--color-auth-shadow); backdrop-filter: blur(12px); }
.auth-theme-toggle:hover { color: var(--color-on-dark); background: oklch(1 0 0 / 0.16); }
.auth-panel__heading { margin-bottom: 30px; }
.auth-panel__heading > p { margin-bottom: 7px; color: var(--color-primary-hover); font-size: 0.82rem; font-weight: 750; }
.auth-panel__heading h2 { margin-bottom: 10px; font-size: 1.8rem; line-height: 1.15; }
.auth-panel__heading > span { display: block; color: var(--color-ink-soft); line-height: 1.6; }
.auth-help, .auth-footnote { color: var(--color-ink-soft); font-size: 0.8rem; text-align: center; }
.auth-help { margin: 20px 0 0; }
.auth-footnote { position: relative; z-index: 1; margin: 0; color: oklch(0.76 0.022 275); }

@keyframes auth-float-primary {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    45% { transform: translate3d(-34px, 28px, 0) scale(1.08); }
    72% { transform: translate3d(12px, 48px, 0) scale(0.96); }
}
@keyframes auth-float-secondary {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    40% { transform: translate3d(42px, -24px, 0) scale(1.1); }
    75% { transform: translate3d(18px, -54px, 0) scale(0.98); }
}
@keyframes auth-float-tertiary {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); }
    50% { transform: translate3d(-74px, 42px, 0) scale(1.12); }
}
@keyframes auth-light-sweep {
    0%, 100% { transform: translate3d(-40px, -8px, 0) rotate(24deg); opacity: 0.35; }
    50% { transform: translate3d(180px, 18px, 0) rotate(24deg); opacity: 0.8; }
}
@keyframes renewal-progress {
    0%, 8% { transform: scaleX(0); opacity: 0; }
    18% { opacity: 1; }
    64% { transform: scaleX(1); opacity: 1; }
    82%, 100% { transform: scaleX(1); opacity: 0; }
}

/* App shell */
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-width); min-height: 100vh; position: fixed; z-index: var(--z-sidebar); inset: 0 auto 0 0; overflow-y: auto; display: flex; flex-direction: column; padding: 22px 16px 16px; color: oklch(0.91 0.018 275); background: var(--color-sidebar); transition: transform 220ms var(--ease-out); }
.sidebar > .brand { min-height: 46px; margin: 0 8px 30px; }
.sidebar__nav { display: grid; gap: 5px; }
.nav-link { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: oklch(0.79 0.022 275); font-size: 0.91rem; font-weight: 610; transition: color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out); }
.nav-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
.nav-link:hover { color: var(--color-on-dark); background: oklch(1 0 0 / 0.075); }
.nav-link:active { transform: translateY(1px); }
.nav-link.is-active { color: var(--color-on-dark); background: var(--color-sidebar-soft); }
.nav-badge { min-width: 22px; height: 22px; display: grid; place-items: center; margin-left: auto; padding: 0 6px; border-radius: 999px; color: var(--color-on-accent); background: var(--color-danger); font-size: 0.68rem; font-weight: 800; }
.sidebar__footer { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; }
.sidebar-help { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.sidebar-credit { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 17px; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; color: oklch(0.72 0.02 275); transition: color 180ms var(--ease-out), background 180ms var(--ease-out); }
.sidebar-credit:hover { color: var(--color-on-dark); background: oklch(1 0 0 / 0.065); }
.sidebar-credit > span { min-width: 0; display: grid; gap: 1px; }
.sidebar-credit small { font-size: 0.62rem; font-weight: 550; }
.sidebar-credit strong { overflow: hidden; color: var(--color-on-dark); font-size: 0.69rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-credit svg { width: 17px; height: 17px; }
.sidebar-user { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid oklch(1 0 0 / 0.1); }
.sidebar-user > span:last-child { min-width: 0; display: grid; }
.sidebar-user strong, .sidebar-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: var(--color-on-dark); font-size: 0.82rem; }
.sidebar-user small { color: oklch(0.72 0.02 275); font-size: 0.72rem; }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--color-sidebar); background: oklch(0.9 0.06 265); font-weight: 800; }
.avatar--small { width: 32px; height: 32px; font-size: 0.78rem; }
.avatar--soft { width: 36px; height: 36px; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 0.78rem; }
.avatar--large { width: 64px; height: 64px; color: var(--color-on-accent); background: var(--color-primary); font-size: 1.35rem; }
.sidebar-backdrop { display: none; position: fixed; z-index: var(--z-backdrop); inset: 0; background: oklch(0.1 0.02 278 / 0.55); }
.app-main { width: calc(100% - var(--sidebar-width)); min-width: 0; margin-left: var(--sidebar-width); }
.topbar { height: var(--topbar-height); position: sticky; z-index: var(--z-sticky); top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--color-border); background: var(--color-topbar); backdrop-filter: blur(16px) saturate(1.15); }
.topbar__title { min-width: 0; display: grid; }
.topbar__title > span { overflow: hidden; color: var(--color-ink); font-size: 0.93rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.topbar__title small { color: var(--color-ink-soft); font-size: 0.72rem; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.mobile-menu { display: none !important; }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 9px; color: var(--color-ink-soft); background: transparent; cursor: pointer; transition: color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out); }
.icon-button:hover { color: var(--color-ink); background: var(--color-surface-strong); }
.icon-button:active { transform: translateY(1px); }
.icon-button svg { width: 20px; height: 20px; }
.icon-button--danger { color: var(--color-danger); }
.notification-button { position: relative; }
.theme-toggle__sun { display: none; }
html[data-theme="dark"] .theme-toggle__sun { display: block; }
html[data-theme="dark"] .theme-toggle__moon { display: none; }
.notification-button__dot { width: 8px; height: 8px; position: absolute; top: 7px; right: 7px; border: 2px solid var(--color-bg); border-radius: 50%; background: var(--color-danger); }
.notification-menu { position: relative; }
.notification-menu__panel { width: min(390px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 92px)); position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--z-dropdown); overflow: hidden auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 6px 8px oklch(0.2 0.03 278 / 0.12); }
.notification-menu__header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.notification-menu__header > div { min-width: 0; display: grid; }
.notification-menu__header strong { font-size: 0.9rem; }
.notification-menu__header small { color: var(--color-ink-soft); font-size: 0.68rem; }
.notification-menu__header > a { flex: 0 0 auto; color: var(--color-primary-hover); font-size: 0.72rem; font-weight: 740; }
.notification-preview-list { display: grid; }
.notification-preview { border-bottom: 1px solid var(--color-border); }
.notification-preview button { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 11px; padding: 13px 16px; border: 0; color: var(--color-ink); background: var(--color-surface); text-align: left; cursor: pointer; transition: background 180ms var(--ease-out); }
.notification-preview button:hover { background: var(--color-surface-soft); }
.notification-preview.is-unread button { background: var(--color-primary-pale); }
.notification-preview.is-unread button:hover { background: var(--color-primary-soft); }
.notification-preview__mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 0.72rem; font-weight: 850; }
.notification-preview__content { min-width: 0; display: grid; gap: 2px; }
.notification-preview__content small, .notification-preview__content > span { overflow: hidden; color: var(--color-ink-soft); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-preview__content strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-menu__empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 24px; text-align: center; }
.notification-menu__empty > span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; color: var(--color-success-ink); background: var(--color-success-soft); font-weight: 820; }
.notification-menu__empty strong { font-size: 0.82rem; }
.notification-menu__empty small { max-width: 32ch; color: var(--color-ink-soft); font-size: 0.69rem; }
.notification-menu__footer { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: var(--color-primary-hover); background: var(--color-surface-soft); font-size: 0.74rem; font-weight: 740; }
.notification-menu__footer:hover { background: var(--color-primary-pale); }
.profile-menu { position: relative; }
.profile-menu__trigger { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 5px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.profile-menu__trigger:hover { background: var(--color-surface-strong); }
.profile-menu__trigger > svg { width: 18px; }
.profile-menu__name { max-width: 130px; overflow: hidden; font-size: 0.82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__panel { min-width: 230px; position: absolute; top: calc(100% + 9px); right: 0; z-index: var(--z-dropdown); padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 4px 8px oklch(0.2 0.03 278 / 0.1); }
.profile-menu__panel > span { display: block; overflow: hidden; padding: 8px 10px 12px; color: var(--color-ink-soft); font-size: 0.77rem; text-overflow: ellipsis; }
.profile-menu__panel button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; color: var(--color-danger); background: transparent; text-align: left; cursor: pointer; }
.profile-menu__panel button:hover { background: var(--color-danger-soft); }
.page-content { width: min(1500px, 100%); margin-inline: auto; padding: 32px clamp(20px, 3vw, 40px) 64px; }

/* Guided product tour */
.tour-active .sidebar { transition: none; }
html.is-theme-preview body,
html.is-theme-preview .sidebar,
html.is-theme-preview .topbar,
html.is-theme-preview .panel,
html.is-theme-preview .overview-strip,
html.is-theme-preview .form-section,
html.is-theme-preview .tab-list,
html.is-theme-preview .settings-status-strip,
html.is-theme-preview input,
html.is-theme-preview select,
html.is-theme-preview textarea,
html.is-theme-preview .button,
html.is-theme-preview .icon-button,
html.is-theme-preview .profile-menu__trigger,
html.is-theme-preview .notification-row,
html.is-theme-preview .notification-filter,
html.is-theme-preview .notification-preview button,
html.is-theme-preview .tour-card,
html.is-theme-preview .tour-card__actions { transition: background-color 320ms var(--ease-out), color 320ms var(--ease-out), border-color 320ms var(--ease-out); }
.tour-layer { position: fixed; z-index: var(--z-tour-spotlight); inset: 0; pointer-events: none; }
.tour-spotlight { width: 0; height: 0; position: fixed; z-index: var(--z-tour-spotlight); inset: 0 auto auto 0; border: 2px solid var(--color-primary); border-radius: var(--radius-md); opacity: 0; box-shadow: 0 0 0 9999px var(--color-tour-dim); pointer-events: none; transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out); }
.tour-theme-demo .tour-spotlight { box-shadow: 0 0 0 9999px oklch(0.09 0.025 278 / 0.5); }
html[data-theme="dark"] .tour-theme-demo .tour-spotlight { box-shadow: 0 0 0 9999px oklch(0.055 0.02 278 / 0.56); }
.tour-spotlight::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--color-primary-hover); border-radius: var(--radius-lg); opacity: 0; }
.tour-layer.is-ready .tour-spotlight { opacity: 1; }
.tour-layer.is-ready .tour-spotlight::after { animation: tour-focus 1.8s var(--ease-out) infinite; }
.tour-card { width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 24px); position: fixed; z-index: var(--z-tour); inset: 0 auto auto 0; overflow: auto; border: 1px solid var(--color-primary); border-radius: 14px; color: var(--color-ink); background: var(--color-surface); opacity: 0; pointer-events: auto; transition: opacity 180ms var(--ease-out); }
.tour-layer.is-ready .tour-card { opacity: 1; transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out); }
.tour-card__header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 18px; }
.tour-card__meta { min-width: 0; display: flex; align-items: center; gap: 9px; }
.tour-card__meta span { color: var(--color-primary-hover); font-size: 0.72rem; font-weight: 780; }
.tour-card__meta small { color: var(--color-ink-soft); font-size: 0.66rem; }
.tour-card__header .icon-button { width: 34px; height: 34px; font-size: 1.2rem; }
.tour-card__progress { height: 3px; overflow: hidden; background: var(--color-surface-strong); }
.tour-card__progress span { width: 100%; height: 100%; display: block; background: var(--color-primary); transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--ease-out); }
.tour-card__content { padding: 20px 20px 18px; }
.tour-card__content h2 { margin-bottom: 8px; font-size: 1.08rem; line-height: 1.25; }
.tour-card__content p { max-width: 48ch; margin: 0; color: var(--color-ink-soft); font-size: 0.8rem; line-height: 1.6; }
.tour-card__actions { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-top: 1px solid var(--color-border); background: var(--color-surface-soft); }
.tour-card__actions > span { display: flex; align-items: center; gap: 8px; }

@keyframes tour-focus {
    0%, 100% { opacity: 0; transform: scale(1); }
    45% { opacity: 0.7; transform: scale(1.025); }
}

/* Shared UI */
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.page-heading--compact { align-items: center; margin-bottom: 24px; }
.page-heading__context { margin-bottom: 8px; color: var(--color-primary-hover); font-size: 0.78rem; font-weight: 760; }
.page-heading h1 { margin-bottom: 8px; font-size: 2rem; line-height: 1.08; }
.page-heading p:last-child { max-width: 62ch; margin-bottom: 0; color: var(--color-ink-soft); }
.page-heading__actions, .record-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; font-size: 0.86rem; font-weight: 720; line-height: 1; cursor: pointer; transition: color 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.button--primary { color: var(--color-on-accent); background: var(--color-primary); }
.button--primary:hover { background: var(--color-primary-action-hover); }
.button--secondary { color: var(--color-ink); border-color: var(--color-border); background: var(--color-surface); }
.button--secondary:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.button--ghost { color: var(--color-primary-hover); background: var(--color-primary-pale); }
.button--ghost:hover { background: var(--color-primary-soft); }
.button--danger-ghost { color: var(--color-danger); background: var(--color-danger-soft); }
.button--danger-ghost:hover { color: var(--color-on-accent); background: var(--color-danger); }
.button--wide { width: 100%; }
.button--small { min-height: 34px; padding-inline: 12px; font-size: 0.78rem; }
.text-link, .back-link { color: var(--color-primary-hover); font-size: 0.83rem; font-weight: 720; }
.text-link:hover, .back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-flex; margin-bottom: 10px; }
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.panel__header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--color-border); }
.panel__header h2 { margin-bottom: 3px; font-size: 1rem; }
.panel__header p { margin-bottom: 0; color: var(--color-ink-soft); font-size: 0.78rem; }
.alert { min-height: 48px; display: flex; align-items: center; gap: 11px; margin-bottom: 16px; padding: 10px 10px 10px 14px; border-radius: 10px; font-size: 0.84rem; }
.alert__dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.alert__close { margin-left: auto; font-size: 1.25rem; }
.alert--success { color: var(--color-success-ink); background: var(--color-success-soft); }
.alert--success .alert__dot { background: var(--color-success); }
.alert--error { color: var(--color-danger-ink); background: var(--color-danger-soft); }
.alert--error .alert__dot { background: var(--color-danger); }
.info-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); color: var(--color-info-ink); background: var(--color-info-soft); }
.info-banner strong { flex: 0 0 auto; }
.info-banner span { color: var(--color-info-ink); }
.status { min-height: 25px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 780; white-space: nowrap; }
.status--active, .status--sent, .status--notification-sent, .status--payment-paid { color: var(--color-success-ink); background: var(--color-success-soft); }
.status--expiring, .status--pending, .status--notification-pending, .status--payment-partial { color: var(--color-warning-ink); background: var(--color-warning-soft); }
.status--expired, .status--cancelled, .status--failed, .status--notification-failed, .status--payment-unpaid { color: var(--color-danger-ink); background: var(--color-danger-soft); }
.status--future, .status--notification-read { color: var(--color-info-ink); background: var(--color-info-soft); }
.status--renewed, .status--archived { color: var(--color-ink-soft); background: var(--color-surface-strong); }

/* Dashboard */
.overview-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.overview-strip a { min-width: 0; display: grid; gap: 1px; padding: 19px 20px; border-right: 1px solid var(--color-border); transition: background 180ms var(--ease-out); }
.overview-strip a:last-child { border-right: 0; }
.overview-strip a:hover { background: var(--color-primary-pale); }
.overview-strip span { color: var(--color-ink-soft); font-size: 0.72rem; font-weight: 680; }
.overview-strip strong { margin-block: 2px; font-size: 1.65rem; line-height: 1.1; }
.overview-strip .overview-strip__money { color: var(--color-primary-hover); font-size: 1.12rem; white-space: nowrap; }
.overview-strip small { overflow: hidden; color: var(--color-ink-soft); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-bottom: 20px; }
.deadline-flow { position: relative; padding: 8px 22px 18px; }
.deadline-flow::before { content: ""; width: 1px; position: absolute; top: 35px; bottom: 35px; left: 111px; background: var(--color-border); }
.deadline-flow__item { min-height: 68px; position: relative; display: grid; grid-template-columns: 74px 12px minmax(0, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--color-divider); }
.deadline-flow__item:last-child { border-bottom: 0; }
.deadline-flow__item:hover .deadline-flow__detail strong { color: var(--color-primary-hover); }
.deadline-flow__item > i { width: 10px; height: 10px; z-index: 1; border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.deadline-flow__days { color: var(--color-primary-hover); font-size: 0.72rem; font-weight: 790; text-align: right; }
.deadline-flow__days.is-urgent { color: var(--color-warning-ink); }
.deadline-flow__days.is-overdue { color: var(--color-danger); }
.deadline-flow__detail { min-width: 0; display: grid; }
.deadline-flow__detail strong, .deadline-flow__detail small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deadline-flow__detail strong { font-size: 0.86rem; transition: color 180ms var(--ease-out); }
.deadline-flow__detail small, .deadline-flow time { color: var(--color-ink-soft); font-size: 0.72rem; }
.today-panel { align-self: stretch; padding: 26px; background: var(--color-sidebar); color: var(--color-on-dark); }
.today-panel__date { min-height: 74px; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 30px; padding: 11px 16px; border-radius: var(--radius-md); color: var(--color-on-dark); background: oklch(1 0 0 / 0.075); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12); }
.today-panel__date-day { min-width: 46px; font-size: 2.35rem; font-weight: 840; line-height: 0.92; letter-spacing: -0.04em; text-align: center; }
.today-panel__date-copy { display: grid; gap: 2px; text-align: left; }
.today-panel__date-copy strong { color: oklch(0.86 0.075 260); font-size: 0.88rem; line-height: 1.2; }
.today-panel__date-copy small { color: oklch(0.72 0.025 275); font-size: 0.69rem; line-height: 1.3; white-space: nowrap; }
.today-panel h2 { margin-bottom: 9px; font-size: 1.15rem; }
.today-panel p { margin-bottom: 26px; color: oklch(0.8 0.02 275); line-height: 1.6; }
.today-panel p strong { color: var(--color-on-dark); }
.today-panel .button--secondary { border-color: oklch(1 0 0 / 0.22); color: var(--color-on-dark); background: oklch(1 0 0 / 0.08); }
.split-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.compact-list { padding: 4px 20px 12px; }
.compact-list > a { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-divider); }
.compact-list > a:last-child { border-bottom: 0; }
.compact-list > a > span:first-child { min-width: 0; display: grid; }
.compact-list strong, .compact-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-list strong { font-size: 0.84rem; }
.compact-list small, .compact-list time { color: var(--color-ink-soft); font-size: 0.72rem; }

/* Forms */
.stack-form { display: grid; gap: 18px; }
.field { min-width: 0; display: grid; align-content: start; gap: 7px; }
.field > span:first-child { display: flex; justify-content: space-between; gap: 10px; color: var(--color-ink); font-size: 0.78rem; font-weight: 720; }
.field > span small { color: var(--color-ink-soft); font-weight: 500; }
.field > small { color: var(--color-ink-soft); font-size: 0.7rem; line-height: 1.45; }
.field--wide { grid-column: 1 / -1; }
input, select, textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-ink); background: var(--color-surface); transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
input, select { min-height: 44px; padding: 0 12px; }
textarea { min-height: 94px; resize: vertical; padding: 11px 12px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--color-placeholder); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: oklch(0.74 0.06 270); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px oklch(0.62 0.16 265 / 0.16); }
input:disabled, select:disabled, textarea:disabled { color: var(--color-ink-soft); background: var(--color-surface-soft); cursor: not-allowed; }
.password-field, .amount-field, .suffix-field { display: flex; align-items: stretch; }
.password-field input { padding-right: 70px; }
.password-field { position: relative; }
.password-field button { position: absolute; inset: 5px 5px 5px auto; padding: 0 9px; border: 0; border-radius: 7px; color: var(--color-primary-hover); background: var(--color-primary-pale); font-size: 0.72rem; font-weight: 720; cursor: pointer; }
.amount-field input { min-width: 0; border-radius: 9px 0 0 9px; }
.amount-field select { width: 92px; flex: 0 0 auto; border-left: 0; border-radius: 0 9px 9px 0; }
.suffix-field input { border-radius: 9px 0 0 9px; }
.suffix-field b { min-width: 95px; display: grid; place-items: center; padding-inline: 10px; border: 1px solid var(--color-border); border-left: 0; border-radius: 0 9px 9px 0; color: var(--color-ink-soft); background: var(--color-surface-soft); font-size: 0.75rem; }
.record-form { width: min(980px, 100%); display: grid; gap: 18px; }
.form-section { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.form-section > header { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
.form-section__number { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 0.78rem; font-weight: 820; }
.form-section header h2 { margin-bottom: 2px; font-size: 1rem; }
.form-section header p { margin-bottom: 0; color: var(--color-ink-soft); font-size: 0.75rem; }
.form-section > .info-banner { margin: 20px 24px 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px; }
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.financial-preview { grid-column: 1 / -1; padding: 12px 14px; border-radius: 9px; color: var(--color-info-ink); background: var(--color-info-soft); font-size: 0.76rem; font-weight: 650; }
.form-actions { position: sticky; z-index: 10; bottom: 14px; display: flex; justify-content: flex-end; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--color-sticky); backdrop-filter: blur(14px); }

/* Tables and lists */
.table-panel { overflow: hidden; }
.filter-bar { min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.filter-bar--multi { flex-wrap: wrap; }
.filter-bar select { min-width: 160px; }
.search-field { min-width: min(380px, 100%); position: relative; flex: 1; }
.search-field svg { width: 18px; height: 18px; position: absolute; top: 13px; left: 12px; color: var(--color-ink-soft); }
.search-field input { padding-left: 38px; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 16px; color: var(--color-ink-soft); background: var(--color-surface); font-size: 0.7rem; font-weight: 760; text-align: left; white-space: nowrap; }
.data-table td { min-height: 62px; padding: 13px 16px; border-top: 1px solid var(--color-divider); color: var(--color-ink); font-size: 0.8rem; vertical-align: middle; }
.data-table tbody tr { transition: background 180ms var(--ease-out); }
.data-table tbody tr:hover { background: var(--color-primary-pale); }
.data-table a:not(.icon-button):hover strong { color: var(--color-primary-hover); }
.person-cell { min-width: 185px; display: flex; align-items: center; gap: 10px; }
.person-cell > span:last-child, .cell-stack { min-width: 0; display: grid; }
.person-cell strong, .person-cell small, .cell-stack strong, .cell-stack small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-cell small, .cell-stack small, .table-note { color: var(--color-ink-soft); font-size: 0.7rem; }
.count-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 0.7rem; font-weight: 730; }
.table-note { display: block; margin-top: 3px; }
.table-action { width: 48px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--color-border); }
.pagination__link { padding: 7px 10px; border-radius: 8px; color: var(--color-primary-hover); font-size: 0.76rem; font-weight: 720; }
.pagination__link:hover { background: var(--color-primary-soft); }
.pagination__link.is-disabled { opacity: 0.4; pointer-events: none; }
.pagination__status { color: var(--color-ink-soft); font-size: 0.74rem; }
.empty-state { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 40px 24px; text-align: center; }
.empty-state--small { min-height: 220px; }
.empty-state__icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 1.15rem; font-weight: 800; }
.empty-state h3 { margin-bottom: 0; font-size: 1rem; }
.empty-state p { max-width: 48ch; margin-bottom: 12px; color: var(--color-ink-soft); }
.empty-inline { padding: 24px 4px; color: var(--color-ink-soft); font-size: 0.8rem; text-align: center; }

/* Record details */
.record-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.record-hero__identity { min-width: 0; display: flex; align-items: center; gap: 15px; }
.record-hero__identity h1 { overflow: hidden; margin-bottom: 4px; font-size: 1.8rem; text-overflow: ellipsis; white-space: nowrap; }
.record-hero__identity p { overflow: hidden; margin-bottom: 0; color: var(--color-ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.document-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 1.4rem; font-weight: 850; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-bottom: 20px; }
.detail-grid--policy { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 8px 22px 18px; }
.detail-list > div { min-width: 0; padding: 15px 8px; border-bottom: 1px solid var(--color-divider); }
.detail-list dt { margin-bottom: 4px; color: var(--color-ink-soft); font-size: 0.7rem; }
.detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 0.84rem; font-weight: 640; }
.detail-list dd small { display: block; margin-top: 2px; color: var(--color-ink-soft); font-size: 0.7rem; font-weight: 400; }
.detail-list dd a { color: var(--color-primary-hover); }
.note-block { margin: 0 22px 22px; padding: 15px 16px; border-radius: var(--radius-md); background: var(--color-surface-soft); }
.note-block strong { font-size: 0.76rem; }
.note-block p { margin: 6px 0 0; color: var(--color-ink-soft); font-size: 0.78rem; }
.record-summary { padding: 26px; color: var(--color-on-dark); background: var(--color-sidebar); }
.record-summary > span { color: oklch(0.76 0.02 275); font-size: 0.76rem; }
.record-summary > strong { display: block; margin-block: 8px 2px; font-size: 3.1rem; line-height: 1; }
.record-summary > p { margin-bottom: 30px; color: oklch(0.76 0.02 275); font-size: 0.76rem; }
.record-summary__line { display: flex; justify-content: space-between; padding-block: 11px; border-top: 1px solid oklch(1 0 0 / 0.11); color: oklch(0.86 0.02 275); font-size: 0.78rem; }
.record-summary__line b { color: var(--color-on-dark); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--color-danger-soft); }
.danger-zone h2 { margin-bottom: 3px; color: var(--color-danger-ink); font-size: 0.96rem; }
.danger-zone p { margin-bottom: 0; color: var(--color-danger-ink); font-size: 0.76rem; }
.policy-signal { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 22px 26px; border-radius: var(--radius-lg); background: var(--color-primary-soft); }
.policy-signal--expired, .policy-signal--cancelled { background: var(--color-danger-soft); }
.policy-signal--expiring { background: var(--color-warning-soft); }
.policy-signal--archived, .policy-signal--renewed { background: var(--color-surface-strong); }
.policy-signal h2 { margin: 8px 0 2px; font-size: 1.2rem; }
.policy-signal p { margin-bottom: 0; color: var(--color-ink-soft); font-size: 0.78rem; }
.policy-signal__date { min-width: 76px; text-align: center; }
.policy-signal__date span { display: block; font-size: 2rem; font-weight: 830; line-height: 1; }
.policy-signal__date small { color: var(--color-ink-soft); font-size: 0.72rem; }
.policy-financials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; overflow: hidden; }
.policy-financials > div { min-width: 0; display: grid; gap: 3px; padding: 18px 20px; border-right: 1px solid var(--color-border); }
.policy-financials > div:last-child { border-right: 0; }
.policy-financials span, .policy-financials small { color: var(--color-ink-soft); font-size: 0.7rem; }
.policy-financials strong { overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.policy-financials__earning { background: var(--color-primary-pale); }
.policy-financials__earning strong { color: var(--color-primary-hover); }
.upload-panel { overflow: hidden; }
.upload-box { display: grid; gap: 12px; margin: 18px; padding: 14px; border: 1px dashed oklch(0.7 0.1 265); border-radius: var(--radius-md); background: var(--color-primary-pale); }
.upload-box label { cursor: pointer; }
.upload-box input { position: absolute; opacity: 0; pointer-events: none; }
.upload-box label > span { min-height: 64px; display: grid; place-content: center; text-align: center; }
.upload-box strong { color: var(--color-primary-hover); font-size: 0.82rem; }
.upload-box small { max-width: 30ch; overflow: hidden; color: var(--color-ink-soft); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.document-list { display: grid; padding: 0 18px 18px; }
.document-item { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.document-item__type { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 0.62rem; font-weight: 820; }
.document-item > span:nth-child(2) { min-width: 0; display: grid; flex: 1; }
.document-item strong, .document-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-item strong { font-size: 0.75rem; }
.document-item small { color: var(--color-ink-soft); font-size: 0.65rem; }
.activity-list { padding: 4px 20px 14px; }
.activity-item { min-height: 66px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-border); }
.activity-item:last-child { border-bottom: 0; }
.activity-item__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-hover); background: var(--color-primary-soft); font-weight: 820; }
.activity-item__icon--failed { color: var(--color-danger); background: var(--color-danger-soft); }
.activity-item > span:nth-child(2) { min-width: 0; display: grid; }
.activity-item > span:last-child { display: flex; align-items: center; gap: 10px; }
.activity-item strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-item small { color: var(--color-ink-soft); font-size: 0.68rem; }

/* Notifications, settings and errors */
.notification-center { overflow: hidden; }
.notification-center__toolbar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.notification-center__toolbar > p { margin: 0; color: var(--color-ink-soft); font-size: 0.72rem; white-space: nowrap; }
.notification-center__toolbar > p strong { color: var(--color-ink); }
.notification-filters { display: flex; align-items: center; gap: 4px; }
.notification-filter { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; color: var(--color-ink-soft); font-size: 0.76rem; font-weight: 700; transition: color 180ms var(--ease-out), background 180ms var(--ease-out); }
.notification-filter:hover { color: var(--color-ink); background: var(--color-surface-strong); }
.notification-filter.is-active { color: var(--color-primary-hover); background: var(--color-primary-soft); }
.notification-filter span { min-width: 22px; height: 21px; display: grid; place-items: center; padding-inline: 5px; border-radius: 999px; color: var(--color-ink-soft); background: var(--color-surface); font-size: 0.64rem; }
.notification-filter.is-active span { color: var(--color-primary-hover); }
.notification-list { display: grid; }
.notification-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--color-border); }
.notification-row:last-child { border-bottom: 0; }
.notification-row.is-unread { background: var(--color-primary-pale); }
.notification-row__mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-hover); background: var(--color-primary-soft); font-weight: 840; }
.notification-row__content { min-width: 0; }
.notification-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--color-ink-soft); font-size: 0.68rem; }
.notification-state { min-height: 21px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; color: var(--color-ink-soft); background: var(--color-surface-strong); font-size: 0.62rem; font-weight: 760; }
.notification-state.is-new { color: var(--color-primary-hover); background: var(--color-primary-soft); }
.notification-row time { color: var(--color-ink-soft); font-size: 0.68rem; }
.notification-row h2 { margin: 3px 0; font-size: 0.88rem; }
.notification-row p { margin-bottom: 2px; color: var(--color-ink-soft); font-size: 0.76rem; }
.notification-empty { min-height: 280px; }
.tab-list { display: flex; gap: 5px; margin-bottom: 20px; padding: 5px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); }
.tab-list button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 8px; color: var(--color-ink-soft); background: transparent; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.tab-list button:hover { color: var(--color-ink); background: var(--color-surface-soft); }
.tab-list button.is-active { color: var(--color-primary-hover); background: var(--color-primary-soft); }
.tab-list button span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--color-surface-strong); font-size: 0.65rem; }
.settings-status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.settings-status-strip > div { min-width: 0; display: grid; align-content: center; gap: 2px; min-height: 92px; padding: 16px 18px; border-right: 1px solid var(--color-border); }
.settings-status-strip > div:last-child { border-right: 0; }
.settings-status-strip span, .settings-status-strip small { overflow: hidden; color: var(--color-ink-soft); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-status-strip strong { overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.record-form--settings { width: min(1120px, 100%); }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 24px 24px; }
.theme-choice { min-width: 0; min-height: 86px; display: grid; grid-template-columns: 68px minmax(0, 1fr) 22px; align-items: center; gap: 13px; padding: 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); }
.theme-choice:hover { border-color: var(--color-primary); background: var(--color-primary-pale); }
.theme-choice[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-pale); }
.theme-choice > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.theme-choice strong { font-size: 0.8rem; }
.theme-choice small { color: var(--color-ink-soft); font-size: 0.66rem; line-height: 1.35; }
.theme-choice__preview { width: 68px; height: 52px; position: relative; overflow: hidden; display: block; border: 1px solid oklch(0.72 0.02 275); border-radius: 7px; background: oklch(0.96 0.008 275); }
.theme-choice__preview i { width: 17px; position: absolute; inset: 0 auto 0 0; background: oklch(0.2 0.045 278); }
.theme-choice__preview b { height: 6px; position: absolute; inset: 9px 8px auto 25px; border-radius: 3px; background: oklch(0.58 0.16 265); }
.theme-choice__preview em { height: 19px; position: absolute; inset: 23px 8px auto 25px; border-radius: 4px; background: oklch(0.88 0.02 275); }
.theme-choice__preview--dark { border-color: oklch(0.37 0.035 278); background: oklch(0.19 0.027 278); }
.theme-choice__preview--dark i { background: oklch(0.105 0.03 278); }
.theme-choice__preview--dark b { background: oklch(0.7 0.14 262); }
.theme-choice__preview--dark em { background: oklch(0.3 0.035 278); }
.theme-choice__preview--system::after { content: ""; width: 50%; position: absolute; inset: 0 0 0 auto; background: oklch(0.19 0.027 278); }
.theme-choice__preview--system b, .theme-choice__preview--system em { z-index: 1; }
.theme-choice__check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: transparent; background: var(--color-surface-strong); font-size: 0.68rem; font-weight: 850; }
.theme-choice[aria-pressed="true"] .theme-choice__check { color: var(--color-on-accent); background: var(--color-primary); }
.settings-test { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px; margin-bottom: 20px; }
.settings-test h2, .checklist h2 { margin-bottom: 6px; font-size: 1rem; }
.settings-test p { max-width: 58ch; margin-bottom: 0; color: var(--color-ink-soft); font-size: 0.78rem; }
.settings-test form { min-width: min(380px, 100%); display: flex; align-items: end; gap: 10px; }
.settings-test .field { flex: 1; }
.checklist { padding: 26px; }
.checklist ul { display: grid; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: 12px; color: var(--color-ink-soft); }
.checklist li span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 0.72rem; font-weight: 820; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); align-items: start; gap: 20px; }
.settings-grid--rules { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); }
.rule-list { padding: 4px 20px 12px; }
.rule-row { min-height: 72px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-border); }
.rule-row:last-child { border-bottom: 0; }
.rule-row.is-paused { opacity: 0.72; }
.rule-day { width: 48px; height: 46px; flex: 0 0 auto; display: grid; place-content: center; border-radius: 9px; color: var(--color-primary-hover); background: var(--color-primary-soft); text-align: center; }
.rule-day strong { font-size: 0.95rem; line-height: 1; }
.rule-day small { margin-top: 2px; color: var(--color-primary-hover); font-size: 0.6rem; }
.rule-copy { min-width: 0; display: grid; flex: 1; }
.rule-row strong { font-size: 0.82rem; }
.rule-row small { color: var(--color-ink-soft); font-size: 0.7rem; }
.rule-row > .status { flex: 0 0 auto; }
.compact-settings-panel, .rule-builder { align-self: start; }
.compact-settings-panel > .stack-form { padding: 22px; }
.rule-builder__body { display: grid; gap: 17px; padding: 20px; }
.field-label { display: block; margin-bottom: 9px; color: var(--color-ink); font-size: 0.72rem; font-weight: 720; }
.quick-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-rule-grid > input { display: none; }
.quick-rule-grid button { min-height: 86px; display: grid; align-content: center; gap: 1px; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-ink); background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); }
.quick-rule-grid button:hover { border-color: var(--color-primary); background: var(--color-primary-pale); }
.quick-rule-grid button:disabled { color: var(--color-ink-soft); background: var(--color-surface-soft); cursor: not-allowed; }
.quick-rule-grid button strong { color: var(--color-primary-hover); font-size: 0.85rem; }
.quick-rule-grid button span { font-size: 0.7rem; font-weight: 680; }
.quick-rule-grid button small { overflow: hidden; color: var(--color-ink-soft); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.rule-builder__divider { display: flex; align-items: center; gap: 10px; color: var(--color-ink-soft); font-size: 0.64rem; }
.rule-builder__divider::before, .rule-builder__divider::after { content: ""; height: 1px; flex: 1; background: var(--color-border); }
.rule-preview { margin: -6px 0 0; color: var(--color-ink-soft); font-size: 0.68rem; line-height: 1.45; }
.toggle { width: 42px; height: 24px; padding: 3px; border: 0; border-radius: 999px; background: var(--color-surface-strong); cursor: pointer; transition: background 180ms var(--ease-out); }
.toggle span { width: 18px; height: 18px; display: block; border-radius: 50%; background: var(--color-on-accent); transition: transform 180ms var(--ease-out); }
.toggle.is-on { background: var(--color-primary); }
.toggle.is-on span { transform: translateX(18px); }
.error-state { min-height: 65vh; display: grid; place-items: center; align-content: center; gap: 10px; padding: 40px 20px; text-align: center; }
.error-state > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 1.1rem; font-weight: 850; }
.error-state h1 { margin-bottom: 0; font-size: 1.6rem; }
.error-state p { max-width: 52ch; margin-bottom: 14px; color: var(--color-ink-soft); }
.error-state--auth { min-height: auto; }

@media (max-width: 1180px) {
    .overview-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .overview-strip a:nth-child(3) { border-right: 0; }
    .overview-strip a:nth-child(n + 4) { border-top: 1px solid var(--color-border); }
    .detail-grid { grid-template-columns: minmax(0, 1fr) 260px; }
    .policy-financials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .policy-financials > div:nth-child(2) { border-right: 0; }
    .policy-financials > div:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 960px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-open .sidebar-backdrop { display: block; }
    .app-main { width: 100%; margin-left: 0; }
    .mobile-menu { display: inline-grid !important; }
    .topbar__title { margin-right: auto; }
    .auth-shell { grid-template-columns: 1fr; background: var(--color-auth-bg); }
    .auth-scene { min-height: 360px; padding: 28px; background: radial-gradient(circle at 82% 28%, oklch(0.38 0.15 266 / 0.34), transparent 42%), var(--color-sidebar); }
    .auth-scene__message { padding-block: 48px 22px; }
    .auth-scene__message h1 { max-width: 15ch; font-size: 2.8rem; }
    .renewal-window { display: none; }
    .auth-content { min-height: auto; padding-block: 56px; background: linear-gradient(145deg, var(--color-auth-bg), var(--color-auth-bg-end)); }
    .dashboard-grid, .detail-grid, .detail-grid--policy, .settings-grid { grid-template-columns: 1fr; }
    .settings-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-status-strip > div:nth-child(2) { border-right: 0; }
    .settings-status-strip > div:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
    .today-panel { min-height: 260px; }
    .record-summary { min-height: 260px; }
}

@media (max-width: 720px) {
    .page-content { padding: 24px 16px 48px; }
    .topbar { padding-inline: 12px; }
    .profile-menu__name { display: none; }
    .page-heading, .record-hero { align-items: stretch; flex-direction: column; }
    .page-heading h1, .record-hero__identity h1 { font-size: 1.55rem; }
    .page-heading__actions, .record-hero__actions { width: 100%; }
    .page-heading__actions .button, .record-hero__actions .button, .record-hero__actions form { flex: 1; }
    .record-hero__actions form .button { width: 100%; }
    .overview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-strip a, .overview-strip a:nth-child(3) { border-right: 1px solid var(--color-border); border-top: 1px solid var(--color-border); }
    .overview-strip a:nth-child(-n + 2) { border-top: 0; }
    .overview-strip a:nth-child(even) { border-right: 0; }
    .split-panels { grid-template-columns: 1fr; }
    .deadline-flow { padding-inline: 14px; }
    .deadline-flow::before { left: 89px; }
    .deadline-flow__item { grid-template-columns: 58px 10px minmax(0, 1fr); gap: 10px; }
    .deadline-flow__item > time { display: none; }
    .deadline-flow__days { font-size: 0.65rem; }
    .form-grid, .form-grid--three, .detail-list, .appearance-options { grid-template-columns: 1fr; }
    .field--wide { grid-column: auto; }
    .form-section > header, .form-grid { padding-inline: 18px; }
    .form-actions { justify-content: stretch; }
    .form-actions .button { flex: 1; }
    .filter-bar { align-items: stretch; flex-direction: column; }
    .filter-bar .button { width: 100%; }
    .filter-bar select { width: 100%; }
    .search-field { min-width: 0; }
    .table-wrap { overflow: visible; padding: 12px; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table thead { display: none; }
    .data-table tbody { display: grid; gap: 10px; }
    .data-table tr { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .data-table td { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 0; border-top: 1px solid var(--color-divider); text-align: right; }
    .data-table td:first-child { border-top: 0; }
    .data-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--color-ink-soft); font-size: 0.68rem; text-align: left; }
    .data-table td:not([data-label])::before { display: none; }
    .person-cell, .cell-stack { text-align: left; }
    .table-action { width: 100%; }
    .table-action .icon-button { margin-left: auto; }
    .danger-zone, .settings-test { align-items: stretch; flex-direction: column; }
    .settings-test form { min-width: 0; align-items: stretch; flex-direction: column; }
    .notification-center__toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
    .notification-filters { overflow-x: auto; }
    .notification-filter { flex: 0 0 auto; }
    .notification-row { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 14px; }
    .notification-row form { grid-column: 1 / -1; }
    .notification-row form .button { width: 100%; }
    .activity-item { grid-template-columns: 32px minmax(0, 1fr); padding-block: 10px; }
    .activity-item > span:last-child { grid-column: 2; justify-content: space-between; }
    .tab-list { overflow-x: auto; }
    .tab-list button { flex: 0 0 auto; }
    .rule-list { padding-inline: 14px; }
    .rule-row > .status { display: none; }
}

@media (max-width: 520px) {
    .auth-theme-toggle { width: 44px; height: 44px; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
    .brand--auth { padding-right: 54px; }
    .auth-content { padding: 16px max(14px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
    .auth-panel { padding: 26px 20px; }
    .auth-scene { min-height: 0; padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 30px max(20px, env(safe-area-inset-left)); }
    .auth-scene__message { margin: 22px 0 0; padding: 0; }
    .auth-scene__date { margin-bottom: 16px; }
    .auth-scene__message h1 { font-size: 2.25rem; }
    .auth-scene__message > p:last-child { font-size: 0.92rem; }
    .topbar__title small { display: none; }
    .settings-status-strip { grid-template-columns: 1fr; }
    .settings-status-strip > div { border-right: 0; }
    .settings-status-strip > div:nth-child(n + 2) { border-top: 1px solid var(--color-border); }
    .appearance-options { padding-inline: 16px; }
    .theme-choice { grid-template-columns: 58px minmax(0, 1fr) 20px; }
    .theme-choice__preview { width: 58px; }
    .notification-menu__panel { width: auto; position: fixed; top: calc(var(--topbar-height) + 8px); right: 12px; left: 12px; }
    .record-hero__identity { align-items: flex-start; }
    .avatar--large, .document-mark { width: 52px; height: 52px; }
    .policy-signal { align-items: flex-start; }
    .policy-signal__date { min-width: 58px; }
    .panel__header { align-items: flex-start; padding-inline: 16px; }
    .policy-financials { grid-template-columns: 1fr; }
    .policy-financials > div, .policy-financials > div:nth-child(2) { border-right: 0; }
    .policy-financials > div:nth-child(n + 2) { border-top: 1px solid var(--color-border); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .auth-ambient span, .renewal-window__row i::after { animation: none !important; }
    .tour-layer.is-ready .tour-spotlight::after { animation: none; opacity: 0.45; }
}

/* Deploy center */
.deploy-status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.deploy-status-strip > div { min-width: 0; min-height: 88px; display: grid; align-content: center; gap: 2px; padding: 15px 18px; border-right: 1px solid var(--color-border); }
.deploy-status-strip > div:last-child { border-right: 0; }
.deploy-status-strip span, .deploy-status-strip small { overflow: hidden; color: var(--color-ink-soft); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.deploy-status-strip strong { overflow: hidden; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.deploy-tabs { margin-bottom: 20px; }
.deploy-toolbar, .deploy-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.deploy-panel { overflow: hidden; }
.deploy-file-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.deploy-file-stats span { min-height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; color: var(--color-ink-soft); background: var(--color-surface); font-size: 0.7rem; }
.deploy-file-stats strong { color: var(--color-ink); }
.deploy-file-stats .is-changed { color: var(--color-warning-ink); background: var(--color-warning-soft); }
.deploy-file-stats .is-new { color: var(--color-success-ink); background: var(--color-success-soft); }
.deploy-file-stats .is-deleted { color: var(--color-danger-ink); background: var(--color-danger-soft); }
.deploy-file-workspace { display: grid; }
.deploy-selection-bar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--color-border); }
.deploy-selection-bar > div:first-child { display: grid; gap: 2px; }
.deploy-selection-bar strong { font-size: 0.82rem; }
.deploy-selection-bar small { color: var(--color-ink-soft); font-size: 0.68rem; }
.deploy-file-list { max-height: 460px; overflow: auto; padding: 10px 20px 18px; }
.deploy-file-group { display: grid; gap: 6px; padding-top: 10px; }
.deploy-file-group + .deploy-file-group { margin-top: 8px; border-top: 1px solid var(--color-divider); }
.deploy-file-group__title { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 2px; color: var(--color-ink-soft); font-size: 0.7rem; font-weight: 760; }
.deploy-file { min-height: 39px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--color-ink); cursor: pointer; transition: background 180ms var(--ease-out); }
.deploy-file:hover { background: var(--color-primary-pale); }
.deploy-file input, .deploy-table-option input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--color-primary); }
.deploy-file code { min-width: 0; overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.deploy-file small { color: var(--color-ink-soft); font-size: 0.64rem; }
.deploy-file.is-deleted code, .deploy-file.is-deleted small { color: var(--color-danger-ink); }
.deploy-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-soft); }
.deploy-progress__track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--color-surface-strong); }
.deploy-progress__track span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--color-primary); transition: width 180ms var(--ease-out); }
.deploy-progress > span { color: var(--color-ink-soft); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.deploy-log { max-height: 260px; overflow: auto; padding: 10px 20px; border-top: 1px solid var(--color-border); background: var(--color-sidebar); color: var(--color-on-dark); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.68rem; line-height: 1.55; }
.deploy-log-row { padding: 5px 0; border-bottom: 1px solid oklch(1 0 0 / 0.07); overflow-wrap: anywhere; }
.deploy-log-row:last-child { border-bottom: 0; }
.deploy-log-row.is-success { color: oklch(0.82 0.13 150); }
.deploy-log-row.is-error { color: oklch(0.78 0.12 25); }
.deploy-log-row.is-warning { color: oklch(0.86 0.12 80); }
.deploy-db-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr); align-items: start; gap: 20px; }
.deploy-db-actions { display: grid; gap: 20px; }
.deploy-action-body { display: grid; gap: 0; }
.deploy-mode-row { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; border-bottom: 1px solid var(--color-border); }
.deploy-mode-row > div { min-width: 0; }
.deploy-mode-row strong { font-size: 0.84rem; }
.deploy-mode-row p { max-width: 66ch; margin: 4px 0 0; color: var(--color-ink-soft); font-size: 0.72rem; line-height: 1.55; }
.deploy-mode-row--danger { background: var(--color-danger-soft); }
.deploy-dump { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; background: var(--color-primary-pale); }
.deploy-dump > div { min-width: 0; display: grid; gap: 2px; }
.deploy-dump small, .deploy-dump span { color: var(--color-ink-soft); font-size: 0.66rem; }
.deploy-dump code { overflow: hidden; color: var(--color-primary-hover); font-size: 0.74rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.deploy-inline-actions { padding: 20px 22px; }
.deploy-protection-panel { overflow: hidden; }
.deploy-protection-copy { padding: 16px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.deploy-protection-copy p { margin: 0; color: var(--color-ink-soft); font-size: 0.72rem; line-height: 1.55; }
.deploy-table-list { max-height: 510px; overflow: auto; display: grid; gap: 5px; padding: 10px 12px; }
.deploy-table-option { min-height: 50px; display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; cursor: pointer; transition: background 180ms var(--ease-out); }
.deploy-table-option:hover { background: var(--color-primary-pale); }
.deploy-table-option > span { min-width: 0; display: grid; gap: 1px; }
.deploy-table-option strong, .deploy-table-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deploy-table-option strong { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.71rem; }
.deploy-table-option small { color: var(--color-ink-soft); font-size: 0.62rem; }
.deploy-table-option.is-reference small { color: var(--color-info-ink); }
.deploy-protection-footer { padding: 13px 20px; border-top: 1px solid var(--color-border); color: var(--color-ink-soft); background: var(--color-surface-soft); font-size: 0.66rem; line-height: 1.5; }
.deploy-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
.deploy-recipe { position: sticky; top: calc(var(--topbar-height) + 18px); overflow: hidden; }
.deploy-recipe ol { display: grid; gap: 0; margin: 0; padding: 8px 20px; list-style: none; }
.deploy-recipe li { min-height: 76px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 11px; border-bottom: 1px solid var(--color-divider); }
.deploy-recipe li:last-child { border-bottom: 0; }
.deploy-recipe li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 0.68rem; font-weight: 820; }
.deploy-recipe li > div { min-width: 0; display: grid; gap: 2px; }
.deploy-recipe li strong { font-size: 0.76rem; }
.deploy-recipe li small { color: var(--color-ink-soft); font-size: 0.65rem; line-height: 1.45; }
.deploy-recipe .info-banner { margin: 8px 14px 14px; font-size: 0.7rem; }
.deploy-toast { width: min(420px, calc(100vw - 28px)); position: fixed; z-index: var(--z-toast); right: 18px; bottom: 18px; padding: 13px 15px; border-radius: 10px; color: var(--color-on-dark); background: var(--color-sidebar); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); font-size: 0.78rem; font-weight: 650; }
.deploy-toast.is-visible { opacity: 1; transform: translateY(0); }
.deploy-toast.is-error { color: var(--color-danger-ink); background: var(--color-danger-soft); }
.deploy-toast.is-warning { color: var(--color-warning-ink); background: var(--color-warning-soft); }

@media (max-width: 1180px) {
    .deploy-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deploy-status-strip > div:nth-child(2) { border-right: 0; }
    .deploy-status-strip > div:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
    .deploy-db-layout, .deploy-settings-layout { grid-template-columns: 1fr; }
    .deploy-recipe { position: static; }
}

@media (max-width: 720px) {
    .deploy-status-strip { grid-template-columns: 1fr; }
    .deploy-status-strip > div { border-right: 0; }
    .deploy-status-strip > div:nth-child(n + 2) { border-top: 1px solid var(--color-border); }
    .deploy-panel .panel__header, .deploy-protection-panel .panel__header { align-items: stretch; flex-direction: column; }
    .deploy-panel .panel__header .deploy-toolbar { width: 100%; }
    .deploy-panel .panel__header .deploy-toolbar .button { flex: 1; }
    .deploy-selection-bar, .deploy-mode-row, .deploy-dump { align-items: stretch; flex-direction: column; }
    .deploy-selection-bar .deploy-toolbar, .deploy-inline-actions { width: 100%; }
    .deploy-selection-bar .button, .deploy-inline-actions .button, .deploy-mode-row .button, .deploy-dump .button { width: 100%; }
    .deploy-file-list { max-height: 380px; padding-inline: 10px; }
    .deploy-file { grid-template-columns: 18px minmax(0, 1fr); }
    .deploy-file small { grid-column: 2; }
    .deploy-tabs { overflow-x: auto; }
    .deploy-tabs button { flex: 0 0 auto; }
}