/* ═══════════════════════════════════════════════════════════
   Modern Solid UI Enhancement — 杂鱼 Account
   Grounded design: high opacity, no float, subtle transitions.
   Applied conditionally to non-protected pages only.
   ═══════════════════════════════════════════════════════════ */

/* ── Base & Background ── */
body.glass-ui {
    background:
        linear-gradient(135deg, rgba(248,251,255,.68) 0%, rgba(224,231,255,.62) 50%, rgba(238,242,255,.72) 100%);
}

/* ═══════════════════════════════════
   Panel Layout — 侧边栏固定 + 内容区撑满
   ═══════════════════════════════════ */

/* -- When layout has sidebar: full-screen panel mode -- */
body.glass-ui .wrap:has(.layout) {
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
}
/* -- Pages without sidebar: keep centered -- */
body.glass-ui .wrap:not(:has(.layout)) {
    padding: 18px;
}

body.glass-ui .layout {
    width: 100% !important;
    max-width: none !important;
    gap: 0;
    min-height: 100vh;
}

/* -- Sidebar: fixed left, full height -- */
body.glass-ui .sidebar {
    width: 220px;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(226,232,240,.7);
    box-shadow: 2px 0 12px rgba(15,23,42,.04);
    padding: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .28s cubic-bezier(.4,0,.2,1);
}
body.glass-ui .sidebar.collapsed {
    width: 0;
    border-width: 0;
    overflow: hidden;
}
body.glass-ui .sidebar-head {
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(226,232,240,.5);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
body.glass-ui .sb-brand-text {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    white-space: nowrap;
}
body.glass-ui .sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 8px 4px;
}
body.glass-ui .sidebar-body::-webkit-scrollbar { width: 4px; }
body.glass-ui .sidebar-body::-webkit-scrollbar-track { background: transparent; }
body.glass-ui .sidebar-body::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius: 2px; }
body.glass-ui .sidebar-body::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.4); }
body.glass-ui .sidebar-foot {
    padding: 8px;
    border-top: 1px solid rgba(226,232,240,.5);
    flex-shrink: 0;
}
body.glass-ui .sidebar-group-title {
    padding: 12px 14px 4px;
    font-size: 10px;
}
body.glass-ui .sidebar-sep {
    margin: 8px 8px;
}
body.glass-ui .sidebar-link {
    padding: 9px 14px;
    font-size: 13px;
    gap: 10px;
    margin-bottom: 2px;
    border-radius: 10px;
    overflow: hidden;
}
body.glass-ui .sb-collapse-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: inherit;
}
body.glass-ui .sb-collapse-btn:hover {
    background: rgba(241,245,249,.9);
    color: #64748b;
}
/* -- Expand button (shown when sidebar collapsed) -- */
body.glass-ui .sb-expand {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 201;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(226,232,240,.7);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(15,23,42,.08);
    color: #64748b;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background .15s, box-shadow .15s;
}
body.glass-ui .sb-expand:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(15,23,42,.12);
    color: #334155;
}
body.glass-ui .sidebar.collapsed ~ .sb-expand {
    display: flex;
}

/* -- Content card: offset by sidebar width, fills remaining space -- */
body.glass-ui .layout .card {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 28px 36px 36px;
    position: relative;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: margin-left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
}
body.glass-ui .layout:has(.sidebar.collapsed) .card {
    margin-left: 0 !important;
    width: 100% !important;
}
body.glass-ui .layout .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(248,250,252,.12);
    z-index: -1;
}

/* -- Kill backdrop-filter on ALL children inside ANY card --
     The card::before already provides the blur. Removing it from children
     prevents them from creating containing blocks that trap position:fixed modals/overlays. -- */
