:root {
    color-scheme: light dark;
    --bg: #f7f5f5;
    --card: #ffffff;
    --text: #16161f;
    --muted: #6b6b7c;
    --border: #ecdede;

    /* Spider-Man: đỏ chủ đạo, xanh navy làm phụ (đúng 2 màu bộ đồ nhện) */
    --accent: #e0221c;
    --accent-dark: #a3130f;
    --accent-bg: #fde6e4;
    --spidey-blue: #1d3f8f;
    --spidey-blue-dark: #142d68;

    /* Sidebar/thanh điều hướng dưới luôn là "vỏ" tối đỏ-đen kiểu hero-shell,
       không đổi theo theme sáng/tối của phần nội dung — cho cảm giác thương
       hiệu rõ và tương phản mạnh hơn hẳn 1 bảng màu đơn. */
    --sidebar: linear-gradient(165deg, #2a0c0a 0%, #1c0f10 55%, #120a0b 100%);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.07);
    --sidebar-active-bg: rgba(224, 34, 28, 0.28);
    --sidebar-active-text: #ff6a5b;

    --amber: #f5a524;
    --amber-bg: #fff2e0;
    --blue: #1d5fd6;
    --blue-bg: #e6edfc;
    --violet: #8b5cf6;
    --violet-bg: #f3e9ff;
    --red: #e0221c;
    --red-bg: #fde6e4;
    --green: #16a34a;
    --green-bg: #e7f7ee;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 8px 24px rgba(20, 20, 40, 0.03);

    --font-display: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Hoạ tiết mạng nhện góc thật hơn: nan toả từ tâm + các vòng tơ nối THẲNG
       giữa các nan (đúng cấu trúc tơ nhện orb-weaver thật, không phải vòng
       tròn đều), bán kính mỗi điểm lệch nhẹ cho tự nhiên, mờ dần ra ngoài rìa,
       thêm vài chấm sáng nhỏ như giọt sương đọng. Độ mờ nằm sẵn trong SVG,
       dùng trên nền tối (sidebar/splash/bottom-nav), không đổi theo theme. */
    --web-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ff6a5b' stroke-width='1.15' stroke-linecap='round' opacity='0.55'%3E%3Cline x1='0' y1='0' x2='195' y2='0'/%3E%3Cline x1='0' y1='0' x2='188.4' y2='50.5'/%3E%3Cline x1='0' y1='0' x2='168.9' y2='97.5'/%3E%3Cline x1='0' y1='0' x2='137.9' y2='137.9'/%3E%3Cline x1='0' y1='0' x2='97.5' y2='168.9'/%3E%3Cline x1='0' y1='0' x2='50.5' y2='188.4'/%3E%3Cline x1='0' y1='0' x2='0' y2='195'/%3E%3Cpolyline points='30,0 32.8,8.8 25.1,14.5 23.3,23.3 15,26 9.1,33.8 0,28'/%3E%3Cpolyline points='64,0 58,15.5 58,33.5 43.8,43.8 32.5,56.3 15.3,57 0,66'/%3E%3Cpolyline points='98,0 99.5,26.7 83.1,48 71.4,71.4 48.5,84 26.9,100.5 0,95'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff6a5b' stroke-width='1.05' stroke-linecap='round' opacity='0.34'%3E%3Cpolyline points='138,0 128.5,34.4 121.2,70 95.5,95.5 69.5,120.4 34.2,127.5 0,141'/%3E%3Cpolyline points='178,0 175.8,47.1 151.6,87.5 127.3,127.3 88.5,153.3 47.4,176.7 0,174'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='83.1' cy='48' r='1.8' opacity='0.9'/%3E%3Ccircle cx='58' cy='33.5' r='1.3' opacity='0.7'/%3E%3Ccircle cx='121.2' cy='70' r='1.4' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");

    /* Mạng nhện toả tròn đều quanh tâm — dùng riêng cho màn intro (logo nằm
       giữa màn hình), khác với --web-pattern (thiết kế cho góc sidebar, có 2
       nan thẳng theo cạnh nên đặt giữa màn sẽ nhìn như khung hộp bị lệch). */
    --web-pattern-radial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23ff6a5b' stroke-width='1.1' stroke-linecap='round' opacity='0.5'%3E%3Cline x1='200' y1='200' x2='390' y2='200'/%3E%3Cline x1='200' y1='200' x2='353.7' y2='311.7'/%3E%3Cline x1='200' y1='200' x2='258.7' y2='380.7'/%3E%3Cline x1='200' y1='200' x2='141.3' y2='380.7'/%3E%3Cline x1='200' y1='200' x2='46.3' y2='311.7'/%3E%3Cline x1='200' y1='200' x2='10' y2='200'/%3E%3Cline x1='200' y1='200' x2='46.3' y2='88.3'/%3E%3Cline x1='200' y1='200' x2='141.3' y2='19.3'/%3E%3Cline x1='200' y1='200' x2='258.7' y2='19.3'/%3E%3Cline x1='200' y1='200' x2='353.7' y2='88.3'/%3E%3Cpolygon points='242,200 238,227.6 212.4,238 185.8,243.7 165.2,225.3 152,200 166.8,175.9 186.1,157.2 213.6,158.2 238,172.4'/%3E%3Cpolygon points='288,200 266.3,248.2 227.8,285.6 174,279.9 128,252.3 119,200 129.6,148.8 173.7,119.2 228.1,113.5 267.1,151.2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff6a5b' stroke-width='1' stroke-linecap='round' opacity='0.26'%3E%3Cpolygon points='328,200 308.4,278.8 238.6,318.9 159.2,325.5 95.6,275.9 65,200 98.1,125.9 159.5,75.4 239.2,79.2 307.6,121.8'/%3E%3Cpolygon points='372,200 334.3,297.6 254.1,366.4 148.1,359.8 60,301.7 35,200 59.2,97.7 148.4,41.2 254.4,32.6 336.7,100.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='227.8' cy='285.6' r='2' opacity='0.85'/%3E%3Ccircle cx='129.6' cy='148.8' r='1.6' opacity='0.7'/%3E%3Ccircle cx='267.1' cy='151.2' r='1.5' opacity='0.65'/%3E%3C/g%3E%3C/svg%3E");

    /* Lưới chấm bi kiểu giấy in comic, phủ rất mờ toàn trang. */
    --halftone: radial-gradient(circle, rgba(224, 34, 28, 0.07) 1px, transparent 1.2px);
}

:root[data-theme="dark"] {
    --bg: #14100f;
    --card: #1c1517;
    --text: #f1f1f6;
    --muted: #a3939a;
    --border: #2e1e1f;
    --accent-bg: #3a1513;
    --amber-bg: #3a2c12;
    --blue-bg: #16233f;
    --violet-bg: #2a1f42;
    --red-bg: #3a1513;
    --green-bg: #143824;
    --halftone: radial-gradient(circle, rgba(255, 106, 91, 0.09) 1px, transparent 1.2px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14100f;
        --card: #1c1517;
        --text: #f1f1f6;
        --muted: #a3939a;
        --border: #2e1e1f;
        --accent-bg: #3a1513;
        --amber-bg: #3a2c12;
        --blue-bg: #16233f;
        --violet-bg: #2a1f42;
        --red-bg: #3a1513;
        --green-bg: #143824;
        --halftone: radial-gradient(circle, rgba(255, 106, 91, 0.09) 1px, transparent 1.2px);
    }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scrollbar-color: var(--accent) var(--bg); scrollbar-width: thin; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    background-image: var(--halftone);
    background-size: 15px 15px;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- App shell ---------- */

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--sidebar);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
}
.sidebar::before {
    content: "";
    position: absolute;
    left: -50px;
    bottom: -60px;
    width: 230px;
    height: 230px;
    background-image: var(--web-pattern);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.sidebar::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    background-image: var(--web-pattern);
    background-repeat: no-repeat;
    transform: rotate(180deg);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }

