*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --accent:#0F6E56;--accent-light:#E1F5EE;--accent-mid:#5DCAA5;
  --ink:#1a1a18;--ink2:#4a4a47;--ink3:#8a8a85;
  --bg:#ffffff;--bg2:#f7f6f2;--bg3:#f0efe9;
  --bdr:#e4e3dc;--bdr2:#ccc9be;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#f0efe9;--ink2:#b0afa8;--ink3:#6a6a65;--bg:#1c1c1a;--bg2:#242422;--bg3:#161614;--bdr:#2e2e2b;--bdr2:#3a3a36;}
}
html,body{height:100%;overflow:hidden;}
body{font-family:'DM Sans',sans-serif;background:var(--bg3);font-size:15px;}

/* SHELL */
.shell{display:flex;height:100dvh;}

/* SIDEBAR */
.sidebar{
  width:260px;min-width:260px;background:var(--bg);
  border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;
  transition:transform .25s ease;
  z-index:50;
}
.sb-top{padding:22px 20px 16px;border-bottom:1px solid var(--bdr);}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark {width: 40px;height: 40px;border-radius: 11px;overflow: hidden;display: block;}
.brand-mark img {width: 100%;height: 100%;object-fit: cover;display: block;}
.brand-name{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-0.4px;line-height:1.1;}
.brand-sub{font-size:11px;color:var(--ink3);margin-top:2px;font-family:'DM Mono',monospace;}
.sb-nav{flex:1;padding:12px;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:600;color:var(--ink3);letter-spacing:1px;text-transform:uppercase;padding:12px 10px 6px;font-family:'DM Mono',monospace;}
.ni{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;margin-bottom:2px;transition:all .15s;color:var(--ink2);text-decoration:none;}
.ni:hover{background:var(--bg2);color:var(--ink);}
.ni.on{background:var(--accent-light);color:var(--accent);}
.ni svg{width:18px;height:18px;flex-shrink:0;opacity:.8;}
.ni.on svg{opacity:1;}
.ni-txt{font-size:14px;font-weight:500;}
.sb-divider{height:1px;background:var(--bdr);margin:8px 0;}
.sb-foot{padding:14px 12px;border-top:1px solid var(--bdr);}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s;}
.user-row:hover{background:var(--bg2);}
.ava{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;font-family:'DM Mono',monospace;}
.ava-sm{width:36px;height:36px;font-size:13px;}
.ava-lg{width:56px;height:56px;font-size:18px;}
.ava-xl{width:64px;height:64px;font-size:22px;}
.ava.teal{background:#E1F5EE;color:#0F6E56;}
.ava.blue{background:#E6F1FB;color:#185FA5;}
.ava.purple{background:#EEEDFE;color:#534AB7;}
.ava.coral{background:#FAECE7;color:#993C1D;}
.u-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.u-role{font-size:11px;color:var(--ink3);font-family:'DM Mono',monospace;}

/* MAIN AREA */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{
  height:60px;background:var(--bg);
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:14px;}
.page-title{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-0.4px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.hamburger{display:none;width:36px;height:36px;border-radius:9px;background:var(--bg2);border:1px solid var(--bdr);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.content{flex:1;overflow-y:auto;padding:24px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;text-decoration: none;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--bdr2);background:var(--bg);color:var(--ink);transition:all .15s;font-family:'DM Sans',sans-serif;}
.btn:hover{background:var(--bg2);}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.solid:hover{background:#085041;}
.btn.ghost-red{background:#FCEBEB;border-color:#F09595;color:#791F1F;}
.btn-svg{width:16px;height:16px;flex-shrink:0;}
.btn.ghost-red:hover{background:#F7C1C1;}
.btn.sm{padding:7px 13px;font-size:12px;border-radius:8px;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;font-family:'DM Mono',monospace;}
.badge.teal{background:#E1F5EE;color:#085041;}
.badge.blue{background:#E6F1FB;color:#0C447C;}
.badge.purple{background:#EEEDFE;color:#3C3489;}
.badge.green{background:#EAF3DE;color:#27500A;}
.badge.amber{background:#FAEEDA;color:#633806;}
.badge.red{background:#FCEBEB;color:#791F1F;}
.badge.gray{background:#F1EFE8;color:#444441;}

/* CARDS */
.card{background:var(--bg);border:1px solid var(--bdr);border-radius:14px;padding:22px 24px;margin-bottom:18px;}
.card.flush{padding:0;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.card-title{font-size:15px;font-weight:600;color:var(--ink);}
.card-sub{font-size:12px;color:var(--ink3);}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat{background:var(--bg);border:1px solid var(--bdr);border-radius:14px;padding:20px 22px;}
.stat-label{font-size:11px;color:var(--ink3);font-family:'DM Mono',monospace;letter-spacing:0.3px;margin-bottom:10px;text-transform:uppercase;}
.stat-val{font-size:30px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-1px;}
.stat-hint{font-size:11px;color:var(--ink3);margin-top:6px;}
.stat-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;}

/* TABLE */
table{width:100%;border-collapse:collapse;}
th{text-align:left;padding:12px 18px;font-size:10px;font-weight:600;color:var(--ink3);letter-spacing:0.8px;text-transform:uppercase;border-bottom:1px solid var(--bdr);font-family:'DM Mono',monospace;}
td{padding:14px 18px;border-bottom:1px solid var(--bdr);color:var(--ink);vertical-align:middle;font-size:13px;}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--bg2);}

/* FILE CARD */
.file-card{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--bdr);cursor:pointer;transition:background .15s;}
.file-card:hover{background:var(--bg2);}
.file-card:last-child{border-bottom:none;}
.file-thumb{width:48px;height:54px;background:#FCEBEB;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}
.file-thumb svg{width:22px;height:22px;}
.file-thumb-badge{position:absolute;bottom:-4px;right:-4px;background:var(--accent);color:#fff;font-size:9px;font-weight:600;padding:2px 5px;border-radius:4px;font-family:'DM Mono',monospace;}
.file-body{flex:1;min-width:0;}
.file-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.file-meta{font-size:12px;color:var(--ink2);}
.file-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}

/* FORMS */
input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--bdr2);border-radius:9px;font-size:13px;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);outline:none;transition:border .15s;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0F6E5618;}
textarea{resize:vertical;min-height:80px;}
label{font-size:11px;font-weight:600;color:var(--ink2);display:block;margin-bottom:6px;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:0.3px;}
.fg{margin-bottom:14px;}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* HERO BANNER */
.pg-hero{background:var(--accent);border-radius:16px;padding:26px 28px;margin-bottom:20px;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden;}
.pg-hero-deco{position:absolute;right:-10px;top:-10px;width:120px;height:120px;border-radius:50%;background:#ffffff15;}
.pg-hero-deco2{position:absolute;right:40px;bottom:-25px;width:70px;height:70px;border-radius:50%;background:#ffffff10;}
.pg-hero-text .title{font-size:20px;font-weight:600;color:#fff;letter-spacing:-0.4px;}
.pg-hero-text .sub{font-size:13px;color:#9FE1CB;margin-top:4px;}

/* NOTICE */
.notice{background:var(--accent-light);border:1px solid var(--accent-mid);border-radius:10px;padding:12px 16px;display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.notice-txt{font-size:13px;color:#085041;line-height:1.5;}

/* UPLOAD ZONE */
.upload-zone{border:2px dashed var(--bdr2);border-radius:14px;padding:44px 24px;text-align:center;cursor:pointer;transition:all .2s;}
.upload-zone:hover{border-color:var(--accent);background:#0F6E5608;}
.uz-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.uz-sub{font-size:12px;color:var(--ink3);}

/* MODAL */
.modal-wrap{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-wrap.on{display:flex;}
.modal{background:var(--bg);border-radius:16px;padding:26px;width:100%;max-width:480px;max-height:90dvh;overflow-y:auto;border:1px solid var(--bdr);box-shadow:0 20px 60px rgba(0,0,0,.15);}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.mt{font-size:16px;font-weight:600;color:var(--ink);}
.mc{width:30px;height:30px;border-radius:50%;background:var(--bg2);border:1px solid var(--bdr);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink2);}
.mf{margin-top:18px;display:flex;gap:10px;justify-content:flex-end;}

/* PDF VIEWER */
.pdf-shell{background:#3a3a3a;border-radius:14px;overflow:hidden;}
.pdf-bar{background:#2a2a2a;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;}
.pdf-bar-name{font-size:12px;color:#bbb;font-family:'DM Mono',monospace;}
.pdf-bar-acts{display:flex;gap:8px;}
.pdf-bar-btn{padding:6px 12px;border-radius:7px;font-size:11px;border:1px solid #555;background:#3a3a3a;color:#ccc;cursor:pointer;font-family:'DM Mono',monospace;}
.pdf-page{background:#fff;margin:16px 20px 20px;border-radius:8px;padding:32px 36px;}
.pdf-letterhead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;padding-bottom:18px;border-bottom:3px solid #0F6E56;}
.pdf-org{font-size:15px;font-weight:700;color:#0F6E56;line-height:1.3;}
.pdf-doc-tag{font-size:11px;color:#888;font-family:'DM Mono',monospace;margin-top:4px;}
.pdf-doc-no{text-align:right;font-size:11px;color:#888;font-family:'DM Mono',monospace;line-height:1.7;}
.pdf-sec{font-size:10px;font-weight:700;color:#0F6E56;letter-spacing:1px;text-transform:uppercase;margin:16px 0 8px;font-family:'DM Mono',monospace;}
.pdf-r{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f0f0f0;font-size:12px;color:#333;}
.pdf-r span:last-child{font-family:'DM Mono',monospace;font-weight:500;}
.pdf-r.minus span:last-child{color:#A32D2D;}
.pdf-total-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0 4px;border-top:3px solid #0F6E56;margin-top:10px;}
.pdf-total-label{font-size:14px;font-weight:700;color:#0F6E56;}
.pdf-total-val{font-size:18px;font-weight:700;color:#0F6E56;font-family:'DM Mono',monospace;}
.pdf-stamp{margin-top:18px;font-size:10px;color:#bbb;text-align:center;font-family:'DM Mono',monospace;border-top:1px solid #eee;padding-top:14px;}
.pdf-emp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.pdf-emp-l{font-size:12px;color:#888;padding:5px 0;border-bottom:1px solid #f5f5f5;}
.pdf-emp-r{font-size:12px;color:#333;padding:5px 0;border-bottom:1px solid #f5f5f5;}

/* TOGGLE */
.toggle{width:42px;height:24px;border-radius:12px;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
.toggle-thumb{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle.on{background:var(--accent);}
.toggle.on .toggle-thumb{left:21px;}
.toggle.off{background:var(--bdr2);}
.toggle.off .toggle-thumb{left:3px;}

/* PERIOD TAGS */
.period-tag{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--bdr2);color:var(--ink2);background:var(--bg);transition:all .15s;font-family:'DM Mono',monospace;}
.period-tag.on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* PROFILE CARD */
.profile-card{background:var(--bg);border:1px solid var(--bdr);border-radius:16px;padding:28px;margin-bottom:18px;display:flex;align-items:center;gap:20px;}
.profile-info .pname{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-0.4px;}
.profile-info .prole{font-size:13px;color:var(--ink3);margin-top:4px;font-family:'DM Mono',monospace;}

/* SEARCH */
.search-wrap{position:relative;}
.search-wrap input{padding-left:38px;}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink3);}

/* GRID */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* OVERLAY for mobile sidebar */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;}
.sb-overlay.on{display:block;}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  body{font-size:15px;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);
    box-shadow:4px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:flex;}
  .main{width:100%;}
  .content{padding:16px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .grid2{grid-template-columns:1fr;}
  .fg2{grid-template-columns:1fr;}
  .topbar{padding:0 16px;height:56px;}
  .page-title{font-size:16px;}
  .pg-hero{padding:20px;}
  .pg-hero-text .title{font-size:17px;}
  table{font-size:13px;}
  th,td{padding:10px 12px;}
  .file-card{padding:14px 16px;}
  .card{padding:18px;}
  .modal{margin:0;border-radius:20px 20px 0 0;max-height:85dvh;position:fixed;bottom:0;left:0;right:0;max-width:100%;}
  .modal-wrap{align-items:flex-end;padding:0;}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-val{font-size:26px;}
  .file-scroll{
    overflow-x:auto;
  }
  .file-right{display:flex;}
  .topbar-right .date-chip{display:none;}
}