:root {color-scheme:light;--bg:#F3F6FA;--surface:#fff;--text:#0B1220;--muted:#52647a;--border:#d5dfe9;--hover:#edf4f6;--accent:#087f73;--accent-hover:#06665d;--tint:#e0f4ef;}
.dark {color-scheme:dark;--bg:#0B1220;--surface:#131F30;--text:#F3F6FA;--muted:#a4b3c6;--border:#29394d;--hover:#1b2b40;--accent:#2DD4BF;--accent-hover:#5eead4;--tint:#153c3b;}

        *, *::before, *::after { box-sizing: border-box; }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
        }

        /* ── Layout ── */
        .dash-shell {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* ── Sidebar ── */
        .dash-sidebar {
            width: 240px;
            min-width: 240px;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .dash-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 18px 20px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .dash-brand-icon {
            width: 34px; height: 34px;
            background: var(--accent);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; color: #fff;
            flex-shrink: 0;
        }
        .dash-brand-name {
            font-size: 15px; font-weight: 700; color: var(--text);
        }

        .dash-nav {
            flex: 1;
            overflow-y: auto;
            padding: 12px 10px;
        }
        .dash-nav::-webkit-scrollbar { width: 4px; }
        .dash-nav::-webkit-scrollbar-track { background: transparent; }
        .dash-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        .nav-section {
            padding: 14px 10px 4px;
            font-size: 10px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .nav-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 13.5px;
            font-weight: 500;
            color: var(--muted);
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
            margin-bottom: 1px;
        }
        .nav-link i { width: 16px; text-align: center; font-size: 13px; }
        .nav-link:hover { background: var(--border); color: var(--text); }
        .nav-link.active { background: var(--tint); color: var(--accent); }

        .dash-user {
            border-top: 1px solid var(--border);
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .dash-avatar {
            width: 30px; height: 30px;
            background: var(--accent);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700; color: #fff;
            flex-shrink: 0;
        }
        .dash-username { font-size: 13px; font-weight: 500; color: var(--text); }
        .dash-role { font-size: 11px; color: var(--muted); }
        .dash-logout {
            margin-left: auto;
            color: var(--muted);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.15s;
        }
        .dash-logout:hover { color: #f85149; }

        /* ── Main ── */
        .dash-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-width: 0;
        }
        .dash-topbar {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        .dash-topbar-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
        }
        .dash-topbar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .dash-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            background: var(--bg);
        }
        .dash-content::-webkit-scrollbar { width: 6px; }
        .dash-content::-webkit-scrollbar-track { background: transparent; }
        .dash-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        /* ── Alerts ── */
        .dash-alerts { padding: 16px 24px 0; display: flex; flex-direction: column; gap: 8px; }
        .dash-alert {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; border-radius: 6px; font-size: 13.5px;
        }
        .dash-alert-success { background: #0f2a1a; border: 1px solid #1a4731; color: #3fb950; }
        .dash-alert-error   { background: #2a0f0f; border: 1px solid #471a1a; color: #f85149; }
        .dash-alert-info    { background: #0f1d2a; border: 1px solid #1a3047; color: var(--accent); }

        /* ── CheckboxSelectMultiple Widget ───────────────────── */
        .dash-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .dash-card li {
            margin: 0;
        }
        .dash-card input[type="checkbox"] {
            margin: 0 !important;
            width: auto !important;
        }

        /* ── Buttons ── */
        .btn-primary {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--accent); color: #fff;
            font-size: 13px; font-weight: 600;
            padding: 7px 14px; border-radius: 6px;
            text-decoration: none; border: none; cursor: pointer;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--accent-hover); color: #fff; }
        .btn-secondary {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--border); color: var(--text);
            font-size: 13px; font-weight: 500;
            padding: 7px 14px; border-radius: 6px;
            text-decoration: none; border: 1px solid var(--border); cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .btn-secondary:hover { background: var(--border); color: var(--text); border-color: var(--muted); }
        .btn-danger {
            display: inline-flex; align-items: center; gap: 6px;
            background: #da3633; color: #fff;
            font-size: 13px; font-weight: 600;
            padding: 7px 14px; border-radius: 6px;
            text-decoration: none; border: none; cursor: pointer;
            transition: background 0.15s;
        }
        .btn-danger:hover { background: #b91c1c; }

        /* ── Cards / Panels ── */
        .dash-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 20px;
        }
        .dash-card-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 16px; }

        /* ── Table ── */
        .dash-table-wrap {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
        }
        .dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
        .dash-table thead tr { border-bottom: 1px solid var(--border); }
        .dash-table thead th {
            text-align: left; padding: 11px 16px;
            font-size: 11px; font-weight: 600;
            color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
        }
        .dash-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
        .dash-table tbody tr:last-child { border-bottom: none; }
        .dash-table tbody tr:hover { background: var(--hover); }
        .dash-table td { padding: 12px 16px; color: var(--text); vertical-align: middle; }
        .dash-table td.td-main { color: var(--text); font-weight: 500; }
        .dash-table .td-actions { text-align: right; }
        .dash-table .td-actions a { color: var(--muted); font-size: 14px; margin-left: 12px; text-decoration: none; transition: color 0.15s; }
        .dash-table .td-actions a.edit:hover { color: var(--accent); }
        .dash-table .td-actions a.view:hover { color: var(--accent); }
        .dash-table .td-actions a.delete:hover { color: #f85149; }

        .dash-empty {
            padding: 48px 16px; text-align: center; color: var(--muted);
        }
        .dash-empty i { font-size: 28px; display: block; margin-bottom: 10px; opacity: 0.4; }

        /* ── Badges ── */
        .badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 99px; }
        .badge-published { background: #0f2a1a; color: #3fb950; }
        .badge-draft     { background: #1c1917; color: #a8a29e; }
        .badge-archived  { background: var(--tint); color: var(--accent); }

        /* ── Forms ── */
        .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 5px; }
        .form-label .req { color: #f85149; }
        .form-control {
            width: 100%; background: var(--bg);
            border: 1px solid var(--border); color: var(--text);
            border-radius: 6px; padding: 8px 12px; font-size: 13.5px;
            outline: none; transition: border-color 0.15s, box-shadow 0.15s;
            font-family: inherit;
        }
        .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }
        .form-control option { background: var(--surface); }
        textarea.form-control { resize: vertical; }
        .form-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
        .form-error { font-size: 11.5px; color: #f85149; margin-bottom: 4px; }

        /* ── Search / Filter bar ── */
        .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
        .filter-bar .search-wrap { position: relative; flex: 1; min-width: 200px; }
        .filter-bar .search-wrap i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; }
        .filter-bar input[type="text"] {
            width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
            border-radius: 6px; padding: 7px 12px 7px 32px; font-size: 13px;
            outline: none; transition: border-color 0.15s;
        }
        .filter-bar input[type="text"]:focus { border-color: var(--accent); }
        .filter-bar select {
            background: var(--surface); border: 1px solid var(--border); color: var(--text);
            border-radius: 6px; padding: 7px 12px; font-size: 13px; outline: none;
            transition: border-color 0.15s; cursor: pointer;
        }
        .filter-bar select:focus { border-color: var(--accent); }
    
button,input,select,textarea {font:inherit;} a,button,input,select,textarea {touch-action:manipulation;}
:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
.btn-primary,.dash-brand-icon,.dash-avatar {color:var(--bg);}
.btn-primary:hover {color:var(--bg);} .btn-primary,.btn-secondary,.btn-danger {min-height:40px;border-radius:10px;}
.dash-brand-name {letter-spacing:-.04em;} .dash-brand-icon {font-family:monospace;}
.dash-card,.dash-table-wrap {border-radius:14px;} .dash-card {min-width:0;}
.dash-content {padding:32px;overflow-x:hidden;} .dash-content>form,.dash-content>div {max-width:1240px;margin-left:auto;margin-right:auto;}
.dash-table-wrap {overflow-x:auto;} .dash-table {min-width:600px;} .td-actions {white-space:nowrap;}
.dash-table .td-actions a {display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:2px;}
.dash-topbar-title {overflow-wrap:anywhere;} .dash-topbar {gap:12px;} .dash-topbar-actions {flex-wrap:wrap;justify-content:flex-end;}
.dash-logout {background:none;border:0;padding:8px;cursor:pointer;} .dash-user form {margin-left:auto;}
input[type=checkbox] {accent-color:var(--accent);width:18px;height:18px;} input[type=file] {max-width:100%;font-size:12px;}
.form-control {min-height:42px;border-radius:9px;} .form-label {color:var(--text);} .form-hint {line-height:1.6;font-size:12px;}
.form-error {font-size:13px;} .dash-content a {overflow-wrap:anywhere;} .dash-content img {max-width:100%;}
.dash-card label:has(input[type=checkbox]) {display:flex;gap:8px;align-items:center;padding:5px 0;}
.dash-form-grid {display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;}
.dash-recent-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.dash-stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:28px;}
.stat-card {background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;text-decoration:none;display:block;}
.stat-card:hover {border-color:var(--accent);} .stat-icon {color:var(--accent);margin-bottom:18px;}
.stat-num {font-size:30px;font-weight:700;color:var(--text);} .stat-label {font-size:14px;color:var(--text);margin:6px 0;} .stat-sub {font-size:12px;color:var(--muted);}
.dash-intro {margin-bottom:24px;} .dash-intro h1 {font-size:26px;font-weight:700;letter-spacing:-.04em;} .dash-intro p {color:var(--muted);margin-top:6px;}
.dash-menu-toggle {display:none;} .dash-backdrop {display:none;} .dash-theme-toggle {min-width:40px;}
.tox-tinymce {max-width:100%;} .filter-bar input,.filter-bar select {min-height:40px;}
.login-page {min-height:100vh;display:grid;place-items:center;padding:24px;} .login-wrap {width:100%;max-width:420px;} .login-brand {margin-bottom:24px;}
.login-brand h1 {font-size:26px;font-weight:700;margin:12px 0;} .login-brand p,.login-back {color:var(--muted);} .login-card {padding:28px;}
.login-back {margin-top:20px;display:flex;justify-content:space-between;align-items:center;} .login-card .field {margin-bottom:20px;}
@media(max-width:1000px) {.dash-form-grid,.dash-recent-grid {grid-template-columns:minmax(0,1fr);} .dash-content {padding:20px;}}
@media(max-width:767px) {.dash-sidebar {position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);visibility:hidden;} .dash-sidebar.is-open {transform:none;visibility:visible;}
.dash-backdrop.is-open {display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30;} .dash-menu-toggle {display:inline-flex;}
.dash-topbar {padding:12px;flex-wrap:wrap;} .dash-topbar-title {flex:1;min-width:130px;} .dash-topbar-actions {width:100%;justify-content:flex-start;} .dash-content {padding:16px;}
.dash-alerts {padding:12px;} .dash-stats {grid-template-columns:1fr 1fr;gap:10px;} .stat-card {padding:14px;} .dash-card {padding:16px;} .filter-bar .search-wrap {min-width:0;flex-basis:100%;}
.dash-shell {height:100dvh;} }
@media(prefers-reduced-motion:reduce) {* {transition:none!important;scroll-behavior:auto!important;}}

.skip-link {position:fixed;top:-100px;left:12px;z-index:100;background:var(--surface);color:var(--text);padding:12px;border-radius:8px;} .skip-link:focus {top:12px;}

.dash-text {color:var(--text);} .dash-muted {color:var(--muted);}

.stat-icon {width:36px;height:36px;border-radius:10px;background:var(--tint);display:flex;align-items:center;justify-content:center;}
:root {--success-bg:#e0f4e7;--success-text:#21633b;--draft-bg:#edf0f4;--draft-text:#52647a;} .dark {--success-bg:#17382b;--success-text:#6ee7a0;--draft-bg:#263344;--draft-text:#c1ccda;}
.badge-published {background:var(--success-bg);color:var(--success-text);} .badge-draft {background:var(--draft-bg);color:var(--draft-text);} .dash-alert-success {background:var(--success-bg);color:var(--success-text);border-color:var(--border);}

.dark .btn-secondary {background:var(--surface);color:var(--text);border-color:var(--border);} .dark .btn-primary {background:var(--accent);color:var(--bg);} .btn-secondary:hover,.dark .btn-secondary:hover {background:var(--hover);color:var(--text);}