*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --brown:#3A1F0D;--copper:#C4622D;--gold:#8B5E1A;
  --cream:#F5ECD7;--light:#F5F0E8;--white:#FFFFFF;
  --sidebar-bg:#1C1C1E;--border:rgba(58,31,13,0.1);
  --sidebar:240px;--shadow:0 2px 16px rgba(58,31,13,0.08);
}
body{background:var(--light);font-family:'Jost',sans-serif;color:var(--brown);min-height:100vh;display:flex;}

/* ===== LOGIN ===== */
#login-screen{position:fixed;inset:0;background:var(--sidebar-bg);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:2rem;}
.login-card{background:rgba(255,255,255,0.04);border:1px solid rgba(196,98,45,0.2);border-radius:20px;padding:2.5rem 2rem;width:360px;display:flex;flex-direction:column;gap:1.25rem;}
.login-brand{text-align:center;margin-bottom:0.5rem;}
.login-brand-name{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:600;color:#f5f0e8;letter-spacing:0.02em;}
.login-brand-name span{color:var(--copper);}
.login-brand-sub{font-size:0.62rem;letter-spacing:0.45em;text-transform:uppercase;color:rgba(245,240,232,0.3);margin-top:3px;font-family:'Jost',sans-serif;}
.lf{display:flex;flex-direction:column;gap:0.4rem;}
.lf label{font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;color:rgba(245,240,232,0.35);}
.lf input{background:rgba(255,255,255,0.06);border:1px solid rgba(245,240,232,0.1);border-radius:10px;padding:0.75rem 1rem;color:#f5f0e8;font-family:'Jost',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s;}
.lf input:focus{border-color:rgba(196,98,45,0.5);}
.login-btn{background:var(--copper);border:none;border-radius:10px;padding:0.85rem;color:#f5f0e8;font-family:'Jost',sans-serif;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.2s;margin-top:0.25rem;}
.login-btn:hover{background:#b5551f;transform:translateY(-1px);}
.login-err{font-size:0.78rem;color:#ff6b6b;text-align:center;display:none;padding:0.5rem;background:rgba(255,107,107,0.1);border-radius:8px;}

/* ===== SIDEBAR ===== */
#app{display:none;width:100%;min-height:100vh;}
.sidebar{width:var(--sidebar);background:var(--sidebar-bg);min-height:100vh;position:fixed;left:0;top:0;bottom:0;display:flex;flex-direction:column;padding:1.5rem 1rem;z-index:100;}
.sb-brand{padding:0.5rem 0.75rem 1.5rem;border-bottom:1px solid rgba(196,98,45,0.15);margin-bottom:0.75rem;}
.sb-brand-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;color:#f5f0e8;}
.sb-brand-name span{color:var(--copper);}
.sb-brand-sub{font-size:0.58rem;letter-spacing:0.4em;text-transform:uppercase;color:rgba(245,240,232,0.25);margin-top:3px;font-family:'Jost',sans-serif;}
.sb-section{font-size:0.58rem;letter-spacing:0.35em;text-transform:uppercase;color:rgba(245,240,232,0.2);padding:0 0.75rem;margin:1rem 0 0.4rem;font-weight:500;}
.nav-btn{display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0.75rem;border-radius:10px;cursor:pointer;font-size:0.82rem;color:rgba(245,240,232,0.45);background:none;border:none;width:100%;text-align:left;transition:all 0.15s;font-family:'Jost',sans-serif;}
.nav-btn:hover{background:rgba(255,255,255,0.06);color:#f5f0e8;}
.nav-btn.active{background:rgba(196,98,45,0.18);color:#f5f0e8;}
.nav-btn .ni{font-size:0.95rem;width:18px;text-align:center;opacity:0.8;}
.sb-bottom{margin-top:auto;border-top:1px solid rgba(196,98,45,0.15);padding-top:1rem;}
.sb-user{display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0.75rem;margin-bottom:0.5rem;}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:rgba(196,98,45,0.2);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600;color:var(--copper);flex-shrink:0;}
.sb-uname{font-size:0.82rem;color:#f5f0e8;font-weight:500;}
.sb-urole{font-size:0.65rem;color:rgba(245,240,232,0.3);text-transform:uppercase;letter-spacing:0.15em;}
.logout-btn{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.75rem;border-radius:10px;cursor:pointer;font-size:0.78rem;color:rgba(245,240,232,0.3);background:none;border:none;width:100%;transition:all 0.15s;font-family:'Jost',sans-serif;}
.logout-btn:hover{color:#ff6b6b;}

/* ===== MAIN ===== */
.main{margin-left:var(--sidebar);flex:1;padding:2rem;min-height:100vh;}
.page{display:none;animation:fadeIn 0.2s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;}
.page-title{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:600;color:var(--brown);line-height:1;}
.page-title small{display:block;font-family:'Jost',sans-serif;font-size:0.62rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--copper);font-weight:500;margin-bottom:4px;}

/* ===== CARDS ===== */
.card{background:var(--white);border-radius:14px;padding:1.5rem;border:0.5px solid var(--border);box-shadow:var(--shadow);}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;}
.stat{background:var(--white);border-radius:14px;padding:1.25rem 1.5rem;border:0.5px solid var(--border);box-shadow:var(--shadow);}
.stat-l{font-size:0.6rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;}
.stat-v{font-size:1.9rem;font-weight:600;color:var(--brown);line-height:1;}
.stat-v.c{color:var(--copper);}
.stat-s{font-size:0.72rem;color:rgba(58,31,13,0.35);margin-top:0.25rem;}
.stat-sub{font-size:0.68rem;color:var(--gold);margin-top:0.2rem;}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:0.45rem;padding:0.6rem 1.2rem;border-radius:9px;font-family:'Jost',sans-serif;font-size:0.82rem;font-weight:500;cursor:pointer;transition:all 0.15s;border:none;text-decoration:none;}
.btn-p{background:var(--copper);color:#f5f0e8;}
.btn-p:hover{background:#b5551f;}
.btn-s{background:transparent;border:1px solid var(--border);color:var(--brown);}
.btn-s:hover{background:var(--light);}
.btn-d{background:transparent;border:1px solid rgba(220,53,69,0.25);color:#dc3545;}
.btn-d:hover{background:rgba(220,53,69,0.08);}
.btn-sm{padding:0.35rem 0.8rem;font-size:0.74rem;}
.btn-xs{padding:0.25rem 0.6rem;font-size:0.7rem;}

/* ===== TABLE ===== */
.tbl-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{padding:0.6rem 1rem;text-align:left;font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--border);font-weight:500;}
tbody td{padding:0.85rem 1rem;font-size:0.84rem;border-bottom:1px solid rgba(58,31,13,0.04);color:var(--brown);vertical-align:middle;}
tbody tr:hover{background:rgba(245,236,215,0.4);}
tbody tr:last-child td{border-bottom:none;}

/* ===== BADGE ===== */
.badge{display:inline-block;padding:0.2rem 0.7rem;border-radius:100px;font-size:0.68rem;font-weight:500;}
.bg-green{background:rgba(76,175,80,0.12);color:#2e7d32;}
.bg-yellow{background:rgba(255,193,7,0.15);color:#b8860b;}
.bg-red{background:rgba(220,53,69,0.12);color:#c0392b;}
.bg-blue{background:rgba(33,150,243,0.12);color:#1565c0;}
.bg-gray{background:rgba(58,31,13,0.07);color:var(--gold);}
.bg-copper{background:rgba(196,98,45,0.12);color:var(--copper);}

/* ===== MODAL ===== */
.overlay{position:fixed;inset:0;background:rgba(28,28,30,0.6);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px);}
.overlay.open{display:flex;}
.modal{background:var(--white);border-radius:18px;padding:2rem;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(28,28,30,0.3);}
.modal-lg{max-width:680px;}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.mt{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--brown);}
.mc{background:none;border:none;font-size:1.1rem;cursor:pointer;color:rgba(58,31,13,0.3);padding:0.25rem;transition:color 0.15s;}
.mc:hover{color:var(--brown);}
.mf{display:flex;gap:0.75rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);}

/* ===== FORM ===== */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.fi{display:flex;flex-direction:column;gap:0.4rem;}
.fi.full{grid-column:1/-1;}
.fi label{font-size:0.66rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);}
.fi input,.fi select,.fi textarea{background:var(--light);border:1px solid var(--border);border-radius:9px;padding:0.65rem 0.9rem;color:var(--brown);font-family:'Jost',sans-serif;font-size:0.87rem;outline:none;transition:border-color 0.2s;}
.fi input:focus,.fi select:focus,.fi textarea:focus{border-color:var(--copper);}
.fi textarea{resize:vertical;min-height:80px;}
.pass-wrapper{display:flex;align-items:center;gap:0.5rem;position:relative;}
.pass-wrapper input{flex:1;margin:0;}
.pass-toggle{background:none;border:none;cursor:pointer;color:var(--gold);padding:0.4rem;font-size:0.9rem;opacity:0.6;transition:opacity 0.2s;display:flex;align-items:center;justify-content:center;}
.pass-toggle:hover{opacity:1;}

/* ===== MISC ===== */
.search-row{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;}
.search-inp{flex:1;background:var(--white);border:1px solid var(--border);border-radius:9px;padding:0.6rem 1rem;font-family:'Jost',sans-serif;font-size:0.84rem;color:var(--brown);outline:none;}
.search-inp:focus{border-color:var(--copper);}
.sel-filter{padding:0.6rem 1rem;border:1px solid var(--border);border-radius:9px;font-family:'Jost',sans-serif;font-size:0.82rem;background:var(--white);color:var(--brown);outline:none;}
.empty{text-align:center;padding:3rem 1rem;color:rgba(58,31,13,0.3);}
.empty .ei{font-size:2.5rem;margin-bottom:0.75rem;}
.empty p{font-size:0.84rem;}
.mono{font-family:'JetBrains Mono',monospace;font-size:0.78rem;}
.section-lbl{font-size:0.62rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--copper);font-weight:500;margin-bottom:0.85rem;}
.activity-item{display:flex;align-items:flex-start;gap:1rem;padding:0.85rem 0;border-bottom:1px solid rgba(58,31,13,0.04);}
.activity-item:last-child{border-bottom:none;}
.adot{width:8px;height:8px;border-radius:50%;background:var(--copper);margin-top:5px;flex-shrink:0;}
.at{font-size:0.84rem;color:var(--brown);line-height:1.4;}
.as{font-size:0.7rem;color:rgba(58,31,13,0.35);margin-top:2px;}
.prog-bar{height:6px;background:var(--light);border-radius:100px;overflow:hidden;margin-top:0.5rem;}
.prog-fill{height:100%;background:var(--copper);border-radius:100px;transition:width 0.4s;}
.inv-item-row{display:grid;grid-template-columns:1fr 70px 100px 28px;gap:0.5rem;align-items:center;margin-bottom:0.5rem;}
.inv-item-inp{padding:0.5rem 0.7rem;border:1px solid var(--border);border-radius:7px;font-family:'Jost',sans-serif;font-size:0.82rem;background:var(--light);color:var(--brown);outline:none;width:100%;}
.inv-item-inp:focus{border-color:var(--copper);}
.inv-total-row{display:flex;justify-content:flex-end;gap:1rem;align-items:center;padding:0.75rem 0;border-top:1px solid var(--border);font-size:0.88rem;}
.inv-total-val{font-size:1.1rem;font-weight:600;color:var(--copper);}
.role-admin{background:rgba(196,98,45,0.12);color:var(--copper);}
.role-staff{background:rgba(33,150,243,0.12);color:#1565c0;}
.notify{position:fixed;bottom:2rem;right:2rem;background:var(--brown);color:var(--cream);padding:0.85rem 1.5rem;border-radius:12px;font-size:0.84rem;z-index:9000;transform:translateY(100px);opacity:0;transition:all 0.3s;box-shadow:0 8px 30px rgba(28,28,30,0.3);}
.notify.show{transform:translateY(0);opacity:1;}
.notify.err{background:#c0392b;}