/* ---------- Splash screen ---------- */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--sidebar);
    opacity: 1;
    transition: opacity 0.4s ease;
    overflow: hidden;
}
.splash-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--web-pattern-radial);
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(78vmin, 620px) min(78vmin, 620px);
    pointer-events: none;
}
.splash-screen.splash-hide { opacity: 0; pointer-events: none; }
.splash-mark {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 0 0 6px rgba(224, 34, 28, 0.18), 0 14px 34px rgba(224, 34, 28, 0.5);
    animation: splash-pop 0.5s cubic-bezier(.34,1.56,.64,1);
}
.splash-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes splash-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.splash-name {
    position: relative;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sidebar-text);
    text-align: center;
}
.splash-name small {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--sidebar-active-text);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .splash-mark { animation: none; }
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 22px;
}
.brand .mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(224, 34, 28, 0.2), 0 6px 16px rgba(224, 34, 28, 0.45);
}
.brand .mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand .name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sidebar-text);
}
.brand .name small { display: block; font-weight: 600; color: var(--sidebar-active-text); font-size: 0.68rem; letter-spacing: 0.1em; }

.nav { display: flex; flex-direction: column; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sidebar-border); }
.nav-group-label {
    font-size: 0.66rem; font-weight: 700; color: var(--sidebar-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 12px 6px; opacity: 0.75;
}
.nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--sidebar-text-muted);
    font-size: 0.89rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav a:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
