:root{
  --maroon-900:#4a0f16; --maroon-700:#6e1a24; --maroon-600:#82212c;
  --gold-500:#b8912f; --cream:#faf8f4; --ink:#241c1d; --ink-soft:#5c5250;
  --line:#e7ddd0; --card:#ffffff;
  --ok-bg:#e7f0e5; --ok-fg:#2f5e34;
  --warn-bg:#fbf0dc; --warn-fg:#8a5a10;
  --reject-bg:#fbe9e9; --reject-fg:#a13c3c;
  --none-bg:#f1ede6; --none-fg:#8a817c;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter',Arial,sans-serif; background:var(--cream); color:var(--ink);}
h1,h2,h3{font-family:'Source Serif 4',Georgia,serif; font-weight:600; margin:0 0 .5em;}
a{color:var(--maroon-700);}
.shell{display:flex; min-height:100vh;}

.sidebar{width:250px; background:var(--maroon-900); color:#f4ece2; flex-shrink:0; padding:28px 0;}
.brand{padding:0 24px 20px; border-bottom:1px solid rgba(244,236,226,.15); margin-bottom:16px;}
.brand img{width:42px; height:42px; object-fit:contain; margin-bottom:10px;}
.brand h1{font-size:15px; color:#fff; margin:0;}
.brand p{font-size:12px; color:#cdb9a4; margin:4px 0 0;}
nav{padding:0 12px;}
.navitem{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; color:#e9dccb; text-decoration:none; margin-bottom:2px;}
.navitem:hover{background:rgba(244,236,226,.08);}
.navitem.active{background:var(--gold-500); color:var(--maroon-900); font-weight:500;}
.userbox{margin:20px 12px 0; padding:14px; background:rgba(244,236,226,.08); border-radius:10px; font-size:12.5px;}
.userbox .role{color:var(--gold-500); font-weight:600;}
.userbox a{color:#e9dccb; font-size:12px;}

.main{flex:1; min-width:0;}
.topbar{padding:20px 36px; border-bottom:1px solid var(--line); background:var(--card);}
.content{padding:32px 36px; max-width:960px;}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px;}
.stat .label{font-size:12.5px; color:var(--ink-soft);}
.stat .num{font-family:'Source Serif 4',Georgia,serif; font-size:26px; margin-top:4px;}

.krow{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:10px;}
.krow .head{display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:500;}
.bar{height:6px; background:var(--none-bg); border-radius:3px; overflow:hidden; margin-top:10px;}
.bar>div{height:100%; background:var(--gold-500);}
.meta{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-top:6px;}
.ppepp{display:flex; gap:5px; margin-top:9px;}
.ppepp .dot{width:18px; height:18px; border-radius:50%; font-size:9px; font-weight:600; display:flex; align-items:center; justify-content:center; background:var(--none-bg); color:var(--none-fg);}
.ppepp .dot.on{background:var(--gold-500); color:#fff;}
.elemlist{margin-top:12px; padding-top:10px; border-top:1px solid var(--line);}
.erow{display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13px;}

.badge{font-size:11px; padding:3px 9px; border-radius:6px; font-weight:500;}
.badge-ok{background:var(--ok-bg); color:var(--ok-fg);}
.badge-warn{background:var(--warn-bg); color:var(--warn-fg);}
.badge-reject{background:var(--reject-bg); color:var(--reject-fg);}
.badge-none{background:var(--none-bg); color:var(--none-fg);}

.card-form{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px; max-width:460px;}
.card-form label{display:block; font-size:13px; color:var(--ink-soft); margin:14px 0 6px;}
.card-form label:first-child{margin-top:0;}
.card-form select, .card-form input[type=file], .card-form input[type=text], .card-form input[type=number], .card-form textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit; background:#fff;
}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--maroon-700); color:#fff; border:none; padding:11px 18px; border-radius:8px; font-size:13.5px; font-weight:500; cursor:pointer; margin-top:18px; text-decoration:none;}
.btn:hover{background:var(--maroon-600);}
.btn-sm{padding:7px 12px; font-size:12.5px; margin-top:0;}
.btn-reject{background:#fff; color:var(--reject-fg); border:1px solid #e8c2c2;}
.btn-approve{background:#fff; color:var(--ok-fg); border:1px solid #bcd9bb;}

.vcard{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:10px;}
.vcard .t{font-size:14px; font-weight:500;}
.vcard .m{font-size:12px; color:var(--ink-soft); margin:4px 0 12px;}
.vcard .actions{display:flex; gap:10px;}
.vcard .actions form{flex:1;}
.vcard .actions button{width:100%;}

.doclist{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px 18px;}
.drow{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.drow:last-child{border-bottom:none;}

.alert{padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px;}
.alert-error{background:var(--reject-bg); color:var(--reject-fg);}
.alert-ok{background:var(--ok-bg); color:var(--ok-fg);}

.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--maroon-900);}
.login-box{background:#fff; border-radius:14px; padding:36px 32px; width:340px;}
.login-box img{width:56px; display:block; margin:0 auto 12px;}
.login-box h1{text-align:center; font-size:17px; margin-bottom:4px;}
.login-box p.sub{text-align:center; font-size:12.5px; color:var(--ink-soft); margin-bottom:22px;}
.login-box label{display:block; font-size:13px; color:var(--ink-soft); margin:14px 0 6px;}
.login-box input{width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px;}
.login-box button{width:100%; margin-top:20px;}
.hint{font-size:11.5px; color:var(--ink-soft); margin-top:16px; text-align:center; line-height:1.6;}