body.glass-ui .card .section,
body.glass-ui .card .feedback-panel,
body.glass-ui .card .ticket-thread-card,
body.glass-ui .card .chat-reply-box,
body.glass-ui .card .admin-user-table-wrap,
body.glass-ui .card .app-item,
body.glass-ui .card .client-card,
body.glass-ui .card .auth-app,
body.glass-ui .card .empty-state,
body.glass-ui .card .social-box,
body.glass-ui .card .action-card,
body.glass-ui .card .tab-nav,
body.glass-ui .card .ann-modal-card,
body.glass-ui .card .ann-sidebar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* -- Pages without sidebar: centered card (keep original feel) -- */
body.glass-ui .wrap > .card {
    border-radius: 18px;
    padding: 22px 26px 26px;
    max-width: 860px;
}

/* -- Section styling inside panel -- */
body.glass-ui .section {
    padding: 18px 20px;
    margin-bottom: 14px;
    border-radius: 14px;
}

/* -- Page title -- */
body.glass-ui h1 {
    font-size: 20px;
    margin: 0 0 4px;
}
body.glass-ui .sub {
    margin: 0 0 16px;
    font-size: 12.5px;
}

/* -- User cards -- */
body.glass-ui .user-card {
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 10px;
}

/* -- Action cards -- */
body.glass-ui .action-card {
    padding: 14px 16px;
    border-radius: 12px;
}

/* -- App / Client cards -- */
body.glass-ui .app-item {
    padding: 14px 16px;
    border-radius: 12px;
}
body.glass-ui .client-card {
    padding: 14px 16px;
    border-radius: 14px;
}

/* -- Auth apps -- */
body.glass-ui .auth-app {
    padding: 14px;
    border-radius: 14px;
}

/* -- Custom select dropdown fix -- */
body.glass-ui .info-grid:has(.ann-custom-select) {
    position: relative;
    z-index: 10;
    overflow: visible;
}
body.glass-ui .field:has(.ann-custom-select) {
    position: relative;
    z-index: 10;
}
body.glass-ui .ann-custom-select {
    position: relative;
    z-index: 10;
}
body.glass-ui .ann-custom-select-menu {
    z-index: 9999 !important;
}

/* -- Admin user table (BT-panel style) -- */
body.glass-ui .admin-user-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 12px;
    background: rgba(255,255,255,.38);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 4px 24px rgba(15,23,42,.05), 0 1px 0 rgba(255,255,255,.5) inset;
}
body.glass-ui .admin-user-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
body.glass-ui .admin-user-table thead th {
    padding: 13px 18px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(248,250,255,.55);
    border-bottom: 1px solid rgba(226,232,240,.5);
}
body.glass-ui .admin-user-table thead th:first-child {
    border-radius: 12px 0 0 0;
}
body.glass-ui .admin-user-table thead th:last-child {
    border-radius: 0 12px 0 0;
}
body.glass-ui .admin-user-table tbody td {
    padding: 14px 18px;
    color: #334155;
    border-bottom: 1px solid rgba(241,245,249,.6);
    vertical-align: middle;
    transition: background .15s ease;
}
body.glass-ui .admin-user-table tbody tr:last-child td {
    border-bottom: none;
}
body.glass-ui .admin-user-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}
body.glass-ui .admin-user-table tbody tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}
body.glass-ui .admin-user-table tbody tr:hover td {
    background: rgba(239,246,255,.45);
}
body.glass-ui .admin-user-table tbody tr.row-banned td {
    background: rgba(254,242,242,.25);
}
body.glass-ui .admin-user-table tbody tr.row-banned:hover td {
    background: rgba(254,226,226,.4);
}
body.glass-ui .admin-user-table .uname {
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
}
body.glass-ui .admin-user-table .uid-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(59,130,246,.08));
    color: #4338ca;
    border: 1px solid rgba(99,102,241,.15);
}
body.glass-ui .admin-user-table .role-chip {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .01em;
}
body.glass-ui .admin-user-table .role-admin {
    background: linear-gradient(135deg, rgba(239,68,68,.1), rgba(220,38,38,.06));
    color: #dc2626;
    border: 1px solid rgba(239,68,68,.2);
}
body.glass-ui .admin-user-table .role-developer {
    background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(5,150,105,.06));
    color: #059669;
    border: 1px solid rgba(16,185,129,.2);
}
body.glass-ui .admin-user-table .role-user {
    background: rgba(241,245,249,.7);
    color: #64748b;
    border: 1px solid rgba(226,232,240,.5);
}
body.glass-ui .admin-user-table .role-banned {
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(220,38,38,.08));
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,.25);
}
body.glass-ui .admin-user-table td:nth-child(4) {
    color: #64748b;
    font-size: 12px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.glass-ui .admin-user-table .btn.ghost {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    height: auto;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(99,102,241,.06));
    border: 1px solid rgba(59,130,246,.2);
    color: #2563eb;
    transition: all .2s ease;
}
body.glass-ui .admin-user-table .btn.ghost:hover {
    background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(99,102,241,.12));
    border-color: rgba(59,130,246,.35);
    box-shadow: 0 2px 8px rgba(59,130,246,.12);
}
@media (max-width: 768px) {
    body.glass-ui .admin-user-table {
        font-size: 12px;
    }
    body.glass-ui .admin-user-table thead th,
    body.glass-ui .admin-user-table tbody td {
        padding: 10px 12px;
    }
}

