:root{
  --bg:#0f1115;
  --panel:#171a21;
  --panel2:#222633;
  --text:#f5f7fb;
  --muted:#aeb5c4;
  --accent:#d72626;
  --gold:#ffcc33;
  --border:#333848;
  --good:#2ecc71;
  --warn:#f1c40f;
  --bad:#e74c3c;
  --info:#3498db;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{border:none;border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--panel2);color:var(--text);border:1px solid var(--border)}
button.primary{background:var(--accent);border-color:var(--accent);color:white;font-weight:700}
button.gold{background:var(--gold);color:#111;font-weight:700}
button.ghost{background:transparent;border-color:var(--border)}
button.danger{background:var(--bad);border-color:var(--bad);color:white}
button:disabled{opacity:.55;cursor:not-allowed}
input,select,textarea{width:100%;padding:12px;background:#0b0d12;border:1px solid var(--border);color:var(--text);border-radius:10px;margin:6px 0 14px}
textarea{min-height:90px;resize:vertical}
label{display:block;color:var(--muted);font-size:.92rem}
.container{max-width:1180px;margin:0 auto;padding:16px;padding-bottom:90px}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(430px,100%);background:linear-gradient(180deg,#1d222e,#12151c);border:1px solid var(--border);border-radius:24px;padding:28px;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.logo{text-align:center;margin-bottom:24px}
.logo-img{width:108px;height:108px;object-fit:contain;display:block;margin:0 auto 14px;border-radius:18px;background:#ffffff;padding:6px;border:1px solid rgba(255,255,255,.2)}
.topbar{position:sticky;top:0;z-index:5;background:rgba(15,17,21,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1180px;margin:auto;padding:12px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-badge{background:#fff;border-radius:10px;width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.brand-badge img{width:100%;height:100%;object-fit:cover}
.user-box{color:var(--muted);display:flex;gap:10px;align-items:center}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px}
.card h2,.card h3{margin-top:0}
.hero{background:linear-gradient(135deg,#24151a,#171a21 52%,#222633);border:1px solid var(--border);border-radius:24px;padding:22px;margin-bottom:16px}
.hero h1{margin:0 0 6px}
.hero p{margin:0;color:var(--muted)}
.tile{min-height:110px;text-align:left;background:linear-gradient(180deg,var(--panel2),#171a21);border:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between}
.tile .icon{font-size:28px}
.tile strong{font-size:1.05rem}
.tile span{color:var(--muted);font-size:.88rem}
.status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.82rem;font-weight:700;border:1px solid transparent}
.status.good{background:rgba(46,204,113,.15);color:#7ff0ad;border-color:rgba(46,204,113,.35)}
.status.warn{background:rgba(241,196,15,.16);color:#ffe680;border-color:rgba(241,196,15,.35)}
.status.bad{background:rgba(231,76,60,.15);color:#ff9a8e;border-color:rgba(231,76,60,.35)}
.status.info{background:rgba(52,152,219,.15);color:#9fd4ff;border-color:rgba(52,152,219,.35)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:650px}
th,td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{color:var(--muted);font-size:.88rem}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.page-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 16px}
.page-title h1{margin:0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bottom-nav{position:fixed;z-index:10;bottom:0;left:0;right:0;background:rgba(15,17,21,.98);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr)}
.bottom-nav button{border:none;border-radius:0;padding:10px 6px;background:transparent;color:var(--muted);font-size:.78rem}
.bottom-nav button.active{color:white;background:rgba(215,38,38,.17)}
.small{font-size:.88rem;color:var(--muted)}
.alert-list{margin:0;padding-left:18px;color:var(--muted)}
.photo-note{border:1px dashed var(--border);border-radius:12px;padding:12px;color:var(--muted);background:#11141b}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mini-card{background:#11141b;border:1px solid var(--border);border-radius:14px;padding:12px}
.mini-card h4{margin:0 0 6px;font-size:.9rem;color:var(--muted)}
.mini-card p{margin:0;font-size:1.5rem;font-weight:700}
.note{color:var(--muted);font-size:.92rem}
.inline-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inline-field input,.inline-field select{margin:0;width:auto;min-width:180px}
.kbd{background:#0b0d12;border:1px solid var(--border);padding:2px 6px;border-radius:6px;font-size:.82rem}
@media(max-width:850px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4,.form-grid,.mini-stats{grid-template-columns:1fr}
  .user-box span{display:none}
  .container{padding:12px;padding-bottom:86px}
  .hero{padding:18px}
  .page-title{align-items:flex-start;flex-direction:column}
}
@media print{
  .topbar,.bottom-nav,.actions,button{display:none!important}
  body{background:white;color:black}
  .card,.hero{border:1px solid #ccc;background:white;color:black}
  .container{max-width:100%;padding:0}
}