:root{
    --bg:#ffffff;
    --panel:#ffffff;
    --panel-2:#f8fafc;
    --line:#e5e7eb;
    --line-2:#f1f5f9;
    --txt:#0f172a;
    --txt-light:#1e293b;
    --muted:#475569;
    --accent:#facc15;
    --accent-2:#eab308;
    --accent-soft:rgba(250,204,21,0.15);
    --accent-glow:rgba(250,204,21,0.18);
    --green:#22c55e;
    --green-soft:rgba(34,197,94,0.1);
    --green-border:rgba(34,197,94,0.2);
    --red:#ef4444;
    --red-soft:rgba(239,68,68,0.08);
    --red-border:rgba(239,68,68,0.18);
    --amber:#f59e0b;
    --radius:16px;
    --radius-lg:20px;
    --shadow:0 4px 20px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.08);
    --shadow-lg:0 12px 32px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#92400e;text-decoration:none;font-weight:600}
a:hover{color:#78350f;text-decoration:underline}
img{max-width:100%}

/* topbar - modern white */
.topbar{background:rgba(255,255,255,0.96);border-bottom:1.5px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 3px rgba(15,23,42,0.05)}
.topbar-inner{max-width:1280px;margin:auto;display:flex;align-items:center;gap:20px;padding:12px 16px}
.brand{font-size:20px;font-weight:900;letter-spacing:-0.02em;color:var(--txt);display:flex;align-items:center;gap:8px}
.brand span{color:var(--txt)}
.brand span:last-child{color:#ca8a04}
.brand::before{content:"";width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-block;box-shadow:0 4px 12px var(--accent-glow);border:1px solid #fde68a}
.brand.big{font-size:26px;text-align:center;display:block;margin-bottom:6px;justify-content:center}
.brand.big::before{width:40px;height:40px}
.topbar nav{display:flex;gap:6px;flex:1;align-items:center}
.topbar nav a{color:var(--muted);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;transition:.2s;display:flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid transparent}
.topbar nav a:hover{color:var(--txt);background:var(--panel-2);border-color:var(--line)}
.topbar nav a.active{color:#422006;background:var(--accent);border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}
.top-right{display:flex;align-items:center;gap:10px}
.admin-chip{background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,0.04);font-weight:600}
.hamburger{display:none;width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--txt);align-items:center;justify-content:center;cursor:pointer;font-size:18px;box-shadow:var(--shadow)}
.nav-drawer{display:none;position:fixed;inset:0;z-index:60}
.nav-drawer.open{display:block}
.drawer-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.4);backdrop-filter:blur(4px)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:300px;max-width:85vw;background:var(--panel);border-left:1.5px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:16px;overflow:auto;box-shadow:var(--shadow-lg)}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-nav{display:flex;flex-direction:column;gap:6px}
.drawer-nav a{padding:12px 14px;border-radius:12px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:10px;transition:.15s;border:1.5px solid transparent}
.drawer-nav a:hover{background:var(--panel-2);color:var(--txt);border-color:var(--line)}
.drawer-nav a.active{background:var(--accent);color:#422006;border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:40;background:rgba(255,255,255,0.98);border-top:1.5px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(16px);box-shadow:0 -4px 20px rgba(15,23,42,0.06)}
.bottom-nav-inner{max-width:500px;margin:auto;display:flex;justify-content:space-around;gap:4px}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:.2s;border:1.5px solid transparent}
.bottom-nav a span.icon{font-size:20px;line-height:1}
.bottom-nav a.active{color:#422006;background:var(--accent);border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}
.bottom-nav a:active{transform:scale(0.96)}
.container{max-width:1280px;margin:auto;padding:20px 16px 80px}
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.page-head h1{font-size:22px;font-weight:900;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;color:var(--txt)}
.page-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.footer{text-align:center;color:var(--muted);padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-top:1.5px solid var(--line);font-size:12px;padding-bottom:80px;background:var(--panel-2);font-weight:500}
@media(min-width:769px){.footer{padding-bottom:20px}}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;min-width:0;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:0.9}
.stat-num{font-size:26px;font-weight:900;letter-spacing:-0.02em;color:var(--txt)}
.stat-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-top:2px}
.stat.ok .stat-num{color:var(--green)}
.stat.bad .stat-num{color:var(--red)}
.stat.warn .stat-num{color:var(--amber)}
.stat.accent .stat-num{color:#92400e}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media(max-width:640px){.cards-grid{grid-template-columns:1fr}}
.device-card,.service-card{display:block;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:16px;color:var(--txt);transition:.2s;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.device-card:hover,.service-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.device-card:active{transform:scale(0.98)}
.service-card.disabled{opacity:0.6}
.service-card.disabled:hover{border-color:var(--line);transform:none;box-shadow:var(--shadow)}
.card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dev-name{font-weight:800;font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none;position:relative;border:1.5px solid transparent}
.dot-on{background:var(--green);box-shadow:0 0 8px rgba(34,197,94,0.4);border-color:rgba(34,197,94,0.3)}
.dot-on::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);opacity:0.2;animation:pulse 2s infinite}
.dot-off{background:#9ca3af;border-color:#e5e7eb;box-shadow:0 0 0 2px #f3f4f6}
@keyframes pulse{0%{transform:scale(1);opacity:0.2}50%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}
.card-rows .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #e5e7eb;font-size:13px;gap:12px}
.card-rows .row:last-child{border-bottom:0}
.card-rows span{color:var(--muted);flex:none;font-weight:600}
.card-rows b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;text-align:right;color:var(--txt)}
.card-foot{margin-top:10px;font-size:12px;border-top:1.5px solid var(--line);padding-top:8px;display:flex;align-items:center;gap:6px;font-weight:600}
.card-foot.warn{color:#92400e;background:rgba(250,204,21,0.08);border:1px solid rgba(250,204,21,0.2);border-radius:8px;padding:6px 10px}
/* badges - high contrast */
.badge{font-size:10px;font-weight:900;letter-spacing:.06em;border-radius:999px;padding:5px 10px;flex:none;display:inline-flex;align-items:center;gap:4px;border:1.5px solid transparent}
.badge-on{background:rgba(34,197,94,0.1);color:#15803d;border-color:rgba(34,197,94,0.25);box-shadow:0 1px 3px rgba(34,197,94,0.1)}
.badge-off{background:#f3f4f6;color:#4b5563;border-color:#e5e7eb}
.badge-warn{background:rgba(250,204,21,0.12);color:#92400e;border-color:rgba(250,204,21,0.3)}
.badge-locked{background:rgba(239,68,68,0.08);color:#b91c1c;border-color:rgba(239,68,68,0.2)}
.badge-pending{background:rgba(245,158,11,0.1);color:#92400e;border-color:rgba(245,158,11,0.2)}
.panel{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(250,204,21,0.6),transparent);opacity:0.8}
.panel h2{font-size:15px;margin-bottom:12px;color:#92400e;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:-0.01em}
.detail-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:16px}
@media(max-width:800px){.detail-grid{grid-template-columns:1fr}}
.kv{width:100%;border-collapse:collapse}
.kv th{text-align:left;color:var(--muted);font-weight:700;padding:8px 10px 8px 0;width:120px;vertical-align:top;font-size:13px}
.kv td{padding:8px 0;font-size:13px;word-break:break-word;color:var(--txt);font-weight:500}
label{display:block;color:var(--txt);font-size:13px;font-weight:700;margin:12px 0 6px}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=url],input[type=date],select,textarea{width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--txt);font-size:14px;outline:none;transition:.2s;min-height:44px;font-weight:500;box-shadow:0 1px 2px rgba(15,23,42,0.04)}
input::placeholder,textarea::placeholder{color:#94a3b8}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#fffbeb}
textarea{resize:vertical;font-family:ui-monospace,Consolas,monospace;min-height:80px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:.2s;border:1.5px solid var(--line);background:var(--panel);color:var(--txt);min-height:44px;white-space:nowrap;user-select:none;box-shadow:0 1px 3px rgba(15,23,42,0.06);letter-spacing:-0.01em}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#422006;box-shadow:0 4px 12px var(--accent-glow);font-weight:900}
.btn-primary:hover{background:#fde68a;border-color:#facc15;transform:translateY(-1px);box-shadow:0 6px 16px rgba(250,204,21,0.2)}
.btn-ghost{background:var(--panel);color:var(--muted);border-color:var(--line)}
.btn-ghost:hover{color:var(--txt);border-color:var(--muted);background:var(--panel-2);transform:translateY(-1px)}
.btn-sm{padding:8px 14px;font-size:13px;min-height:36px}
.btn-block{width:100%;margin-top:16px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,0.2);font-weight:800}
.btn-danger:hover{background:#dc2626;transform:translateY(-1px)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 4px 12px rgba(34,197,94,0.2);font-weight:800}
.btn-success:hover{background:#16a34a;transform:translateY(-1px)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding:10px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;background:var(--panel-2);font-weight:800}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top;word-break:break-word;color:var(--txt)}
.table-wrap{overflow:auto;border:1.5px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch;background:var(--panel);box-shadow:var(--shadow)}
.table-wrap table{min-width:600px}
@media(max-width:640px){.table-wrap table{min-width:500px}.tbl th,.tbl td{padding:8px 10px;font-size:12px}}
.mono{font-family:ui-monospace,Consolas,monospace}
.small{font-size:12px}
.muted{color:var(--muted)}
#cmdMsg{margin-left:8px;color:var(--green);font-weight:700;font-size:13px}
.empty{background:var(--panel-2);border:1.5px dashed var(--line);border-radius:var(--radius);text-align:center;padding:32px 16px;color:var(--muted);font-weight:500}
@media(max-width:640px){.empty{padding:24px 14px}}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:16px;background:var(--bg);background-image:radial-gradient(ellipse at top, rgba(250,204,21,0.08), transparent 60%)}
.login-card{background:var(--panel);border:1.5px solid var(--line);border-radius:20px;padding:28px;width:380px;max-width:100%;box-shadow:var(--shadow-lg)}
@media(max-width:480px){.login-card{padding:24px;border-radius:16px}}
.alert-error{background:rgba(239,68,68,.06);border:1.5px solid rgba(239,68,68,.15);color:#991b1b;border-radius:12px;padding:12px;margin-bottom:12px;font-size:13px;font-weight:600}
.services-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.service-icon{font-size:32px;margin-bottom:10px}
.service-card h3{font-size:15px;margin-bottom:6px;color:var(--txt);font-weight:800}
.service-card p{color:var(--muted);font-size:13px;margin-bottom:12px;min-height:40px;line-height:1.5}
.claim-box{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:16px;box-shadow:var(--shadow)}
.claim-form{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.claim-form input,.claim-form select{flex:1;min-width:140px}
/* Top page actions — all yellow, nicely lined, mobile friendly */
.page-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-head-actions .btn{flex:none;min-width:0}
.page-head .btn-primary, .page-head .btn-ghost{flex:none}
@media(max-width:768px){
  .topbar-inner{padding:10px 14px;gap:12px}
  .topbar nav{display:none}
  .hamburger{display:flex}
  .top-right .admin-chip span:first-child{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bottom-nav{display:block}
  .container{padding:16px 14px 90px}
  .page-head{flex-direction:column;align-items:stretch;gap:12px}
  .page-head h1{font-size:18px}
  .page-head-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .page-head-actions .btn{width:100%;justify-content:center;min-height:44px}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:12px}
  .stat-num{font-size:22px}
  .detail-grid{grid-template-columns:1fr;gap:12px}
  .panel{padding:14px;border-radius:12px}
  .kv th{width:100px;font-size:12px}
  .btn{padding:10px 14px;font-size:13px}
  .cards-grid{gap:12px}
  .table-wrap{margin:0 -14px;border-left:0;border-right:0;border-radius:0}
  .claim-form{flex-direction:column;align-items:stretch}
  .claim-form input,.claim-form select{min-width:0;width:100%}
}
@media(max-width:480px){
  .topbar-inner{padding:10px 12px}
  .brand{font-size:18px}
  .brand::before{width:28px;height:28px}
  .stats-row{grid-template-columns:1fr 1fr;gap:8px}
  .stat{padding:10px 12px}
  .stat-num{font-size:20px}
  .page-head h1{font-size:17px}
  .page-head-actions{grid-template-columns:1fr 1fr}
  .container{padding:12px 12px 85px}
}
@media(hover:none) and (pointer:coarse){
  .btn:active{transform:scale(0.96)}
  .device-card:active{transform:scale(0.98)}
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#cbd5e1}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-panel{animation:slideIn 0.25s ease}
/* Highlighted top buttons - all yellow, nicely lined, mobile friendly */
.page-head .btn{background:var(--accent) !important;border-color:var(--accent) !important;color:#422006 !important;box-shadow:0 2px 8px var(--accent-glow) !important;font-weight:800}
.page-head .btn:hover{background:#fde68a !important;transform:translateY(-1px)}
@media(max-width:768px){.page-head > div:last-child{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;width:100%}.page-head > div:last-child .btn{width:100%;justify-content:center}}
/* Online green, offline lighter gray */
.dot-off{background:#9ca3af !important;border-color:#e5e7eb !important;box-shadow:0 0 0 2px #f3f4f6 !important}
.badge-off{background:#f3f4f6 !important;color:#4b5563 !important;border-color:#e5e7eb !important}
.badge-locked{background:rgba(239,68,68,0.1) !important;color:#b91c1c !important;border-color:rgba(239,68,68,0.2) !important}
.badge-unlocked{background:rgba(34,197,94,0.1) !important;color:#15803d !important;border-color:rgba(34,197,94,0.2) !important}
/* Block red / Unblock green */
.btn-block-red,.btn-danger{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important;box-shadow:0 4px 12px rgba(239,68,68,0.2) !important}
.btn-unblock-green,.btn-success{background:var(--green) !important;border-color:var(--green) !important;color:#fff !important;box-shadow:0 4px 12px rgba(34,197,94,0.2) !important}
.status-block{color:#b91c1c !important;background:rgba(239,68,68,0.08) !important;border-color:rgba(239,68,68,0.15) !important}
.status-unblock{color:#15803d !important;background:rgba(34,197,94,0.08) !important;border-color:rgba(34,197,94,0.15) !important}
/* Highlighted text - ensure readability */
h1,h2,h3,b,strong{color:var(--txt)}
.muted{color:var(--muted) !important}
.small.muted{color:var(--muted) !important}
/* Specific status colors - high contrast */
.badge-locked{color:#991b1b !important}