.nav a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 700;
    border-left-color: var(--accent);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--sidebar-border);
    margin-top: 8px;
}
.sidebar-user .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--spidey-blue-dark)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
}
.sidebar-user .who { font-size: 0.85rem; font-weight: 600; color: var(--sidebar-text); }
.sidebar-user .who a { font-size: 0.76rem; color: var(--sidebar-text-muted); font-weight: 500; text-decoration: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 20;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text);
    position: relative;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.badge-dot {
    position: absolute; top: -4px; right: -4px;
    background: var(--red); color: #fff;
    font-size: 0.65rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg);
    animation: spidey-pulse 1.8s ease-in-out infinite;
}
@keyframes spidey-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 34, 28, 0.55); }
    50% { box-shadow: 0 0 0 5px rgba(224, 34, 28, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .badge-dot { animation: none; }
}

.content { padding: 28px 32px 100px; max-width: 1360px; width: 100%; margin: 0 auto; }
.content h1 {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 4px;
    padding-top: 14px;
    letter-spacing: 0.01em;
}
.content h1::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--spidey-blue));
}
.content .page-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 22px; }

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-head .btn-row { margin-top: 2px; }

/* ---------- Mobile chrome ---------- */

.mobile-header {
    display: none;
    align-items: center;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    position: sticky;
    top: 0;
    z-index: 20;
}
.mobile-header a.back { color: var(--text); display: flex; }
.mobile-header-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.mobile-menu-btn { flex-shrink: 0; }

.mobile-drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 39;
}
.mobile-drawer-overlay.open { display: block; }
.mobile-drawer {
    display: none;
    flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 280px; max-width: 82vw;
    background: var(--sidebar);
    padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
.mobile-drawer.open { transform: translateX(0); }
/* Hoạ tiết mạng nhện góc — bản mobile của .sidebar::before/::after phía trên
   (trước đây chỉ .sidebar có, .mobile-drawer thay .sidebar trên mobile nên
   trước giờ không có hoạ tiết này khi mở menu trên điện thoại). */
.mobile-drawer::before {
    content: "";
    position: absolute;
    left: -50px;
    bottom: -60px;
    width: 230px;
    height: 230px;
    background-image: var(--web-pattern);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.mobile-drawer::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    background-image: var(--web-pattern);
    background-repeat: no-repeat;
    transform: rotate(180deg);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
.mobile-drawer > * { position: relative; z-index: 1; }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }

.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--sidebar);
    border-top: 1px solid var(--sidebar-border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 30;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}
.bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--sidebar-text-muted); text-decoration: none; font-size: 0.68rem;
    padding: 4px 10px; font-weight: 600;
}
/* 4 mục chữ (không phải nút "+") chia đều không gian còn lại — trước đây độ
   rộng mỗi mục tự co theo độ dài nhãn ("Tổng quan"/"Thông báo" dài hơn các
   mục khác), làm khoảng cách 2 đầu rộng hơn khoảng giữa, nhìn lệch tổng thể
   dù nút "+" tự nó vẫn đúng chính giữa thanh. */
