:root{
  --paper:#F6F1E3; --paper-deep:#EFE8D4; --line:#D9CFB0;
  --navy:#153059; --navy-deep:#0D1F3B; --stamp:#A32418;
  --khaki:#8A7C55; --khaki-deep:#6F6343; --ink:#221F19; --muted:#726A57;
  --led-bg:#0F1B12; --led-green:#39D97A; --led-amber:#E8A93A;
  --shadow: 0 18px 40px -18px rgba(13,31,59,0.35);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Karla',Arial,sans-serif;background:var(--navy-deep);color:var(--ink);}
a{color:inherit;}
.topbar{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%);color:#F3EFE0;
  padding:18px 26px;border-bottom:3px solid var(--stamp);}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.topbar h1{font-size:20px;margin:0;font-weight:700;}
.topbar .meta{font-family:monospace;font-size:12px;color:#C9CFDC;}
.topbar .logout{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);color:#fff;
  padding:7px 14px;border-radius:6px;text-decoration:none;font-size:13px;}
main{max-width:1200px;margin:0 auto;padding:26px;}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:4px 10px 10px 10px;
  box-shadow:var(--shadow);padding:22px;margin-bottom:22px;}
.panel h2{font-size:18px;color:var(--navy);margin:0 0 14px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--khaki-deep);text-transform:uppercase;
  letter-spacing:0.5px;margin-bottom:5px;}
input[type=text],input[type=password],input[type=tel],input[type=number],textarea,select{
  width:100%;font-size:14.5px;padding:9px 10px;border:1.5px solid var(--line);border-radius:5px;
  background:#FFFDF7;color:var(--ink);}
textarea{min-height:60px;}

.btn{display:inline-block;background:var(--stamp);color:#fff;border:none;font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:6px;cursor:pointer;text-decoration:none;}
.btn:hover{background:#8A1E14;}
.btn.secondary{background:var(--navy);}
.btn.secondary:hover{background:var(--navy-deep);}
.btn.outline{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}
.btn.outline:hover{background:var(--navy);color:#fff;}
.btn.small{padding:6px 11px;font-size:12px;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}

table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:8px;overflow:hidden;}
th{background:var(--navy);color:#F3EFE0;text-align:left;font-size:11px;text-transform:uppercase;
  padding:10px 12px;font-family:monospace;}
td{padding:9px 12px;font-size:13.5px;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--paper-deep);}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;}
.badge.active{background:#DCF3E3;color:#1F7A3F;}
.badge.suspended{background:#F8D9D3;color:var(--stamp);}

.led-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;}
.led-card{background:var(--led-bg);border-radius:10px;padding:14px 18px;}
.led-label{font-family:monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#6C8F76;margin-bottom:6px;}
.led-value{font-family:monospace;font-size:26px;font-weight:700;color:var(--led-green);}
.led-value.low{color:#E85B3A;}

.alert{padding:11px 14px;border-radius:6px;font-size:13.5px;margin-bottom:16px;}
.alert.error{background:#F8D9D3;color:#7A1F14;border:1px solid #E7B4A9;}
.alert.success{background:#DCF3E3;color:#1F7A3F;border:1px solid #B7E3C6;}
.alert.info{background:#FBF0DD;color:#6B4E12;border:1px solid #E7CE9E;}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-box{background:var(--paper);border-radius:10px;box-shadow:var(--shadow);padding:32px;width:100%;max-width:360px;}
.login-box h1{font-size:20px;color:var(--navy);margin:0 0 4px;text-align:center;}
.login-box p.sub{text-align:center;color:var(--muted);font-size:12.5px;margin:0 0 22px;}

.letter{background:#FFFDF7;border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow);
  padding:26px;white-space:pre-wrap;line-height:26px;font-size:14.5px;position:relative;}
.ticket-badge{position:absolute;top:20px;right:24px;background:var(--navy);color:#F3EFE0;font-family:monospace;
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:5px;}
.doc-list{list-style:none;margin:12px 0 0;padding:0;}
.doc-list li{display:flex;gap:9px;font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line);}
.doc-list li:last-child{border:none;}
.doc-list .num{flex-shrink:0;width:20px;height:20px;border-radius:5px;background:var(--khaki);color:#fff;
  font-family:monospace;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}

.grid2{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:22px;align-items:start;}
@media(max-width:880px){.grid2{grid-template-columns:1fr;} .led-strip{grid-template-columns:1fr 1fr;}}