:root{
  --gold:#b49654;
  --gold-light:#d8c27d;
  --gold-dark:#8f743b;
  --black:#080808;
  --surface:#111111;
  --surface-2:#171717;
  --border:#292929;
  --text:#f5f3ed;
  --muted:#a8a8a8;
  --green:#61c995;
  --yellow:#e0b85b;
  --red:#e16b6b;
  --shadow:0 18px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--black);color:var(--text)}
body{font-size:15px}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:250px;background:#050505;border-right:1px solid var(--border);padding:28px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}
.brand{text-align:center;padding:5px 10px 32px;border-bottom:1px solid var(--border)}
.brand img{width:180px;max-width:100%;height:auto}
.sidebar nav{display:grid;gap:8px;padding-top:25px}
.sidebar nav a{padding:13px 14px;border-radius:10px;color:#bdbdbd;transition:.2s}
.sidebar nav a:hover{background:var(--surface-2);color:var(--gold-light)}
.sidebar-user{margin-top:auto;border-top:1px solid var(--border);padding:18px 8px 0;display:grid;gap:5px}
.sidebar-user span{color:var(--muted);font-size:13px}
.logout-link{color:var(--gold);font-size:13px;margin-top:8px}
.main{margin-left:250px;width:calc(100% - 250px)}
.topbar{min-height:92px;padding:22px 42px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:rgba(8,8,8,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}
.topbar h1{font-size:24px;margin:4px 0 0}
.eyebrow{color:var(--gold);letter-spacing:.18em;font-size:10px;font-weight:800;margin:0}
.top-user{color:#cfcfcf}
.content{padding:36px 42px 60px;max-width:1500px;margin:auto}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat-card,.panel,.clock-panel,.employee-hero{background:linear-gradient(145deg,#141414,#0e0e0e);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.stat-card{padding:22px}
.stat-card span{color:var(--muted);font-size:13px}
.stat-card strong{display:block;font-size:30px;margin-top:8px;color:var(--gold-light)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0 16px}
.section-head h2,.panel h2{margin:5px 0;font-size:21px}
.live-pill{color:var(--green);font-size:12px;display:flex;gap:7px;align-items:center}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.table-card,.panel{padding:22px}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#888}
td{color:#ddd}
td small{display:block;color:#777;margin-top:3px}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge.working{color:#83dfb0;background:rgba(97,201,149,.12)}
.badge.break{color:#f0ca75;background:rgba(224,184,91,.12)}
.badge.offline{color:#aaa;background:#222}
.btn{border:1px solid var(--border);border-radius:10px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#080808}
.btn.warning{background:#9d7c38;border-color:#b18c43;color:#fff}
.btn.danger{background:#6c2929;border-color:#8b3c3c;color:#fff}
.btn.ghost{background:transparent;color:#ddd}
.btn.small{padding:7px 10px;font-size:12px}
.btn.big{padding:15px 24px;min-width:150px}
.btn.full{width:100%}
.inline{display:inline}
.actions{white-space:nowrap}
.alert{padding:13px 15px;border-radius:10px;margin-bottom:18px;border:1px solid var(--border)}
.alert.success{background:rgba(97,201,149,.08);color:#9ae3bd}
.alert.error{background:rgba(225,107,107,.08);color:#ef9999}
.two-col{display:grid;grid-template-columns:360px 1fr;gap:20px}
.form-grid{display:grid;gap:15px}
label{display:grid;gap:7px;color:#c9c9c9;font-size:13px}
label small{color:#777}
input{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:9px;background:#0a0a0a;color:#fff;outline:none}
input:focus{border-color:var(--gold)}
.date-filter{display:flex;gap:8px}
.date-filter input{width:auto}
.employee-hero{padding:28px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.employee-hero h2{font-size:28px;margin:7px 0}
.muted{color:var(--muted)}
.live-clock{font-size:28px;color:var(--gold-light);font-variant-numeric:tabular-nums}
.clock-panel{text-align:center;padding:35px;margin:20px 0}
.status-ring{width:150px;height:150px;border:1px solid #333;border-radius:50%;margin:0 auto 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.status-ring.active{border-color:var(--gold);box-shadow:0 0 40px rgba(180,150,84,.12)}
.status-ring .dot{width:12px;height:12px;background:#555;border-radius:50%}
.status-ring.active .dot{background:var(--green);box-shadow:0 0 15px var(--green)}
.status-ring strong{letter-spacing:.12em;font-size:12px;color:#bbb}
.clock-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.small-text{font-size:12px;margin-top:18px}
.empty{text-align:center;color:#777;padding:30px}
.login-page{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 50% 15%,rgba(180,150,84,.11),transparent 35%),#050505}
.login-card{width:min(430px,92vw);background:#0d0d0d;border:1px solid var(--border);border-radius:18px;padding:38px;box-shadow:var(--shadow)}
.login-logo{display:block;width:190px;margin:0 auto 28px}
.login-card h1{margin:7px 0;font-size:28px}
.login-card form{display:grid;gap:16px;margin-top:24px}
.login-note{font-size:11px;color:#666;text-align:center;margin:25px 0 0}
@media(max-width:1000px){
  .sidebar{width:210px}.main{margin-left:210px;width:calc(100% - 210px)}
  .content{padding:28px}.stats-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}
}
@media(max-width:700px){
  .sidebar{position:static;width:100%;height:auto;display:block;border-right:0;border-bottom:1px solid var(--border)}
  .sidebar nav{grid-template-columns:repeat(3,1fr)}.sidebar-user{display:none}
  .app-shell{display:block}.main{margin-left:0;width:100%}.topbar{padding:18px 20px}.content{padding:20px}
  .stats-grid{grid-template-columns:1fr 1fr}.employee-hero{display:block}.live-clock{margin-top:20px}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}.clock-actions .btn{width:100%}.login-card{padding:28px 22px}
}

.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.narrow{max-width:620px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:grid;place-items:center;z-index:50;padding:20px}.modal[hidden]{display:none}.modal-card{position:relative;width:min(520px,100%);background:#111;border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow)}.modal-close{position:absolute;right:15px;top:8px;background:transparent;border:0;color:#aaa;font-size:28px;cursor:pointer}

select,textarea{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:9px;background:#0a0a0a;color:#fff;outline:none}select:focus,textarea:focus{border-color:var(--gold)}.check{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:9px}.check input{width:auto}.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 30px;margin-bottom:20px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle at 85% 25%,rgba(180,150,84,.16),transparent 35%),linear-gradient(145deg,#151515,#0d0d0d)}.dashboard-hero h2{font-size:30px;margin:6px 0}.hero-clock{font-size:32px;color:var(--gold-light);font-variant-numeric:tabular-nums}.stat-card small{display:block;color:#666;margin-top:6px}.employee-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.employee-card{border:1px solid var(--border);border-radius:15px;padding:18px;background:#101010}.employee-card .card-top{display:flex;justify-content:space-between;gap:10px}.employee-card h3{margin:0 0 4px;font-size:16px}.employee-card .meta{color:#777;font-size:12px}.employee-card .time{font-size:25px;color:var(--gold-light);margin-top:18px;font-variant-numeric:tabular-nums}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}.quick-card{border:1px solid var(--border);border-radius:14px;padding:18px;background:#0f0f0f;display:grid;gap:7px;transition:.2s}.quick-card:hover{border-color:var(--gold-dark);transform:translateY(-2px)}.quick-card b{color:var(--gold-light)}.quick-card span{font-size:12px;color:#777}.notice-chip{display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;background:rgba(180,150,84,.12);color:var(--gold-light);font-size:11px}.decision-form{display:flex;gap:5px;align-items:center}.decision-form input{min-width:140px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--border);border-top:1px solid var(--border)}.calendar-head,.calendar-day{min-height:90px;padding:10px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.calendar-head{min-height:auto;color:#777;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.calendar-day{background:#0e0e0e}.calendar-day strong{display:block}.calendar-day small{display:block;margin-top:9px;color:#777;font-size:10px}.calendar-day.worked{background:rgba(97,201,149,.08)}.calendar-day.worked small{color:#83dfb0}.calendar-day.holiday{background:rgba(180,150,84,.10)}.calendar-day.holiday small{color:var(--gold-light)}.calendar-day.leave{background:rgba(224,184,91,.08)}.calendar-day.leave small{color:#f0ca75}.calendar-day.blank{background:#090909}@media(max-width:1000px){.employee-cards{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.dashboard-hero{display:block}.hero-clock{margin-top:20px}.employee-cards{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}.calendar-day{min-height:70px;padding:7px}.calendar-head{font-size:9px}}