:root{--brand:#5b3a2d;--brand2:#8a5b46;--bg:#f7f4f1;--card:#fff;--line:#e4d9d2;--text:#2a211d;--muted:#756b66;--green:#198754;--red:#c83f3f;--amber:#c78618;--blue:#456f98;--purple:#7658c7;--soft:#f4eee9}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}a{color:var(--brand)}
.topbar{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.brand{font-size:22px;font-weight:800}.tagline{font-size:12px;opacity:.88;margin-top:4px}.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.server-clock,.user-chip{background:rgba(255,255,255,.14);padding:9px 12px;border-radius:9px;font-weight:700;font-size:13px}.navtabs{display:flex;gap:8px;padding:10px 22px;background:#fff;border-bottom:1px solid var(--line);overflow:auto}.navtabs a{white-space:nowrap;text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px}.navtabs a:hover{background:var(--soft)}
.container{max-width:1380px;margin:20px auto;padding:0 14px 30px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px;box-shadow:0 4px 16px rgba(70,45,34,.05)}h1,h2,h3{margin-top:0}.muted{color:var(--muted);font-size:13px}.profile{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px}.kpi{border:1px solid var(--line);background:#fbfaf9;border-radius:10px;padding:11px}.kpi span{font-size:12px;color:var(--muted)}.kpi b{display:block;margin-top:5px;font-size:21px}.notice{padding:11px 12px;border-left:4px solid var(--brand);background:#fbf7f4;border-radius:7px;font-size:13px}.gracebar{height:12px;background:#ede5e0;border-radius:999px;overflow:hidden}.gracebar>span{display:block;height:100%;background:var(--brand)}
.btn{display:inline-block;border:0;border-radius:8px;padding:10px 14px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;cursor:pointer;font-size:14px}.btn:hover{filter:brightness(.96)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-green{background:var(--green)}.btn-red{background:var(--red)}.btn-blue{background:var(--blue)}.btn-purple{background:var(--purple)}.btn-muted{background:#687385}.btn-small{padding:7px 10px;font-size:12px}
.punch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.punch-grid .btn{padding:15px 8px}.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.badge-ok{background:#e8f6ef;color:var(--green)}.badge-warn{background:#fff2d9;color:#9a6207}.badge-bad{background:#fdeaea;color:var(--red)}.badge-info{background:#eaf1f7;color:var(--blue)}.badge-hd{background:#fff0e2;color:#a95200}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{background:var(--soft);font-size:12px}.click-name{font-weight:800;color:var(--brand)}.photo-thumb{width:68px;height:50px;object-fit:cover;border-radius:7px;border:1px solid var(--line);cursor:pointer}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}label{font-size:12px;font-weight:800;color:#594e49}input,select,textarea{width:100%;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}textarea{min-height:90px;resize:vertical}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form{display:inline-flex;gap:6px;align-items:center}.alert{padding:11px 13px;border-radius:9px;margin-bottom:12px;font-weight:700}.alert.success{background:#e8f6ef;color:#11683f}.alert.error{background:#fdeaea;color:#9f2f2f}.alert.info{background:#eaf1f7;color:#365d80}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:14px}.hidden{display:none!important}.modal-card{position:relative;background:#fff;border-radius:14px;padding:18px;width:min(760px,100%);max-height:92vh;overflow:auto}.modal-close{position:absolute;right:12px;top:10px;border:0;background:#eee5df;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer}.camera-wrap{background:#111;border-radius:12px;padding:10px;text-align:center}.camera-wrap video,.camera-wrap canvas{max-width:100%;width:100%;border-radius:9px}.photo-modal-card{text-align:center}.photo-modal-card img{max-width:100%;max-height:82vh;border-radius:10px}.login-card{max-width:450px;margin:45px auto}.section-title{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.right{text-align:right}.salary-total{font-size:26px;color:var(--green);font-weight:800}.warning-text{color:var(--red)}
@media(max-width:920px){.c8,.c6,.c4,.c3{grid-column:span 12}.punch-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.topbar{padding:14px}.navtabs{padding:8px 12px}.container{margin-top:12px}.server-clock{width:100%;text-align:center}.top-actions{width:100%}.user-chip{flex:1}.card{padding:14px}}
@media(max-width:520px){html{font-size:15px}.brand{font-size:19px}.punch-grid{grid-template-columns:1fr 1fr}.btn{width:100%;text-align:center}.actions .btn,.inline-form .btn{width:auto}.kpi b{font-size:19px}.table-wrap{margin-left:-4px;margin-right:-4px}}