.bottom-nav a:not(.fab) { flex: 1; min-width: 0; }
.bottom-nav a svg { width: 21px; height: 21px; }
.bottom-nav a.active { color: var(--sidebar-active-text); }
.bottom-nav a.fab {
    background: linear-gradient(135deg, var(--accent), var(--spidey-blue-dark)); color: #fff;
    width: 46px; height: 46px; border-radius: 50%;
    align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px #1c0f10, 0 6px 18px rgba(224, 34, 28, 0.55);
}
.bottom-nav a.fab svg { width: 22px; height: 22px; }
.bottom-nav a.fab span { display: none; }

@media (max-width: 880px) {
    .sidebar { display: none; }
    .topbar { display: none; }
    .mobile-header { display: flex; }
    .bottom-nav { display: flex; }
    .mobile-drawer { display: flex; }
    .content { padding: 16px 16px 90px; }
    .content h1 { font-size: 1.2rem; }

    /* Vùng chạm tối thiểu ~44px cho thao tác bằng ngón tay. */
    .btn { min-height: 44px; }
    .btn.ghost { min-height: 44px; }
    .tabs button { padding: 12px 4px; min-height: 44px; }
    .list-item { padding: 14px 0; min-height: 44px; }
    .icon-btn { width: 44px; height: 44px; }
    .page-head { flex-direction: column; align-items: stretch; }
    .page-head .btn-row { width: 100%; }
    .page-head .btn-row .btn { flex: 1; }

    /* Lưới 2x2 cho 4 thẻ thống kê ở Tổng quan — trước đây xếp dọc 4 hàng
       (grid-stats về 1 cột ở dưới 480px) bắt cuộn nhiều; gọn nhẹ hơn để vừa
       2 cột mà không tràn/chật. */
    .grid-stats .stat-card { padding: 14px; gap: 8px; }
    .grid-stats .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
    .grid-stats .stat-icon svg { width: 18px; height: 18px; }
    .grid-stats .stat-value { font-size: 1.5rem; }
    .grid-stats .stat-label { font-size: 0.76rem; line-height: 1.3; }
    .grid-stats .stat-status { font-size: 0.7rem; }
}

/* ---------- Cards & primitives ---------- */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.card-head h2 { font-size: 0.98rem; margin: 0; }
.card-head .link { font-size: 0.82rem; color: var(--accent); text-decoration: none; font-weight: 600; }

.grid { display: grid; gap: 16px; }
.grid-stats { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: 1.4fr 1fr; align-items: start; }
.grid-3 { grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 1180px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .grid-stats { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

/* Danh sách nhiều mục dạng "thẻ ngắn" (page, watcher...) — dùng 2 cột trên màn
   rộng thay vì xếp chồng 1 cột, đỡ trống mà không cần đổi dữ liệu backend. */
.item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.item-grid .list-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin: 0; }
@media (max-width: 700px) { .item-grid { grid-template-columns: 1fr; } }

.stat-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.stat-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-icon.amber { background: var(--amber-bg); color: var(--amber); }
.stat-icon.blue { background: var(--blue-bg); color: var(--blue); }
.stat-icon.violet { background: var(--violet-bg); color: var(--violet); }
.stat-icon.red { background: var(--red-bg); color: var(--red); }
.stat-value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.stat-card.warn { border-color: var(--red); background: var(--red-bg); }
.stat-status { font-size: 0.76rem; font-weight: 600; margin-top: -4px; }
.stat-status.ok { color: var(--green); }
.stat-status.warn { color: var(--red); }
.stat-label { color: var(--muted); font-size: 0.82rem; }
.stat-trend { font-size: 0.76rem; color: var(--muted); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(224, 34, 28, 0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--accent-dark); box-shadow: 0 6px 18px rgba(224, 34, 28, 0.5); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn.secondary:hover { background: var(--bg); box-shadow: none; transform: none; }
.btn.danger { background: var(--red); }
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none; }
}
.btn.ghost { background: transparent; color: var(--muted); padding: 8px 10px; box-shadow: none; }
.btn.ghost:hover { box-shadow: none; transform: none; color: var(--accent); }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
}
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.blue { background: var(--blue-bg); color: var(--blue); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.gray { background: var(--bg); color: var(--muted); }

.progress {
    height: 7px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}
.progress > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--spidey-blue)); border-radius: 4px; }