/* -- Feedback panel -- */
body.glass-ui .feedback-panel {
    border-radius: 14px;
}

/* -- Tab nav -- */
body.glass-ui .tab-nav {
    margin: 0 0 12px;
    border-radius: 12px;
}

/* ═══════════════════════════════════
   Expand button & sidebar overlay
   ═══════════════════════════════════ */
body.glass-ui .sb-expand {
    display: none;
    position: fixed;
    bottom: 8px;
    left: 0;
    z-index: 201;
    width: 42px;
    height: 42px;
    border-radius: 0 12px 12px 0;
    border: 1px solid rgba(203,213,225,.5);
    border-left: none;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 3px 2px 16px rgba(15,23,42,.08), 0 1px 0 rgba(255,255,255,.7) inset;
    color: #3b82f6;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .22s cubic-bezier(.4,0,.2,1);
}
body.glass-ui .sb-expand:hover {
    width: 50px;
    background: #fff;
    box-shadow: 4px 2px 20px rgba(59,130,246,.14), 0 1px 0 rgba(255,255,255,.7) inset;
    color: #2563eb;
}
body.glass-ui .sb-expand:active {
    width: 38px;
}
body.glass-ui .sidebar.collapsed ~ .sb-expand {
    display: flex;
}
body.glass-ui .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(15,23,42,.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s ease;
}
body.glass-ui .sidebar-overlay.open {
    opacity: 1;
}

/* ═══════════════════════════════════
   Tablet — 769px ~ 1024px
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
    body.glass-ui .sidebar {
        width: 200px;
    }
    body.glass-ui .layout .card {
        margin-left: 200px !important;
        width: calc(100% - 200px) !important;
        padding: 22px 24px 28px;
    }
    body.glass-ui .layout:has(.sidebar.collapsed) .card {
        margin-left: 0 !important;
        width: 100% !important;
    }
    body.glass-ui .sidebar-link {
        font-size: 12.5px;
    }
    body.glass-ui .sb-expand {
        bottom: 8px;
        height: 40px;
        width: 40px;
    }
}

/* ═══════════════════════════════════
   Mobile — ≤768px (sidebar → drawer)
   ═══════════════════════════════════ */
