* { box-sizing: border-box; }
html, body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.6; }
::selection { background: var(--color-primary-soft-2); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
button { color: inherit; }
svg { flex-shrink: 0; }
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.brand-text { min-width: 0; flex: 1; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.brand-text:hover .brand-name { color: var(--color-primary); }
.brand-text:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.brand-sub { color: var(--color-text-muted); margin-top: 2px; }
.nav-item { position: relative; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; height: 40px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-sub); font-size: calc(13.5px * var(--font-scale)); font-weight: 500; cursor: pointer; text-align: left; width: 100%; transition: background .12s, color .12s; }
.nav-item:hover { color: var(--color-text); }
.nav-item.is-active { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }
.nav-item:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.nav-icon { display: inline-flex; width: 18px; height: 18px; color: var(--color-text-sub); }
.nav-item.is-active .nav-icon { color: var(--color-text); }
.nav-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-caret { display: inline-flex; width: 14px; height: 14px; color: var(--color-text-muted); transition: transform .18s; }
.nav-caret svg { width: 14px; height: 14px; }
.nav-parent.is-open .nav-caret { transform: rotate(90deg); }
.nav-children { display: none; flex-direction: column; gap: 1px; padding: 2px 0 2px 30px; }
.nav-parent.is-open + .nav-children { display: flex; }
.nav-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; border-radius: var(--radius-md); color: var(--color-text-sub); font-size: calc(13px * var(--font-scale)); transition: background .12s, color .12s; }
.nav-child:hover { color: var(--color-text); }
.fav-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin: 0 5px; }
.fav-dot.d1 { background: var(--color-primary); }
.fav-dot.d2 { background: var(--color-info); }
.fav-dot.d3 { background: var(--color-danger); }
.fav-dot.d4 { background: var(--color-warn); }
.user-card:hover, .user-menu-wrap.is-open .user-card { background: var(--color-surface-2); }
.user-card:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.user-card-info { min-width: 0; flex: 1; line-height: 1.3; }
.user-card-name { font-weight: 600; font-size: calc(13px * var(--font-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.user-card-name svg { width: 14px; height: 14px; color: var(--color-primary); }
.user-card-mail { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .user-caret { width: 14px; height: 14px; color: var(--color-text-muted); }
.user-menu-wrap { position: relative; }
.user-dropdown-name { font-weight: 600; font-size: calc(13px * var(--font-scale)); }
.user-dropdown-role { color: var(--color-text-muted); }
.user-dropdown-list { list-style: none; margin: 0; padding: 6px; }
.user-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: calc(13px * var(--font-scale)); font-weight: 500; color: var(--color-text); cursor: pointer; text-align: left; transition: background .12s; }
.user-dropdown-item svg { width: 16px; height: 16px; stroke-width: 1.7; color: var(--color-text-sub); }
.user-dropdown-item.is-danger { color: var(--color-danger); }
.user-dropdown-item.is-danger svg { color: var(--color-danger); }
.user-dropdown-item.is-danger:hover { background: var(--color-danger-soft); }
.user-dropdown-arrow { margin-left: auto; color: var(--color-text-muted); }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(17, 24, 39, 0.4); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; }
.page { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 8px; padding: 0 28px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; }
.page-ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-icon { width: 24px; height: 24px; display: grid; place-content: center; color: var(--color-text-sub); }
.page-icon svg { width: 20px; height: 20px; stroke-width: 1.7; }
.page-name { margin: 0; line-height: 1.3; font-size: calc(16px * var(--font-scale)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sp { flex: 1; }
.icon-btn { display: inline-flex; }
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.icon-btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.7; }
.icon-btn .rail-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); border: 2px solid var(--color-surface); }
.font-size-btn { font-size: calc(12.5px * var(--font-scale)); font-weight: 700; }
.font-size-btn[data-size="small"] { font-size: 11px; }
.font-size-btn[data-size="large"] { font-size: 14.5px; }
.theme-btn .tt-moon { display: none; }
:root.dark .theme-btn .tt-sun { display: none; }
:root.dark .theme-btn .tt-moon { display: block; }
.menu-btn { display: none; }
.main { padding: 24px 28px 80px; }
.main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.avatar { width: 34px; height: 34px; background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: calc(13px * var(--font-scale)); flex-shrink: 0; }
.avatar-wrap { position: relative; display: inline-flex; }
.content { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; }
.section.is-page-head { background: transparent; border: 0; padding: 0; }
.section-title { font-size: calc(20px * var(--font-scale)); font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--color-primary); flex-shrink: 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; font-size: calc(12px * var(--font-scale)); color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumb-sep { color: var(--color-text-faint); }
.breadcrumb-current { color: var(--color-text-sub); }
.dl-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.dl-hero-title h1 { display: flex; align-items: center; gap: 10px; font-size: calc(20px * var(--font-scale)); font-weight: 600; line-height: 1.3; margin: 0; }
.dl-hero-title h1 svg { display: none; }
.dl-hero-title p { margin: 4px 0 0; font-size: calc(13px * var(--font-scale)); color: var(--color-text-muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; height: 40px; min-width: 88px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: calc(13.5px * var(--font-scale)); font-weight: 500; cursor: pointer; white-space: nowrap; line-height: 1; user-select: none; font-variant-numeric: tabular-nums; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.btn svg { width: 16px; height: 16px; stroke-width: 2; }
.btn:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-neutral { color: var(--color-text); }
.btn-line { color: var(--color-primary); border-color: var(--color-primary-soft-2); background: transparent; }
.btn-line:hover:not(:disabled) { background: var(--color-primary-soft); border-color: var(--color-primary); }
.btn-line.btn-line-danger { color: var(--color-danger); border-color: var(--color-danger-soft); }
.btn-line.btn-line-danger:hover:not(:disabled) { background: var(--color-danger-soft); border-color: var(--color-danger); }
.btn-sm { height: 32px; padding: 0 12px; font-size: calc(12.5px * var(--font-scale)); min-width: 60px; }
.btn-xs { height: 28px; padding: 0 10px; font-size: calc(12px * var(--font-scale)); min-width: 48px; }
.btn-block { width: 100%; }
.btn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.demo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.demo-row.lg-gap { gap: 14px; }
.demo-row.mb { margin-bottom: 18px; }
.demo-row.center { justify-content: center; }
.demo-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; }
.demo-grid-2.start { align-items: start; }
.demo-grid-2-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.kebab { width: 32px; height: 32px; }
.kebab:hover { border-color: var(--color-border-strong); }
.kebab svg { width: 16px; height: 16px; }
.ctl:hover { background: var(--color-surface-2); }
.ctl-group { display: inline-flex; }
.ctl-group .ctl { border-radius: 0; margin-left: -1px; }
.ctl-group .ctl:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.ctl-group .ctl:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; border: 1px solid transparent; font-weight: 500; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.badge-success { background: var(--color-ok-soft); border-color: var(--color-ok-line); color: var(--color-ok); }
.badge-info { background: var(--color-info-soft); border-color: var(--color-info-line); color: var(--color-info); }
.badge-warn { background: var(--color-warn-soft); border-color: var(--color-warn-line); color: var(--color-warn); }
.badge-danger { background: var(--color-danger-soft); border-color: var(--color-danger-line); color: var(--color-danger); }
.badge-muted { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-sub); }
.info-label { color: var(--color-text-muted); }
.info-value code { font-family: var(--font-mono); font-size: calc(12px * var(--font-scale)); background: var(--color-surface-2); padding: 1px 6px; border-radius: 4px; }
.metric-label { font-size: calc(13px * var(--font-scale)); color: var(--color-text-sub); font-weight: 500; }
.metric-delta.up, .metric-delta.down { color: var(--color-text-sub); }
.alert:last-child { margin-bottom: 0; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; margin-bottom: 1px; }
.alert-text { color: var(--color-text-sub); font-size: calc(12.5px * var(--font-scale)); }
.alert.alert-info { border-color: var(--color-border); }
.alert.alert-success { border-color: var(--color-ok-line); background: var(--color-ok-soft); }
.alert-success .alert-icon { background: var(--color-surface); color: var(--color-ok); }
.alert.alert-warn { border-color: var(--color-warn-line); background: var(--color-warn-soft); }
.alert-warn .alert-icon { background: var(--color-surface); color: var(--color-warn); }
.alert.alert-error { border-color: var(--color-danger-line); background: var(--color-danger-soft); }
.alert-error .alert-icon { background: var(--color-surface); color: var(--color-danger); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full, .nc-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-required { display: inline-flex; align-items: center; color: var(--color-danger); }
.field-required svg { width: 9px; height: 9px; }
.field-hint { font-weight: 500; color: var(--color-text-muted); padding: 1px 7px; border-radius: 4px; background: var(--color-surface-2); }
.field-help { color: var(--color-text-muted); }
.field-error { color: var(--color-danger); font-weight: 500; }
.input, .textarea, .select { width: 100%; height: 40px; padding: 0 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: calc(13.5px * var(--font-scale)); color: var(--color-text); outline: 0; transition: border-color .15s, box-shadow .15s; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-text-muted); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.select { appearance: none; padding-right: 34px; cursor: pointer; background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; 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='%235b6660' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--color-danger); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 36px; }
.input-group-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none; }
.pd-select { position: relative; width: 100%; }
.pd-select .pd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: calc(13.5px * var(--font-scale)); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pd-select .pd-btn:hover { border-color: var(--color-text-muted); }
.pd-select .pd-btn:focus-visible, .pd-select.is-open .pd-btn { outline: 0; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.pd-select .pd-btn.is-blank .pd-label { color: var(--color-text-muted); }
.pd-select .pd-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.pd-select .pd-caret { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-text-sub); transition: transform .15s; }
.pd-select.is-open .pd-caret { transform: rotate(180deg); }
.pd-select .pd-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1000; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: 6px; }
.pd-select .pd-panel.is-up { top: auto; bottom: calc(100% + 4px); }
.pd-select .pd-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.pd-select .pd-list li + li { margin-top: 2px; }
.pd-select .pd-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; border-radius: var(--radius-md); font-size: calc(13.5px * var(--font-scale)); color: var(--color-text); text-align: left; cursor: pointer; white-space: nowrap; }
.pd-select .pd-opt:hover, .pd-select .pd-opt:focus { background: var(--color-surface-2); outline: 0; }
.pd-select .pd-opt.is-current { color: var(--color-primary); font-weight: 600; }
.pd-select .pd-opt.is-blank { color: var(--color-text-sub); }
.pd-select .pd-opt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.pd-select .pd-opt-tag { flex: 0 0 auto; font-size: calc(11px * var(--font-scale)); color: var(--color-text-muted); }
.pd-select .pd-check { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-primary); visibility: hidden; }
.pd-select .pd-opt.is-current .pd-check { visibility: visible; }
.sm-panel { position: fixed; z-index: 10000; box-sizing: border-box; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: 6px; }
.sm-panel .sm-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.sm-panel .sm-list li + li { margin-top: 2px; }
.sm-panel .sm-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); font-size: calc(13.5px * var(--font-scale)); color: var(--color-text); cursor: pointer; white-space: nowrap; user-select: none; }
.sm-panel .sm-opt.is-in-group { padding-left: 22px; }
.sm-panel .sm-opt.is-cursor { background: var(--color-surface-2); }
.sm-panel .sm-opt.is-current { color: var(--color-primary); font-weight: 600; }
.sm-panel .sm-opt.is-blank { color: var(--color-text-sub); }
.sm-panel .sm-opt.is-disabled { color: var(--color-text-muted); font-weight: 400; cursor: default; }
.sm-panel .sm-opt-label { flex: 1 1 auto; }
.sm-panel .sm-check { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-primary); visibility: hidden; }
.sm-panel .sm-opt.is-current .sm-check { visibility: visible; }
.sm-panel .sm-group { padding: 6px 10px 2px; font-size: calc(11px * var(--font-scale)); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; user-select: none; cursor: default; }
.choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: calc(13.5px * var(--font-scale)); color: var(--color-text); user-select: none; }
.choice input[type="radio"], .choice input[type="checkbox"], .checkbox input[type="checkbox"], .list-check, .row-check { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--color-border-strong); background: var(--color-surface); cursor: pointer; position: relative; transition: border-color .15s, background .15s; flex-shrink: 0; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="checkbox"], .checkbox input[type="checkbox"], .list-check, .row-check { border-radius: 5px; }
.choice:hover input { border-color: var(--color-primary); }
.choice input:focus-visible, .checkbox input:focus-visible, .list-check:focus-visible, .row-check:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.choice input:checked, .checkbox input:checked, .list-check:checked, .row-check:checked { background: var(--color-primary); border-color: var(--color-primary); }
.choice input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-contrast); transform: translate(-50%, -50%); }
.choice input[type="checkbox"]:checked::after, .checkbox input:checked::after, .list-check:checked::after, .row-check:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--color-primary-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox { display: inline-flex; align-items: center; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: calc(13.5px * var(--font-scale)); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { width: 40px; height: 22px; background: var(--color-border-strong); border-radius: var(--radius-pill); position: relative; transition: background .18s; flex-shrink: 0; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s; }
.switch input:checked + .switch-track { background: var(--color-primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--shadow-focus); }
.file-field { display: flex; position: relative; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-input::after { content: "otng.net"; }
.file-field:focus-within .btn { box-shadow: var(--shadow-focus); }
.dropzone:focus-within { box-shadow: var(--shadow-focus); }
.file-field-name { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); }
.form-actions.start { justify-content: flex-start; }
.tabs-wrap { border-bottom: 1px solid var(--color-border); margin-bottom: 16px; overflow-x: auto; }
.tabs { display: flex; gap: 2px; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--color-text-sub); font-size: calc(13.5px * var(--font-scale)); font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s; }
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: 600; }
.tab:focus-visible { outline: 0; box-shadow: inset var(--shadow-focus); border-radius: 6px; }
.tab-count { font-size: calc(11px * var(--font-scale)); padding: 0 7px; height: 18px; line-height: 18px; border-radius: 4px; background: var(--color-surface-2); color: var(--color-text-sub); }
.tab.is-active .tab-count { background: var(--color-primary-soft); color: var(--color-primary); }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.table-wrap.is-scroll { max-height: 420px; overflow-y: auto; }
.table-head-title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.table-head-title .page-icon { width: 20px; height: 20px; }
.table-head-title .page-icon svg { width: 17px; height: 17px; }
.table-head-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(13.5px * var(--font-scale)); }
.table thead th { text-align: center; font-weight: 500; background: var(--color-surface-2); color: var(--color-text-sub); font-size: calc(12.5px * var(--font-scale)); white-space: nowrap; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; }
.table tbody td { border-bottom: 1px solid var(--color-border); vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-surface-2); }
.table .num { text-align: right; }
.table .c { text-align: center; }
.table .actions { text-align: center; white-space: nowrap; }
.table .actions .btn { margin-left: 4px; }
.table .strong { font-weight: 600; }
.table .with-icon { display: inline-flex; align-items: center; gap: 8px; }
.table .with-icon .cell-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--color-surface-2); color: var(--color-text-muted); display: inline-grid; place-content: center; }
.table .with-icon .cell-icon svg { width: 13px; height: 13px; }
.prog { display: inline-flex; align-items: center; gap: 10px; min-width: 120px; }
.prog .progress { flex: 1; height: 6px; }
.prog span { font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-sub); min-width: 34px; text-align: right; }
.text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table-foot .pagination { margin: 0; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 4px; }
.page-link:hover { color: var(--color-text); }
.page-link.is-active { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); font-weight: 600; }
.page-link.is-nav { border-color: var(--color-border); }
.page-link.is-disabled { color: var(--color-text-faint); cursor: not-allowed; }
.page-link.is-disabled:hover { background: transparent; }
.page-link:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.page-ellipsis { padding: 0 4px; color: var(--color-text-muted); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.card-title { font-weight: 600; margin: 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.typography { max-width: 720px; font-size: calc(14px * var(--font-scale)); color: var(--color-text); }
.typography h2 { font-size: calc(22px * var(--font-scale)); font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.typography p { margin: 0 0 14px; }
.typography strong { font-weight: 600; }
.typography em { font-style: normal; background: var(--color-primary-soft); padding: 0 4px; border-radius: 3px; }
.typography a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.typography ul, .typography ol { margin: 0 0 14px; padding-left: 22px; }
.typography li { margin: 2px 0; }
.typography blockquote cite { display: block; margin-top: 6px; font-size: calc(12px * var(--font-scale)); font-style: normal; color: var(--color-text-muted); }
.typography code { font-family: var(--font-mono); font-size: calc(12.5px * var(--font-scale)); background: var(--color-surface-2); padding: 1px 6px; border-radius: 4px; }
.typography pre { margin: 0 0 14px; padding: 14px 16px; background: #111827; color: #e5e7eb; border-radius: var(--radius-lg); overflow-x: auto; font-size: calc(12.5px * var(--font-scale)); line-height: 1.6; }
.typography pre code { background: transparent; color: inherit; padding: 0; }
.typography hr { border: 0; border-top: 1px solid var(--color-border); margin: 24px 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(12px * var(--font-scale)); color: var(--color-text-muted); margin-bottom: 24px; }
.article-meta-sep::before { content: "·"; margin-right: 12px; color: var(--color-text-faint); }
.notice.notice-tip { background: var(--color-primary-soft); border-color: var(--color-primary-soft-2); }
.notice.notice-warn { background: var(--color-warn-soft); border-color: var(--color-warn-line); }
.notice-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-content: center; font-weight: 700; font-size: calc(12px * var(--font-scale)); background: var(--color-primary); color: var(--color-primary-contrast); margin-top: 2px; }
.notice-warn .notice-icon { background: var(--color-warn); }
.notice-note .notice-icon { background: var(--color-text-muted); }
.notice-body { flex: 1; }
.notice-title { font-weight: 600; margin-right: 6px; }
.def-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 14px; }
.def-list dt { color: var(--color-text-muted); font-size: calc(12.5px * var(--font-scale)); font-weight: 500; }
.def-list dd { margin: 0; }
.kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-surface); font-family: var(--font-mono); font-size: calc(11px * var(--font-scale)); color: var(--color-text-sub); line-height: 1.5; }
.text-muted { color: var(--color-text-sub); }
.text-center { text-align: center; }
.text-sm-flush { margin: 0; font-size: calc(13px * var(--font-scale)); }
.mt-14 { margin-top: 14px; }
.note-fine { color: var(--color-text-muted); margin: 14px 0 0; }
.dotted-card { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.bordered-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 10px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .18s, visibility .18s; }
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
.modal { max-width: 480px; }
.modal-backdrop.is-open .modal { transform: none; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-primary-soft); }
.modal-title { font-size: calc(16px * var(--font-scale)); font-weight: 600; margin: 0; }
.modal-close { font-size: calc(20px * var(--font-scale)); }
.modal-body { font-size: calc(13.5px * var(--font-scale)); overflow-y: auto; }
.modal-footer { display: flex; justify-content: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-2); }
.nc-modal-card { max-width: 640px; }
.nc-modal-header { align-items: flex-start; }
.nc-modal-footer { margin-top: 0; }
.nc-modal-subtitle { margin: 2px 0 0; font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); }
.nc-form { display: flex; flex-direction: column; min-height: 0; }
.nc-modal-body { overflow-y: auto; }
.nc-section-no { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); display: inline-grid; place-content: center; font-size: calc(12px * var(--font-scale)); font-weight: 600; }
.nc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.nc-chip:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.toast-stack { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 300; max-width: min(360px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); font-size: calc(13px * var(--font-scale)); animation: toast-in .2s ease; }
.toast.success { border-color: var(--color-ok-line); background: linear-gradient(var(--color-ok-soft), var(--color-ok-soft)), var(--color-surface); }
.toast.warn { border-color: var(--color-warn-line); background: linear-gradient(var(--color-warn-soft), var(--color-warn-soft)), var(--color-surface); }
.toast.error { border-color: var(--color-danger-line); background: linear-gradient(var(--color-danger-soft), var(--color-danger-soft)), var(--color-surface); }
.toast-title { font-weight: 600; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 20px; gap: 6px; }
.empty-icon { color: var(--color-text-faint); display: inline-grid; place-content: center; margin-bottom: 10px; }
.empty-icon svg { width: 28px; height: 28px; }
.empty-title { margin: 0; }
.empty-desc { font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-sub); margin: 0 0 10px; }
.skeleton { display: block; background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-hover) 50%, var(--color-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
.skeleton.line { height: 12px; width: 100%; }
.skeleton.line.short { width: 40%; }
.skeleton.line.medium { width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.chart-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.chart-title { font-weight: 600; }
.chart-subtitle { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); margin-bottom: 12px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .grid { stroke: var(--color-border); stroke-width: 1; }
.chart-svg .label { font-size: calc(10px * var(--font-scale)); fill: var(--color-text-muted); }
.chart-svg .bar { fill: var(--color-primary); rx: 3; }
.chart-svg .bar:hover { fill: var(--color-primary-hover); }
.chart-svg .line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; }
.chart-svg .area { fill: var(--color-primary); opacity: .1; }
.chart-svg .point { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 2; }
.chart-svg .ring-track { fill: none; stroke: var(--color-surface-2); }
.chart-svg .ring-1 { stroke: var(--color-primary); }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); margin-top: 10px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-1 { background: var(--color-primary); }
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item:last-child { border-bottom: 0; }
.accordion-header { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; font-size: calc(13.5px * var(--font-scale)); font-weight: 600; user-select: none; }
.accordion-header:hover { background: var(--color-surface-2); }
.accordion-header::-webkit-details-marker { display: none; }
.accordion-header::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); transform: rotate(-45deg); transition: transform .18s; margin: 0 6px 0 2px; flex-shrink: 0; }
.accordion-item[open] > .accordion-header::before { transform: rotate(45deg); }
.accordion-body { padding: 2px 16px 16px 36px; font-size: calc(13px * var(--font-scale)); color: var(--color-text-sub); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 1px; background: var(--color-border); }
.timeline-item { position: relative; padding: 0 0 18px 28px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker { position: absolute; left: 1px; top: 6px; width: 10px; height: 10px; border-radius: 2px; background: var(--color-surface); border: 2px solid var(--color-primary); z-index: 1; }
.timeline-item.is-success .timeline-marker { background: var(--color-ok); border-color: var(--color-ok); }
.timeline-item.is-warn .timeline-marker { border-color: var(--color-warn); }
.timeline-item.is-muted .timeline-marker { border-color: var(--color-border-strong); }
.timeline-time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.timeline-title { font-size: calc(13.5px * var(--font-scale)); font-weight: 600; margin-top: 2px; }
.timeline-desc { font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-sub); margin-top: 2px; }
.progress { position: relative; height: 8px; background: var(--color-surface-2); border-radius: 2px; overflow: hidden; }
.progress.lg { height: 12px; }
.progress-bar { height: 100%; background: var(--color-primary); transition: width .3s; }
.progress-bar.success { background: var(--color-ok); }
.progress-bar.error { background: var(--color-danger); }
.progress-bar.striped { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0 8px, transparent 8px 16px); animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 32px 0; } }
.progress-meta { display: flex; justify-content: space-between; font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-sub); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.progress-circle-wrap { position: relative; width: 72px; height: 72px; }
.progress-circle { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-circle .track { fill: none; stroke: var(--color-surface-2); stroke-width: 7; }
.progress-circle .fill { fill: none; stroke: var(--color-primary); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .4s; }
.progress-circle .fill.ok { stroke: var(--color-ok); }
.progress-circle .fill.warn { stroke: var(--color-warn); }
.progress-circle-text { position: absolute; inset: 0; display: grid; place-content: center; font-size: calc(13px * var(--font-scale)); font-weight: 600; font-variant-numeric: tabular-nums; }
.has-tooltip { position: relative; }
.has-tooltip::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); background: var(--color-text); color: #fff; padding: 5px 10px; border-radius: var(--radius-md); font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 50; }
.has-tooltip:hover::after, .has-tooltip:focus-visible::after { opacity: 1; transform: translateX(-50%); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 12px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border-strong); font-size: calc(12.5px * var(--font-scale)); font-weight: 500; }
.chip.primary { background: var(--color-primary-soft); border-color: var(--color-primary-soft-2); color: var(--color-primary); }
.chip.success { background: var(--color-ok-soft); border-color: var(--color-ok-line); color: var(--color-ok); }
.chip-close { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .6; cursor: pointer; font-size: calc(14px * var(--font-scale)); line-height: 1; display: inline-grid; place-content: center; }
.chip-close:hover { opacity: 1; background: var(--color-surface-hover); }
.status-indicator { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13px * var(--font-scale)); font-weight: 500; }
.status-indicator.is-online { color: var(--color-ok); }
.status-indicator.is-warn { color: var(--color-warn); }
.status-indicator.is-error { color: var(--color-danger); }
.status-indicator.is-offline { color: var(--color-text-muted); }
.stepper { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.stepper-item { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; counter-increment: step; }
.stepper-item::before { content: ""; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--color-border); z-index: 0; }
.stepper-item:first-child::before { display: none; }
.stepper-item.is-complete::before, .stepper-item.is-active::before { background: var(--color-primary); }
.stepper-marker { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-border-strong); background: var(--color-surface); display: grid; place-content: center; font-size: calc(12px * var(--font-scale)); font-weight: 600; color: var(--color-text-muted); z-index: 1; }
.stepper-marker::before { content: counter(step); }
.stepper-item.is-complete .stepper-marker { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.stepper-item.is-active .stepper-marker { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.stepper-label { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); font-weight: 500; }
.stepper-item.is-active .stepper-label { color: var(--color-text); font-weight: 600; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--color-surface); margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-md { width: 34px; height: 34px; }
.avatar-sm { width: 26px; height: 26px; }
.avatar-more { background: var(--color-surface-2); color: var(--color-text-sub); }
.avatar.tone-3 { background: #c9b57a; color: #3b3418; }
.avatar.tone-4 { background: #b4532a; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.4); z-index: 180; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-primary-soft); }
.drawer-title { font-size: calc(16px * var(--font-scale)); font-weight: 600; margin: 0; }
.drawer-close { font-size: calc(20px * var(--font-scale)); }
.drawer-body { flex: 1; overflow-y: auto; }
.drawer-footer { display: flex; justify-content: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-2); }
.dropzone { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 30px 20px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.dropzone-icon { color: var(--color-text-faint); display: grid; place-content: center; margin-bottom: 6px; }
.dropzone-icon svg { width: 24px; height: 24px; }
.dropzone-title { font-weight: 600; }
.dropzone-desc { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); }
.dropzone-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: calc(12.5px * var(--font-scale)); width: 100%; }
.dropzone-list li { padding: 6px 10px; border-top: 1px solid var(--color-border); text-align: left; }
.filter-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 16px; }
.filter-section-title { color: var(--color-text-sub); margin-bottom: 8px; }
.filter-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.calendar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendar-month { font-weight: 600; }
.calendar-nav { font-size: 16px; line-height: 1; }
.calendar-nav:hover { border-color: var(--color-border-strong); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-dow { text-align: center; font-size: calc(11px * var(--font-scale)); font-weight: 600; color: var(--color-text-muted); padding: 4px 0; }
.calendar-dow.sun { color: var(--color-danger); }
.calendar-dow.sat { color: var(--color-info); }
.calendar-day { position: relative; height: 36px; display: grid; place-content: center; border-radius: var(--radius-md); font-size: calc(12.5px * var(--font-scale)); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .12s; }
.calendar-day:hover { background: var(--color-surface-2); }
.calendar-day.is-other { color: var(--color-text-faint); }
.calendar-day.is-today { font-weight: 600; color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.calendar-day.is-selected { background: var(--color-primary); color: var(--color-primary-contrast); box-shadow: none; }
.calendar-day.has-event::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary); }
.calendar-day.is-selected.has-event::after { background: var(--color-primary-contrast); }
.master-detail { display: grid; grid-template-columns: 260px 1fr; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); min-height: 260px; }
.master { border-right: 1px solid var(--color-border); }
.master-list { list-style: none; margin: 0; padding: 8px; }
.master-item { padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background .12s; }
.master-item.is-active { background: var(--color-surface-2); }
.master-item-title { font-weight: 600; font-size: calc(13.5px * var(--font-scale)); }
.master-item-meta { font-size: calc(12px * var(--font-scale)); color: var(--color-text-muted); }
.detail { padding: 20px 24px; }
.bulk-action-bar { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; background: var(--color-text); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.bulk-count { font-weight: 600; margin-right: auto; font-size: calc(13px * var(--font-scale)); }
.bulk-action-bar .btn { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.bulk-action-bar .btn:hover { background: rgba(255,255,255,.2); }
.diff { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; font-family: var(--font-mono); font-size: calc(12px * var(--font-scale)); }
.diff-row { display: grid; grid-template-columns: 44px 22px 1fr; min-height: 24px; align-items: center; }
.diff-line-no { padding-right: 8px; font-size: calc(11px * var(--font-scale)); background: var(--color-surface-2); height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.diff-marker { text-align: center; font-weight: 700; }
.diff-content { white-space: pre; padding: 2px 10px; overflow-x: auto; }
.diff-row.add { background: var(--color-ok-soft); }
.diff-row.add .diff-marker { color: var(--color-ok); }
.diff-row.remove { background: var(--color-danger-soft); }
.diff-row.remove .diff-marker { color: var(--color-danger); }
.heatmap-wrap { overflow-x: auto; }
.heatmap { display: grid; gap: 4px; min-width: 320px; }
.heatmap-row-label, .heatmap-col-label { font-size: calc(11px * var(--font-scale)); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; }
.heatmap-cell { aspect-ratio: 1.6; border-radius: 4px; }
.heatmap-cell:hover { outline: 1.5px solid var(--color-primary); }
.heatmap-cell[data-level="0"], .heatmap-legend-cell[data-level="0"] { background: var(--color-surface-2); }
.heatmap-cell[data-level="1"], .heatmap-legend-cell[data-level="1"] { background: #d9e6da; }
.heatmap-cell[data-level="2"], .heatmap-legend-cell[data-level="2"] { background: #b6d0ba; }
.heatmap-cell[data-level="3"], .heatmap-legend-cell[data-level="3"] { background: #8db596; }
.heatmap-cell[data-level="4"], .heatmap-legend-cell[data-level="4"] { background: #5e8d6c; }
.heatmap-cell[data-level="5"], .heatmap-legend-cell[data-level="5"] { background: var(--color-primary); }
.heatmap-legend { display: inline-flex; align-items: center; gap: 4px; font-size: calc(11px * var(--font-scale)); color: var(--color-text-muted); }
.heatmap-legend-cell { width: 14px; height: 14px; border-radius: 3px; }
.permission-table { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.permission-table .perm-row { display: grid; grid-template-columns: 1fr repeat(4, 100px); align-items: center; border-bottom: 1px solid var(--color-border); }
.permission-table .perm-row:last-child { border-bottom: 0; }
.permission-table .perm-row.head { background: var(--color-surface-2); font-size: calc(12.5px * var(--font-scale)); font-weight: 500; color: var(--color-text-sub); }
.permission-table .perm-row > div { text-align: center; }
.permission-table .perm-row > div:first-child { text-align: left; }
.permission-table .perm-name { font-weight: 600; }
.permission-table .perm-desc { font-size: calc(12px * var(--font-scale)); color: var(--color-text-muted); }
.api-key { display: inline-flex; align-items: center; gap: 8px; }
.api-key-mask { font-family: var(--font-mono); font-size: calc(12px * var(--font-scale)); background: var(--color-surface-2); padding: 3px 10px; border-radius: 6px; letter-spacing: .04em; }
.api-key-copy { width: 28px; height: 28px; }
.api-key-copy:hover { border-color: var(--color-border-strong); }
.api-key-copy svg { width: 13px; height: 13px; stroke-width: 2; }
.cmdk-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); z-index: 250; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, visibility .15s; }
.cmdk-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.cmdk { width: 100%; max-width: 560px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-3); overflow: hidden; transform: translateY(-8px); transition: transform .15s; }
.cmdk-backdrop.is-open .cmdk { transform: none; }
.cmdk-search svg { width: 18px; height: 18px; color: var(--color-text-muted); }
.cmdk-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: calc(15px * var(--font-scale)); color: var(--color-text); }
.cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.cmdk-group + .cmdk-group { margin-top: 6px; }
.cmdk-group-title { padding: 8px 12px 4px; font-size: calc(12px * var(--font-scale)); font-weight: 500; color: var(--color-text-muted); }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); font-size: calc(13.5px * var(--font-scale)); cursor: pointer; text-align: left; }
.cmdk-item:hover, .cmdk-item.is-active { background: var(--color-surface-2); }
.cmdk-item svg { width: 16px; height: 16px; color: var(--color-text-sub); }
.cmdk-item .kbd { margin-left: auto; }
.notification-list { list-style: none; margin: 0; padding: 0; }
.notification-item:last-child { border-bottom: 0; }
.notification-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-sub); display: grid; place-content: center; flex-shrink: 0; }
.notification-icon svg { width: 16px; height: 16px; }
.notification-body { flex: 1; min-width: 0; }
.notification-title { font-weight: 600; font-size: calc(13px * var(--font-scale)); }
.notification-text { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); }
.notification-time { font-size: calc(11px * var(--font-scale)); color: var(--color-text-muted); margin-top: 2px; }
.error-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.error-card .err-code.warn { color: var(--color-warn); }
.error-card .err-code.danger { color: var(--color-danger); }
.error-card .err-title { font-weight: 600; margin-top: 6px; }
.error-card .err-desc { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); margin-bottom: 12px; }
.error-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--color-surface); }
.error-page-panel { background: var(--brand); color: #fff; padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.error-page-brand { font-weight: 600; font-size: calc(16px * var(--font-scale)); letter-spacing: .01em; }
.error-page-brand span { display: block; margin-top: 4px; font-weight: 400; font-size: calc(12px * var(--font-scale)); opacity: .7; }
.error-page-code { font-size: clamp(120px, 16vw, 200px); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .45); user-select: none; }
.error-page-panel-foot { font-family: var(--font-mono); font-size: calc(12px * var(--font-scale)); opacity: .7; }
.error-page-content { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; max-width: 640px; }
.error-page-label { font-family: var(--font-mono); font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-muted); letter-spacing: .06em; margin-bottom: 14px; }
.error-page-title { font-size: calc(28px * var(--font-scale)); font-weight: 700; line-height: 1.3; margin: 0 0 14px; }
.error-page-desc { color: var(--color-text-sub); font-size: calc(14.5px * var(--font-scale)); line-height: 1.9; margin: 0 0 28px; }
.error-page-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.error-page-help { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-muted); display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; }
.error-page-help a { color: var(--color-text-sub); text-decoration: underline; text-underline-offset: 3px; }
.error-page-help a:hover { color: var(--color-primary); }
.toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
.tool-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.toolbar-spacer { flex: 1; }
.pager { font-size: calc(12px * var(--font-scale)); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.list { list-style: none; margin: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.list-item { display: grid; grid-template-columns: 18px 18px 140px 1fr auto; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer; font-size: calc(13px * var(--font-scale)); color: var(--color-text-sub); transition: background .12s; }
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--color-surface-2); }
.list-item.is-unread { color: var(--color-text); }
.list-item.is-unread .list-from, .list-item.is-unread .list-subject { font-weight: 600; }
.list-star.is-on { color: var(--color-warn); }
.list-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-body { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-snippet { color: var(--color-text-muted); }
.list-date { color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.srch:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.srch-in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: calc(13.5px * var(--font-scale)); color: var(--color-text); }
.srch-btn:hover { background: var(--color-primary-hover); }
.attn-box { padding: 12px 16px; border-radius: var(--radius-lg); background: var(--color-warn-soft); border: 1px solid var(--color-warn-line); font-size: calc(13px * var(--font-scale)); }
.attn-box.attn-success { background: var(--color-ok-soft); border-color: var(--color-ok-line); }
.attn-success .attn-box-title { color: var(--color-ok); }
.attn-box.attn-danger { background: var(--color-danger-soft); border-color: var(--color-danger-line); }
.attn-danger .attn-box-title { color: var(--color-danger); }
.std-tabs { display: flex; gap: 2px; }
.std-tab:hover { color: var(--color-text); }
.std-tab.is-active { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: 600; }
.std-tab.is-active[data-tab-color="green"] { border-bottom-color: var(--color-ok); }
.std-tab.is-active[data-tab-color="purple"] { border-bottom-color: #6b5b8a; }
.std-tab.is-active[data-tab-color="red"] { border-bottom-color: var(--color-danger); }
.std-tabs-boxed { gap: 6px; padding-bottom: 8px; }
.std-tabs-boxed .std-tab { height: 32px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); margin: 0; padding: 0 12px; }
.std-tabs-boxed .std-tab.is-active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.bs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bs-chip { height: 32px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-sub); font-size: calc(12.5px * var(--font-scale)); font-weight: 500; cursor: pointer; }
.bs-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.bs-chip.is-empty { color: var(--color-text-faint); border-style: dashed; }
.dl-filter-simple { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dl-filter-simple .srch { flex: 1; }
.dl-result-count { font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-sub); white-space: nowrap; }
.dl-result-count b { font-size: calc(16px * var(--font-scale)); color: var(--color-text); font-variant-numeric: tabular-nums; }
.dl-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.dl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(13.5px * var(--font-scale)); }
.dl-table th { text-align: center; background: var(--color-surface-2); font-size: calc(12.5px * var(--font-scale)); font-weight: 500; color: var(--color-text-sub); white-space: nowrap; border-bottom: 1px solid var(--color-border); }
.dl-table td { border-bottom: 1px solid var(--color-border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-table tr:last-child td { border-bottom: 0; }
.dl-table tr.clickable { cursor: pointer; }
.dl-table tr.clickable:hover td { background: var(--color-surface-2); }
.dl-th-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.dl-date { color: var(--color-text-sub); }
.rank-tag { display: inline-grid; place-content: center; width: 26px; height: 26px; border-radius: var(--radius-md); font-weight: 600; font-size: calc(12px * var(--font-scale)); }
.rank-tag.rank-S { background: var(--color-primary); color: var(--color-primary-contrast); }
.rank-tag.rank-A { background: var(--color-primary-soft); color: var(--color-primary); }
.rank-tag.rank-C { background: var(--color-surface-2); color: var(--color-text-sub); }
.dl-page-info { font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-sub); font-variant-numeric: tabular-nums; }
.dl-page-info b { color: var(--color-text); }
.dl-empty { text-align: center; padding: 26px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); margin-top: 12px; }
.dl-empty-title { font-weight: 600; }
.dl-empty-hint { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); margin-top: 2px; }
.field-grid { display: grid; grid-template-columns: 140px 1fr; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.field-grid dt { background: var(--color-surface-2); font-size: calc(12.5px * var(--font-scale)); font-weight: 500; color: var(--color-text-sub); border-bottom: 1px solid var(--color-border); }
.field-grid dd { margin: 0; border-bottom: 1px solid var(--color-border); }
.field-grid dt:nth-last-of-type(1), .field-grid dd:last-of-type { border-bottom: 0; }
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 16px); }
.settings-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-nav-list .nav-item.is-active::before { display: none; }
.settings-card-stack { display: flex; flex-direction: column; }
.diagram-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.diagram-card.compact { max-width: 420px; }
.diagram-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); }
.diagram-box { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.2; }
.diagram-box.primary { fill: var(--color-primary-soft); stroke: var(--color-primary); }
.diagram-box.warn { fill: var(--color-warn-soft); stroke: var(--color-warn); stroke-dasharray: 4 3; }
.diagram-title { font-size: calc(13px * var(--font-scale)); font-weight: 600; fill: var(--color-text); }
.diagram-sub, .diagram-comp-sub { font-size: calc(10.5px * var(--font-scale)); fill: var(--color-text-sub); }
.diagram-component { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.2; }
.diagram-comp-title { font-size: calc(12px * var(--font-scale)); font-weight: 600; fill: var(--color-primary); }
.diagram-arrow { stroke: var(--color-primary); stroke-width: 1.6; }
.diagram-arrow.dashed { stroke: var(--color-warn); stroke-dasharray: 4 3; }
.diagram-arrow-head { fill: var(--color-primary); }
.diagram-arrow-head.warn { fill: var(--color-warn); }
.diagram-label { font-size: calc(10.5px * var(--font-scale)); fill: var(--color-text-muted); }
.diagram-label.warn { fill: var(--color-warn); }
.folder-tree { margin: 0; padding: 14px 16px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: calc(12px * var(--font-scale)); overflow-x: auto; }
.ft-root { font-weight: 700; color: var(--color-primary); }
.ft-tree { color: var(--color-text-faint); }
.ft-folder { font-weight: 600; }
.ft-file { color: var(--color-text); }
.ft-comment { color: var(--color-text-muted); }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--color-bg); }
.login-card { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.login-subtitle { margin: 4px 0 0; font-size: calc(12px * var(--font-scale)); color: var(--color-text-muted); }
.login-options { display: flex; align-items: center; justify-content: space-between; font-size: calc(12.5px * var(--font-scale)); }
.login-options a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.login-submit { margin-top: 4px; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted); }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.login-footer-org { font-weight: 600; color: var(--color-text-sub); }
h1, h2, h3, h4, h5 { font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: 0; }
.typography h2, .login-title, .error-page-title { letter-spacing: -0.02em; }
.field-hint, .avatar-sm { font-size: calc(11px * var(--font-scale)); }
.brand-sub, .user-card-mail, .user-dropdown-role, .badge, .alert-text code, .field-help, .field-error, .note-fine, .timeline-time, .has-tooltip::after, .list-date, .login-divider, .login-footer { font-size: calc(12px * var(--font-scale)); }
.brand-name { line-height: 1.2; font-weight: 600; font-size: calc(15px * var(--font-scale)); }
.table-head-title, .card-title, .empty-title { font-size: calc(15px * var(--font-scale)); }
.chart-title, .nc-section-title, .calendar-month { font-size: calc(14px * var(--font-scale)); }
.login-title { font-weight: 600; font-size: calc(24px * var(--font-scale)); }
.textarea { resize: vertical; padding: 10px 12px; min-height: 100px; height: auto; line-height: 1.6; }
.typography, .notice, .text-sm-flush, .accordion-body, .folder-tree { line-height: 1.8; }
.typography h3 { font-size: calc(16px * var(--font-scale)); font-weight: 600; line-height: 1.4; margin: 28px 0 10px; }
.typography h4 { font-size: calc(14.5px * var(--font-scale)); font-weight: 600; line-height: 1.4; margin: 22px 0 6px; }
.typography h5 { color: var(--color-text-sub); font-size: calc(13px * var(--font-scale)); font-weight: 600; margin: 16px 0 6px; }
.field-label { gap: 6px; align-items: center; display: flex; font-size: calc(13px * var(--font-scale)); font-weight: 500; }
.info-label, .filter-section-title { font-size: calc(12.5px * var(--font-scale)); font-weight: 500; }
.metric { border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); position: relative; padding: 20px; }
.metric-value { line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; font-weight: 600; font-size: calc(30px * var(--font-scale)); gap: 10px; align-items: center; display: flex; margin-top: 12px; }
.metric-value .badge { font-size: calc(12px * var(--font-scale)); height: 22px; }
.metric-delta { font-variant-numeric: tabular-nums; color: var(--color-text-sub); font-size: calc(12px * var(--font-scale)); display: block; margin-top: 8px; }
.card-header { gap: 10px; justify-content: space-between; align-items: center; display: flex; padding: 16px 20px 0; }
.card-body { padding: 12px 20px 20px; }
.settings-content .card-header { padding: 22px 22px 0; }
.settings-content .card-title { font-size: calc(17px * var(--font-scale)); font-weight: 700; display: flex; align-items: center; gap: 10px; width: 100%; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.settings-content .card-title::before { content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--color-primary); flex-shrink: 0; }
.settings-content .card-body { padding: 18px 22px 22px; }
.card-footer { border-top: 1px solid var(--color-border); gap: 8px; justify-content: flex-end; display: flex; padding: 12px 20px; }
.table-head { flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; display: flex; padding: 16px 20px; }
.table-foot { color: var(--color-text-sub); font-size: calc(12.5px * var(--font-scale)); flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; display: flex; padding: 12px 20px 16px; }
.chart-card, .filter-panel, .bordered-card { padding: 20px; }
.calendar, .diagram-card { padding: 16px; }
.card-grid, .settings-card-stack { gap: 16px; }
.info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; gap: 12px; }
.section-desc { color: var(--color-text-muted); font-size: calc(13px * var(--font-scale)); line-height: 1.6; margin: 6px 0 22px; padding: 0 0 22px 14px; border-bottom: 1px solid var(--color-border); }
.section-desc.mt-14 { margin-top: 14px; }
.demo-h3 { color: var(--color-text-sub); font-weight: 600; font-size: calc(12.5px * var(--font-scale)); margin: 0 0 8px; }
.demo-h3.spaced { margin-top: 24px; }
.pagination, .dl-pagination { margin-top: 16px; }
.dl-filter { margin-bottom: 16px; }
.table thead th, .table tbody td, .dl-table th, .dl-table td, .permission-table .perm-row > div, .field-grid dt, .field-grid dd { padding: 12px 16px; }
.form-grid, .nc-grid { gap: 16px 24px; }
.form-actions { border-top: 1px solid var(--color-border); gap: 8px; justify-content: flex-end; display: flex; margin-top: 24px; padding-top: 16px; }
.choice-group { flex-wrap: wrap; display: flex; gap: 8px 16px; }
.stack-list { flex-direction: column; display: flex; gap: 16px; }
.login-header { text-align: center; padding: 32px 28px 8px; }
.login-body { gap: 16px; flex-direction: column; display: flex; padding: 16px 28px 28px; }
.login-footer { background: var(--color-surface-2); border-top: 1px solid var(--color-border); color: var(--color-text-muted); text-align: center; padding: 16px 28px 20px; }
.icon-btn { position: relative; flex-shrink: 0; transition: background .15s, color .15s; justify-content: center; align-items: center; cursor: pointer; border-radius: var(--radius-md); color: var(--color-text-sub); background: transparent; border: 0; width: 40px; height: 40px; }
.btn-lg { min-width: 120px; height: 48px; padding: 0 24px; font-size: calc(15px * var(--font-scale)); }
.page-link { transition: background .15s, color .15s, border-color .15s; cursor: pointer; font-weight: 500; font-size: calc(12.5px * var(--font-scale)); border: 1px solid transparent; color: var(--color-text-sub); background: transparent; border-radius: var(--radius-md); justify-content: center; align-items: center; display: inline-flex; padding: 0 8px; min-width: 32px; height: 32px; }
.modal-close, .drawer-close, .calendar-nav { width: 32px; height: 32px; }
.srch { transition: border-color .15s, box-shadow .15s; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); max-width: 420px; height: 40px; gap: 8px; align-items: center; display: flex; padding: 0 4px 0 12px; }
.nc-chip { transition: background .12s, border-color .12s, color .12s; user-select: none; cursor: pointer; font-weight: 500; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 0 14px; height: 32px; align-items: center; display: inline-flex; position: relative; font-size: calc(12.5px * var(--font-scale)); }
.std-tabs-wrap { border-bottom: 1px solid var(--color-border); margin-bottom: 16px; }
.table-foot .ctl { height: 32px; padding: 0 12px; font-size: calc(12.5px * var(--font-scale)); }
.brand-block { border-bottom: 1px solid var(--color-border); gap: 12px; align-items: center; display: flex; padding: 0 20px; height: var(--topbar-h); }
.nav-section + .nav-section { margin-top: 20px; }
.nav-section-title { color: var(--color-text-muted); font-weight: 500; font-size: calc(12px * var(--font-scale)); padding: 0 12px 8px; }
.nav-item, .nav-child { padding: 0 12px; }
.nav-item.is-active::before { background: var(--color-primary); border-radius: 0 3px 3px 0; width: 3px; bottom: 10px; top: 10px; position: absolute; content: ""; left: -12px; }
.sidebar-bottom { gap: 2px; flex-direction: column; display: flex; border-top: 1px solid var(--color-border); margin-top: auto; padding: 12px; }
.user-card { transition: background .12s; text-align: left; cursor: pointer; background: transparent; border-radius: var(--radius-md); border: 0; margin-top: 8px; width: 100%; gap: 10px; align-items: center; display: flex; padding: 8px 12px; }
.modal-body, .nc-modal-body, .drawer-body { padding: 20px; }
.nc-section + .nc-section { margin-top: 24px; }
.nc-section-head { gap: 10px; align-items: center; display: flex; margin-bottom: 12px; }
.cmdk-search { border-bottom: 1px solid var(--color-border); gap: 10px; align-items: center; display: flex; padding: 12px 16px; }
.cmdk-item, .user-dropdown-item, .pd-select .pd-opt, .sm-panel .sm-opt { padding: 8px 12px; }
.user-dropdown-header { border-bottom: 1px solid var(--color-border); padding: 12px 16px; }
.alert { background: var(--color-surface); font-size: calc(13px * var(--font-scale)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); gap: 12px; align-items: flex-start; display: flex; padding: 12px 16px; margin-bottom: 12px; }
.notice { background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: calc(13px * var(--font-scale)); margin: 16px 0; border-radius: var(--radius-lg); gap: 12px; display: flex; padding: 12px 16px; }
.toast-text { color: var(--color-text-sub); font-size: calc(12.5px * var(--font-scale)); }
.attn-box-title { margin-bottom: 2px; color: var(--color-warn); font-weight: 600; font-size: calc(13px * var(--font-scale)); }
.notification-item { border-radius: var(--radius-md); border-bottom: 1px solid var(--color-border); gap: 12px; display: flex; padding: 12px; }
:root { --font-mono: "SF Mono", Menlo, Consolas, monospace; --font-sans: "Inter", "Noto Sans JP", "otng.net", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif; --radius-pill: 999px; --radius-lg: 12px; --radius-md: 8px; --radius-sm: 6px; --topbar-h: 64px; --sidebar-w: 272px; --shadow-3: 0 4px 12px rgba(17, 24, 39, 0.10); --color-danger-soft: #f4e7e4; --color-danger-line: #dcc1ba; --color-warn-soft: #f5eedf; --color-warn-line: #dfd0ad; --color-warn: #8a5a14; --color-info-soft: #e6ecf1; --color-info-line: #c1ced9; --color-info: #3b5468; --color-ok-soft: #e5eee7; --color-ok-line: #c2d6c8; --color-ok: #2f6b45; --color-primary-soft-2: color-mix(in srgb, var(--brand) 24%, #fff); --color-primary-soft: color-mix(in srgb, var(--brand) 12%, #fff); --color-primary-contrast: #ffffff; --color-primary-active: color-mix(in srgb, var(--brand) 70%, #000); --color-primary-hover: color-mix(in srgb, var(--brand) 86%, #000); --color-primary: var(--brand); --color-text-faint: #9ca3af; --color-text-sub: #4b5563; --color-text: #111827; --color-border-strong: #d1d5db; --color-border: #e5e7eb; --color-surface-2: #f6f7f8; --color-surface: #ffffff; --color-bg: #f4f5f6; --font-scale: 1; --color-text-muted: #626b78; --color-danger: #9b3b2e; --color-surface-hover: #e9ecef; --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.alert-close { font-size: calc(17px * var(--font-scale)); }
.text-faint, .calendar-day.is-other, .diff-line-no, .bs-chip.is-empty { color: var(--color-text-muted); }
.avatar.tone-2 { background: #4e7a5e; }
.chart-svg .ring-2 { stroke: #5e8d6c; }
.chart-svg .ring-3 { stroke: #9c8530; }
.legend-2 { background: #5e8d6c; }
.legend-3 { background: #9c8530; }
:root.dark .switch-track { background: var(--color-text-muted); }
:root.dark .switch-track::after { background: var(--color-surface); box-shadow: none; }
.nav-item:hover, .nav-child:hover, .user-dropdown-item:hover, .page-link:hover, .master-item:hover, .cmdk-item:hover { background: var(--color-surface-hover); }
.nav-count { border-radius: 4px; text-align: center; line-height: 20px; height: 20px; min-width: 20px; padding: 0 7px; font-weight: 600; font-size: calc(11px * var(--font-scale)); background: var(--color-surface-2); color: var(--color-text-sub); }
.btn-secondary { font-weight: 600; background: var(--color-surface-2); color: var(--color-text); border-color: transparent; }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-hover); border-color: transparent; }
.alert-icon { font-size: calc(12px * var(--font-scale)); border-radius: var(--radius-md); font-weight: 700; place-content: center; display: inline-grid; height: 26px; width: 26px; flex-shrink: 0; color: var(--color-text-sub); background: var(--color-surface-2); }
.typography ul li::marker { color: var(--color-text-faint); }
.typography blockquote { color: var(--color-text-sub); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-surface-2); border-left: 3px solid var(--color-primary); padding: 12px 16px; margin: 16px 0; border-left-color: var(--color-border-strong); }
.notification-item.is-unread { background: var(--color-surface-2); }
.error-card .err-code { line-height: 1; letter-spacing: -0.04em; font-weight: 700; font-size: calc(40px * var(--font-scale)); color: var(--color-text); }
.attn-box.attn-info { background: var(--color-info-soft); border-color: var(--color-info-line); }
.attn-info .attn-box-title { color: var(--color-info); }
.field.is-error .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent); }
:root.dark .std-tab.is-active[data-tab-color="purple"] { border-bottom-color: #a596c7; }
html, body { font-variant-numeric: tabular-nums; padding: 0; font-size: calc(13.5px * var(--font-scale)); font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; height: auto; min-height: 100%; }
.sidebar { border-right: 1px solid var(--color-border); background: var(--color-surface); flex-direction: column; display: flex; height: 100vh; top: 0; position: sticky; overflow: hidden; }
.brand-block, .sidebar-bottom { flex-shrink: 0; }
.nav { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.table-pad { overflow-x: auto; }
.info-card { border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); padding: 14px 16px; gap: 14px; align-items: center; display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; }
.info-value { font-weight: 500; font-size: calc(13.5px * var(--font-scale)); min-width: 0; word-break: normal; }
.alert-text code { border-radius: 4px; padding: 1px 5px; background: var(--color-surface-2); font-family: var(--font-mono); overflow-wrap: anywhere; }
.drawer { transform: translateX(100%); flex-direction: column; display: flex; z-index: 190; box-shadow: var(--shadow-3); border-left: 1px solid var(--color-border); background: var(--color-surface); width: min(400px, 100vw); bottom: 0; right: 0; top: 0; position: fixed; visibility: hidden; transition: transform .25s ease, visibility .25s; }
.drawer.is-open { transform: none; visibility: visible; }
.user-dropdown { overflow: hidden; transform: translateY(4px); pointer-events: none; opacity: 0; z-index: 150; box-shadow: var(--shadow-3); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); right: 0; left: 0; bottom: calc(100% + 6px); position: absolute; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; }
.user-menu-wrap.is-open .user-dropdown { transform: none; pointer-events: auto; opacity: 1; visibility: visible; }
.kebab:focus-visible, .ctl:focus-visible, .nav-child:focus-visible, .modal-close:focus-visible, .drawer-close:focus-visible, .alert-close:focus-visible, .chip-close:focus-visible, .calendar-nav:focus-visible, .api-key-copy:focus-visible, .cmdk-item:focus-visible, .user-dropdown-item:focus-visible, .list-item:focus-visible, .list-star:focus-visible, .master-item:focus-visible, .calendar-day:focus-visible, .std-tab:focus-visible, .tool-btn:focus-visible, .bs-chip:focus-visible, .srch-btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.calendar-day.is-today:focus-visible { box-shadow: var(--shadow-focus), inset 0 0 0 1.5px var(--color-primary); }
.bulk-close:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.ctl:focus-visible, .nc-chip:has(input:focus-visible), .accordion-header:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.ctl-group .ctl:focus-visible { position: relative; z-index: 1; }
.btn:disabled, .ctl:disabled, .icon-btn:disabled, .kebab:disabled, .tool-btn:disabled, .calendar-nav:disabled, .api-key-copy:disabled, .srch-btn:disabled, .bs-chip:disabled, .tab:disabled, .page-link:disabled, .page-link.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn:active:not(:disabled) { background: var(--color-surface-hover); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-active); border-color: var(--color-primary-active); }
.btn-secondary:active:not(:disabled), .btn-line:active:not(:disabled) { background: var(--color-primary-soft-2); }
.btn-line.btn-line-danger:active:not(:disabled) { background: var(--color-danger-soft); }
.bulk-action-bar .btn:active { background: rgba(255,255,255,.25); }
.ctl:active, .kebab:active, .icon-btn:active, .tool-btn:active, .calendar-nav:active, .api-key-copy:active, .bs-chip:not(.is-active):active, .page-link:active { background: var(--color-surface-hover); }
.srch-btn:active { background: var(--color-primary-active); }
.field.is-error .pd-select .pd-btn { border-color: var(--color-danger); }
.field.is-error .input:focus, .field.is-error .textarea:focus, .field.is-error .select:focus, .field.is-error .pd-select .pd-btn:focus-visible, .field.is-error .pd-select.is-open .pd-btn { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent); }
.pd-select .pd-btn:disabled { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border-strong); cursor: not-allowed; }
.choice:hover input:not(:disabled), .checkbox input:hover:not(:disabled), .list-check:hover:not(:disabled), .row-check:hover:not(:disabled) { border-color: var(--color-text-muted); }
.choice input:disabled, .checkbox input:disabled, .list-check:disabled, .row-check:disabled { opacity: .45; cursor: not-allowed; }
.choice:has(input:disabled), .switch:has(input:disabled), .nc-chip:has(input:disabled) { color: var(--color-text-muted); cursor: not-allowed; }
.switch input:disabled + .switch-track { opacity: .45; }
.nc-chip:has(input:disabled) { opacity: .45; }
.nc-chip:has(input:disabled):hover { border-color: var(--color-border-strong); }
.dl-table tbody tr:hover td { background: var(--color-surface-2); }
.dl-table .c { text-align: center; }
.dl-pagination { justify-content: center; align-items: center; display: flex; gap: 4px; }
.dl-pagination .dl-page-info { padding: 0 10px; }
.std-tab { height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--color-text-sub); font-size: calc(13.5px * var(--font-scale)); font-weight: 500; cursor: pointer; transition: color .12s, border-color .12s; }
.bs-chip:hover, .std-tabs-boxed .std-tab:hover, .nc-chip:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.bs-chip.is-active:hover, .std-tabs-boxed .std-tab.is-active:hover, .nc-chip:has(input:checked):hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-primary-contrast); }
.srch-ic { color: var(--color-text-muted); width: 16px; height: 16px; stroke-width: 2; }
.srch-btn { height: 32px; padding: 0 14px; border: 0; background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 600; font-size: calc(12.5px * var(--font-scale)); cursor: pointer; border-radius: var(--radius-sm); }
.kebab, .calendar-nav, .api-key-copy { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-sub); display: inline-grid; place-content: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.kebab:hover, .calendar-nav:hover, .api-key-copy:hover { background: var(--color-surface-2); color: var(--color-text); }
.page-link.is-active, .page-link.is-nav { border-color: var(--color-border-strong); }
.ctl { white-space: nowrap; cursor: pointer; font-weight: 500; font-size: calc(13.5px * var(--font-scale)); background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); padding: 0 14px; height: 40px; gap: 8px; align-items: center; display: inline-flex; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.ctl svg { color: var(--color-text-sub); height: 16px; width: 16px; stroke-width: 2; }
.ctl-sm { height: 32px; padding: 0 12px; font-size: calc(12.5px * var(--font-scale)); }
.cmdk-item svg, .notification-icon svg, .empty-icon svg { stroke-width: 1.7; }
.dropzone-icon svg, .cmdk-search svg, .input-group-icon, .nav-caret svg, .user-card .user-caret, .pd-select .pd-caret { stroke-width: 2; }
.modal-close, .drawer-close, .alert-close, .bulk-close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-sub); line-height: 1; cursor: pointer; display: inline-grid; place-content: center; transition: background .15s, color .15s; }
.modal-close:hover, .drawer-close:hover, .alert-close:hover, .bulk-close:hover { background: var(--color-surface-2); color: var(--color-text); }
.bulk-close { font-size: 18px; color: #fff; opacity: .8; }
.bulk-close:hover { background: rgba(255,255,255,.14); color: #fff; opacity: 1; }
.nav-child.is-active { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }
.alert-icon svg, .notice-icon svg { width: 14px; height: 14px; stroke-width: 2.5; }
.tool-btn svg, .modal-close svg, .drawer-close svg, .alert-close svg, .bulk-close svg { width: 16px; height: 16px; stroke-width: 2; }
.tool-btn { font-size: 15px; cursor: pointer; color: var(--color-text-sub); background: transparent; border-radius: var(--radius-md); border: 0; height: 32px; width: 32px; display: inline-grid; place-content: center; }
.page-link svg, .calendar-nav svg { width: 14px; height: 14px; stroke-width: 2; }
.list-star { line-height: 1; font-size: 16px; cursor: pointer; color: var(--color-text-faint); display: inline-grid; place-content: center; }
.list-star svg { width: 16px; height: 16px; stroke-width: 1.8; fill: none; }
.list-star.is-on svg { fill: currentColor; }
.stepper-item.is-complete .stepper-marker::before { content: ""; width: 5px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
@media (max-width: 1279px) {
  .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  :root { --sidebar-w: 240px; }
  .card-grid, .btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: 18px 18px 70px; }
  .topbar { padding: 0 18px; }
  .demo-grid-2, .demo-grid-2-wide { grid-template-columns: minmax(0, 1fr); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; }
  .settings-nav-list { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; }
  .app.is-drawer-open .sidebar-overlay { display: block; opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-flex; }
  .main { padding: 14px 14px 70px; }
  .section { padding: 16px 14px; }
  .card-grid, .card-grid-2, .card-grid-4, .btn-row, .form-grid, .info-grid, .nc-grid { grid-template-columns: 1fr; }
  .info-card { grid-template-columns: 1fr auto; }
  .info-card .info-value { grid-column: 1 / -1; }
  .info-card > .badge { justify-self: start; }
  .master-detail { grid-template-columns: 1fr; }
  .master { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .list-item { grid-template-columns: 18px 18px 1fr auto; }
  .list-from { display: none; }
  .permission-table .perm-row { grid-template-columns: 1fr repeat(4, 56px); }
  .permission-table .perm-row > div { padding: 10px 6px; }
  .dl-hero-title h1 { font-size: calc(18px * var(--font-scale)); }
  .error-page { grid-template-columns: 1fr; }
  .error-page-panel { padding: 28px 20px; gap: 20px; min-height: 200px; }
  .error-page-content { padding: 32px 20px 48px; }
  .error-page-title { font-size: calc(22px * var(--font-scale)); }
  .error-page-code { font-size: calc(70px * var(--font-scale)); }
  .stepper-label { font-size: calc(11px * var(--font-scale)); }
  :root.is-drawer-open, :root.is-drawer-open body { overflow: hidden; }
  .topbar { padding: 0 10px; gap: 4px; }
  .topbar .page-icon { display: none; }
  .topbar > .btn { width: 40px; min-width: 0; padding: 0; gap: 0; font-size: 0; }
  .topbar > .btn svg { width: 18px; height: 18px; }
  .bulk-close { margin-left: auto; }
  .page-actions { width: 100%; }
  .page-actions .ctl-group { display: flex; width: 100%; }
  .page-actions .ctl-group .ctl { flex: 1 1 0; min-width: 0; padding: 0 10px; justify-content: center; overflow: hidden; }
  .page-actions > .btn { flex: 1 1 auto; }
  .table-foot { justify-content: center; text-align: center; }
  .sidebar { overscroll-behavior: contain; height: auto; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 100; transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .app.is-drawer-open .sidebar { transform: none; visibility: visible; }
  .tabs-wrap { overflow-x: visible; }
  .tabs, .std-tabs { flex-wrap: wrap; row-gap: 4px; }
  .tab, .std-tab { white-space: nowrap; }
  .dl-pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .dl-pagination .btn { min-width: 0; }
  .pagination { flex-wrap: wrap; row-gap: 4px; }
  .form-actions, .modal-footer, .drawer-footer, .card-footer, .filter-actions { flex-wrap: wrap; }
  .form-actions > .btn, .modal-footer > .btn, .drawer-footer > .btn, .card-footer > .btn, .filter-actions > .btn { flex: 1 1 0; min-width: 0; }
  .bulk-action-bar { flex-wrap: wrap; row-gap: 8px; }
  .bulk-action-bar .btn { flex: 1 1 auto; white-space: nowrap; }
  .input, .textarea, .select, .srch-in, .pd-select .pd-btn, .cmdk-search input { font-size: max(16px, calc(13.5px * var(--font-scale))); }
  .field-grid { grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr); }
  .permission-table { overflow-x: auto; }
  .heatmap { min-width: 0; }
  .icon-btn { width: 44px; height: 44px; }
  .kebab, .page-link, .tool-btn, .modal-close, .drawer-close, .calendar-nav { width: 40px; height: 40px; min-width: 40px; }
  .api-key-copy, .bulk-close { width: 36px; height: 36px; }
  .alert-close { width: 36px; height: 36px; display: inline-grid; place-content: center; padding: 0; margin: -6px -8px -6px 0; }
  .chip-close { width: 28px; height: 28px; margin: -4px -6px -4px 0; }
  .srch-btn { height: 34px; }
  .btn-xs { height: 36px; }
  .card-header { flex-wrap: wrap; row-gap: 6px; }
  .login-options { flex-wrap: wrap; gap: 8px 12px; }
  .table-foot > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .cmdk-backdrop { padding: 16px; }
  .cmdk-list { max-height: 50dvh; }
  .toast-stack { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .ctl-group { display: flex; flex-wrap: wrap; }
  .ctl-group .ctl { flex: 1 1 auto; }
  .dl-stack.table-wrap, .dl-stack.dl-table-wrap { overflow-x: visible; }
  .dl-stack .table-pad { overflow-x: visible; }
  .dl-stack .table, .dl-stack .dl-table, .dl-stack .table tbody, .dl-stack .dl-table tbody { display: block; width: 100%; min-width: 0; }
  .dl-stack .table thead, .dl-stack .dl-table thead { display: none; }
  .dl-stack .table tbody tr, .dl-stack .dl-table tbody tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
  .dl-stack .table tbody tr:last-child, .dl-stack .dl-table tbody tr:last-child { border-bottom: 0; }
  .dl-stack .table tbody td, .dl-stack .dl-table tbody td { display: flex; align-items: center; gap: 10px; flex: 0 0 100%; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; background: transparent; }
  .dl-stack .table tbody tr:hover td, .dl-stack .dl-table tr.clickable:hover td { background: transparent; }
  .dl-stack .table tbody tr:hover, .dl-stack .dl-table tr.clickable:hover { background: var(--color-surface-2); }
  .dl-stack td[data-label]::before { content: attr(data-label); flex: 0 0 auto; min-width: var(--dl-label-w, 6.5em); color: var(--color-text-muted); font-size: calc(12.5px * var(--font-scale)); white-space: nowrap; }
  .dl-stack td.dl-stack-first { order: -1; margin-bottom: 2px; font-weight: 600; font-size: calc(14.5px * var(--font-scale)); }
  .dl-stack td.dl-stack-first[data-label]::before { display: none; }
  .dl-stack .table tbody td.dl-stack-inline, .dl-stack .dl-table tbody td.dl-stack-inline { flex: 0 0 auto; }
  .dl-stack td.dl-stack-inline[data-label]::before { min-width: 0; }
  .dl-stack td.num, .dl-stack td.c, .dl-stack td.text-center, .dl-stack td.actions { text-align: left; }
  .dl-stack .table tbody td.actions, .dl-stack .dl-table tbody td.actions { gap: 8px; }
  .dl-stack td.actions .btn { margin-left: 0; }
  .dl-stack .prog { min-width: 0; flex: 1 1 auto; }
  .dl-stack .table[hidden], .dl-stack .dl-table[hidden], .dl-stack tbody[hidden], .dl-stack tr[hidden], .dl-stack td[hidden] { display: none; }
}
:root.dark { --color-bg: #0f1113; --color-surface: #16191c; --color-surface-2: #1c2024; --color-surface-hover: #23282d; --color-border: #2a3036; --color-border-strong: #3a424a; --color-text: #e5e7eb; --color-text-sub: #a1a8b0; --color-text-muted: #737b84; --color-text-faint: #4b535b; --color-primary: var(--brand-dark); --color-primary-hover: color-mix(in srgb, var(--brand-dark) 85%, #fff); --color-primary-active: color-mix(in srgb, var(--brand-dark) 70%, #fff); --color-primary-contrast: #111614; --color-primary-soft: color-mix(in srgb, var(--brand-dark) 14%, transparent); --color-primary-soft-2: color-mix(in srgb, var(--brand-dark) 26%, transparent); --color-ok: #8cc49e; --color-ok-soft: rgba(140, 196, 158, 0.14); --color-ok-line: rgba(140, 196, 158, 0.35); --color-info: #9fb6c8; --color-info-soft: rgba(159, 182, 200, 0.14); --color-info-line: rgba(159, 182, 200, 0.35); --color-warn: #d2b070; --color-warn-soft: rgba(210, 176, 112, 0.14); --color-warn-line: rgba(210, 176, 112, 0.35); --color-danger: #d8907f; --color-danger-soft: rgba(216, 144, 127, 0.14); --color-danger-line: rgba(216, 144, 127, 0.35); --shadow-3: 0 4px 12px rgba(0,0,0,.5); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-dark) 30%, transparent); }
:root.dark .select { 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='%23a9b4ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
:root.dark .typography pre { background: #0c100e; }
:root.dark .heatmap-cell[data-level="1"], :root.dark .heatmap-legend-cell[data-level="1"] { background: #26382c; }
:root.dark .heatmap-cell[data-level="2"], :root.dark .heatmap-legend-cell[data-level="2"] { background: #355242; }
:root.dark .heatmap-cell[data-level="3"], :root.dark .heatmap-legend-cell[data-level="3"] { background: #4e7a5e; }
:root.dark .heatmap-cell[data-level="4"], :root.dark .heatmap-legend-cell[data-level="4"] { background: #78a88a; }
:root.dark .bulk-action-bar { background: var(--color-surface-2); color: var(--color-text); }
:root.dark .has-tooltip::after { background: var(--color-surface-2); color: var(--color-text); }
:root.dark .avatar.tone-3 { color: #111614; }
:root.dark .avatar.tone-2, :root.dark .avatar.tone-4 { color: #fff; }
@media print {
  .sidebar, .topbar, .toolbar, .page-actions, .form-actions, .btn, .icon-btn, .toast-stack, .modal-backdrop, .drawer-backdrop, .drawer, .cmdk-backdrop, .sidebar-overlay { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  body { background: #fff; color: #000; }
  .section { page-break-inside: avoid; border: 0; padding: 12px 0; }
  .info-card, .card, .table-wrap { border-color: #999; }
  a { color: #000; text-decoration: underline; }
  @page { margin: 16mm; }
}
html { touch-action: manipulation; overflow-x: hidden; }
.info-value, .alert-text, .def-list dd, .notification-title, .notification-text, .timeline-title, .timeline-desc, .file-field-name, .dropzone-list li, .typography a, .typography code, .master-item-title, .api-key-mask, .toast-text, .card-title { overflow-wrap: anywhere; }
.modal { background: var(--color-surface); border-radius: 14px; width: 100%; box-shadow: var(--shadow-3); transform: translateY(8px); transition: transform .18s; overflow: hidden; border: 1px solid var(--color-border); display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.row-check:indeterminate { background: var(--color-primary); border-color: var(--color-primary); }
.row-check:indeterminate::after { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 2px; background: var(--color-primary-contrast); transform: none; border: 0; }