label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 0.85rem; }
label:first-child { margin-top: 0; }
input[type=text], input[type=number], input[type=url], input[type=password], input[type=datetime-local], textarea, select {
    width: 100%;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
}
textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.char-count { text-align: right; font-size: 0.76rem; color: var(--muted); margin-top: 4px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs button {
    background: none; border: none; padding: 10px 4px; margin-right: 18px;
    font-size: 0.86rem; font-weight: 600; color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button.active { color: var(--accent); border-color: var(--accent); }

.list-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item .thumb {
    width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
    background: var(--bg);
}
.list-item .title { font-weight: 600; font-size: 0.9rem; }
.list-item .meta { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty svg { width: 40px; height: 40px; margin-bottom: 12px; opacity: 0.5; }
/* Empty state gọn cho card tóm tắt trên Dashboard — không chiếm cả màn hình khi chưa có dữ liệu. */
.empty-compact { text-align: center; padding: 30px 16px; color: var(--muted); font-size: 0.86rem; }
.error { color: var(--red); font-size: 0.85rem; margin-top: 8px; }
.hint { display: flex; gap: 8px; align-items: flex-start; background: var(--accent-bg); color: var(--accent-dark); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.8rem; }

/* ---------- Toast: thông báo ngắn cho thao tác đơn giản (đã copy, đã lưu,
   đã huỷ...) — tự biến mất, không chặn thao tác tiếp theo như alert(). ---------- */
#toast-container {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 8px;
    background: var(--text); color: var(--bg);
    padding: 10px 16px; border-radius: var(--radius-sm);
    font-size: 0.85rem; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); color: #fff; }
@media (max-width: 880px) {
    #toast-container { bottom: 76px; left: 16px; right: 16px; transform: none; align-items: stretch; }
    .toast { max-width: none; justify-content: center; }
}

/* ---------- Skeleton: thay "Đang tải..." bằng khối placeholder mờ dần —
   người dùng thấy ngay hình dạng nội dung sắp có, đỡ cảm giác đứng hình. ---------- */
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.short { width: 35%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.wide { width: 85%; }
.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton-stat-icon { width: 46px; height: 46px; border-radius: 13px; }
.skeleton-stat-value { height: 28px; width: 50px; margin: 12px 0 8px; }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; background: var(--border); }
    .toast { transition: none; }
}

/* ---------- "Cần xử lý" / hoạt động gần đây (Dashboard) ---------- */

.action-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.action-item:last-child { border-bottom: none; }
.action-item .action-icon { font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }
.action-item .action-body { flex: 1; min-width: 0; }
.action-item .action-text { font-size: 0.87rem; font-weight: 600; }
.action-item .action-meta { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.action-item .btn { padding: 7px 12px; font-size: 0.78rem; margin-top: 0; flex-shrink: 0; }

.all-clear { display: flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--green); font-weight: 600; font-size: 0.88rem; }
.all-clear svg { width: 18px; height: 18px; }

.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-item .activity-icon { font-size: 1rem; line-height: 1.4; }
.activity-item .activity-text { font-size: 0.85rem; }
.activity-item .activity-time { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }

.spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    animation: spin 0.7s linear infinite;
}
.spinner.dark { border: 2px solid var(--border); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
}

/* ---------- Notification panel ---------- */

.notif-wrap { position: relative; }
.notif-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(20,20,40,0.14);
    z-index: 50;
    overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.notif-panel-head h3 { font-size: 0.9rem; margin: 0; }
.notif-panel-head button { background: none; border: none; color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--accent-bg); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: transparent; }
.notif-dot.on { background: var(--accent); }
.notif-title { font-size: 0.84rem; font-weight: 600; }
.notif-body { font-size: 0.78rem; color: var(--muted); margin-top: 2px; white-space: pre-line; }
.notif-time { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.notif-panel-foot { padding: 10px 16px; text-align: center; border-top: 1px solid var(--border); }
.notif-panel-foot a { font-size: 0.8rem; color: var(--accent); text-decoration: none; font-weight: 600; }

/* ---------- Trang "Giao diện": thẻ chọn skin ---------- */

/* 2 cột luôn bằng nhau (không dùng .grid-2 vì class đó lệch 1.4fr/1fr, thiết
   kế cho bố cục nội dung+sidebar ở trang khác) — gộp 1 cột trên mobile. */
.skin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 700px) { .skin-grid { grid-template-columns: 1fr; } }