@media (max-width: 768px) {
    /* Expand button: always visible at bottom-left on mobile */
    body.glass-ui .sb-expand {
        display: flex !important;
        bottom: 8px;
        left: 0;
        width: 40px;
        height: 40px;
        z-index: 201;
    }
    /* Hide expand button when drawer is open */
    body.glass-ui .sidebar.open ~ .sb-expand {
        display: none !important;
    }
    body.glass-ui .sidebar-overlay {
        display: block;
        pointer-events: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.glass-ui .sidebar-overlay.open {
        pointer-events: auto;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    body.glass-ui .sidebar {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        border-right: 1px solid rgba(226,232,240,.7);
        border-radius: 0;
        border-width: 1px !important;
        box-shadow: 4px 0 24px rgba(15,23,42,.12);
        overflow: hidden;
        padding: 0;
        background: rgba(255,255,255,.92) !important;
        backdrop-filter: blur(20px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    }
    body.glass-ui .sidebar.open {
        transform: translateX(0);
    }
    body.glass-ui .sidebar-body {
        overflow-y: auto;
        padding: 8px 10px 4px;
    }
    /* Sidebar foot: change label to "关闭" on mobile */
    body.glass-ui .sidebar-foot {
        display: block;
    }
    body.glass-ui .layout {
        flex-direction: column;
        min-height: auto;
    }
    body.glass-ui .layout .card {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: auto;
        padding: 20px 16px 80px;
    }
    body.glass-ui .wrap:has(.layout) {
        padding: 0;
    }
    body.glass-ui .wrap:not(:has(.layout)) {
        padding: 12px;
    }
    body.glass-ui .section {
        padding: 16px 16px;
        border-radius: 12px;
    }
    body.glass-ui .hero.hero-sm {
        padding-top: 8px;
    }
    /* Tables scroll horizontally on mobile */
    body.glass-ui .admin-user-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.glass-ui .admin-user-table {
        min-width: 580px;
        font-size: 12px;
    }
    /* Modals: full-width on mobile */
    body.glass-ui .modal .panel {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh;
        border-radius: 16px;
    }
    /* Grids: single column */
    body.glass-ui .grid.cols-2,
    body.glass-ui .grid.cols-3 {
        grid-template-columns: 1fr !important;
    }
    body.glass-ui .actions {
        grid-template-columns: 1fr;
    }
    body.glass-ui .info-grid {
        grid-template-columns: 1fr;
    }
    /* User card top stacks vertically */
    body.glass-ui .user-card-top {
        flex-direction: column;
    }
    body.glass-ui .user-card-actions,
    body.glass-ui .admin-card-actions {
        width: 100%;
    }
    body.glass-ui .admin-card-actions form {
        flex-wrap: wrap;
    }
    /* Tab nav compact */
    body.glass-ui .tab-nav {
        gap: 3px;
        padding: 3px;
    }
    body.glass-ui .tab-nav a {
        padding: 8px 10px;
        font-size: 12px;
    }
    /* Social box full width */
    body.glass-ui .social-box {
        width: 100%;
    }
    body.glass-ui .section-flex {
        flex-direction: column;
    }
    /* Wrap card without sidebar */
    body.glass-ui .wrap > .card {
        padding: 16px 14px 20px;
        border-radius: 14px;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════
   Small phone — ≤480px
   ═══════════════════════════════════ */
@media (max-width: 480px) {
    body.glass-ui .layout .card {
        padding: 16px 10px 18px;
    }
    body.glass-ui .section {
        padding: 12px 12px;
        border-radius: 10px;
    }
    body.glass-ui .wrap > .card {
        padding: 12px 10px 16px;
        border-radius: 12px;
    }
    body.glass-ui .hero h2 {
        font-size: 18px;
    }
    body.glass-ui .hero p {
        font-size: 12px;
    }
    body.glass-ui .sb-expand {
        bottom: 6px;
        width: 36px;
        height: 36px;
        border-radius: 0 10px 10px 0;
    }
    body.glass-ui .modal .panel {
        border-radius: 14px;
        padding: 14px;
    }
    body.glass-ui .user-card {
        padding: 10px 12px;
    }
    body.glass-ui .btn {
        font-size: 13px;
        padding: 0 14px;
        height: 38px;
    }
    body.glass-ui .pagination {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── Card ── */
body.glass-ui .card {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 8px 32px rgba(15,23,42,.08), 0 1.5px 0 rgba(255,255,255,.7) inset;
}
body.glass-ui .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(1px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-radius: inherit;
    z-index: -1;
}

/* ── Sidebar ── */
body.glass-ui .sidebar {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 20px rgba(15,23,42,.06);
}
body.glass-ui .sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-radius: inherit;
    z-index: -1;
}

body.glass-ui .sidebar-link {
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.glass-ui .sidebar-link:hover {
    background: rgba(255,255,255,.5);
}
body.glass-ui .sidebar-link.active {
    background: linear-gradient(135deg, rgba(59,130,246,.15) 0%, rgba(99,102,241,.1) 100%);
    border-color: rgba(147,197,253,.35);
    box-shadow: 0 2px 12px rgba(59,130,246,.1), 0 1px 0 rgba(255,255,255,.5) inset;
}

/* ── Sections ── */
body.glass-ui .section {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 20px rgba(15,23,42,.05), 0 1px 0 rgba(255,255,255,.55) inset;
}

/* ── Modals ── */
body.glass-ui .modal {
    background: rgba(15,23,42,.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.glass-ui .modal .panel {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 24px 64px rgba(15,23,42,.14), 0 1px 0 rgba(255,255,255,.7) inset;
}

/* ── Inputs ── */
body.glass-ui input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]) {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203,213,225,.5);
}
body.glass-ui input:focus:not([type=checkbox]):not([type=radio]):not([type=file]) {
    background: rgba(255,255,255,.8);
    border-color: rgba(59,130,246,.5);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12), 0 1px 0 rgba(255,255,255,.4) inset;
}

body.glass-ui textarea {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203,213,225,.5);
}
body.glass-ui textarea:focus {
    background: rgba(255,255,255,.8);
    border-color: rgba(59,130,246,.5);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* ── readonly-box ── */
body.glass-ui .readonly-box {
    background: rgba(248,250,252,.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.5);
}

/* ── Buttons — no float, color transitions only ── */
body.glass-ui .btn {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(59,130,246,.18), 0 1px 0 rgba(255,255,255,.2) inset;
    transition: opacity .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.glass-ui .btn:hover:not(:disabled) {
    box-shadow: 0 2px 10px rgba(59,130,246,.2);
    filter: brightness(1.03);
}
body.glass-ui .btn:active:not(:disabled) {
    box-shadow: 0 1px 4px rgba(59,130,246,.1);
    filter: brightness(.98);
}

body.glass-ui .btn.light {
    background: rgba(241,245,249,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(226,232,240,.5);
    box-shadow: 0 1px 6px rgba(15,23,42,.04);
}
body.glass-ui .btn.light:hover {
    background: rgba(226,232,240,.65);
    box-shadow: 0 2px 10px rgba(15,23,42,.07);
}

body.glass-ui .btn.ghost {
    background: rgba(238,242,255,.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(199,210,254,.5);
}
body.glass-ui .btn.ghost:hover {
    background: rgba(224,231,255,.6);
}

/* ── Social Box ── */
body.glass-ui .social-box {
    background: rgba(248,252,255,.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.4);
}
body.glass-ui .social-btn {
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(199,210,254,.4);
    transition: background .2s ease, border-color .2s ease;
}
body.glass-ui .social-btn:hover {
    background: rgba(240,244,255,.65);
    border-color: rgba(147,197,253,.5);
}

/* ── Links bar ── */
body.glass-ui .links a {
    background: rgba(239,246,255,.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(191,219,254,.4);
    transition: background .2s ease, border-color .2s ease;
}
body.glass-ui .links a:hover {
    background: rgba(219,234,254,.55);
    border-color: rgba(147,197,253,.5);
}

/* ── Tab Nav ── */
body.glass-ui .tab-nav {
    background: rgba(241,245,249,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226,232,240,.4);
}
body.glass-ui .tab-nav a {
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.glass-ui .tab-nav a.active {
    background: rgba(255,255,255,.65);
    box-shadow: 0 2px 10px rgba(30,41,59,.06), 0 1px 0 rgba(255,255,255,.5) inset;
}
body.glass-ui .tab-nav a:hover {
    background: rgba(255,255,255,.45);
}

/* ── Action Cards — color hover only, no lift ── */
body.glass-ui .action-card {
    background: rgba(255,255,255,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 2px 10px rgba(15,23,42,.04);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.glass-ui .action-card:hover {
    border-color: rgba(147,197,253,.45);
    box-shadow: 0 2px 12px rgba(59,130,246,.07);
}

/* ── User / App / Client Cards — no lift ── */
body.glass-ui .user-card,
body.glass-ui .app-item,
body.glass-ui .client-card {
    background: rgba(255,255,255,.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.38);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.glass-ui .user-card:hover,
body.glass-ui .app-item:hover,
body.glass-ui .client-card:hover {
    border-color: rgba(147,197,253,.45);
    box-shadow: 0 2px 14px rgba(59,130,246,.06);
}

/* ── Auth App ── */
body.glass-ui .auth-app {
    background: rgba(255,255,255,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(219,234,254,.5);
}

/* ── Empty State ── */
body.glass-ui .empty-state {
    background: rgba(248,250,252,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px dashed rgba(203,213,225,.5);
}

/* ── Feedback ── */
body.glass-ui .feedback-panel {
    background: rgba(255,255,255,.45);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 24px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.5) inset;
}
body.glass-ui .feedback-panel .head {
    background: rgba(248,250,255,.35);
    backdrop-filter: blur(8px);
}
body.glass-ui .ticket-thread-card {
    background: rgba(255,255,255,.42);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 24px rgba(15,23,42,.05);
}
body.glass-ui .chat-reply-box {
    background: rgba(248,250,255,.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.35);
}

/* ── Announcement cards ── */
body.glass-ui .ann-modal-card {
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 24px 64px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.65) inset;
}
body.glass-ui .ann-sidebar {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 12px 40px rgba(15,23,42,.1), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* ── Log Viewer ── */
body.glass-ui .log-viewer {
    border: 1px solid rgba(51,65,85,.8);
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

/* ── Admin Feedback ── */
body.glass-ui .admin-feedback .section {
    background: rgba(255,255,255,.4);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.4);
}
body.glass-ui .admin-feedback .ticket-table-wrap {
    background: rgba(255,255,255,.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(226,232,240,.5);
}
body.glass-ui .admin-feedback .ticket-table th {
    background: rgba(248,250,255,.4);
}

/* ── Zako Overlay ── */
body.glass-ui .zako-card {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 24px 64px rgba(15,23,42,.15), 0 1px 0 rgba(255,255,255,.7) inset;
}

/* ═══════════════════════════════════
   Subtle Animations (no float/lift)
   ═══════════════════════════════════ */

/* ── Fade-in on page load ── */
body.glass-ui .card {
    animation: fadeIn .4s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Section staggered fade-in ── */
body.glass-ui .section {
    animation: sectionIn .35s ease-out both;
}
body.glass-ui .section:nth-child(1) { animation-delay: .04s; }
body.glass-ui .section:nth-child(2) { animation-delay: .1s; }
body.glass-ui .section:nth-child(3) { animation-delay: .16s; }
body.glass-ui .section:nth-child(4) { animation-delay: .22s; }
body.glass-ui .section:nth-child(5) { animation-delay: .28s; }

@keyframes sectionIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Grid items stagger ── */
body.glass-ui .grid > * {
    animation: gridIn .3s ease-out both;
}
body.glass-ui .grid > *:nth-child(1)  { animation-delay: .02s; }
body.glass-ui .grid > *:nth-child(2)  { animation-delay: .05s; }
body.glass-ui .grid > *:nth-child(3)  { animation-delay: .08s; }
body.glass-ui .grid > *:nth-child(4)  { animation-delay: .11s; }
body.glass-ui .grid > *:nth-child(5)  { animation-delay: .14s; }
body.glass-ui .grid > *:nth-child(6)  { animation-delay: .17s; }
body.glass-ui .grid > *:nth-child(7)  { animation-delay: .2s; }
body.glass-ui .grid > *:nth-child(8)  { animation-delay: .23s; }
body.glass-ui .grid > *:nth-child(9)  { animation-delay: .26s; }
body.glass-ui .grid > *:nth-child(10) { animation-delay: .29s; }

@keyframes gridIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Info grid fade-in ── */
body.glass-ui .info-grid {
    animation: gridIn .35s ease-out .08s both;
}

/* ── Modal animations ── */
body.glass-ui .modal.open {
    animation: modalBgIn .22s ease forwards;
}
body.glass-ui .modal.open .panel {
    animation: modalPanelSlide .3s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes modalBgIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalPanelSlide {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Flash modal ── */
body.glass-ui .flash-modal {
    animation: flashIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes flashIn {
    0%   { opacity: 0; transform: scale(.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Avatar hover — border glow, no lift ── */
body.glass-ui .avatar-click img {
    transition: box-shadow .25s ease;
}
body.glass-ui .avatar-click:hover img {
    box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 2px 12px rgba(59,130,246,.1);
}

/* ── Hero image — no float ── */
body.glass-ui .hero img {
    transition: opacity .3s ease;
}
body.glass-ui .hero img:hover {
    opacity: .92;
}

/* ── Nav btn — color only ── */
body.glass-ui .nav-btn {
    transition: background .2s ease, color .2s ease;
}

/* ── Chip — no lift ── */
body.glass-ui .chip {
    transition: background .2s ease;
}

/* ── Pagination — no lift ── */
body.glass-ui .pagination-btn:not(.disabled) {
    transition: background .2s ease, border-color .2s ease;
}

/* ── Action btn — no lift ── */
body.glass-ui .action-btn {
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.glass-ui .action-btn:hover {
    box-shadow: 0 1px 8px rgba(59,130,246,.08);
}

/* ── Feedback submit ── */
body.glass-ui .feedback-submit {
    transition: opacity .2s ease, box-shadow .2s ease;
}
body.glass-ui .feedback-submit:hover:not(:disabled) {
    box-shadow: 0 2px 14px rgba(59,130,246,.2);
}

/* ── Chat send btn ── */
body.glass-ui .chat-send-btn {
    transition: opacity .2s ease, box-shadow .2s ease;
}
body.glass-ui .chat-send-btn:hover {
    box-shadow: 0 2px 14px rgba(99,102,241,.25);
}

/* ── Zako cell hover ── */
body.glass-ui .zako-grid .zako-cell {
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.glass-ui .zako-grid .zako-cell:hover {
    box-shadow: 0 2px 10px rgba(59,130,246,.08);
}

/* ── Announcement card list ── */
body.glass-ui .section a[href*="announcements?id="] {
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.glass-ui .section a[href*="announcements?id="]:hover {
    box-shadow: 0 2px 14px rgba(59,130,246,.07) !important;
}

/* ── Scrollbar ── */
body.glass-ui ::-webkit-scrollbar {
    width: 8px;
}
body.glass-ui ::-webkit-scrollbar-track {
    background: rgba(241,245,249,.5);
    border-radius: 4px;
}
body.glass-ui ::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.35);
    border-radius: 4px;
}
body.glass-ui ::-webkit-scrollbar-thumb:hover {
    background: rgba(100,116,139,.5);
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    body.glass-ui .wrap,
    body.glass-ui .section,
    body.glass-ui .info-grid,
    body.glass-ui .grid > *,
    body.glass-ui .card,
    body.glass-ui .flash-modal {
        animation: none !important;
    }
}