:root{--app-sidebar-w: 256px;--app-topbar-h: 60px;--app-gutter: 28px;--focus-ring: 0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);--sb-bg: linear-gradient(180deg,#0F2D5B 0%,#0B2349 55%,#091D3D 100%);--sb-text: rgba(226,236,250,.74);--sb-text-strong: #FFFFFF;--sb-muted: rgba(190,208,234,.5);--sb-hover: rgba(255,255,255,.07);--sb-active: rgba(103,232,249,.12);--sb-rule: rgba(255,255,255,.08);--input-bg: var(--surface);--row-hover: color-mix(in srgb,var(--accent) 5%,transparent);--soft-success: color-mix(in srgb,var(--success) 13%,transparent);--soft-warning: color-mix(in srgb,var(--warning) 14%,transparent);--soft-danger: color-mix(in srgb,var(--danger) 12%,transparent);--soft-info: color-mix(in srgb,var(--info) 13%,transparent);--soft-muted: color-mix(in srgb,var(--muted) 13%,transparent);--soft-accent: color-mix(in srgb,var(--accent) 13%,transparent);--modal-shadow: 0 30px 80px rgba(8,20,45,.35)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sb-bg: linear-gradient(180deg,#0A1830 0%,#081426 100%);--sb-rule: rgba(255,255,255,.06);--input-bg: color-mix(in srgb,var(--ground) 55%,var(--surface));--row-hover: color-mix(in srgb,var(--accent) 8%,transparent);--modal-shadow: 0 30px 80px rgba(0,0,0,.6)}
}
:root[data-theme="dark"]{--sb-bg: linear-gradient(180deg,#0A1830 0%,#081426 100%);--sb-rule: rgba(255,255,255,.06);--input-bg: color-mix(in srgb,var(--ground) 55%,var(--surface));--row-hover: color-mix(in srgb,var(--accent) 8%,transparent);--modal-shadow: 0 30px 80px rgba(0,0,0,.6)}
*,*::before,*::after{box-sizing: border-box}
html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%}
body.app-body,body.auth-body{margin: 0;min-height: 100vh;background: var(--ground);color: var(--text);font: 400 14.5px/1.55 var(--font-body);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-feature-settings: "tnum" 0}
.app-body h1,.app-body h2,.app-body h3,.auth-body h1,.auth-body h2,.auth-body h3{font-family: var(--font-display);color: var(--ink);margin: 0;letter-spacing: -.01em;line-height: 1.25}
.app-body h1,.auth-body h1{font-size: 1.6rem;font-weight: 600}
.app-body h2,.auth-body h2{font-size: 1.02rem;font-weight: 600}
.app-body h3,.h3{font-size: .98rem;font-weight: 600;font-family: var(--font-display);color: var(--ink);margin: 0 0 6px}
.app-body p,.auth-body p{margin: 0}
.app-body a,.auth-body a{color: var(--accent);text-decoration: none}
.app-body a:hover,.auth-body a:hover{text-decoration: underline;text-underline-offset: 2px}
.app-body img,.auth-body img{max-width: 100%}
.app-body code,.auth-body code,.app-body pre,.mono,kbd{font-family: var(--font-mono);font-size: .88em}
.app-body code:not([class]),.auth-body code:not([class]){background: var(--raised);border-radius: 5px;padding: .08em .38em;color: var(--ink)}
.mono{font-variant-numeric: tabular-nums;letter-spacing: 0}
.mono-title{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;font-family: var(--font-mono) !important;font-weight: 500 !important;letter-spacing: -.02em}
.muted{color: var(--muted)}
.small{font-size: .86rem}
.center{text-align: center}
.nowrap{white-space: nowrap}
.break{overflow-wrap: anywhere;word-break: break-word}
.truncate{max-width: 280px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.text-success{color: var(--success)}
.text-warning{color: var(--warning)}
.text-danger{color: var(--danger)}
.eyebrow{font: 600 .72rem/1.3 var(--font-body);letter-spacing: .12em;text-transform: uppercase;color: var(--muted);margin-bottom: 6px !important}
.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}
.skip-link{position: absolute;left: 12px;top: -60px;z-index: 200;background: var(--accent);color: #fff !important;padding: 10px 16px;border-radius: var(--radius-sm);font-weight: 600;transition: top .15s}
.skip-link:focus{top: 12px}
:focus-visible{outline: 2px solid var(--accent);outline-offset: 2px}
[hidden]{display: none !important}
.icon{width: 18px;height: 18px;flex: none;vertical-align: -3px}
.icon-xs{width: 14px;height: 14px;vertical-align: -2px}
.stack{display: flex;flex-direction: column;gap: 18px;min-width: 0}
.stack-sm{display: flex;flex-direction: column;gap: 10px;min-width: 0}
.cluster{display: flex;flex-wrap: wrap;align-items: center;gap: 8px}
.cluster-end{justify-content: flex-end}
.count{display: inline-grid;place-items: center;min-width: 22px;height: 20px;padding: 0 6px;border-radius: 99px;background: var(--raised);color: var(--muted);font: 600 .72rem/1 var(--font-body);margin-left: 6px;vertical-align: 2px}
.app-shell{display: grid;grid-template-columns: var(--app-sidebar-w) minmax(0,1fr);min-height: 100vh}
.app-sidebar{position: sticky;top: 0;height: 100vh;display: flex;flex-direction: column;background: var(--sb-bg);color: var(--sb-text);border-right: 1px solid var(--sb-rule);overflow-y: auto;scrollbar-width: thin;scrollbar-color: rgba(255,255,255,.15) transparent;z-index: 60}
.app-brand{display: flex;align-items: center;justify-content: space-between;padding: 18px 18px 14px;border-bottom: 1px solid var(--sb-rule)}
.app-brand-link{display: flex;align-items: center;gap: 11px;color: var(--sb-text-strong) !important;text-decoration: none !important}
.app-brand-mark{width: 34px;height: 34px;border-radius: 9px;box-shadow: 0 6px 18px rgba(20,184,166,.25)}
.app-brand-text{display: flex;flex-direction: column;line-height: 1.15}
.app-brand-text strong{font: 700 1.02rem/1.1 var(--font-display);letter-spacing: -.01em}
.app-brand-text span{font-size: .74rem;color: var(--sb-muted);letter-spacing: .02em}
.app-sidebar-close{display: none !important;color: var(--sb-text) !important}
.app-nav{display: flex;flex-direction: column;gap: 2px;padding: 12px 12px 18px;flex: 1}
.app-nav-group{font: 600 .66rem/1 var(--font-body);letter-spacing: .14em;text-transform: uppercase;color: var(--sb-muted);padding: 18px 12px 8px}
.app-nav-link{position: relative;display: flex;align-items: center;gap: 11px;padding: 9px 12px;border-radius: 10px;color: var(--sb-text) !important;font-weight: 500;font-size: .92rem;text-decoration: none !important;transition: background .15s,color .15s}
.app-nav-link .icon{opacity: .78}
.app-nav-link:hover{background: var(--sb-hover);color: var(--sb-text-strong) !important}
.app-nav-link.is-active{background: var(--sb-active);color: var(--sb-text-strong) !important}
.app-nav-link.is-active .icon{opacity: 1;color: var(--cyan)}
.app-nav-link.is-active::before{content: "";position: absolute;left: -12px;top: 8px;bottom: 8px;width: 3px;border-radius: 0 3px 3px 0;background: linear-gradient(180deg,var(--cyan),var(--teal))}
.app-nav-link:focus-visible{outline: 2px solid var(--cyan);outline-offset: -2px}
.app-nav-badge{margin-left: auto;min-width: 22px;height: 20px;padding: 0 7px;display: inline-grid;place-items: center;border-radius: 99px;background: var(--teal);color: #042F2B;font: 700 .7rem/1 var(--font-body)}
.app-sidebar-foot{padding: 12px;border-top: 1px solid var(--sb-rule)}
.app-sidebar-meta{font-size: .76rem;color: var(--sb-muted);padding: 6px 12px 2px}
.app-sidebar-meta a{color: var(--cyan) !important}
.app-main{min-width: 0;display: flex;flex-direction: column}
.app-topbar{position: sticky;top: 0;z-index: 40;height: var(--app-topbar-h);display: flex;align-items: center;gap: 12px;padding: 0 var(--app-gutter);background: color-mix(in srgb,var(--ground) 82%,transparent);-webkit-backdrop-filter: saturate(1.4) blur(12px);backdrop-filter: saturate(1.4) blur(12px);border-bottom: 1px solid var(--rule-soft)}
@media (min-width: 1101px){.app-topbar{padding-right: max(var(--app-gutter),calc(100% - 1440px + var(--app-gutter)))}
}
.app-menu-btn{display: none !important}
.app-topbar-title{font: 600 .95rem/1.2 var(--font-display);color: var(--ink);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;min-width: 0}
.app-topbar-actions{margin-left: auto;display: flex;align-items: center;gap: 6px}
.app-content{width: 100%;max-width: 1440px;padding: 26px var(--app-gutter) 64px;display: flex;flex-direction: column;gap: 22px}
.app-content:focus{outline: none}
.app-backdrop{display: none}
.theme-toggle .theme-icon-dark{display: none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-toggle .theme-icon-dark{display: inline-flex}
:root:not([data-theme="light"]) .theme-toggle .theme-icon-light{display: none}
}
:root[data-theme="dark"] .theme-toggle .theme-icon-dark{display: inline-flex}
:root[data-theme="dark"] .theme-toggle .theme-icon-light{display: none}
.user-menu{position: relative}
.user-menu>summary{list-style: none}
.user-menu>summary::-webkit-details-marker{display: none}
.user-menu-trigger{display: flex;align-items: center;gap: 9px;cursor: pointer;padding: 4px 10px 4px 4px;border-radius: 99px;border: 1px solid var(--rule);background: var(--surface);color: var(--ink);font-weight: 500;font-size: .88rem;transition: border-color .15s,box-shadow .15s}
.user-menu-trigger:hover{border-color: color-mix(in srgb,var(--accent) 40%,var(--rule))}
.user-menu[open]>.user-menu-trigger{box-shadow: var(--focus-ring);border-color: var(--accent)}
.user-menu-name{max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.user-menu-panel,.menu-panel{position: absolute;right: 0;top: calc(100% + 8px);z-index: 80;min-width: 240px;background: var(--surface);border: 1px solid var(--rule);border-radius: var(--radius);box-shadow: var(--shadow);padding: 6px;animation: pop-in .14s ease-out}
.user-menu-head{display: flex;flex-direction: column;gap: 3px;padding: 10px 12px 12px;border-bottom: 1px solid var(--rule-soft);margin-bottom: 6px}
.user-menu-head strong{color: var(--ink);font-family: var(--font-display);font-weight: 600}
.user-menu-head span:not(.badge){color: var(--muted);font-size: .84rem;overflow-wrap: anywhere}
.user-menu-head .badge{align-self: flex-start;margin-top: 4px}
.user-menu-item,.menu-item{display: flex;align-items: center;gap: 10px;width: 100%;padding: 9px 12px;border-radius: 9px;border: 0;background: none;color: var(--text) !important;font: 500 .9rem/1.2 var(--font-body);text-align: left;cursor: pointer;text-decoration: none !important}
.user-menu-item:hover,.menu-item:hover{background: var(--raised);color: var(--ink) !important}
.user-menu-item .icon,.menu-item .icon{color: var(--muted)}
.menu-item-danger,.menu-item-danger .icon{color: var(--danger) !important}
.user-menu-panel form,.menu-panel form{margin: 0}
.menu{position: relative;display: inline-block}
.menu>summary{list-style: none}
.menu>summary::-webkit-details-marker{display: none}
.menu-panel-wide{min-width: 280px;padding: 12px;display: flex;flex-direction: column;gap: 10px}
.menu-label{font-size: .78rem;font-weight: 600;color: var(--muted);text-transform: uppercase;letter-spacing: .08em}
@keyframes pop-in{from{opacity: 0;transform: translateY(-4px) scale(.98)}
to{opacity: 1;transform: none}
}
.page-head{display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 14px 24px}
.page-head>div:first-child{min-width: 0}
.page-sub{color: var(--muted);margin-top: 6px !important;display: block;max-width: 72ch;overflow-wrap: anywhere}
.page-sub>.badge{vertical-align: middle;margin-left: 4px}
.page-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 8px}
.page-actions form{margin: 0}
.breadcrumbs{display: flex;align-items: center;gap: 6px;font-size: .84rem;color: var(--muted);margin-bottom: -10px}
.breadcrumbs a{color: var(--muted) !important}
.breadcrumbs a:hover{color: var(--accent) !important}
.breadcrumbs span{color: var(--text);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.grid-2,.grid-3,.grid-4{display: grid;gap: 18px;align-items: start}
.grid-2{grid-template-columns: repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns: repeat(4,minmax(0,1fr))}
.span-2{grid-column: span 2}
.kpi-grid{align-items: stretch}
.chart-grid{align-items: stretch}
.card{background: var(--surface);border: 1px solid var(--rule);border-radius: var(--radius);box-shadow: var(--shadow-sm);min-width: 0}
.card-head{display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 16px 20px;border-bottom: 1px solid var(--rule-soft)}
.card-head>div{min-width: 0}
.card-head h2{display: flex;align-items: center;gap: 8px}
.card-head-sub{border-top: 1px solid var(--rule-soft);background: color-mix(in srgb,var(--raised) 40%,transparent);padding-top: 12px;padding-bottom: 12px}
.card-sub{color: var(--muted);font-size: .85rem;margin-top: 3px !important}
.card-body{padding: 18px 20px;min-width: 0}
.card-body + .card-body{border-top: 1px solid var(--rule-soft)}
.card-body-muted{background: color-mix(in srgb,var(--raised) 45%,transparent);color: var(--muted);display: flex;flex-direction: column;gap: 8px;border-radius: 0 0 var(--radius) var(--radius)}
.card-foot{display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-end;gap: 10px;padding: 14px 20px;border-top: 1px solid var(--rule-soft);background: color-mix(in srgb,var(--raised) 35%,transparent);border-radius: 0 0 var(--radius) var(--radius)}
.card-foot form{margin: 0}
.card-flush>.card-head + .table-wrap .table thead th{border-top: 0}
.card>.table-wrap:first-child{border-radius: var(--radius) var(--radius) 0 0}
.card-flush .empty{border: 0}
.card-tinted{background: radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--teal) 12%,transparent),transparent 60%),var(--surface)}
.card-narrow{max-width: 760px}
.card-danger-zone{border-color: color-mix(in srgb,var(--danger) 35%,var(--rule))}
.card-danger-zone>.card-head{background: color-mix(in srgb,var(--danger) 6%,transparent);border-radius: var(--radius) var(--radius) 0 0}
.card-collapsible>summary{list-style: none;cursor: pointer;border-bottom: 0}
.card-collapsible>summary::-webkit-details-marker{display: none}
.card-collapsible[open]>summary{border-bottom: 1px solid var(--rule-soft)}
.card-collapsible .collapse-icon{transition: transform .2s;color: var(--muted)}
.card-collapsible[open] .collapse-icon{transform: rotate(180deg)}
.kpi{position: relative;display: flex;flex-direction: column;gap: 4px;padding: 18px 20px 16px;background: var(--surface);border: 1px solid var(--rule);border-radius: var(--radius);box-shadow: var(--shadow-sm);overflow: hidden;min-width: 0}
.kpi-icon{position: absolute;right: 16px;top: 16px;width: 36px;height: 36px;border-radius: 11px;display: grid;place-items: center;background: var(--accent-soft);color: var(--accent)}
.kpi-label{font-size: .78rem;font-weight: 600;color: var(--muted);letter-spacing: .02em;padding-right: 44px}
.kpi-value{font: 600 1.85rem/1.15 var(--font-display);color: var(--ink);font-variant-numeric: tabular-nums;letter-spacing: -.02em;margin: 2px 0 2px !important}
.kpi-delta{display: inline-flex;align-items: center;gap: 4px;font-size: .8rem;font-weight: 600;color: var(--muted)}
.kpi-delta.up{color: var(--success)}
.kpi-delta.down{color: var(--danger)}
.kpi-foot{font-size: .8rem;color: var(--muted);margin-top: auto !important;padding-top: 4px}
.kpi-foot a{font-weight: 500}
.kpi-feature{border: 0;color: #E7F0FF;background: radial-gradient(90% 120% at 100% 0%,rgba(103,232,249,.28),transparent 55%),radial-gradient(70% 90% at 0% 100%,rgba(20,184,166,.30),transparent 60%),linear-gradient(135deg,#0F2D5B 0%,#1D4ED8 100%);box-shadow: 0 16px 36px rgba(29,78,216,.28)}
.kpi-feature .kpi-label,.kpi-feature .kpi-foot{color: rgba(231,240,255,.78)}
.kpi-feature .kpi-value{color: #fff}
.kpi-feature .kpi-icon{background: rgba(255,255,255,.14);color: #fff}
.kpi-feature .kpi-delta{color: rgba(231,240,255,.8)}
.kpi-feature .kpi-delta.up{color: #7CF3D6}
.kpi-feature .kpi-delta.down{color: #FFB4C0}
.empty{display: flex;flex-direction: column;align-items: center;text-align: center;gap: 6px;padding: 38px 24px}
.empty-icon{width: 48px;height: 48px;border-radius: 14px;margin-bottom: 6px;display: grid;place-items: center;background: var(--raised);color: var(--muted)}
.empty-icon .icon{width: 22px;height: 22px}
.empty-title{font: 600 .98rem/1.3 var(--font-display);color: var(--ink)}
.empty-text{color: var(--muted);font-size: .88rem;max-width: 44ch}
.empty .btn{margin-top: 10px}
.btn{--btn-bg: var(--surface);--btn-fg: var(--ink);--btn-bd: var(--rule);display: inline-flex;align-items: center;justify-content: center;gap: 7px;min-height: 38px;padding: 8px 15px;border-radius: 10px;border: 1px solid var(--btn-bd);background: var(--btn-bg);color: var(--btn-fg) !important;font: 600 .88rem/1.2 var(--font-body);text-decoration: none !important;white-space: nowrap;cursor: pointer;transition: background .15s,border-color .15s,box-shadow .15s,transform .06s,color .15s;-webkit-tap-highlight-color: transparent}
.btn:hover{border-color: color-mix(in srgb,var(--accent) 35%,var(--btn-bd))}
.btn:active{transform: translateY(1px)}
.btn:focus-visible{outline: none;box-shadow: var(--focus-ring)}
.btn[disabled],.btn.is-disabled{opacity: .5;cursor: not-allowed;pointer-events: none}
.btn-primary{--btn-bg: var(--accent);--btn-fg: #fff;--btn-bd: transparent;background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent));box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn-primary:hover{background: var(--blue-2);border-color: transparent}
:root[data-theme="dark"] .btn-primary{--btn-fg: #06122A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{--btn-fg: #06122A}
}
.btn-secondary{--btn-bg: var(--surface);--btn-fg: var(--ink);--btn-bd: var(--rule);box-shadow: var(--shadow-sm)}
.btn-secondary:hover{background: var(--raised)}
.btn-ghost{--btn-bg: transparent;--btn-bd: transparent;--btn-fg: var(--text);box-shadow: none}
.btn-ghost:hover{background: var(--raised);border-color: transparent}
.btn-ghost-danger{--btn-fg: var(--danger)}
.btn-ghost-danger:hover{background: var(--soft-danger)}
.btn-danger{--btn-bg: var(--danger);--btn-fg: #fff;--btn-bd: transparent;box-shadow: 0 6px 16px color-mix(in srgb,var(--danger) 25%,transparent)}
.btn-danger:hover{background: color-mix(in srgb,var(--danger) 88%,#000);border-color: transparent}
.btn-sm{min-height: 32px;padding: 5px 11px;font-size: .82rem;border-radius: 8px;gap: 6px}
.btn-sm .icon{width: 16px;height: 16px}
.btn-lg{min-height: 46px;padding: 11px 20px;font-size: .96rem;border-radius: 12px}
.btn-block{width: 100%}
.btn .icon{margin: 0 -1px}
.field{display: flex;flex-direction: column;gap: 6px;min-width: 0}
.field>label,.field-label{font-weight: 600;font-size: .84rem;color: var(--ink)}
.field-optional{font-weight: 500;color: var(--muted);font-size: .76rem;margin-left: 4px}
.field-hint{font-size: .8rem;color: var(--muted);line-height: 1.45}
.field-error{font-size: .8rem;color: var(--danger);font-weight: 500;display: flex;gap: 6px;align-items: flex-start}
.field-static{padding: 9px 0;color: var(--ink)}
.field-full{grid-column: 1 / -1}
.app-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.app-body select,.app-body textarea,.auth-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.auth-body select,.auth-body textarea{width: 100%;min-height: 40px;padding: 9px 12px;border: 1px solid var(--rule);border-radius: 10px;background: var(--input-bg);color: var(--ink);font: 400 .92rem/1.4 var(--font-body);transition: border-color .15s,box-shadow .15s,background .15s;-webkit-appearance: none;appearance: none}
.app-body input[type="file"]{padding: 7px}
.app-body textarea,.auth-body textarea{min-height: 96px;resize: vertical;line-height: 1.5}
.app-body select,.auth-body select{padding-right: 36px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6E8C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center}
.app-body input::placeholder,.app-body textarea::placeholder,.auth-body input::placeholder{color: color-mix(in srgb,var(--muted) 75%,transparent)}
.app-body input:hover,.app-body select:hover,.app-body textarea:hover,.auth-body input:hover,.auth-body select:hover{border-color: color-mix(in srgb,var(--accent) 30%,var(--rule))}
.app-body input:focus,.app-body select:focus,.app-body textarea:focus,.auth-body input:focus,.auth-body select:focus,.auth-body textarea:focus{outline: none;border-color: var(--accent);box-shadow: var(--focus-ring)}
.app-body input[disabled],.app-body select[disabled],.app-body textarea[disabled]{opacity: .6;cursor: not-allowed}
.has-error input,.has-error select,.has-error textarea,[aria-invalid="true"]{border-color: var(--danger) !important}
.has-error input:focus,.has-error textarea:focus{box-shadow: 0 0 0 3px var(--soft-danger) !important}
.input-sm{min-height: 32px !important;padding: 5px 10px !important;font-size: .85rem !important}
.input-upper{text-transform: uppercase;letter-spacing: .06em}
.app-body input.input-num{width: 9.5rem;max-width: 100%;text-align: right;font-variant-numeric: tabular-nums}
.input-machine{letter-spacing: .08em;font-size: 1rem !important}
.input-otp{font: 600 1.35rem/1 var(--font-mono) !important;letter-spacing: .35em !important;text-align: center;max-width: 220px}
.auth-card .input-otp{max-width: none}
.form-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 16px 18px}
.form-grid-tight{gap: 12px}
.form-grid>.form-grid{grid-column: auto}
.form-actions{display: flex;justify-content: flex-end;gap: 10px}
.fieldset{border: 1px solid var(--rule-soft);border-radius: var(--radius-sm);padding: 14px 16px 16px;margin: 0;min-width: 0}
.fieldset legend{font-weight: 600;font-size: .84rem;color: var(--ink);padding: 0 6px}
.fieldset-inline{display: flex;flex-wrap: wrap;gap: 8px 18px}
.price-inputs{gap: 14px}
.input-group{display: flex;align-items: stretch;min-width: 0}
.input-group>input,.input-group>select{border-top-right-radius: 0 !important;border-bottom-right-radius: 0 !important;min-width: 0;flex: 1}
.input-group>.btn{border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px;min-height: 40px}
.input-group>.btn-ghost{border: 1px solid var(--rule);background: var(--input-bg)}
.input-group-code{align-items: center;gap: 6px;background: var(--raised);border: 1px solid var(--rule-soft);border-radius: 10px;padding: 4px 4px 4px 12px}
.input-group-code>.code-inline{flex: 1;min-width: 0;background: none;padding: 4px 0}
.input-group-code>.btn{margin: 0;min-height: 30px;border-radius: 8px;flex: none}
.input-affix{display: flex;align-items: stretch;border: 1px solid var(--rule);border-radius: 10px;background: var(--input-bg);transition: border-color .15s,box-shadow .15s}
.input-affix:focus-within{border-color: var(--accent);box-shadow: var(--focus-ring)}
.input-affix>input{border: 0 !important;box-shadow: none !important;background: transparent !important;min-width: 0}
.input-affix .affix{display: grid;place-items: center;padding: 0 12px;color: var(--muted);font-size: .86rem;font-weight: 500;white-space: nowrap}
.input-affix .affix:first-child{border-right: 1px solid var(--rule-soft)}
.input-affix .affix:last-child:not(:first-child){border-left: 1px solid var(--rule-soft)}
.input-affix-sm{max-width: 140px}
.input-affix-sm>input{min-height: 32px !important;padding: 5px 10px !important}
.field-switch{justify-content: center}
.switch{display: inline-flex;align-items: flex-start;gap: 12px;cursor: pointer;position: relative;font-weight: 500 !important}
.switch input{position: absolute;opacity: 0;width: 1px;height: 1px}
.switch-track{flex: none;position: relative;width: 40px;height: 24px;margin-top: 1px;border-radius: 99px;background: color-mix(in srgb,var(--muted) 35%,var(--rule));transition: background .18s}
.switch-thumb{position: absolute;top: 3px;left: 3px;width: 18px;height: 18px;border-radius: 50%;background: #fff;box-shadow: 0 1px 3px rgba(15,45,91,.3);transition: transform .18s cubic-bezier(.3,.7,.4,1)}
.switch input:checked + .switch-track{background: var(--accent)}
.switch input:checked + .switch-track .switch-thumb{transform: translateX(16px)}
.switch input:focus-visible + .switch-track{box-shadow: var(--focus-ring)}
.switch input:disabled + .switch-track{opacity: .5}
.switch-label{display: flex;flex-direction: column;gap: 2px;color: var(--ink);font-size: .9rem}
.switch-label .field-hint{font-weight: 400}
.check{display: inline-flex;align-items: center;gap: 8px;cursor: pointer;font-size: .9rem;color: var(--ink)}
.check input{width: 17px;height: 17px;accent-color: var(--accent);margin: 0}
.check-small{font-size: .82rem;color: var(--muted)}
.tabs{display: flex;gap: 4px;overflow-x: auto;border-bottom: 1px solid var(--rule);scrollbar-width: none;margin-bottom: -6px}
.tabs::-webkit-scrollbar{display: none}
.tab{position: relative;display: inline-flex;align-items: center;gap: 8px;padding: 10px 14px 12px;color: var(--muted) !important;font-weight: 600;font-size: .88rem;white-space: nowrap;text-decoration: none !important;border-radius: 8px 8px 0 0;transition: color .15s,background .15s}
.tab:hover{color: var(--ink) !important;background: color-mix(in srgb,var(--raised) 60%,transparent)}
.tab.is-active{color: var(--accent) !important}
.tab.is-active::after{content: "";position: absolute;left: 10px;right: 10px;bottom: -1px;height: 2px;border-radius: 2px 2px 0 0;background: var(--accent)}
.tab-count{min-width: 22px;padding: 1px 7px;border-radius: 99px;background: var(--raised);color: var(--muted);font-size: .72rem;font-weight: 600;text-align: center;font-variant-numeric: tabular-nums}
.tab.is-active .tab-count{background: var(--accent-soft);color: var(--accent)}
.filters{display: flex;flex-wrap: wrap;align-items: center;gap: 10px}
.filters select{width: auto !important;min-width: 150px}
.filters-search{position: relative;flex: 1 1 280px;max-width: 460px;display: block}
.filters-search .icon{position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: var(--muted);pointer-events: none}
.filters-search input{padding-left: 38px !important}
.table-wrap{position: relative;width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch}
.table{width: 100%;border-collapse: separate;border-spacing: 0;font-size: .88rem}
.table th,.table td{padding: 11px 16px;text-align: left;vertical-align: middle;border-bottom: 1px solid var(--rule-soft)}
.table thead th{position: sticky;top: 0;background: color-mix(in srgb,var(--raised) 55%,var(--surface));color: var(--muted);font: 600 .72rem/1.2 var(--font-body);letter-spacing: .07em;text-transform: uppercase;white-space: nowrap;border-bottom: 1px solid var(--rule)}
.table tbody tr:last-child td{border-bottom: 0}
.table tbody tr{transition: background .12s}
.table tbody tr:hover{background: var(--row-hover)}
.table .num{text-align: right;font-variant-numeric: tabular-nums;white-space: nowrap}
.table td.mono,.table .mono{font-size: .82rem}
.table .mono,.table time,.table .badge{white-space: nowrap}
.table-compact th,.table-compact td{padding: 7px 12px}
.table tr.is-muted td{opacity: .58}
.table tr.is-selected td{background: var(--soft-accent)}
.row-link{cursor: pointer}
.row-link:focus-within{background: var(--row-hover)}
.th-sort{display: inline-flex;align-items: center;gap: 4px;color: inherit !important;text-decoration: none !important}
.th-sort:hover,.th-sort.is-active{color: var(--ink) !important}
.th-sort.num{justify-content: flex-end}
.cell-main{display: block;font-weight: 600;color: var(--ink) !important}
a.cell-main:hover{color: var(--accent) !important}
.cell-main.is-unread{font-weight: 700}
.cell-sub{display: block;color: var(--muted);font-size: .8rem;margin-top: 1px;font-weight: 400}
.cell-person{display: flex;align-items: center;gap: 11px;min-width: 0}
.cell-person>div{min-width: 0}
.cell-person-lg{gap: 16px}
.actions-cell{text-align: right;white-space: nowrap;width: 1%}
.actions-cell form{display: inline;margin: 0}
.actions-cell .cluster{flex-wrap: nowrap}
.avatar{flex: none;width: 34px;height: 34px;border-radius: 50%;display: inline-grid;place-items: center;background: linear-gradient(135deg,var(--accent),var(--teal));color: #fff;font: 600 .78rem/1 var(--font-display);letter-spacing: .02em}
.avatar-sm{width: 30px;height: 30px;font-size: .7rem}
.avatar-lg{width: 56px;height: 56px;font-size: 1.1rem;box-shadow: 0 8px 22px color-mix(in srgb,var(--accent) 30%,transparent)}
.pagination{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 12px}
.pagination-info{color: var(--muted);font-size: .85rem}
.pagination-info strong{color: var(--ink);font-variant-numeric: tabular-nums}
.pagination-pages{display: flex;align-items: center;gap: 4px}
.page-num{min-width: 34px;height: 34px;padding: 0 8px;border-radius: 9px;display: inline-grid;place-items: center;color: var(--text) !important;font-weight: 600;font-size: .85rem;text-decoration: none !important;font-variant-numeric: tabular-nums}
.page-num:hover{background: var(--raised)}
.page-num.is-active{background: var(--accent);color: #fff !important}
.page-gap{color: var(--muted);padding: 0 4px}
.badge{display: inline-flex;align-items: center;gap: 6px;padding: 3px 9px 3px 8px;border-radius: 99px;font: 600 .74rem/1.35 var(--font-body);white-space: nowrap;vertical-align: middle;background: var(--soft-muted);color: var(--muted)}
.badge .status-dot{width: 6px;height: 6px}
.badge-success{background: var(--soft-success);color: var(--success)}
.badge-warning{background: var(--soft-warning);color: var(--warning)}
.badge-danger{background: var(--soft-danger);color: var(--danger)}
.badge-info{background: var(--soft-info);color: var(--info)}
.badge-muted{background: var(--soft-muted);color: var(--muted)}
.badge-accent{background: var(--soft-accent);color: var(--accent)}
.status-dot{display: inline-block;width: 8px;height: 8px;border-radius: 50%;background: currentColor;flex: none}
.status-dot-accent{background: var(--accent);margin-right: 6px;vertical-align: 1px}
.badge-success .status-dot{box-shadow: 0 0 0 3px color-mix(in srgb,var(--success) 20%,transparent)}
.kv{display: grid;grid-template-columns: minmax(110px,auto) 1fr;gap: 10px 16px;margin: 0;font-size: .88rem}
.kv dt{color: var(--muted);font-weight: 500}
.kv dd{margin: 0;color: var(--ink);min-width: 0;overflow-wrap: anywhere}
.kv-2{grid-template-columns: minmax(120px,auto) 1fr minmax(120px,auto) 1fr}
.kv-2>.kv-span{grid-column: 2 / -1}
.kv-tight{gap: 6px 14px;font-size: .85rem;margin-top: 12px}
.code-block{position: relative;margin: 0;padding: 14px 16px;background: color-mix(in srgb,var(--deep) 4%,var(--raised));border: 1px solid var(--rule-soft);border-radius: var(--radius-sm);color: var(--ink);font: 400 .82rem/1.6 var(--font-mono);white-space: pre-wrap;overflow-wrap: anywhere;word-break: break-word;max-height: 520px;overflow: auto}
.code-key{font-size: .8rem;line-height: 1.7;word-break: break-all;color: var(--ink)}
.code-small{font-size: .76rem;padding: 10px 12px}
.code-inline{font-family: var(--font-mono);font-size: .82rem;color: var(--ink);background: var(--raised);border-radius: 6px;padding: 3px 7px}
.code-secret{letter-spacing: .12em;font-size: .95rem;font-weight: 500}
.json-view .j-key{color: var(--accent)}
.json-view .j-str{color: var(--success)}
.json-view .j-num{color: var(--st-filtered)}
.json-view .j-bool,.json-view .j-null{color: var(--st-honeypot)}
.copy-btn.is-copied{color: var(--success) !important;border-color: color-mix(in srgb,var(--success) 40%,transparent) !important}
.copy-btn.is-copied.btn-primary{color: #fff !important;background: var(--success)}
.progress{--p: 0;position: relative;height: 8px;width: 100%;min-width: 80px;border-radius: 99px;background: var(--raised);overflow: hidden}
.progress>span{position: absolute;inset: 0 auto 0 0;width: calc(var(--p) * 1%);border-radius: inherit;background: linear-gradient(90deg,var(--teal),var(--accent));transition: width .6s cubic-bezier(.3,.7,.4,1)}
.progress-lg{height: 10px;max-width: 220px}
.alert{display: flex;align-items: flex-start;gap: 11px;padding: 12px 14px;border-radius: var(--radius-sm);border: 1px solid;font-size: .9rem;line-height: 1.5;color: var(--ink)}
.alert>.icon{margin-top: 2px}
.alert>div{flex: 1;min-width: 0}
.alert a{font-weight: 600}
.alert-success{background: var(--soft-success);border-color: color-mix(in srgb,var(--success) 30%,transparent)}
.alert-success>.icon{color: var(--success)}
.alert-error{background: var(--soft-danger);border-color: color-mix(in srgb,var(--danger) 30%,transparent)}
.alert-error>.icon{color: var(--danger)}
.alert-warning{background: var(--soft-warning);border-color: color-mix(in srgb,var(--warning) 32%,transparent)}
.alert-warning>.icon{color: var(--warning)}
.alert-info{background: var(--soft-info);border-color: color-mix(in srgb,var(--info) 28%,transparent)}
.alert-info>.icon{color: var(--info)}
.alert-close{flex: none;border: 0;background: none;color: var(--muted);cursor: pointer;width: 26px;height: 26px;border-radius: 6px;display: grid;place-items: center;margin: -2px -4px 0 0}
.alert-close:hover{background: color-mix(in srgb,var(--ink) 8%,transparent);color: var(--ink)}
.alert.is-leaving{opacity: 0;transform: translateY(-4px);transition: opacity .2s,transform .2s}
.alert-inline{margin-top: 10px;font-size: .84rem}
.toast-region{position: fixed;right: 20px;bottom: 20px;z-index: 300;display: flex;flex-direction: column;gap: 8px;align-items: flex-end;pointer-events: none}
.toast{pointer-events: auto;display: flex;align-items: center;gap: 10px;min-width: 220px;max-width: min(420px,calc(100vw - 40px));overflow-wrap: anywhere;padding: 11px 16px;border-radius: 12px;background: var(--deep);color: #fff;box-shadow: 0 16px 40px rgba(8,20,45,.35);font-size: .88rem;font-weight: 500;animation: toast-in .22s cubic-bezier(.3,.7,.4,1)}
:root[data-theme="dark"] .toast{background: var(--raised);color: var(--ink);border: 1px solid var(--rule)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .toast{background: var(--raised);color: var(--ink);border: 1px solid var(--rule)}
}
.toast .icon{color: var(--cyan)}
.toast-error .icon{color: #FF8FA3}
.toast.is-leaving{opacity: 0;transform: translateY(6px);transition: opacity .2s,transform .2s}
@keyframes toast-in{from{opacity: 0;transform: translateY(10px) scale(.97)}
to{opacity: 1;transform: none}
}
.spinner{display: inline-block;width: 18px;height: 18px;flex: none;border-radius: 50%;border: 2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color: currentColor;animation: spin .7s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}
}
.modal-backdrop{position: fixed;inset: 0;z-index: 250;display: grid;place-items: center;padding: 16px;background: rgba(7,17,31,.52);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px);animation: fade-in .15s ease-out}
.modal{width: min(460px,100%);background: var(--surface);border: 1px solid var(--rule);border-radius: var(--radius-lg);box-shadow: var(--modal-shadow);padding: 22px 22px 18px;animation: pop-in .18s cubic-bezier(.3,.7,.4,1)}
.modal-icon{width: 44px;height: 44px;border-radius: 13px;margin-bottom: 14px;display: grid;place-items: center;background: var(--accent-soft);color: var(--accent)}
.modal.is-danger .modal-icon{background: var(--soft-danger);color: var(--danger)}
.modal-icon .icon{width: 22px;height: 22px}
.modal h2{font-size: 1.1rem !important;margin-bottom: 6px !important}
.modal p{color: var(--muted);font-size: .92rem}
.modal-actions{display: flex;justify-content: flex-end;gap: 8px;margin-top: 20px}
@keyframes fade-in{from{opacity: 0}
to{opacity: 1}
}
.setup-card{border-color: color-mix(in srgb,var(--accent) 28%,var(--rule))}
.setup-card>.card-head{background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%);border-radius: var(--radius) var(--radius) 0 0}
.checklist{list-style: none;margin: 0;padding: 6px 0}
.checklist-item{display: flex;align-items: center;gap: 14px;padding: 11px 20px}
.checklist-item + .checklist-item{border-top: 1px dashed var(--rule-soft)}
.checklist-mark{flex: none;width: 30px;height: 30px;border-radius: 50%;display: grid;place-items: center;border: 1.5px dashed color-mix(in srgb,var(--warning) 60%,transparent);color: var(--warning)}
.checklist-mark .icon{width: 16px;height: 16px}
.checklist-item.is-done .checklist-mark{border: 0;background: var(--success);color: #fff}
.checklist-text{flex: 1;min-width: 0;display: flex;flex-direction: column}
.checklist-text strong{color: var(--ink);font-weight: 600;font-size: .92rem}
.checklist-text span{color: var(--muted);font-size: .84rem}
.checklist-item.is-done .checklist-text strong{color: var(--muted)}
.chart{position: relative;width: 100%;min-height: 220px}
.chart svg{display: block;width: 100%;height: auto;overflow: visible}
.chart .c-grid{stroke: var(--rule-soft);stroke-width: 1}
.chart .c-axis{fill: var(--muted);font: 500 11px/1 var(--font-body);font-variant-numeric: tabular-nums}
.chart .c-bar{transition: opacity .15s}
.chart .c-stop-a{stop-color: var(--cyan)}
.chart .c-stop-b{stop-color: var(--accent)}
.chart .c-stop-area-a{stop-color: var(--accent);stop-opacity: .28}
.chart .c-stop-area-b{stop-color: var(--accent);stop-opacity: 0}
.chart .c-bar-zero{fill: var(--rule)}
.chart .c-bar.is-hot,.chart .c-hit:hover + .c-bar{opacity: .75}
.chart .c-line{fill: none;stroke: var(--accent);stroke-width: 2.5;stroke-linejoin: round;stroke-linecap: round}
.chart .c-dot{fill: var(--surface);stroke: var(--accent);stroke-width: 2}
.chart .c-dot.is-hot{fill: var(--accent)}
.chart .c-hit{fill: transparent;cursor: default}
.chart .c-guide{stroke: var(--muted);stroke-dasharray: 3 3;opacity: 0}
.chart .c-guide.is-on{opacity: .6}
.chart-tip{position: absolute;z-index: 5;pointer-events: none;transform: translate(-50%,calc(-100% - 10px));padding: 7px 10px;border-radius: 9px;background: var(--deep);color: #fff;font: 500 .78rem/1.35 var(--font-body);white-space: nowrap;box-shadow: 0 10px 24px rgba(8,20,45,.28);opacity: 0;transition: opacity .12s}
.chart-tip strong{display: block;font: 600 .92rem/1.2 var(--font-display);font-variant-numeric: tabular-nums}
.chart-tip.is-on{opacity: 1}
:root[data-theme="dark"] .chart-tip{background: var(--raised);color: var(--ink);border: 1px solid var(--rule)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chart-tip{background: var(--raised);color: var(--ink);border: 1px solid var(--rule)}
}
.chart-table{margin-top: 12px;font-size: .84rem}
.chart-table>summary{cursor: pointer;color: var(--muted);font-weight: 500}
.chart-table .table-wrap{max-height: 260px;overflow: auto;margin-top: 8px;border: 1px solid var(--rule-soft);border-radius: var(--radius-sm)}
.list{list-style: none;margin: 0;padding: 4px 0}
.list-item{display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 11px 20px}
.list-item + .list-item{border-top: 1px solid var(--rule-soft)}
.list-item>div{min-width: 0}
.timeline{list-style: none;margin: 0;padding: 14px 20px 16px;position: relative}
.timeline li{position: relative;display: flex;gap: 12px;padding: 0 0 14px 2px}
.timeline li::before{content: "";position: absolute;left: 6px;top: 16px;bottom: 0;width: 1px;background: var(--rule)}
.timeline li:last-child::before{display: none}
.timeline li:last-child{padding-bottom: 0}
.timeline-dot{flex: none;width: 10px;height: 10px;margin-top: 5px;border-radius: 50%;background: var(--surface);border: 2px solid var(--accent);position: relative;z-index: 1}
.timeline-action{font-size: .8rem;color: var(--ink);background: none;padding: 0;font-weight: 500}
.sub-block{padding: 16px 20px;display: flex;flex-direction: column;gap: 12px}
.sub-block + .sub-block{border-top: 1px solid var(--rule-soft)}
.sub-block-head strong{color: var(--ink);font-family: var(--font-display);font-weight: 600;margin-right: 6px}
.sub-block-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;justify-content: space-between}
.inline-form{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;margin: 0}
.inline-form>input[type="text"]{flex: 1 1 180px;width: auto}
.inline-form .input-otp{width: 200px}
@media (min-width: 721px){.sub-block-actions>.inline-form{flex: 1 1 380px;flex-wrap: nowrap}
}
.amount-strip{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 1px;background: var(--rule-soft);border: 1px solid var(--rule-soft);border-radius: var(--radius-sm);overflow: hidden;margin-bottom: 18px}
.amount-strip>div{background: var(--surface);padding: 12px 14px;display: flex;flex-direction: column;gap: 2px;min-width: 0}
.amount-strip strong{font: 600 1.1rem/1.3 var(--font-display);color: var(--ink);font-variant-numeric: tabular-nums;overflow-wrap: anywhere}
.amount-strip .kpi-label{padding: 0}
.amount-total{background: color-mix(in srgb,var(--accent) 6%,var(--surface)) !important}
.amount-total strong{color: var(--accent)}
.inbox{list-style: none;margin: 0;padding: 0}
.inbox-item{display: flex;gap: 14px;padding: 14px 20px;border-bottom: 1px solid var(--rule-soft);transition: background .12s}
.inbox-item:last-child{border-bottom: 0}
.inbox-item:hover{background: var(--row-hover)}
.inbox-item.is-unread{background: color-mix(in srgb,var(--accent) 4%,transparent)}
.inbox-main{flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 2px}
.inbox-top{display: flex;justify-content: space-between;gap: 10px;font-size: .84rem}
.inbox-from{color: var(--text);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.inbox-date{color: var(--muted);white-space: nowrap;font-size: .8rem}
.inbox-subject{color: var(--ink) !important;font-weight: 600}
.is-unread .inbox-subject{font-weight: 700}
.inbox-snippet{color: var(--muted);font-size: .85rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.message-body{font-size: .95rem;line-height: 1.7;color: var(--text);overflow-wrap: anywhere;max-width: 72ch}
.plan-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(270px,1fr));gap: 18px}
@media (max-width: 1180px){.plan-grid{grid-template-columns: repeat(2,minmax(0,1fr))}
.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child){grid-column: 1 / -1}
}
@media (max-width: 600px){.plan-grid{grid-template-columns: minmax(0,1fr)}
}
.plan-form{max-width: 1040px}
.plan-card{display: flex;flex-direction: column;position: relative;overflow: hidden}
.plan-card>.card-body{flex: 1;display: flex;flex-direction: column;gap: 8px}
.plan-card.is-popular{border-color: color-mix(in srgb,var(--accent) 50%,var(--rule));box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),var(--shadow)}
.plan-card.is-popular::before{content: "";position: absolute;inset: 0 0 auto;height: 3px;background: linear-gradient(90deg,var(--teal),var(--accent),var(--cyan))}
.plan-card.is-inactive{opacity: .72}
.plan-card-top{display: flex;justify-content: space-between;align-items: center;gap: 8px;flex-wrap: wrap}
.plan-card-top h2{font-size: 1.15rem}
.plan-price{font: 600 2rem/1.1 var(--font-display);color: var(--ink);letter-spacing: -.02em;font-variant-numeric: tabular-nums;margin: 6px 0 2px !important}
.plan-price span{font: 500 .88rem/1 var(--font-body);color: var(--muted);letter-spacing: 0;margin-left: 3px}
.ticks{list-style: none;margin: 10px 0 0;padding: 0;display: flex;flex-direction: column;gap: 7px;font-size: .88rem}
.ticks li{position: relative;padding-left: 24px;color: var(--text)}
.ticks li::before{content: "";position: absolute;left: 2px;top: .38em;width: 12px;height: 6px;border-left: 2px solid var(--teal);border-bottom: 2px solid var(--teal);transform: rotate(-45deg)}
.ticks-compact{gap: 5px;font-size: .84rem}
.ticks li.muted::before{display: none}
.coupon-code{font: 600 .82rem/1 var(--font-mono) !important;letter-spacing: .08em;padding: 5px 9px !important;border-radius: 7px !important;background: var(--accent-soft) !important;color: var(--accent) !important;border: 1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.callout{display: flex;gap: 14px;align-items: flex-start;padding: 16px 18px;border-radius: var(--radius);border: 1px solid color-mix(in srgb,var(--teal) 35%,var(--rule));background: linear-gradient(100deg,color-mix(in srgb,var(--teal) 9%,var(--surface)),var(--surface) 70%)}
.callout>.icon{color: var(--teal);width: 22px;height: 22px;margin-top: 2px}
.callout>div{flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 8px}
.callout strong{color: var(--ink);font-family: var(--font-display);font-weight: 600}
.meta-list{margin: 0;display: flex;flex-wrap: wrap;gap: 4px 12px;font-size: .8rem}
.meta-list>div{display: flex;gap: 5px;min-width: 0}
.meta-list dt{color: var(--muted)}
.meta-list dd{margin: 0;color: var(--ink);font-family: var(--font-mono);font-size: .78rem;overflow-wrap: anywhere;max-width: 360px}
.table-audit td{vertical-align: top}
.key-card{border-color: color-mix(in srgb,var(--accent) 30%,var(--rule))}
.key-card .code-key{background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%),var(--raised)}
.key-compare{display: grid;grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);gap: 14px;align-items: center}
.key-compare-item{display: flex;flex-direction: column;gap: 6px;min-width: 0;padding: 14px;border-radius: var(--radius-sm);border: 1px solid var(--rule-soft);background: var(--ground)}
.key-compare-item .kpi-label{padding: 0}
.key-compare-link{width: 40px;height: 40px;display: grid;place-items: center;border-radius: 50%}
.signer-card.is-ok .key-compare-link{background: var(--soft-success);color: var(--success)}
.signer-card.is-bad .key-compare-link,.signer-card.is-missing .key-compare-link{background: var(--soft-danger);color: var(--danger)}
.signer-card.is-ok{border-color: color-mix(in srgb,var(--success) 35%,var(--rule))}
.signer-card.is-bad{border-color: color-mix(in srgb,var(--danger) 45%,var(--rule))}
.fingerprint{font: 600 1.5rem/1.1 var(--font-mono);letter-spacing: .12em;color: var(--ink)}
.fingerprint.is-empty{color: var(--muted);font-size: 1.1rem}
.checks{list-style: none;margin: 0 0 12px;padding: 0;display: flex;flex-direction: column;gap: 6px;font-size: .88rem;font-weight: 500}
.checks li{display: flex;align-items: center;gap: 8px}
.checks li.is-ok{color: var(--success)}
.checks li.is-bad{color: var(--danger)}
.test-result{display: flex;flex-direction: column;gap: 10px;align-items: flex-start}
.test-result .code-block{width: 100%}
.details-raw>summary{cursor: pointer;color: var(--muted);font-size: .84rem;font-weight: 500;padding: 4px 0}
.details-raw[open]>summary{margin-bottom: 8px}
.secret-saved{display: flex;align-items: center;gap: 7px;flex-wrap: wrap;font-size: .86rem;color: var(--success);font-weight: 600;padding: 8px 12px;border-radius: 9px;background: var(--soft-success)}
.flow{margin: 10px 0 0;padding-left: 20px;display: flex;flex-direction: column;gap: 8px;font-size: .87rem;color: var(--text)}
.flow li::marker{color: var(--accent);font-weight: 700}
.totp-setup{display: grid;grid-template-columns: auto minmax(0,1fr);gap: 20px;align-items: center}
.qr{width: 188px;height: 188px;padding: 12px;border-radius: var(--radius);background: #fff;border: 1px solid var(--rule);box-shadow: var(--shadow-sm);display: grid;place-items: center}
.qr svg{width: 100%;height: 100%;display: block}
.steps{margin: 0;padding-left: 20px;display: flex;flex-direction: column;gap: 6px;font-size: .9rem}
.steps li::marker{font-weight: 700;color: var(--accent)}
.dropzone{position: relative;display: flex;flex-direction: column;align-items: center;gap: 6px;text-align: center;padding: 26px 16px;border: 1.5px dashed color-mix(in srgb,var(--accent) 40%,var(--rule));border-radius: var(--radius);background: color-mix(in srgb,var(--accent) 4%,var(--surface));cursor: pointer;transition: background .15s,border-color .15s}
.dropzone:hover,.dropzone.is-over{background: color-mix(in srgb,var(--accent) 9%,var(--surface));border-color: var(--accent)}
.dropzone:focus-within{box-shadow: var(--focus-ring)}
.dropzone>.icon{width: 28px;height: 28px;color: var(--accent)}
.dropzone-title{font-weight: 600;color: var(--ink);overflow-wrap: anywhere}
.dropzone-sub{font-size: .8rem;color: var(--muted)}
.app-body input.sr-only{width: 1px !important;min-height: 0 !important;padding: 0 !important}
.file-row{display: flex;align-items: center;gap: 14px;margin-bottom: 16px}
.file-icon{width: 46px;height: 46px;border-radius: 12px;display: grid;place-items: center;background: var(--accent-soft);color: var(--accent);flex: none}
.file-icon .icon{width: 22px;height: 22px}
.file-main{min-width: 0;display: flex;flex-direction: column}
.file-main strong{color: var(--ink)}
.auth-body{background: var(--ground)}
.auth-shell{min-height: 100vh;display: grid;grid-template-columns: minmax(0,1fr) minmax(0,1fr)}
.auth-brand{position: relative;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;gap: 32px;padding: 44px 48px;color: #E5EEFC;background: radial-gradient(60% 50% at 85% 10%,rgba(103,232,249,.30),transparent 60%),radial-gradient(55% 55% at 10% 95%,rgba(20,184,166,.32),transparent 60%),linear-gradient(150deg,#0F2D5B 0%,#123A78 45%,#1D4ED8 100%)}
.auth-brand::after{content: "";position: absolute;inset: 0;pointer-events: none;background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size: 36px 36px;-webkit-mask-image: radial-gradient(80% 70% at 30% 40%,#000,transparent);mask-image: radial-gradient(80% 70% at 30% 40%,#000,transparent)}
.auth-brand>*{position: relative;z-index: 1}
.auth-brand a{color: #fff !important}
.auth-brand-mark{width: 160px;max-width: 60%;height: auto;filter: drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.auth-brand h2,.auth-tagline{font: 600 clamp(1.5rem,2.4vw,2.1rem)/1.2 var(--font-display) !important;color: #fff !important;letter-spacing: -.02em;max-width: 18ch}
.auth-brand p{color: rgba(229,238,252,.8);max-width: 44ch}
.auth-points{list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 14px}
.auth-points li{display: flex;gap: 12px;align-items: flex-start;font-size: .94rem;color: rgba(229,238,252,.9)}
.auth-points .icon{flex: none;width: 22px;height: 22px;padding: 3px;border-radius: 7px;background: rgba(103,232,249,.16);color: var(--cyan)}
.auth-main{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px 20px;gap: 18px}
.auth-card{width: min(430px,100%);background: var(--surface);border: 1px solid var(--rule);border-radius: var(--radius-lg);box-shadow: var(--shadow);padding: 30px 28px 24px;display: flex;flex-direction: column;gap: 18px}
.auth-card-head{display: flex;flex-direction: column;gap: 4px}
.auth-card-head h1{font-size: 1.35rem !important}
.auth-card-head .muted{font-size: .9rem;margin-top: 4px !important}
.auth-card-mark{width: 48px;height: 48px;border-radius: 13px;margin-bottom: 12px;box-shadow: 0 10px 24px rgba(37,99,235,.25)}
.auth-card-icon{width: 48px;height: 48px;border-radius: 14px;margin-bottom: 12px;display: grid;place-items: center;background: var(--accent-soft);color: var(--accent)}
.auth-card-icon .icon{width: 24px;height: 24px}
.auth-foot{display: flex;gap: 7px;align-items: flex-start;font-size: .8rem;color: var(--muted);border-top: 1px solid var(--rule-soft);padding-top: 14px}
.auth-foot .icon{margin-top: 2px}
.auth-back{font-size: .86rem}
.auth-back a{color: var(--muted) !important}
.auth-shell.is-bare .auth-back a{display: inline-flex;align-items: center;min-height: 40px}
.auth-back a:hover{color: var(--accent) !important}
.auth-switch{text-align: center;font-size: .88rem;color: var(--muted)}
.auth-shell.is-bare{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 18px;padding: 40px 16px;background: radial-gradient(50% 40% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(40% 40% at 100% 100%,color-mix(in srgb,var(--teal) 12%,transparent),transparent 70%),var(--ground)}
.auth-card-admin{position: relative;overflow: hidden}
.auth-card-admin::before{content: "";position: absolute;inset: 0 0 auto;height: 4px;background: linear-gradient(90deg,var(--teal),var(--accent),var(--cyan))}
@media (max-width: 1440px){.table th,.table td{padding-left: 12px;padding-right: 12px}
.kv-2{grid-template-columns: minmax(110px,auto) 1fr}
}
@media (max-width: 1366px){.table th,.table td{padding-left: 9px;padding-right: 9px}
}
@media (max-width: 1180px){.tab{padding-left: 10px;padding-right: 10px}
.tabs{gap: 0}
.grid-4{grid-template-columns: repeat(2,minmax(0,1fr))}
.detail-grid{grid-template-columns: minmax(0,1fr)}
.detail-grid>.span-2{grid-column: auto}
}
@media (max-width: 1100px){:root{--app-gutter: 20px}
.app-shell{grid-template-columns: minmax(0,1fr)}
.app-sidebar{position: fixed;left: 0;top: 0;bottom: 0;width: min(290px,86vw);height: auto;transform: translateX(-102%);transition: transform .24s cubic-bezier(.3,.7,.4,1),visibility 0s linear .24s;visibility: hidden;box-shadow: 20px 0 50px rgba(0,0,0,.25)}
body.nav-open .app-sidebar,.app-sidebar:target{transform: none;visibility: visible;transition: transform .24s cubic-bezier(.3,.7,.4,1)}
.app-backdrop{display: block;position: fixed;inset: 0;z-index: 55;background: rgba(7,17,31,.5);opacity: 0;pointer-events: none;transition: opacity .2s}
body.nav-open .app-backdrop,.app-sidebar:target ~ .app-backdrop{opacity: 1;pointer-events: auto}
body.nav-open{overflow: hidden}
.app-menu-btn,.app-sidebar-close{display: inline-flex !important}
}
@media (max-width: 1000px){.grid-3{grid-template-columns: repeat(2,minmax(0,1fr))}
.grid-3.detail-grid{grid-template-columns: minmax(0,1fr)}
.auth-shell{grid-template-columns: minmax(0,1fr)}
.auth-shell .auth-brand{padding: 28px 24px;gap: 18px}
.auth-shell .auth-brand .auth-points,.auth-shell .auth-brand-mark{display: none}
}
@media (max-width: 720px){:root{--app-gutter: 16px}
.app-content{padding-top: 18px;gap: 18px}
.app-body h1{font-size: 1.35rem}
.grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns: minmax(0,1fr)}
.span-2{grid-column: auto}
.page-actions{width: 100%}
.page-actions>.btn,.page-actions>form{flex: 1 1 auto}
.page-actions>form>.btn{width: 100%}
.user-menu-name{display: none}
.user-menu-trigger{padding-right: 8px}
.card-head,.card-body,.card-foot{padding-left: 16px;padding-right: 16px}
.checklist-item{padding: 11px 16px;flex-wrap: wrap}
.checklist-text{flex: 1 1 calc(100% - 44px)}
.checklist-item .btn{margin-left: 44px}
.list-item,.inbox-item,.sub-block{padding-left: 16px;padding-right: 16px}
.table th,.table td{padding: 10px 12px}
.filters{gap: 8px}
.filters-search{flex-basis: 100%;max-width: none}
.filters select{flex: 1 1 140px}
.kv{grid-template-columns: minmax(96px,auto) 1fr}
.kv-2{grid-template-columns: minmax(96px,auto) 1fr}
.amount-strip{grid-template-columns: repeat(2,minmax(0,1fr))}
.key-compare{grid-template-columns: minmax(0,1fr)}
.key-compare-link{justify-self: center;transform: rotate(90deg)}
.totp-setup{grid-template-columns: minmax(0,1fr);justify-items: center}
.pagination{justify-content: center}
.pagination-info{width: 100%;text-align: center}
.toast-region{left: 16px;right: 16px;bottom: 16px;align-items: stretch}
.auth-card{padding: 24px 18px 18px}
.app-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.app-body select,.app-body textarea,.auth-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.auth-body select,.auth-body textarea{font-size: 16px}
.app-body .input-sm{font-size: 16px !important}
.app-menu-btn,.app-topbar .theme-toggle{min-width: 40px;min-height: 40px}
.inbox-top{flex-direction: column;gap: 0}
.menu-panel,.user-menu-panel{max-width: calc(100vw - 32px)}
.modal-actions{flex-direction: column-reverse}
.modal-actions .btn{width: 100%}
}
@media (max-width: 400px){.app-topbar{gap: 6px}
.kpi-value{font-size: 1.55rem}
.fingerprint{font-size: 1.2rem}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: .001ms !important;animation-iteration-count: 1 !important;transition-duration: .001ms !important;scroll-behavior: auto !important}
}
@media print{.app-sidebar,.app-topbar,.page-actions,.filters,.pagination,.toast-region,.app-backdrop{display: none !important}
.app-shell{display: block}
.card{box-shadow: none;break-inside: avoid}
body.app-body{background: #fff}
}
.cap-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(260px,1fr));gap: 10px 20px;margin-top: 14px}
.cap-grid .check{align-items: flex-start;line-height: 1.45}
.cap-grid .check input{margin-top: 2px;flex: none}
.cap-flag{font-family: var(--font-mono);font-size: .74rem;color: var(--muted);background: var(--raised);border-radius: 4px;padding: 1px 5px;white-space: nowrap}
.fieldset.has-error{border-color: var(--danger)}
.dash-lower{grid-template-columns: minmax(0,2fr) minmax(280px,1fr)}
@media (max-width: 1360px){.dash-lower{grid-template-columns: minmax(0,1fr)}
}
@media (min-width: 1181px) and (max-width: 1366px){.coupon-dates{grid-template-columns: minmax(0,1fr)}
}
.card-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 8px}
.card-actions form,.table td form{margin: 0}
.card-head:has(.card-actions){flex-wrap: wrap}
.input-group>input:focus,.input-group>select:focus{position: relative;z-index: 1}
.auth-card-head h1{text-wrap: balance}
.table tbody tr:nth-last-child(-n+4):not(:nth-child(-n+2)) .menu-panel{top: auto;bottom: calc(100% + 8px)}
@media (min-width: 1101px){.table-wrap:has(details.menu[open]){overflow: visible}
}
.table td.break{overflow-wrap: break-word;word-break: normal}
.table td.audit-meta{min-width: 240px}
@media (min-width: 721px){.grid-3.price-inputs{grid-template-columns: repeat(3,minmax(0,1fr))}
}
@media (min-width: 721px) and (max-width: 1180px){.detail-grid .card-body>.btn-block,.detail-grid .card-body.stack>.btn{width: auto;min-width: 200px;align-self: flex-start}
.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child) .btn-block{width: auto;min-width: 200px;align-self: flex-start}
}
@media (max-width: 720px),(pointer: coarse){.app-body .btn{min-height: 40px}
.app-body .btn-sm,.menu>summary.btn,.page-num{min-height: 40px;min-width: 40px}
.page-num{height: 40px}
.menu-item,.user-menu-item{min-height: 40px}
.chart-table>summary{padding-block: 10px}
.app-sidebar-close{min-width: 40px;min-height: 40px}
}
@media (max-width: 1100px){.table tbody tr td details.menu[open]>.menu-panel{position: fixed;top: auto;bottom: 16px;left: 16px;right: 16px;width: auto;max-width: 420px;margin-inline: auto;z-index: 120}
}
.card>.table-wrap:first-child .table thead tr:first-child>th:first-child{border-top-left-radius: calc(var(--radius) - 1px)}
.card>.table-wrap:first-child .table thead tr:first-child>th:last-child{border-top-right-radius: calc(var(--radius) - 1px)}
.card>.card-head ~ .table-wrap .table :is(th,td):first-child{padding-left: 20px}
.card>.card-head ~ .table-wrap .table :is(th,td):last-child{padding-right: 20px}
@media (max-width: 720px){.card>.card-head ~ .table-wrap .table :is(th,td):first-child{padding-left: 16px}
.card>.card-head ~ .table-wrap .table :is(th,td):last-child{padding-right: 16px}
}
.grid-equal{align-items: stretch}
@media (min-width: 601px){.plan-card .plan-card-top + p{min-height: 2lh}
}
@media (min-width: 601px) and (max-width: 1180px){.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child)>.card-body{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));column-gap: 32px;align-content: start}
.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child)>.card-body>:not(.kv):not(.ticks){grid-column: 1 / -1}
.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child)>.card-body>.ticks{margin-top: 12px}
.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child) .plan-card-top + p{min-height: 0}
.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child)>.card-foot{justify-content: flex-start}
.plan-grid>.plan-card:last-child:nth-child(odd):not(:first-child)>.card-foot .btn-block{width: auto;min-width: 200px}
}
.page-sub,.card-sub,.field-hint{text-wrap: pretty}
.input-group-code>.code-inline{overflow-wrap: anywhere}
@media (max-width: 720px),(pointer: coarse){.app-body .input-sm{min-height: 40px !important}
.app-body .input-affix-sm>input{min-height: 38px !important}
.app-body .details-raw>summary{padding-block: 10px}
.app-body .breadcrumbs a{display: inline-flex;align-items: center;min-height: 40px;margin-block: -9.5px}
.app-body .th-sort{min-height: 40px;margin-block: -13px}
.app-body label.switch{min-height: 40px}
.app-body .card-body>a.small{display: inline-flex;align-items: center;min-height: 40px;align-self: flex-start}
}