.skin-option {
    cursor: pointer;
    padding: 16px;
    border: 2px solid var(--border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.skin-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.skin-option h2 { margin: 12px 0 3px; font-size: 0.96rem; }
.skin-option p { margin: 0 0 10px; color: var(--muted); font-size: 0.82rem; }
.skin-swatch { display: flex; gap: 5px; height: 26px; border-radius: var(--radius-sm); overflow: hidden; }
.skin-swatch-dot { flex: 1; }
/* Giữ chỗ bằng visibility (không phải display:none) để 2 thẻ luôn cao bằng
   nhau dù chỉ 1 thẻ đang active mới thật sự hiện nhãn "Đang dùng". */
.skin-active-pill { visibility: hidden; }

/* ---------- Giao diện thay thế "Nguyên bản" (bảng màu trước khi đổi theme
   Spider-Man ngày 2026-08-15) — chọn qua trang "Giao diện", lưu localStorage
   `thachlike_skin`, áp bằng thuộc tính [data-skin] trên <html> (app.js).
   Mặc định không có data-skin (hoặc data-skin="spider") giữ nguyên toàn bộ
   giao diện Spider-Man phía trên, không đổi gì. ---------- */
:root[data-skin="original"] {
    --bg: #f5f6fb;
    --border: #eaeaf2;
    --accent: #5b5ce4;
    --accent-dark: #4746c9;
    --accent-bg: #eeeeff;
    --spidey-blue: #5b5ce4;
    --spidey-blue-dark: #4746c9;
    --sidebar: #ffffff;
    --sidebar-border: #eaeaf2;
    --sidebar-text: #16161f;
    --sidebar-text-muted: #6b6b7c;
    --sidebar-hover-bg: #f5f6fb;
    --sidebar-active-bg: #eeeeff;
    --sidebar-active-text: #5b5ce4;
    --blue: #3b82f6;
    --blue-bg: #e8f1ff;
    --red: #ef4444;
    --red-bg: #fde8e8;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --web-pattern: none;
    --web-pattern-radial: none;
    --halftone: none;
}
:root[data-theme="dark"][data-skin="original"] {
    --bg: #101018;
    --card: #17171f;
    --muted: #9797a8;
    --border: #26262f;
    --sidebar: #14141b;
    --sidebar-border: #26262f;
    --sidebar-text: #f1f1f6;
    --sidebar-text-muted: #9797a8;
    --sidebar-hover-bg: #101018;
    --accent-bg: #23234a;
    --blue-bg: #122642;
    --red-bg: #3a1919;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"])[data-skin="original"] {
        --bg: #101018;
        --card: #17171f;
        --muted: #9797a8;
        --border: #26262f;
        --sidebar: #14141b;
        --sidebar-border: #26262f;
        --sidebar-text: #f1f1f6;
        --sidebar-text-muted: #9797a8;
        --sidebar-hover-bg: #101018;
        --accent-bg: #23234a;
        --blue-bg: #122642;
        --red-bg: #3a1919;
    }
}
html[data-skin="original"] { scrollbar-color: auto; }
[data-skin="original"] .sidebar,
[data-skin="original"] .bottom-nav,
[data-skin="original"] .mobile-drawer { box-shadow: none; }
[data-skin="original"] .splash-mark { width: 64px; height: 64px; border-radius: 18px; box-shadow: none; }
[data-skin="original"] .brand .mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
[data-skin="original"] .login-mark { box-shadow: none; }
[data-skin="original"] .badge-dot { animation: none; }
[data-skin="original"] .content h1 { text-transform: none; letter-spacing: -0.01em; padding-top: 0; }
[data-skin="original"] .content h1::before { display: none; }
[data-skin="original"] .btn { box-shadow: none; }
[data-skin="original"] .btn:hover { box-shadow: none; transform: none; }
[data-skin="original"] .bottom-nav a.fab { box-shadow: 0 6px 16px rgba(91, 92, 228, 0.4); }