:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#17233b;background:#f3f6fb;font-size:16px;line-height:1.5;--brand:#E8B730;--brand-dark:#D4A017;--muted:#62718c;--border:#e0e6ef}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;transition:all 0.2s ease}button:disabled{opacity:.5;cursor:wait}button,input,select,textarea{border-radius:12px;border:1px solid var(--border);padding:10px 13px}input,select,textarea{width:100%;background:white;color:#17233b;transition:border-color 0.2s ease,box-shadow 0.2s ease}button{background:#fff;color:#273a5b;font-size:.875rem;font-weight:600}button:hover{border-color:var(--brand-dark);color:var(--brand-dark)}button.primary{background:var(--brand);border-color:var(--brand);color:#080c14}.danger{color:#b12c34}a{color:var(--brand);transition:color 0.2s ease}.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.layout>aside{background:#101a32;color:#d6dff0;padding:27px 18px;position:sticky;top:0;height:100vh;overflow:auto}.brand{font-size:1.7rem;font-weight:850;letter-spacing:.14em;color:#fff;padding:0 12px 25px}.brand small{display:block;font-size:.7rem;letter-spacing:.13em;color:#8c9cba;font-weight:500}.workspace{border:1px solid #2c3852;border-radius:10px;padding:12px;font-size:.875rem;margin-bottom:25px}.workspace small{display:block;color:#96a9ce}.nav{display:grid;gap:5px}.nav button{background:transparent;color:#aebdd6;border:0;text-align:left;padding:12px 14px;font-weight:500}.nav button.active{background:#2a4275;color:white;border-left:3px solid var(--brand)}.aside-bottom{margin-top:35px;color:#91a2bf;font-size:.75rem;padding:12px}main{min-width:0}.topbar{background:rgba(255, 255, 255, 0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:16px}.topbar input{max-width:380px;background:#f7f9fc}.identity{display:flex;align-items:center;gap:12px;font-size:.875rem}.avatar{background:rgba(232, 183, 48, 0.15);color:var(--brand-dark);border-radius:12px;padding:8px 12px;font-weight:700}.content{padding:28px 32px;max-width:1600px;margin:auto}h1{font-size:1.75rem;letter-spacing:-.04em;margin:0 0 5px}h2{font-size:1rem;margin:0}p{margin:6px 0 18px}.muted{color:var(--muted);font-size:.875rem}.eyebrow{font-size:.75rem;letter-spacing:.1em;font-weight:700;color:var(--brand-dark);text-transform:uppercase}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:24px}.actions{display:flex;gap:8px;flex-wrap:wrap}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.card{background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 8px 16px rgba(0,0,0,0.03)}.kpi span{font-size:.875rem;color:var(--muted)}.kpi strong{display:block;font-size:2rem;letter-spacing:-.05em;margin:10px 0}.kpi small{color:#738198}.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-bottom:20px}.status{display:inline-flex;border-radius:6px;padding:4px 8px;font-size:.75rem;background:#edf2fb;color:#435d8e;white-space:nowrap}.status.good{background:#e0f4ea;color:#19704e}.status.warn{background:#fff2d9;color:#925b00}.status.bad{background:#fde9e8;color:#a32d34}.table-wrap{overflow:auto;background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px}table{width:100%;border-collapse:collapse;font-size:.875rem;white-space:nowrap}th{text-align:left;background:#f9fbfe;color:#6a7890;font-size:.75rem;font-weight:600;padding:14px 18px;border-bottom:1px solid var(--border)}td{padding:14px 18px;border-bottom:1px solid #edf1f6;max-width:420px;overflow:hidden;text-overflow:ellipsis}tbody tr:hover{background:#f8faff}td .actions{flex-wrap:nowrap}input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}.tabs{display:flex;gap:6px;overflow:auto;padding-bottom:16px}.tabs button.active{background:rgba(232,183,48,0.1);border-color:var(--brand);color:var(--brand-dark)}.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:.875rem}.empty{padding:45px;text-align:center;color:var(--muted)}.banner{padding:12px 32px;background:#fff0c9;color:#77540d;font-weight:600;font-size:.875rem;display:flex;justify-content:space-between}.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}.login-intro{background:#101a32;color:white;padding:10vw 7vw;display:flex;flex-direction:column;justify-content:center}.login-intro h1{font-size:3rem;line-height:1.15;margin:25px 0}.login-intro p{color:#a1b2d1;max-width:400px}.login form{width:min(420px,90%);margin:auto;padding:40px 0}.login label,dialog label{display:block;font-size:.875rem;margin:14px 0 5px}.login .primary{width:100%;margin-top:20px}.error{color:#b22c35;background:#ffefef;padding:10px;border-radius:7px;font-size:.875rem;margin-top:12px}.login details{margin-top:16px;font-size:.875rem;color:var(--muted)}dialog{border:1px solid var(--border);border-radius:16px;padding:25px;width:min(660px,94vw);max-height:90vh;color:#17233b}dialog::backdrop{background:rgba(12, 24, 58, 0.5);backdrop-filter:blur(8px)}dialog h2{font-size:1.2rem}dialog footer{margin-top:22px;display:flex;justify-content:flex-end;gap:8px}dialog textarea{min-height:85px}.items{display:grid;gap:8px;margin-top:18px}.item{display:grid;grid-template-columns:1fr 100px;gap:10px;align-items:center}.item small{display:block;color:var(--muted)}#toast{position:fixed;bottom:25px;right:25px;max-width:400px;background:#14243d;color:white;border-radius:12px;box-shadow:0 10px 40px #15284b33;padding:14px 22px;z-index:99;display:none}.timeline{list-style:none;margin:0;padding:0}.timeline li{padding:15px 0;border-bottom:1px solid var(--border)}.chart{width:100%;height:160px}.qr{max-width:260px;width:100%}.health{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.health .card{padding:14px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;background:#f3f6fb;padding:12px;border-radius:8px}.bottom-nav{display:none}@media(max-width:1000px){.layout{grid-template-columns:200px 1fr}.content{padding:22px}.topbar{padding:15px 22px}.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}@media(max-width:640px){.layout{display:block}.layout>aside{height:auto;position:static;padding:12px}.brand{padding:0;font-size:1.2rem}.brand small,.workspace,.aside-bottom{display:none}.nav{display:flex;overflow:auto;margin-top:10px}.nav button{white-space:nowrap;padding:9px}.topbar{padding:10px 15px}.topbar input{max-width:170px}.identity .name{display:none}.content{padding:20px 14px 85px}.heading{align-items:flex-start;flex-direction:column}.kpis{gap:10px}.card{padding:15px}.kpi strong{font-size:1.65rem}.health{grid-template-columns:1fr 1fr}.login{grid-template-columns:1fr}.login-intro{padding:35px 25px}.login-intro h1{font-size:1.7rem;margin:10px 0}.login-intro p{display:none}.login form{padding:30px 0}.banner{padding:10px;font-size:.75rem}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);border-top:1px solid var(--border);justify-content:space-around;padding:8px;z-index:10}.bottom-nav button{border:0;padding:10px 6px;font-size:.75rem}.bottom-nav button.active{color:var(--brand-dark);background:rgba(232, 183, 48, 0.1)}.pager{gap:12px}.item{grid-template-columns:1fr 90px}h1{font-size:1.5rem}}
:root{--space-unit:8px;--radius-card:16px;--surface-panel:#fff;--border-subtle:#dce3ed;--info:var(--brand);--success:#16845d;--warning:#a9630b;--danger:#b52f42}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand-glow);outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}.attention-row{display:flex;gap:16px;align-items:center;border-bottom:1px solid var(--border-subtle);padding:16px 0}.attention-row span:nth-child(2){flex:1}.attention-row small{display:block}.record{padding:16px;background:var(--surface-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-card);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.record dt{font-size:12px;color:#53637c}.record dd{margin:4px 0;overflow-wrap:anywhere}dialog fieldset{border:1px solid var(--border-subtle);border-radius:12px;margin:16px 0;padding:16px}@media(max-width:640px){.record{grid-template-columns:1fr}.attention-row{flex-wrap:wrap}}

/* App UX & Glassmorphism Enhancements */
html {
    scroll-behavior: smooth;
}
dialog::backdrop {
    backdrop-filter: blur(12px) !important;
    background: rgba(8, 12, 20, 0.6) !important;
}
.topbar {
    backdrop-filter: blur(20px) !important;
    background: rgba(8, 12, 20, 0.8) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.login-intro {
    background: linear-gradient(-45deg, #0a101b, #152238, rgba(232,183,48,0.2), #0a101b) !important;
    background-size: 400% 400% !important;
    animation: gradientShift 15s ease infinite !important;
}
button.primary, button.button-primary, .primary {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
button.primary:hover, button.button-primary:hover, .primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(232,183,48,0.3);
}
#toast {
    backdrop-filter: blur(16px);
    background: rgba(20, 36, 61, 0.9) !important;
    border: 1px solid rgba(232,183,48,0.2);
    animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.bottom-nav {
    backdrop-filter: blur(16px) !important;
    background: rgba(10, 16, 27, 0.85) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.table-wrap {
    backdrop-filter: blur(12px) !important;
    background: rgba(15, 23, 35, 0.7) !important;
}
.pager button {
    transition: all 0.2s ease;
}
.pager button:hover {
    background: rgba(232,183,48,0.1);
    color: var(--brand);
}
h1 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- Notification Dropdown --- */
.notification-dropdown {
    position: fixed;
    width: 320px;
    background: #0f1723;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    z-index: 1000;
    overflow: hidden;
    backdrop-filter: blur(12px);
    background: rgba(16, 24, 40, 0.7);
}
.notification-dropdown[hidden] {
    display: none;
}
.notification-item {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.2s ease;
}
.notification-item:hover {
    background: rgba(255,255,255,0.05);
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #FF5252;
    border-radius: 50%;
    border: 2px solid #080c14;
}

/* --- Floating Action Button (FAB) --- */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.fab-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(0);
}
.fab-menu[hidden] {
    display: none;
}
.fab-menu button {
    background: #162031;
    color: #E8ECF4;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    white-space: nowrap;
    font-weight: 500;
}
.fab-menu button:hover {
    background: #E8B730;
    color: #080c14;
    border-color: #E8B730;
}
.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E8B730;
    color: #080c14;
    font-size: 28px;
    border: none;
    box-shadow: 0 4px 16px rgba(232, 183, 48, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease;
}
.fab-main:hover {
    transform: scale(1.1);
    background: #D4A017;
}