/* One palette for the account, dashboard, admin and public pages. */
.remember-browser{display:flex;align-items:center;gap:10px;margin:18px 0 22px;font-size:14px;line-height:1.5;color:var(--app-muted);cursor:pointer}
html[data-theme] .remember-browser input[type=checkbox]{appearance:auto;width:18px;height:18px;padding:0;margin:0;flex:0 0 18px;accent-color:var(--app-primary)}
/* Graphite and porcelain: shared design tokens, independent of RouterOS styling. */
:root,html[data-theme="dark"]{
 color-scheme:dark;
 --app-bg:#111318;--app-surface:#1b1e26;--app-raised:#252934;--app-input:#151820;
 --app-text:#edf0f7;--app-muted:#a0a8ba;--app-border:#343a49;
 --app-primary:#a5adff;--app-primary-strong:#6358df;--app-primary-soft:#c5caff;
 --app-success:#65d995;--app-success-strong:#187443;--app-danger:#ff8e9d;--app-warning:#efc17b;
 --app-shadow:0 10px 28px #00000024;--app-accent-rgb:165,173,255;
 --app-sidebar:#0b0d12;--app-sidebar-edge:#292d38;--app-sidebar-shadow:5px 0 24px #00000020;
 --app-selected:#282442;--app-selected-text:#d3d0ff;
 --app-radius:14px;
}
html[data-theme="light"]{
 color-scheme:light;
 --app-bg:#f3f4f8;--app-surface:#ffffff;--app-raised:#eceef5;--app-input:#fafbfe;
 --app-text:#202334;--app-muted:#626a7e;--app-border:#d9ddea;
 --app-primary:#5145b9;--app-primary-strong:#5545cc;--app-primary-soft:#6e62d4;
 --app-success:#187443;--app-success-strong:#187443;--app-danger:#bd304a;--app-warning:#916018;
 --app-shadow:0 6px 24px #23234408;--app-accent-rgb:81,69,185;
 --app-sidebar:#e8eaf2;--app-sidebar-edge:#d0d5e4;--app-sidebar-shadow:4px 0 22px #20233405;
 --app-selected:#dad6f6;--app-selected-text:#3c3191;
 --app-radius:14px;
}
html[data-theme]{
 --primary:var(--app-primary);--primary-dark:var(--app-primary-strong);--primary-light:var(--app-primary-soft);--primary-color:var(--app-primary);
 --primary-glow:color-mix(in srgb,var(--app-primary) 20%,transparent);
 --bg-darkest:var(--app-bg);--bg-dark:var(--app-surface);--bg-card:var(--app-surface);--bg-card-hover:var(--app-raised);--bg-input:var(--app-input);
 --bg-primary:var(--app-bg);--bg-secondary:var(--app-surface);--bg-tertiary:var(--app-raised);
 --dark:var(--app-bg);--dark-light:var(--app-surface);--dark-card:var(--app-surface);--dark-border:var(--app-border);
 --text-primary:var(--app-text);--text-secondary:var(--app-muted);--text-muted:var(--app-muted);--text-color:var(--app-text);
 --border-color:var(--app-border);--border-light:var(--app-border);--success:var(--app-success);--danger:var(--app-danger);--warning:var(--app-warning);--info:var(--app-primary);
 --ink:var(--app-text);--muted:var(--app-muted);--blue:var(--app-primary);--line:var(--app-border);--paper:var(--app-bg);--navy:var(--app-surface);
}
html[data-theme] body{background:var(--app-bg);color:var(--app-text);padding-bottom:0}
html[data-theme] .sidebar,html[data-theme] .sidebar-header{background:var(--app-sidebar);color:var(--app-text);border-color:var(--app-border)}
html[data-theme] .sidebar{border-right:1px solid var(--app-sidebar-edge);box-shadow:var(--app-sidebar-shadow)}
html[data-theme] .sidebar-footer{border-color:var(--app-sidebar-edge)}
html[data-theme] .sidebar .user-card{background:var(--app-input)}
html[data-theme] .sidebar .user-role{color:var(--app-muted)}
html[data-theme] .sidebar a,html[data-theme] .sidebar .nav-link,html[data-theme] .sidebar .nav-item{color:var(--app-muted)}
html[data-theme] .sidebar a.active,html[data-theme] .sidebar a:hover{color:var(--app-selected-text);background:var(--app-selected)}
html[data-theme] .main-header,html[data-theme] .header,html[data-theme] .surface{background:var(--app-surface);color:var(--app-text);border-color:var(--app-border)}
html[data-theme] .surface,html[data-theme] .price-card,html[data-theme] .price-card.featured{background:var(--app-surface)}
html[data-theme] .price-card.featured{border-color:var(--app-primary)}
html[data-theme] .button,html[data-theme] .btn-primary{background:var(--app-primary-strong);border-color:var(--app-primary-strong);color:#fff}
html[data-theme] .button.secondary,html[data-theme] .btn-secondary{background:var(--app-raised);color:var(--app-text);border-color:var(--app-border)}
html[data-theme] .form-stack input,html[data-theme] textarea,html[data-theme] .form-control,html[data-theme] select{background:var(--app-input);color:var(--app-text);border-color:var(--app-border)}
html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--app-muted)}
html[data-theme] .notice{background:color-mix(in srgb,var(--app-warning) 12%,var(--app-surface));color:var(--app-warning);border-color:var(--app-warning)}
html[data-theme] .theme-preview.dark{background:#111318!important;color:#edf0f7!important}
html[data-theme] .theme-preview.light{background:#fff!important;color:#202334!important}
html[data-theme] .product-preview{transform:none;background:#101e34;color:#e4ecfc}
html[data-theme] .product-preview .preview-stats strong{color:#e4ecfc}
html[data-theme] .cta{background:var(--app-surface);color:var(--app-text);border:1px solid var(--app-border)}
html[data-theme] .cta p{color:var(--app-muted)}



html[data-theme] body{padding-bottom:0}
html[data-theme] .product-preview{background:var(--app-surface);color:var(--app-text);border-color:var(--app-border)}
html[data-theme] .product-preview .preview-stats strong{color:var(--app-text)}
html[data-theme] .preview-title span,html[data-theme] .preview-kicker,html[data-theme] .preview-stats span,html[data-theme] .preview-table th,html[data-theme] .preview-table td:last-child,html[data-theme] .preview-bottom,html[data-theme] .preview-note{color:var(--app-muted)}
html[data-theme] .preview-title,html[data-theme] .preview-stats div,html[data-theme] .preview-table td{border-color:var(--app-border)}
html[data-theme] .preview-heading span{background:var(--app-raised);color:var(--app-primary)}
html[data-theme] .online{color:var(--app-success)}
html[data-theme] .logo-mark{background:var(--app-primary-strong);color:#fff}
html[data-theme] .alert-success{color:var(--app-success);background:color-mix(in srgb,var(--app-success) 10%,var(--app-surface))}
html[data-theme] .alert-danger{color:var(--app-danger);background:color-mix(in srgb,var(--app-danger) 10%,var(--app-surface))}
html[data-theme] .alert-warning{color:var(--app-warning);background:color-mix(in srgb,var(--app-warning) 10%,var(--app-surface))}
html[data-theme] .alert-info{color:var(--app-primary);background:color-mix(in srgb,var(--app-primary) 10%,var(--app-surface))}
.mkm-theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.mkm-theme-option{position:relative;display:flex;flex-direction:column;gap:9px;padding:13px;border:2px solid var(--app-border);border-radius:12px;cursor:pointer;background:var(--app-surface)}
.mkm-theme-option:has(input:checked){border-color:var(--app-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-primary) 18%,transparent)}
.mkm-theme-option input[type=radio]{display:block!important;position:absolute;right:18px;top:18px;width:18px;height:18px;z-index:1;accent-color:var(--app-primary)}
.mkm-theme-option strong{font-size:15px;color:var(--app-text)}.mkm-theme-option small{font-size:13px;color:var(--app-muted)}
.mkm-theme-sample{height:105px;background:var(--sample-bg);border-radius:7px;padding:13px 13px 13px 39px;position:relative;display:grid;gap:8px;grid-template-columns:1fr 1fr}
.mkm-theme-sample>span{position:absolute;left:8px;top:8px;bottom:8px;width:20px;background:var(--sample-surface);border-left:3px solid var(--sample-accent);border-radius:4px}
.mkm-theme-sample>i{grid-column:1/-1;background:var(--sample-accent);height:8px;margin:4px 20px 0 0;border-radius:3px}
.mkm-theme-sample>b{grid-column:1/-1;background:var(--sample-surface);border:1px solid var(--sample-accent);height:47px;border-radius:5px}

/* Component treatment: clean surfaces, quiet borders and deliberate active states. */
html[data-theme]{--border-radius:14px;--border-radius-sm:8px}
html[data-theme] body{font-family:Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.01em}
html[data-theme] .main-header{box-shadow:none;border-bottom:1px solid var(--app-border)}
html[data-theme] h1,html[data-theme] h2,html[data-theme] h3{letter-spacing:-.035em}
html[data-theme] .card,html[data-theme] .stat-card,html[data-theme] .mikrotik-card,html[data-theme] .wan-card,html[data-theme] .bridge-card,html[data-theme] .tab-content,html[data-theme] .device-header{background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow)}
html[data-theme] .card-header,html[data-theme] .tab-header,html[data-theme] .wan-card-header,html[data-theme] .bridge-card-header{background:transparent;border-bottom:1px solid var(--app-border)}
html[data-theme] .sidebar-header{border-bottom:1px solid var(--app-sidebar-edge)}
html[data-theme] .sidebar .nav-item{border-radius:9px;transition:background .15s,color .15s}
html[data-theme] .sidebar .nav-item.active{background:var(--app-selected);color:var(--app-selected-text);border-left:0;box-shadow:inset 3px 0 var(--app-primary)}
html[data-theme] .sidebar .nav-item i{color:inherit}
html[data-theme] .sidebar .nav-section-title{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--app-muted)}
html[data-theme] .sidebar-logo,html[data-theme] .logo-mark,html[data-theme] .device-icon{background:var(--app-selected);color:var(--app-primary);border-radius:12px;box-shadow:none}
html[data-theme] .btn,html[data-theme] .button{border-radius:8px;font-weight:600;transition:background .15s,border-color .15s,box-shadow .15s;box-shadow:none}
html[data-theme] .btn-primary:hover,html[data-theme] .button:not(.secondary):hover{background:color-mix(in srgb,var(--app-primary-strong) 88%,#000);border-color:var(--app-primary-strong)}
html[data-theme] .btn-info{background:var(--app-selected);border-color:var(--app-border);color:var(--app-selected-text)}
html[data-theme] .btn-success{background:var(--app-success-strong)!important;border-color:var(--app-success-strong)!important;color:#fff}
html[data-theme] .btn-success:hover{background:color-mix(in srgb,var(--app-success-strong) 85%,#000)!important}
html[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),html[data-theme] select,html[data-theme] textarea{background:var(--app-input);color:var(--app-text);border-color:var(--app-border);border-radius:8px}
html[data-theme] input:focus,html[data-theme] select:focus,html[data-theme] textarea:focus{outline:2px solid color-mix(in srgb,var(--app-primary) 45%,transparent);outline-offset:1px;border-color:var(--app-primary)}
html[data-theme] :focus-visible{outline:2px solid var(--app-primary);outline-offset:3px}
html[data-theme] .data-table thead,html[data-theme] .data-table th{background:var(--app-raised);color:var(--app-muted);font-size:11px;letter-spacing:.06em}
html[data-theme] .data-table td{border-color:var(--app-border)}
html[data-theme] .data-table tbody tr:hover{background:color-mix(in srgb,var(--app-primary) 6%,var(--app-surface))}
html[data-theme] .modal,html[data-theme] .modal-content,html[data-theme] .vpn-modal{background:var(--app-surface);color:var(--app-text);border:1px solid var(--app-border);border-radius:16px}
html[data-theme] .alert{border-radius:10px;box-shadow:none}
html[data-theme] .theme-preview{border-radius:12px}
html[data-theme] .online,html[data-theme] .connection-status.online{color:var(--app-success);background:color-mix(in srgb,var(--app-success) 9%,transparent)}
html[data-theme] .badge-success,html[data-theme] .badge-online{color:var(--app-success);background:color-mix(in srgb,var(--app-success) 12%,var(--app-surface));border-color:color-mix(in srgb,var(--app-success) 35%,var(--app-border))}
html[data-theme] .text-success{color:var(--app-success)}
html[data-theme] .auth-login .logo-icon{background:var(--app-primary-strong);box-shadow:0 8px 24px color-mix(in srgb,var(--app-primary) 15%,transparent)}
html[data-theme] .auth-login .btn-primary{background:var(--app-primary-strong);border-color:var(--app-primary-strong)}
@media(prefers-reduced-motion:reduce){html[data-theme] *{transition:none!important;scroll-behavior:auto!important}}