/* Uiverse component adaptations: Clenio21 card edge, aadium button,
   alexruix input and adamgiebl pattern. MIT originals: deploy/licenses/ui/. */
:root {
  --accent: #6a8cff; --accent-soft: #6a8cff18; --accent-line: #6a8cff45;
  --surface: #131e31; --surface-raised: #18253b; --canvas: #0c1323;
  --ink: #eaf0ff; --ink-muted: #99a9c4; --border: #2c3a53;
  --shadow: 0 8px 30px #02061526; --hover-shadow: 0 16px 36px #02061540;
  --cyan: #7d9bff; --purple: #b19bff; --panel: var(--surface);
  --panel-2: var(--surface-raised); --line: var(--border); --bg: var(--canvas);
  --text: var(--ink); --muted: var(--ink-muted); --radius: 18px;
}
:root:not([data-theme=dark]) {
  --accent: #526ee7; --accent-soft: #526ee70d; --accent-line: #526ee72d;
  --surface: #fff; --surface-raised: #f7f9ff; --canvas: #f1f4fb;
  --ink: #243454; --ink-muted: #687a97; --border: #e1e7f2;
  --shadow: 0 5px 24px #2b467509; --hover-shadow: 0 15px 32px #2b467516;
  --cyan: #526ee7; --purple: #9570d8; --panel: var(--surface);
  --panel-2: var(--surface-raised); --line: var(--border); --bg: var(--canvas);
  --text: var(--ink); --muted: var(--ink-muted);
}
body {min-width: 0; background: var(--canvas); color: var(--ink); line-height: 1.55;}
body:has(dialog[open]) {overflow: hidden;}
::selection {background: #6a8cff33; color: var(--ink);}
button, input, select, textarea, a {touch-action: manipulation;}
.shell {grid-template-columns: 236px minmax(0, 1fr);}
.sidebar {padding: 31px 18px 24px; border-color: var(--border); background: var(--surface); z-index: 3;}
.sidebar .brand {padding: 0 10px 32px;}
.brand img {width: 42px; height: 42px; padding: 7px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 13px; box-shadow: 0 4px 14px #526ee712;}
.brand strong {font-size: 18px; letter-spacing: 1px; color: var(--ink);}
.brand small {letter-spacing: 1px; color: var(--ink-muted); margin-top: 4px;}
.nav-caption {font-size: 11px; color: var(--ink-muted); letter-spacing: 2px; padding: 16px 15px;}
.nav {gap: 8px;}
.nav a, :root:not([data-theme=dark]) .nav a {position: relative; min-height: 47px; padding: 12px 15px; border-radius: 12px; color: var(--ink-muted); transition: background .2s, color .2s, transform .2s;}
.nav a .icon {width: 19px; height: 19px; transition: transform .2s;}
.nav a:hover, :root:not([data-theme=dark]) .nav a:hover {background: var(--accent-soft); color: var(--accent); transform: translateX(3px);}
.nav a:hover .icon {transform: scale(1.08);}
.nav a[aria-current=page], :root:not([data-theme=dark]) .nav a[aria-current=page] {background: linear-gradient(105deg, var(--accent-soft), transparent); color: var(--accent); border-color: var(--accent-line); font-weight: 600; box-shadow: inset 3px 0 var(--accent);}
.sidebar-foot, :root:not([data-theme=dark]) .sidebar-foot {padding: 21px 12px 0; border-color: var(--border); color: var(--ink-muted);}
.sidebar-foot strong, :root:not([data-theme=dark]) .sidebar-foot strong {color: var(--ink);}
.topbar {height: 78px; padding: 0 36px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px); border-color: var(--border);}
.crumb {display: flex; align-items: center; gap: 13px; font-size: 12px;}
.crumb span, :root:not([data-theme=dark]) .crumb span {color: var(--ink); margin: 0; display: flex; align-items: center; gap: 13px;}
.crumb span::before {content: '/'; color: var(--ink-muted); opacity: .5;}
.account {gap: 13px;}
.avatar, :root:not([data-theme=dark]) .avatar {width: 34px; height: 34px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line);}
.username {color: var(--ink); font-weight: 600;}
.main-content {max-width: 1590px; padding: 34px 36px 30px; position: relative; isolation: isolate;}
.main-content::before {content: ''; position: absolute; inset: 0 0 auto; height: 330px; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--accent-line) .8px, transparent .8px); background-size: 18px 18px; mask-image: linear-gradient(#0008, transparent);}
.page-head {min-height: 96px; margin-bottom: 27px; gap: 24px;}
.page-heading {display: flex; align-items: center; gap: 18px; min-width: 0;}
.section-mark {display: grid; place-items: center; width: 62px; height: 66px; flex: none; color: var(--accent); background: linear-gradient(145deg, var(--surface), var(--accent-soft)); border: 1px solid var(--accent-line); border-radius: 18px; box-shadow: var(--shadow);}
.section-mark .icon {width: 27px; height: 27px;}
.page-index, :root:not([data-theme=dark]) .page-index {font-family: inherit; font-size: 10px; letter-spacing: 1.1px; color: var(--ink-muted); margin-bottom: 6px;}
.page-head h1 {font-size: 27px; font-weight: 650; letter-spacing: -.5px; line-height: 1.3; margin-bottom: 7px; color: var(--ink);}
.page-head p {font-size: 12px; color: var(--ink-muted);}
.page-view {animation: view-arrive .38s ease-out both;}
.page-tools {flex: none; gap: 10px;}
.stats-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 25px;}
.stat {--stat-accent: var(--accent); --stat-tint: var(--accent-soft); padding: 21px 23px; border-radius: 17px; background: linear-gradient(125deg, var(--surface) 65%, var(--stat-tint)); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s, border-color .25s; isolation: isolate; animation: stat-arrive .45s ease backwards;}
.stat-1 {--stat-accent: #9b77e9; --stat-tint: #9b77e90d; animation-delay: 45ms;}
.stat-2 {--stat-accent: #299e92; --stat-tint: #299e920d; animation-delay: 90ms;}
.stat-3 {--stat-accent: #438fd7; --stat-tint: #438fd70d; animation-delay: 135ms;}
.stat-4 {--stat-accent: #d17b85; --stat-tint: #d17b850d; animation-delay: 180ms;}
.stat-5 {--stat-accent: #ce9845; --stat-tint: #ce98450d; animation-delay: 225ms;}
.stat::before {content: ''; pointer-events: none; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient(from 50deg, transparent, var(--stat-accent), transparent 40%, transparent 70%, var(--stat-accent), transparent); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity .25s; animation: edge-hue 4s linear infinite paused;}
.stat::after {display: block; content: ''; position: absolute; width: 90px; height: 90px; right: -38px; bottom: -40px; left: auto; background: transparent; border: 13px solid var(--stat-tint); border-radius: 50%; opacity: 1;}
.stat.purple::after {background: transparent;}
.stat-label, :root:not([data-theme=dark]) .stat-label {font-size: 13px; color: var(--ink-muted); font-weight: 500;}
.stat-label .icon {box-sizing: content-box; width: 19px; height: 19px; padding: 9px; background: var(--stat-tint); border: 1px solid color-mix(in srgb, var(--stat-accent) 18%, transparent); border-radius: 12px; color: var(--stat-accent); opacity: 1;}
.stat-value, :root:not([data-theme=dark]) .stat-value {color: var(--ink); font-size: 35px; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; margin: 2px 0 5px; line-height: 1.3;}
.stat-note {font-size: 11px; color: var(--ink-muted);}
.stat-note::before {content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin: 0 7px 2px 0; background: var(--stat-accent); opacity: .7;}
.panel {border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);}
.panel-head {padding: 22px 24px; border-color: var(--border); background: linear-gradient(110deg, var(--surface), var(--surface-raised)); gap: 16px;}
.panel-head h2 {font-size: 15px; font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 10px; margin-bottom: 6px;}
.panel-head h2::before {content: ''; display: inline-block; flex: none; width: 4px; height: 15px; border-radius: 4px; background: linear-gradient(var(--accent), #9a87ed); box-shadow: 0 0 10px #6a8cff25;}
.panel-head p {font-size: 11px; color: var(--ink-muted); margin: 0;}
.panel-head>a {font-size: 12px; flex: none;}
.panel-body {padding: 24px;}
.overview-grid {gap: 22px; margin-bottom: 24px;}
.list-count {white-space: nowrap; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 5px 10px; font-size: 11px; font-variant-numeric: tabular-nums;}
.quick-list {gap: 12px;}
.quick-link, :root:not([data-theme=dark]) .quick-link {padding: 18px 15px; border: 1px solid var(--border); background: var(--surface-raised); border-radius: 12px; color: var(--ink); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;}
.quick-link>.icon:first-child, :root:not([data-theme=dark]) .quick-link>.icon:first-child {box-sizing: content-box; width: 19px; height: 19px; padding: 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);}
.quick-link strong {font-size: 12px; font-weight: 600;}
.quick-link small {font-size: 11px; color: var(--ink-muted); margin-top: 5px;}
.quick-link>.icon:last-child {transition: transform .2s;}
.quick-link:hover, :root:not([data-theme=dark]) .quick-link:hover {border-color: var(--accent-line); background: var(--accent-soft); box-shadow: 0 4px 16px #526ee708;}
.quick-link:hover>.icon:last-child {transform: translateX(3px);}
.button, :root:not([data-theme=dark]) .button {min-height: 42px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); box-shadow: 0 2px 3px #1e356504; font-size: 12px; font-weight: 550; position: relative; overflow: hidden; transition: transform .18s, box-shadow .2s, border-color .2s, background .2s;}
.button:hover:not(:disabled), :root:not([data-theme=dark]) .button:hover:not(:disabled) {border-color: var(--accent-line); background: var(--surface-raised); box-shadow: 0 5px 15px #526ee714; transform: translateY(-1px);}
.button:active:not(:disabled) {transform: translateY(1px) scale(.98);}
.button.primary, :root:not([data-theme=dark]) .button.primary {color: white; background: linear-gradient(110deg, #496ce6, #7572e9, #4d8de7); background-size: 220% 100%; border-color: #667ee0; box-shadow: 0 4px 12px #496ce626;}
.button.primary:hover:not(:disabled), :root:not([data-theme=dark]) .button.primary:hover:not(:disabled) {background: linear-gradient(110deg, #496ce6, #7572e9, #4d8de7); background-size: 220% 100%; background-position: 100%; border-color: #8195ef; box-shadow: 0 7px 18px #496ce638;}
.button.primary::after {content: ''; position: absolute; top: -50%; left: -55%; width: 35%; height: 200%; background: linear-gradient(90deg, transparent, #ffffff25, transparent); transform: skewX(-22deg); transition: left .55s; pointer-events: none;}
.button.primary:hover::after {left: 135%;}
.button.ghost, :root:not([data-theme=dark]) .button.ghost {background: var(--surface);}
.button.danger, :root:not([data-theme=dark]) .button.danger {background: color-mix(in srgb, var(--red) 7%, var(--surface)); color: var(--red); border-color: color-mix(in srgb, var(--red) 22%, var(--border));}
.button.danger:hover:not(:disabled), :root:not([data-theme=dark]) .button.danger:hover:not(:disabled) {background: color-mix(in srgb, var(--red) 12%, var(--surface)); border-color: var(--red);}
.button.small, :root:not([data-theme=dark]) .button.small {min-height: 32px; padding: 6px 11px; font-size: 11px; border-radius: 8px;}
.button.icon-button, :root:not([data-theme=dark]) .button.icon-button {width: 34px; min-height: 34px; padding: 7px; border-radius: 9px; background: transparent; border-color: transparent; box-shadow: none;}
.button:disabled {opacity: .45;}
.field {gap: 9px; margin-bottom: 22px;}
.field-label, :root:not([data-theme=dark]) .field-label {font-size: 12px; font-weight: 600; color: var(--ink);}
.field:has(:required)>.field-label::after {content: ' *'; color: var(--accent); font-weight: 400;}
.field small {font-size: 11px; color: var(--ink-muted); line-height: 1.65;}
input, select, textarea, :root:not([data-theme=dark]) input, :root:not([data-theme=dark]) select, :root:not([data-theme=dark]) textarea {min-height: 45px; border-radius: 10px; border-color: var(--border); background: var(--surface-raised); color: var(--ink); padding: 11px 13px; font-size: 13px; box-shadow: inset 0 1px 2px #1e356503; transition: border-color .2s, box-shadow .2s, background .2s;}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {border-color: var(--accent-line);}
input:focus, select:focus, textarea:focus, :root:not([data-theme=dark]) input:focus, :root:not([data-theme=dark]) select:focus, :root:not([data-theme=dark]) textarea:focus {border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft), 0 3px 12px #526ee708; outline: none;}
input::placeholder, textarea::placeholder, :root:not([data-theme=dark]) input::placeholder, :root:not([data-theme=dark]) textarea::placeholder {color: var(--ink-muted); opacity: .8; font-size: 12px;}
textarea {line-height: 1.8; min-height: 100px;}
input:disabled, select:disabled, textarea:disabled {opacity: .6; cursor: not-allowed;}
select {appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px;}
option, :root:not([data-theme=dark]) option {background: var(--surface); color: var(--ink);}
@supports (appearance: base-select) {
  select, select::picker(select) {appearance: base-select;}
  select, :root:not([data-theme=dark]) select {background-image: none; padding-right: 13px; align-items: center; gap: 13px;}
  select::picker-icon {content: ''; width: 7px; height: 7px; margin: -3px 2px 0 auto; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); rotate: 45deg; transition: rotate .2s;}
  select:open::picker-icon {rotate: 225deg;}
  select::picker(select) {border: 1px solid var(--accent-line); border-radius: 12px; padding: 6px; margin-top: 7px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 35px #12244c24; opacity: 0; transform: translateY(-5px); transition: opacity .18s, transform .18s, display .18s allow-discrete, overlay .18s allow-discrete;}
  select::picker(select):popover-open {opacity: 1; transform: translateY(0);}
  @starting-style {select::picker(select):popover-open {opacity: 0; transform: translateY(-5px);}}
  select option {padding: 10px 11px; min-height: 40px; border-radius: 7px; display: flex; align-items: center; gap: 12px; transition: background .15s;}
  select option:hover, select option:focus {background: var(--accent-soft); color: var(--accent); outline: none;}
  select option:checked {background: var(--accent-soft); color: var(--accent); font-weight: 600;}
  select option::checkmark {order: 1; margin-left: auto; color: var(--accent); font-size: 12px;}
}
.theme-picker, :root:not([data-theme=dark]) .theme-picker {width: 128px; min-height: 36px; font-size: 11px; padding: 7px 11px; border-color: var(--border); color: var(--ink-muted); background-color: var(--surface-raised); border-radius: 10px;}
.theme-picker::picker(select) {min-width: 150px;}
.filters {padding: 18px 24px; gap: 12px; background: var(--surface); border-color: var(--border);}
.filters .search-box {max-width: 420px; flex: 1;}
.search-box .icon {color: var(--ink-muted); left: 14px;}
.filters .search-box input {padding-left: 41px;}
.filters select {width: 170px; min-width: 0; max-width: 100%; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.filters .button {min-height: 45px; padding-inline: 22px;}
input[type=range], :root:not([data-theme=dark]) input[type=range] {appearance: auto; min-height: 26px; padding: 0; background: transparent; box-shadow: none; border: 0; accent-color: var(--accent); cursor: pointer;}
.app-config-check {gap: 12px; padding: 14px 15px; margin-top: 4px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 11px; font-size: 12px; cursor: pointer;}
.app-config-check input, :root:not([data-theme=dark]) .app-config-check input {appearance: none; width: 40px; height: 24px; min-height: 24px; flex: none; border-radius: 30px; padding: 0; background: var(--border); position: relative; border: 1px solid var(--border); box-shadow: none; cursor: pointer;}
.app-config-check input::before {content: ''; width: 16px; height: 16px; position: absolute; top: 3px; left: 3px; background: white; border-radius: 50%; box-shadow: 0 1px 4px #14213d20; transition: transform .2s;}
.app-config-check input:checked {background: var(--accent); border-color: var(--accent);}
.app-config-check input:checked::before {transform: translateX(16px);}
.form-actions {gap: 12px; margin-top: 24px;}
.table-scroll {overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent;}
table {width: 100%; border-collapse: separate; border-spacing: 0;}
th, :root:not([data-theme=dark]) th {padding: 14px 22px; font-size: 11px; font-weight: 600; color: var(--ink-muted); background: var(--surface-raised); border-bottom: 1px solid var(--border); white-space: nowrap;}
td, :root:not([data-theme=dark]) td {padding: 17px 22px; color: var(--ink); font-size: 12px; border-bottom: 1px solid var(--border); line-height: 1.65; transition: background .16s;}
tbody tr:last-child td {border-bottom: 0;}
tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-raised) 45%, transparent);}
tbody tr:hover, :root:not([data-theme=dark]) tbody tr:hover {background: var(--accent-soft);}
td:first-child {border-left: 2px solid transparent;}
tbody tr:hover td:first-child {border-left-color: var(--accent);}
td .sub, :root:not([data-theme=dark]) td .sub {color: var(--ink-muted); font-size: 10px; margin-top: 5px;}
.id-cell {max-width: 200px; overflow-wrap: anywhere;}
.row-actions {display: flex; flex-wrap: wrap; gap: 8px;}
.module-editor-list {display: grid; gap: 10px; margin-bottom: 14px;}
.module-editor-row {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;}
.module-editor-row input {min-width: 0; width: 100%;}
.module-editor-row .button {min-height: 44px;}
.entitlement-cell {min-width: 150px; max-width: 250px; white-space: normal; overflow-wrap: anywhere; line-height: 1.7;}
.entitlement-cell strong {font-weight: 600;}
.entitlement-cell .entitlement-plan {display: block; margin-top: 5px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.6; white-space: normal; overflow-wrap: anywhere;}
.brand-scope {display: block; color: var(--accent); font-size: 11px; margin-top: 6px;}
.brand-picker {border: 1px solid var(--border); padding: 15px; border-radius: 12px; margin: 0 0 22px; min-width: 0;}
.brand-picker legend {font-size: 12px; color: var(--ink-muted); padding-inline: 6px;}
.brand-choices {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;}
.brand-choices label {display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 11px; cursor: pointer; font-size: 13px; min-width: 0;}
.brand-choices label:has(:checked) {border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);}
.brand-picker .brand-choices input[type=checkbox] {appearance: auto; width: 17px; height: 17px; min-height: 17px; padding: 0; box-shadow: none; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer;}
.plan-summary {padding: 0 17px; margin-bottom: 22px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; font-size: 12px;}
.plan-summary .definition {margin-block: 0;}
.card-code-record {min-width: 245px; max-width: 340px;}
.card-code-cell {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px;}
.card-code {font: 11px/1.8 "Cascadia Code", Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; white-space: normal; user-select: all;}
.card-code-cell .code-copy {width: 28px; min-height: 28px; padding: 5px; margin-top: -3px;}
.card-code-cell .code-copy .icon {width: 15px; height: 15px; color: var(--accent);}
.license-device-list {display: grid; gap: 10px; min-width: 220px; max-width: 300px;}
.license-device-card {border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); padding: 12px; white-space: normal; overflow-wrap: anywhere;}
.license-device-name {display: flex; align-items: flex-start; gap: 8px; color: var(--ink);}
.license-device-name .icon {width: 16px; height: 16px; color: var(--accent); margin-top: 2px;}
.license-device-name strong {font-size: 11px; font-weight: 600;}
.license-device-system {font-size: 10px; color: var(--ink-muted); margin-top: 4px;}
.device-facts {display: grid; gap: 5px; margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--border);}
.device-facts>div {display: flex; gap: 12px; align-items: flex-start; font-size: 10px;}
.device-facts dt {width: 34px; flex: none; color: var(--ink-muted);}
.device-facts dd {margin: 0; min-width: 0; color: var(--ink);}
.mono {font-size: 11px; letter-spacing: -.1px; color: inherit;}
.event-label {display: inline-flex; align-items: center; gap: 9px;}
.event-label .icon {width: 15px; height: 15px; color: var(--accent); flex: none;}
.record-description {white-space: normal; min-width: 190px; max-width: 400px; font-size: 12px; line-height: 1.8; color: var(--ink-muted); overflow-wrap: anywhere;}
.badge, :root:not([data-theme=dark]) .badge {font-size: 10px; font-weight: 500; border-radius: 7px; padding: 4px 8px; background: var(--surface-raised); color: var(--ink-muted); border: 1px solid var(--border); gap: 6px;}
.badge i {width: 5px; height: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent);}
.badge.active, .badge.online, .badge.unused, :root:not([data-theme=dark]) .badge.active, :root:not([data-theme=dark]) .badge.online, :root:not([data-theme=dark]) .badge.unused {background: #27a58e0d; border-color: #27a58e35; color: #259a80;}
.badge.used, :root:not([data-theme=dark]) .badge.used {background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line);}
.badge.expired, :root:not([data-theme=dark]) .badge.expired {background: #d39b4210; color: #b78535; border-color: #d39b4230;}
.badge.revoked, .badge.disabled, :root:not([data-theme=dark]) .badge.revoked, :root:not([data-theme=dark]) .badge.disabled {background: #cc647610; color: #c06476; border-color: #cc647630;}
.pagination {padding: 17px 24px; font-size: 11px; color: var(--ink-muted); background: var(--surface-raised); border-top: 1px solid var(--border); gap: 15px;}
.pagination-controls {gap: 8px;}
.pagination-controls>span {font-variant-numeric: tabular-nums; color: var(--ink); padding-inline: 9px; font-size: 11px;}
.definition>div {padding: 16px 0; align-items: flex-start; border-color: var(--border);}
.definition dt {font-size: 12px; color: var(--ink-muted);}
.definition dd, :root:not([data-theme=dark]) .definition dd {font-size: 12px; font-weight: 500; color: var(--ink);}
.security-actions {gap: 9px;}
.small-note, :root:not([data-theme=dark]) .small-note {font-size: 11px; color: var(--ink-muted); line-height: 1.8;}
.modal {padding: 27px; border: 1px solid var(--accent-line); border-radius: 20px; background: var(--surface); box-shadow: 0 25px 100px #0b133d45; animation: modal-arrive .22s ease-out both; scrollbar-width: thin; scrollbar-color: var(--border) transparent;}
.modal::backdrop, :root:not([data-theme=dark]) .modal::backdrop {background: #0d173b62; backdrop-filter: blur(5px);}
.modal-head {gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 23px;}
.modal-head h2 {font-size: 20px; font-weight: 650; color: var(--ink);}
.modal-head p {font-size: 11px; color: var(--ink-muted); line-height: 1.7;}
.modal .form-actions {border-color: var(--border);}
.dialog-message {color: var(--ink-muted); font-size: 13px;}
.notice, :root:not([data-theme=dark]) .notice {border-radius: 10px; border-left-width: 3px; font-size: 12px;}
.notifications .notice {box-shadow: var(--hover-shadow); animation: notification-arrive .22s ease-out;}
.empty {padding: 47px 24px 50px;}
.empty-icon, :root:not([data-theme=dark]) .empty-icon {width: 64px; height: 64px; border-radius: 19px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); box-shadow: 0 5px 22px #526ee708; margin-bottom: 18px;}
.empty-icon .icon {width: 26px; height: 26px;}
.empty h3, :root:not([data-theme=dark]) .empty h3 {color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 8px;}
.empty p {font-size: 12px; color: var(--ink-muted); max-width: 330px; line-height: 1.8;}
.loading {padding: 55px 24px; color: var(--ink-muted); font-size: 12px;}
.release-fingerprint {margin: 16px 0; color: var(--ink-muted); font-size: 12px;}
.release-fingerprint summary {cursor: pointer; padding-block: 10px;}
.release-fingerprint input {font-family: monospace; font-size: 11px;}
.spinner {border-width: 2px; border-color: var(--accent-line); border-top-color: var(--accent); box-shadow: 0 0 12px #6a8cff0d;}
.chart-area {padding: 24px;}
.chart polyline {stroke-width: 2.7; filter: drop-shadow(0 3px 4px #6a8cff20); animation: chart-arrive .5s ease-out;}
.chart circle {stroke: var(--surface); stroke-width: 2; transition: r .15s;}
.chart circle:hover {r: 5;}
.chart text, :root:not([data-theme=dark]) .chart text {fill: var(--ink-muted);}
.chart-legend {font-size: 11px; gap: 24px;}
.page-foot {font-size: 10px; color: var(--ink-muted); border-top: 1px solid var(--border); padding-top: 19px; margin-top: 29px;}
.login-layout {background: radial-gradient(ellipse at 20% 35%, var(--accent-soft), transparent 55%), var(--canvas); position: relative; isolation: isolate;}
.login-layout::after {content: ''; pointer-events: none; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--accent-soft) 1px, transparent 1px), linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(110deg, #0008, transparent 65%);}
.login-panel {background: var(--surface); border-radius: 23px; border-color: var(--accent-line); box-shadow: 0 20px 75px #26396e12, 0 1px 0 #ffffff12 inset; padding: 33px; animation: modal-arrive .4s ease-out;}
.login-panel h2 {font-size: 24px; letter-spacing: -.3px; color: var(--ink);}
.login-extra {margin: 0 0 18px; font-size: 12px; color: var(--ink-muted);}
.login-extra summary {cursor: pointer; padding: 8px 0;}
.login-extra[open] summary {margin-bottom: 10px;}
.login-panel>p {font-size: 12px; color: var(--ink-muted);}
.login-brand h1 {font-size: clamp(36px, 3.4vw, 49px); line-height: 1.38; font-weight: 600; color: var(--ink);}
.login-brand h1 span, :root:not([data-theme=dark]) .login-brand h1 span {color: var(--accent);}
.login-brand .eyebrow {color: var(--accent); font-size: 11px; letter-spacing: 2px;}
.login-brand p {font-size: 13px; color: var(--ink-muted);}
.login-fact {border-color: var(--accent-line); color: var(--ink-muted);}
.login-fact strong, :root:not([data-theme=dark]) .login-fact strong {color: var(--ink);}
.preview {border-radius: 13px; background: linear-gradient(145deg, #344675, #1d2b4b);}
.watermark-layer.moving span {animation: drift 12s ease-in-out infinite alternate;}
.codes, .secret, :root:not([data-theme=dark]) .codes, :root:not([data-theme=dark]) .secret {background: var(--surface-raised); border-color: var(--accent-line); color: var(--accent); border-radius: 11px;}
@media (hover: hover) {
  .stat:hover {transform: translateY(-4px); box-shadow: var(--hover-shadow); border-color: color-mix(in srgb, var(--stat-accent) 30%, var(--border));}
  .stat:hover::before {opacity: .7; animation-play-state: running;}
}
@media (min-width: 1700px) {.stats-grid {grid-template-columns: repeat(6, minmax(0, 1fr));}.stat {padding: 20px;}}
@media (max-width: 1180px) {
  .shell {grid-template-columns: 206px minmax(0, 1fr);}
  .sidebar {padding-inline: 13px;}
  .sidebar .brand {padding-inline: 6px;}
  .brand strong {font-size: 16px;}
  .main-content {padding: 27px 25px;}
  .topbar {padding-inline: 25px;}
  .overview-grid {grid-template-columns: 1fr;}
  .overview-grid .quick-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .quick-link {align-items: flex-start; flex-wrap: wrap; padding: 15px;}
  .quick-link>.icon:last-child {margin-top: 8px;}
  .quick-link>div {flex: 1; min-width: 100px;}
  .settings-grid {grid-template-columns: 1fr;}
}
@media (max-width: 860px) {
  .shell {grid-template-columns: 180px minmax(0, 1fr);}
  .sidebar {padding-inline: 10px;}
  .sidebar .brand {gap: 8px; padding-inline: 3px;}
  .brand img {width: 35px; height: 35px; border-radius: 10px;}
  .brand strong {font-size: 14px;}
  .brand small {font-size: 8px; letter-spacing: 0;}
  .nav a {padding-inline: 12px; font-size: 12px; gap: 10px;}
  .page-heading {gap: 12px;}.section-mark {width: 49px; height: 56px; border-radius: 14px;}
  .page-head h1 {font-size: 24px;}.page-head p {max-width: 245px;}
  .stats-grid {gap: 12px;}.stat {padding: 17px;}.stat-label {font-size: 12px;}.stat-label .icon {padding: 6px; width: 17px; height: 17px;}.stat-value {font-size: 30px;}
  .overview-grid .quick-list {grid-template-columns: 1fr;}.quick-link {flex-wrap: nowrap; align-items: center;}
}
@media (max-width: 760px) {
  .shell {display: block;}
  .sidebar {position: relative; height: auto; width: 100%; padding: 15px 17px 10px; border-bottom: 1px solid var(--border); border-right: 0;}
  .sidebar .brand {padding: 0 3px 16px; gap: 10px;}.brand img {width: 36px; height: 36px;}.brand strong {font-size: 16px;}.brand small {font-size: 9px; letter-spacing: .5px;}
  .nav {gap: 7px; padding-bottom: 5px; scrollbar-width: none;}.nav::-webkit-scrollbar {display: none;}
  .nav a, :root:not([data-theme=dark]) .nav a {min-height: 40px; padding: 10px 13px; border-radius: 10px; font-size: 12px; gap: 7px; flex: none;}
  .nav a .icon {width: 16px; height: 16px;}.nav a:hover {transform: none;}
  .nav a[aria-current=page], :root:not([data-theme=dark]) .nav a[aria-current=page] {box-shadow: inset 0 -2px var(--accent);}
  .topbar {height: 61px; padding: 0 18px; gap: 12px;}.account {gap: 8px;}.avatar {width: 29px; height: 29px; border-radius: 9px;}.account .username {display: none;}
  .theme-picker, :root:not([data-theme=dark]) .theme-picker {width: 115px; min-height: 35px; padding: 6px 9px;}
  .account .button {min-height: 35px; padding: 7px 10px; font-size: 11px;}.account .button .icon {width: 15px; height: 15px;}
  .main-content {padding: 24px 18px;}.page-head {margin-bottom: 22px; min-height: 82px; gap: 16px;}.page-heading {gap: 11px;}.section-mark {width: 44px; height: 50px; border-radius: 13px;}.section-mark .icon {width: 22px; height: 22px;}
  .page-index {font-size: 9px; letter-spacing: .3px;}.page-head h1 {font-size: 23px; margin-bottom: 6px;}.page-head p {font-size: 11px; max-width: 215px;}
  .page-tools {gap: 8px;}.page-tools .button {padding: 9px 11px; min-height: 38px;}.page-tools .icon {width: 16px; height: 16px;}
  .stats-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px;}
  .stat {padding: 16px 15px; border-radius: 14px;}.stat-label {font-size: 12px; gap: 5px;}.stat-label .icon {width: 16px; height: 16px; padding: 6px; border-radius: 9px;}.stat-value {font-size: 30px; margin-block: 5px;}.stat-note {font-size: 10px;}
  .overview-grid, .settings-stack {gap: 18px;}.panel {border-radius: 15px;}.panel-head {padding: 19px 18px; gap: 10px;}.panel-head h2 {font-size: 14px; gap: 8px;}.panel-head p {font-size: 10px;}.panel-head>a {font-size: 11px;}.panel-body {padding: 20px 18px;}
  .filters {padding: 15px; gap: 10px;}.filters .search-box {min-width: 100%; max-width: none;}.filters select {width: auto; flex: 1;}.filters .button {min-height: 44px; padding-inline: 21px;}
  .list-count {padding: 4px 8px; font-size: 10px;}.chart-area {padding: 20px 14px;}.chart {height: 200px;}.chart-legend {margin-top: 5px;}
  .definition>div {gap: 14px;}.definition dd {max-width: 62%;}.form-grid {grid-template-columns: 1fr;}.form-grid .span-2 {grid-column: auto;}
  input, select, textarea, :root:not([data-theme=dark]) input, :root:not([data-theme=dark]) select, :root:not([data-theme=dark]) textarea {font-size: 16px; min-height: 46px;}
  .theme-picker, :root:not([data-theme=dark]) .theme-picker {font-size: 12px; min-height: 35px;}.field {margin-bottom: 20px;}.field-label {font-size: 12px;}
  .form-actions {gap: 10px; flex-wrap: wrap;}.form-actions .button {min-height: 44px; flex: 1;}.security-actions .button {min-height: 42px;}
  .pagination {padding: 16px; gap: 12px; align-items: center; flex-wrap: wrap;}.pagination-controls {margin-left: auto;}.pagination-controls .button {min-height: 38px;}
  .empty {padding: 37px 22px 40px;}.empty p {max-width: 270px; font-size: 11px;}
  .modal {padding: 23px 20px; width: 490px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 36px); border-radius: 18px;}.modal-head {padding-bottom: 17px;}.modal-head h2 {font-size: 19px;}.modal .form-actions {padding-top: 18px;}
  .notifications {right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); max-width: calc(100vw - 28px);}.notifications .notice {padding: 12px; font-size: 11px;}
  .login-layout {padding: 27px 20px 40px;}.login-brand {margin-bottom: 25px;}.login-brand h1 {font-size: 33px;}.login-brand .eyebrow {margin-top: 30px;}.login-panel {padding: 25px 22px; border-radius: 19px;}.login-panel h2 {font-size: 23px;}.login-panel .form-actions .button {font-size: 13px; min-height: 46px;}
}
@media (max-width: 600px) {
  .table-scroll {overflow: visible; padding: 12px; outline-offset: -3px;}
  .table-scroll table, .table-scroll tbody {display: block; min-width: 0; width: 100%;}
  .table-scroll thead {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
  .table-scroll tbody {display: grid; gap: 12px;}
  .table-scroll tbody tr {display: block; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden;}
  .table-scroll tbody tr:hover {background: var(--surface);}
  .table-scroll td, :root:not([data-theme=dark]) .table-scroll td {display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 11px 13px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; border: 0; border-bottom: 1px solid var(--border); align-items: start; min-width: 0;}
  .table-scroll td::before {content: attr(data-label); color: var(--ink-muted); font-size: 10px; padding-top: 2px; line-height: 1.8;}
  .table-scroll tr td:first-child {background: var(--surface-raised); border-left: 0; padding-block: 13px;}
  .table-scroll tr td:last-child {border: 0;}.table-scroll .id-cell {max-width: none; min-width: 0;}.table-scroll .badge, .table-scroll .button {justify-self: start;}.table-scroll .button.small {min-height: 36px;}.table-scroll .sub {margin-top: 3px;}
  .card-code-record {min-width: 0; max-width: none;}.card-code {font-size: 11px; line-height: 1.9;}
  .license-device-list {min-width: 0; max-width: none;}.license-device-card {padding: 10px;}.device-facts>div {gap: 8px;}.device-facts dt {width: 31px;}
  .record-description {min-width: 0; max-width: none; font-size: 11px;}
  .entitlement-cell {min-width: 0; max-width: none;}
  .table-scroll .id-cell .mono {white-space: normal; max-width: none; overflow: visible; text-overflow: clip;}
  .page-head {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: center; min-height: 0;}
  .page-heading, .page-heading>div:not(.section-mark) {display: contents;}.page-heading>.section-mark {display: none;}
  .page-index {grid-column: 1 / -1; margin-bottom: 2px;}.page-head h1 {grid-column: 1; margin-bottom: 0;}.page-head p {grid-column: 1 / -1; max-width: none; margin-top: 2px;}
  .page-tools {grid-column: 2; grid-row: 2; margin: 0; align-self: center;}
  .crumb {font-size: 0; gap: 0;}.crumb span, :root:not([data-theme=dark]) .crumb span {font-size: 12px; white-space: nowrap;}.crumb span::before {display: none;}
}
@media (max-width: 370px) {
  .main-content {padding-inline: 14px;}.sidebar {padding-inline: 13px;}.topbar {padding-inline: 14px;}.crumb {font-size: 0; gap: 0;}.crumb span {gap: 7px;}.account {gap: 6px;}.account .avatar {display: none;}
  .stats-grid {gap: 10px;}.stat {padding: 14px 12px;}.stat-label {font-size: 11px;}.stat-label .icon {width: 14px; height: 14px; padding: 5px;}.stat-note {font-size: 9px;}.stat-note::before {margin-right: 5px;}.stat-value {font-size: 28px;}
  .page-head h1 {font-size: 22px;}.page-tools .button {padding-inline: 9px;}.page-tools .icon {display: none;}.page-head p {max-width: 205px;}.pagination-controls {margin: 0; width: 100%; justify-content: space-between;}
  .table-scroll td {grid-template-columns: 73px minmax(0, 1fr); gap: 8px; padding-inline: 11px;}.form-actions .button {padding-inline: 11px;}.login-layout {padding-inline: 14px;}.login-panel {padding-inline: 19px;}
}
@keyframes view-arrive {from {opacity: 0; transform: translateY(8px);} to {opacity: 1; transform: translateY(0);}}
@keyframes stat-arrive {from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);}}
@keyframes modal-arrive {from {opacity: 0; transform: translateY(8px) scale(.98);} to {opacity: 1; transform: translateY(0) scale(1);}}
@keyframes notification-arrive {from {opacity: 0; transform: translateX(15px);} to {opacity: 1; transform: translateX(0);}}
@keyframes chart-arrive {from {opacity: 0;} to {opacity: 1;}}
@keyframes edge-hue {to {filter: hue-rotate(45deg);}}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
  .stat:hover, .button:hover:not(:disabled), .nav a:hover, .quick-link:hover>.icon:last-child {transform: none;}
}
/* Configuration cards and local-file picker. Uiverse / Yaya12085 yellow-goat-62
   dropzone geometry adapted for accessible native controls, no external runtime. */
.configuration-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch;}
.configuration-intro, .configuration-switcher {display: flex; align-items: center; gap: 18px; padding: 24px 26px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(110deg, var(--surface), var(--surface-raised)); box-shadow: var(--shadow);}
.configuration-intro strong, .configuration-switcher strong {display: block; color: var(--ink); font-size: 15px; font-weight: 600;}
.configuration-intro p, .configuration-switcher p {margin: 5px 0 0; color: var(--ink-muted); font-size: 12px;}
.configuration-intro-icon {display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); color: var(--accent);}
.configuration-switcher {justify-content: space-between;}
.configuration-switcher select {width: min(300px, 45%);}
.setting-card {appearance: none; display: flex; flex-direction: column; position: relative; min-width: 0; text-align: left; padding: 25px; color: var(--ink); font: inherit; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; overflow: hidden; transition: transform .22s, box-shadow .22s, border-color .22s; animation: view-arrive .35s ease both;}
.setting-card:nth-child(2) {animation-delay: .05s;}
.setting-card:nth-child(3) {animation-delay: .1s;}
.setting-card::after {content: ''; position: absolute; width: 160px; height: 160px; right: -100px; top: -85px; background: radial-gradient(circle, var(--accent-soft), transparent 70%); pointer-events: none; transition: transform .4s;}
.setting-card:hover {transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--hover-shadow);}
.setting-card:hover::after {transform: scale(2.5);}
.setting-card:focus-visible {outline: 3px solid var(--accent-line); outline-offset: 4px; border-color: var(--accent);}
.setting-card-top {display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 25px;}
.setting-symbol {display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent);}
.setting-symbol .icon {width: 23px; height: 23px;}
.setting-card-status {color: var(--ink-muted); font-size: 10px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; white-space: nowrap;}
.setting-card-title {display: block; font-size: 18px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 9px;}
.setting-card-description {display: block; color: var(--ink-muted); font-size: 12px; line-height: 1.8; margin-bottom: 21px;}
.setting-card-summary {display: block; width: 100%; color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 12px; border-radius: 10px; background: var(--surface-raised); margin-bottom: 25px;}
.setting-card-footer {display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); color: var(--accent); font-size: 12px; font-weight: 500;}
.setting-card-footer .icon {width: 17px; height: 17px; transition: transform .2s;}
.setting-card:hover .setting-card-footer .icon {transform: translateX(4px);}
.configuration-footnote {display: flex; align-items: center; justify-content: center; gap: 8px; margin: 25px 0 0; color: var(--ink-muted); font-size: 11px;}
.configuration-footnote .icon {width: 14px; height: 14px; color: var(--accent);}
.editor-section {margin: 0 0 20px; padding: 19px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised);}
.editor-section h3 {font-size: 12px; letter-spacing: .5px; color: var(--ink-muted); margin: 0 0 20px; font-weight: 500;}
.editor-section>.field:last-child, .editor-section>.form-grid>.field {margin-bottom: 0;}
.editor-section .preview {margin-bottom: 0;}
.editor-counter {display: block; text-align: right; color: var(--ink-muted); margin-top: -10px; font-size: 11px; font-variant-numeric: tabular-nums;}
.agreement-editor {line-height: 1.9; font-size: 13px; min-height: 240px; max-height: 52dvh;}
.editor-disclosure {border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 0 0 16px;}
.editor-disclosure>summary {cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; font-size: 12px; font-weight: 500; color: var(--ink); list-style: none;}
.editor-disclosure>summary::after {content: '+'; color: var(--accent); font-size: 20px; font-weight: 400;}
.editor-disclosure[open]>summary::after {content: '\2212';}
.editor-disclosure>summary::-webkit-details-marker {display: none;}
.editor-disclosure>summary small {margin-left: auto; font-size: 10px; font-weight: 400; color: var(--ink-muted);}
.editor-disclosure[open]>summary {border-bottom: 1px solid var(--border);}
.disclosure-body {padding: 20px;}
.disclosure-body>.field:last-child {margin-bottom: 0;}
.file-picker {margin: 18px 0;}
.file-picker-target {position: relative; min-height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; padding: 23px; border: 1.5px dashed var(--accent-line); border-radius: 14px; background: linear-gradient(140deg, var(--surface-raised), var(--accent-soft)); cursor: pointer; overflow: hidden; transition: border-color .2s, box-shadow .2s, background .2s;}
.file-picker-target:hover, .file-picker-target:focus-within, .file-picker-target.drag-over {border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);}
.file-picker-target.drag-over {background: var(--accent-soft);}
.file-picker-target .file-picker-native {position: absolute; inset: 0; opacity: 0; z-index: 1; width: 100%; height: 100%; cursor: pointer; padding: 0;}
.file-picker-symbol {display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); color: var(--accent); border: 1px solid var(--accent-line); box-shadow: var(--shadow); transition: transform .2s;}
.file-picker-symbol .icon {width: 24px; height: 24px;}
.file-picker-target:hover .file-picker-symbol {transform: translateY(-3px);}
.file-picker-target strong {font-size: 13px; font-weight: 600; text-align: center; max-width: 100%; overflow-wrap: anywhere; color: var(--ink);}
.file-picker-detail {font-size: 11px; color: var(--ink-muted); text-align: center;}
.file-picker-tag {font-size: 9px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 5px; padding: 3px 7px; margin-top: 3px;}
.file-picker progress {display: block; width: 100%; height: 5px; appearance: none; border: 0; border-radius: 8px; margin: 14px 0 8px; background: var(--border); accent-color: var(--accent); overflow: hidden;}
.file-picker progress[hidden] {display: none;}
.file-picker progress::-webkit-progress-bar {background: var(--border);}
.file-picker progress::-webkit-progress-value {background: linear-gradient(90deg, var(--accent), var(--purple)); border-radius: 8px; transition: width .15s;}
.file-picker-actions {display: flex; justify-content: flex-end; margin-top: 10px;}
.file-picker-actions .button {font-size: 10px; min-height: 32px; padding: 7px 10px;}
.file-picker[aria-busy=true] .file-picker-target {cursor: progress; opacity: .8;}
.modal .release-fingerprint {margin-top: 18px;}
.modal .release-fingerprint summary {font-size: 11px; color: var(--ink-muted); cursor: pointer;}
.modal .release-fingerprint .field {margin: 14px 0 0;}
.modal .release-fingerprint input {font-size: 10px; font-family: Consolas, monospace;}
@media(max-width:1100px) {.configuration-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media(max-width:760px) {
  .configuration-grid {grid-template-columns: 1fr; gap: 15px;}
  .setting-card {padding: 22px;}
  .setting-card-top {margin-bottom: 17px;}
  .setting-card-description {margin-bottom: 15px;}
  .setting-card-summary {margin-bottom: 18px;}
  .configuration-intro, .configuration-switcher {padding: 20px; gap: 14px; margin-bottom: 18px; align-items: flex-start;}
  .configuration-switcher {flex-direction: column;}
  .configuration-switcher select {width: 100%;}
  .configuration-intro p {font-size: 11px;}
  .configuration-intro-icon {width: 38px; height: 38px;}
  .editor-section, .disclosure-body {padding: 15px;}
  .editor-section>.form-grid>.field:first-child {margin-bottom: 18px;}
  .editor-disclosure>summary {padding: 15px;}
  .editor-disclosure>summary small {font-size: 9px;}
  .file-picker-target {padding: 20px 15px; min-height: 180px;}
}
@media(prefers-reduced-motion:reduce) {
  .setting-card, .setting-card::after, .setting-card-footer .icon, .file-picker-target, .file-picker-symbol, .file-picker progress::-webkit-progress-value {animation: none !important; transition: none !important;}
  .setting-card:hover, .setting-card:hover::after, .setting-card:hover .setting-card-footer .icon, .file-picker-target:hover .file-picker-symbol {transform: none;}
}
/* Console refresh: spacious layered surfaces, compact status chips and clear
   information hierarchy; extends the MIT card/button/input adaptations above. */
:root {--accent: #7d9bff; --accent-soft: #7d9bff16; --accent-line: #7d9bff38; --surface: #142238; --surface-raised: #1a2a43; --canvas: #0b1423; --border: #2a3c57; --shadow: 0 8px 28px #02081526;}
:root:not([data-theme=dark]) {--accent: #4665d8; --accent-soft: #4665d810; --accent-line: #4665d831; --surface: #fff; --surface-raised: #f3f6fd; --canvas: #eef2f9; --ink: #23334d; --ink-muted: #6f7e96; --border: #dfe6f2; --shadow: 0 7px 24px #324b7c08; --hover-shadow: 0 18px 38px #324b7c15;}
.shell {grid-template-columns: 248px minmax(0, 1fr);}
.sidebar {padding: 31px 20px 24px; background: linear-gradient(178deg, var(--surface) 35%, var(--surface-raised));}
.sidebar .brand {padding-bottom: 38px;}
.brand img {width: 45px; height: 45px; border-radius: 15px; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); box-shadow: 0 5px 14px #496ce615;}
.nav-caption {font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.8px; padding-bottom: 17px;}
.nav {gap: 9px;}
.nav a, :root:not([data-theme=dark]) .nav a {min-height: 49px; border-radius: 12px; padding: 13px 16px; font-size: 12px; border: 1px solid transparent;}
.nav a[aria-current=page], :root:not([data-theme=dark]) .nav a[aria-current=page] {color: #fff; background: linear-gradient(112deg, #4665d8, #647ee7); border-color: #607bdf; box-shadow: 0 6px 15px #4665d829; font-weight: 550;}
.nav a[aria-current=page] .icon {color: #e4ebff;}
.topbar {height: 81px; background: color-mix(in srgb, var(--surface) 92%, transparent);}
.main-content {padding: 30px 34px 34px; max-width: 1680px;}
.main-content::before {height: 250px; opacity: .45;}
.page-head {padding: 24px 27px; margin-bottom: 25px; min-height: 124px; border: 1px solid var(--border); border-radius: 21px; background: linear-gradient(110deg, var(--surface), var(--surface-raised)); box-shadow: var(--shadow); position: relative; overflow: hidden;}
.page-head::after {content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid var(--accent-line); border-radius: 50%; right: 155px; top: -160px; box-shadow: 0 0 0 23px var(--accent-soft); opacity: .5; pointer-events: none;}
.page-head .page-heading, .page-head .page-tools {position: relative; z-index: 1;}
.section-mark {width: 61px; height: 65px; border-radius: 17px; background: var(--surface); box-shadow: 0 5px 13px #4665d80a;}
.page-index, :root:not([data-theme=dark]) .page-index {font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); font-weight: 500;}
.page-head h1 {font-size: 26px; letter-spacing: -.8px;}
.page-head p {font-size: 12px; max-width: 590px; line-height: 1.7;}
.panel {box-shadow: var(--shadow); border-radius: 18px;}
.panel-head {padding: 23px 25px; background: linear-gradient(105deg, var(--surface), var(--surface-raised));}
.panel-head h2 {font-size: 16px; font-weight: 600; letter-spacing: -.3px;}
.panel-head p {font-size: 11px; margin-top: 5px;}
.list-count {display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums;}
.filters {padding: 17px 24px; background: var(--surface); gap: 10px;}
.filters input, .filters select {background-color: var(--surface-raised); border-color: transparent; min-height: 43px;}
.filters input:focus, .filters select:focus {border-color: var(--accent-line); background-color: var(--surface);}
.stat {padding: 22px 24px 23px; border-radius: 18px; background: linear-gradient(135deg, var(--surface), var(--surface) 60%, var(--stat-tint));}
.stat-label {font-size: 12px;}
.stat-label>.icon {width: 31px; height: 31px; padding: 7px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); opacity: 1; color: var(--stat-accent);}
.stat-value {font-size: 39px; font-weight: 600; letter-spacing: -1.5px; margin: 16px 0 7px; line-height: 1.3;}
.stat-note {font-size: 10px;}
.stat::after {width: 27px; height: 3px; border-radius: 8px; opacity: .6; left: 24px; bottom: 0;}
.configuration-grid {gap: 23px;}
.setting-card {padding: 0 25px 23px; min-height: 300px;}
.setting-card-top {position: relative; padding: 26px 0 23px; margin-bottom: 22px;}
.setting-card-top::before {content: ''; position: absolute; inset: 0 -25px; z-index: 0; background: linear-gradient(120deg, var(--accent-soft), var(--surface-raised)); border-bottom: 1px solid var(--accent-line);}
.setting-card-top>* {position: relative; z-index: 1;}
.setting-symbol {width: 49px; height: 49px; border-radius: 15px; background: var(--surface); box-shadow: 0 5px 12px #4665d80d;}
.setting-card:nth-child(2) .setting-card-top::before {background: linear-gradient(120deg, #27988712, var(--surface-raised));}
.setting-card:nth-child(2) .setting-symbol {color: #279887; border-color: #27988730;}
.setting-card:nth-child(3) .setting-card-top::before {background: linear-gradient(120deg, #9470d914, var(--surface-raised));}
.setting-card:nth-child(3) .setting-symbol {color: #9470d9; border-color: #9470d930;}
.setting-card-title {font-size: 19px; letter-spacing: -.5px;}
.setting-card-description {margin-bottom: 18px;}
.setting-card-summary {padding: 12px 13px; font-size: 11px; border: 1px solid var(--border); background: var(--surface-raised);}
.setting-card-footer {font-size: 11px;}
.setting-card:hover {transform: translateY(-5px);}
.version-overview {position: relative; display: flex; align-items: center; gap: 21px; border: 1px solid var(--accent-line); border-radius: 18px; background: linear-gradient(112deg, var(--accent-soft), var(--surface) 70%); padding: 23px 25px; margin-bottom: 25px; box-shadow: var(--shadow);}
.version-overview-icon {display: grid; place-items: center; width: 51px; height: 55px; border-radius: 15px; background: var(--surface); color: var(--accent); border: 1px solid var(--accent-line); flex: none;}
.version-overview-icon .icon {width: 26px; height: 26px;}
.version-overview-label {display: block; font-size: 11px; color: var(--ink-muted); margin-bottom: 5px;}
.version-overview strong {display: block; font-size: 26px; color: var(--ink); font-weight: 600; letter-spacing: -.7px;}
.version-overview p {font-size: 11px; color: var(--ink-muted); margin: 5px 0 0;}
.version-overview-tag {margin-left: auto; font-size: 10px; white-space: nowrap; border: 1px solid var(--accent-line); color: var(--accent); border-radius: 7px; padding: 6px 9px; background: var(--surface);}
.installed-version-strip {display: flex; align-items: center; gap: 15px; padding: 16px 19px; margin-bottom: 20px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft);}
.installed-version-strip>.icon {color: var(--accent); width: 26px; height: 26px; flex: none;}
.installed-version-strip small {display: block; color: var(--ink-muted); font-size: 10px; margin-bottom: 4px;}
.installed-version-strip strong {font-size: 18px; font-weight: 600; margin-right: 12px;}
.installed-version-strip span {color: var(--ink-muted); font-size: 11px;}
.download-mode-hint {font-size: 11px; line-height: 1.8; color: var(--ink-muted); padding: 12px 13px; border-left: 2px solid var(--accent-line); background: var(--surface); border-radius: 0 8px 8px 0; margin: 16px 0 0;}
.record-description {max-width: 510px; min-width: 170px; line-height: 1.8;}
.event-label {display: inline-flex; align-items: center; gap: 9px; font-weight: 500;}
.event-label .icon {width: 30px; height: 30px; padding: 7px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 9px; background: var(--accent-soft);}
@media(min-width:1500px) {.stat {padding: 22px 18px;} .stat-value {font-size: 34px;} .stat-label>.icon {width: 27px; height: 27px; padding: 6px;}}
@media(max-width:1150px) {.shell {grid-template-columns: 210px minmax(0,1fr);} .sidebar {padding-right: 15px; padding-left: 15px;} .main-content {padding: 26px 24px;} .page-head {padding: 22px;} .configuration-grid {gap: 18px;}}
@media(max-width:760px) {
  .shell {display: block;} .sidebar {padding: 17px 16px; background: var(--surface);} .sidebar .brand {padding-bottom: 18px;}
  .nav {gap: 7px;} .nav a, :root:not([data-theme=dark]) .nav a {min-height: 40px; padding: 9px 12px; font-size: 11px;}
  .topbar {height: 60px;} .main-content {padding: 20px 15px;}
  .page-head {min-height: 110px; padding: 19px; gap: 12px; align-items: flex-start; border-radius: 17px; flex-wrap: wrap;}
  .page-heading {gap: 13px;} .section-mark {width: 45px; height: 50px; border-radius: 13px;} .section-mark .icon {width: 22px; height: 22px;}
  .page-head h1 {font-size: 23px;} .page-head p {font-size: 10px; max-width: 260px;} .page-head .page-tools {width: 100%; justify-content: flex-end;}
  .page-index, :root:not([data-theme=dark]) .page-index {font-size: 8px; letter-spacing: .8px;}
  .panel-head {padding: 20px 17px;} .panel-head p {max-width: 230px; font-size: 10px;} .list-count {font-size: 10px; padding: 5px 7px;}
  .stat {padding: 18px 16px;} .stat-value {font-size: 32px;} .stat-label>.icon {width: 26px; height: 26px; padding: 6px;} .stat-label {font-size: 10px;}
  .configuration-grid {gap: 16px;} .setting-card {padding: 0 22px 22px; min-height: 280px;} .setting-card-top {padding-top: 23px;} .setting-card-top::before {inset: 0 -22px;}
  .version-overview {gap: 14px; padding: 20px; flex-wrap: wrap;} .version-overview-tag {margin-left: 65px;} .version-overview strong {font-size: 23px;} .version-overview p {font-size: 10px;} .version-overview-icon {width: 45px; height: 49px;}
  .installed-version-strip {padding: 15px; gap: 12px;} .installed-version-strip span {display: block; margin-top: 4px;}
}
@media(prefers-reduced-motion:reduce) {.setting-card:hover {transform: none;} .page-head::after {animation: none;}}