:root{
  /* ---- neutrals ---- */
  --bg:#070a0f;
  --bg-2:#0b1017;
  --panel:#0f1520;
  --panel-2:#131c29;
  --panel-3:#1a2536;
  --line:#233044;
  --line-soft:#172130;
  --text:#eef3fa;
  --muted:#93a3b8;
  --dim:#586b82;

  /* ---- signals ---- */
  --amber:#ffb43d;
  --amber-2:#ff8a2b;
  --amber-soft:rgba(255,180,61,0.13);
  --amber-glow:rgba(255,160,45,0.45);
  --green:#3ee696;
  --green-soft:rgba(62,230,150,0.13);
  --green-glow:rgba(62,230,150,0.40);
  --red:#ff5f72;
  --red-soft:rgba(255,95,114,0.13);
  --red-glow:rgba(255,95,114,0.38);

  --radius:20px;
  --radius-sm:12px;
  --mono:'JetBrains Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
  --sans:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 50px -20px rgba(0,0,0,0.7);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--bg);}
html,body{height:100%;}

body{
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  line-height:1.5;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
}

/* -------- animated aurora background -------- */
body::before{
  content:''; position:fixed; inset:-30% -10% auto -10%; height:120%;
  z-index:-2; pointer-events:none;
  background:
    radial-gradient(48% 40% at 22% 12%, rgba(255,140,40,0.14), transparent 60%),
    radial-gradient(46% 42% at 82% 8%, rgba(62,230,150,0.09), transparent 62%),
    radial-gradient(60% 50% at 60% 100%, rgba(70,120,255,0.08), transparent 60%);
  filter:blur(20px);
  animation:aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(0,-3%,0) scale(1.08);}
}
/* faint grid texture */
body::after{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(80% 60% at 50% 30%, #000, transparent 85%);
}

::selection{background:var(--amber-glow); color:#100b02;}
button{font-family:inherit; cursor:pointer; color:inherit;}
input{font-family:inherit;}
.mono{font-family:var(--mono); font-feature-settings:"tnum" 1;}
h1{font-size:inherit; font-weight:inherit;}

/* ---------- utility ---------- */
.hidden{display:none !important;}
.dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--dim);}
.dot.on{background:var(--green); box-shadow:0 0 0 3px var(--green-soft), 0 0 12px var(--green-glow);}
.dot.off{background:var(--red); box-shadow:0 0 0 3px var(--red-soft), 0 0 12px var(--red-glow);}
.dot.pulse{animation:dotpulse 2s ease-in-out infinite;}
@keyframes dotpulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

.logo-mark{
  display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
  color:#120a01;
  background:linear-gradient(150deg, var(--amber), var(--amber-2));
  box-shadow:0 6px 20px -4px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.logo-mark svg{width:21px; height:21px;}
.logo-mark.sm{width:32px; height:32px; border-radius:10px;}
.logo-mark.sm svg{width:17px; height:17px;}

/* entrance animation */
@keyframes fade-up{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
[data-anim]{animation:fade-up .6s cubic-bezier(.2,.7,.2,1) both;}

/* ======================================================
   LOGIN
   ====================================================== */
#login-screen{
  flex:1; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:410px;
  background:linear-gradient(180deg, rgba(19,28,41,0.85), rgba(15,21,32,0.92));
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px 32px 26px;
  position:relative;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  animation:fade-up .7s cubic-bezier(.2,.7,.2,1) both;
}
.login-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px; border-radius:24px 24px 0 0;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:.8;
}
.login-brand{display:flex; align-items:center; gap:13px; margin-bottom:28px;}
.login-brand-text{display:flex; flex-direction:column; gap:3px;}
.login-brand-name{font-size:15.5px; font-weight:700; letter-spacing:.01em;}
.login-brand-id{font-size:11px; color:var(--amber); letter-spacing:.16em;}
.login-heading{margin-bottom:24px;}
.login-title{
  font-size:26px; font-weight:700; margin-bottom:7px; letter-spacing:-.01em;
  background:linear-gradient(180deg, #fff, #b7c4d6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.login-subtitle{font-size:13px; color:var(--muted);}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:8px; font-weight:500;}
.field input{
  width:100%; background:rgba(7,10,15,0.7); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; color:var(--text); font-size:14px; outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.field input::placeholder{color:var(--dim);}
.field input:focus{border-color:var(--amber); box-shadow:0 0 0 4px var(--amber-soft); background:rgba(7,10,15,0.95);}

.btn-primary{
  width:100%; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--amber), var(--amber-2));
  color:#1c1101; padding:14px; font-size:15px; font-weight:700; margin-top:10px;
  transition:filter .15s, transform .08s, box-shadow .2s;
  box-shadow:0 10px 26px -8px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 14px 32px -8px var(--amber-glow);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary:disabled{opacity:.6; cursor:not-allowed; box-shadow:none;}

.login-error{
  background:var(--red-soft); border:1px solid rgba(255,95,114,.4); color:#ffc0c6;
  font-size:12.5px; padding:11px 14px; border-radius:var(--radius-sm); margin-bottom:16px;
}
.login-foot{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:10.5px; color:var(--dim); text-align:center; letter-spacing:.04em;
}

/* ======================================================
   SHELL
   ====================================================== */
#dashboard{flex:1; display:flex; flex-direction:column;}
header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 26px;
  background:rgba(7,10,15,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-id{font-size:14px; font-weight:700; letter-spacing:.05em;}
.conn-pill{
  display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
  color:var(--muted); background:rgba(15,21,32,0.8); border:1px solid var(--line);
  padding:6px 13px; border-radius:100px; margin-inline-start:4px;
}
.header-right{display:flex; align-items:center; gap:12px;}
.user-chip{
  font-size:12.5px; color:var(--muted); background:rgba(15,21,32,0.8); border:1px solid var(--line);
  padding:7px 14px; border-radius:100px;
}
.btn-ghost{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(15,21,32,0.8); border:1px solid var(--line); color:var(--muted);
  padding:8px 14px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:500;
  transition:all .16s;
}
.btn-ghost:hover{border-color:var(--red); color:#ffc0c6; background:var(--red-soft);}

/* ---------- tab bar ---------- */
.tabbar{display:flex; justify-content:center; padding:22px 20px 0;}
.tabbar-inner{
  position:relative; display:inline-flex; gap:4px;
  background:rgba(15,21,32,0.7); border:1px solid var(--line);
  border-radius:100px; padding:5px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -16px rgba(0,0,0,.8);
}
.tab{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border:none; background:transparent; border-radius:100px;
  font-size:13px; font-weight:600; color:var(--muted);
  transition:color .2s;
}
.tab svg{opacity:.8;}
.tab.is-active{color:#1c1101;}
.tab .tab-live{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green-glow); animation:dotpulse 1.8s ease-in-out infinite;
}
.tab.is-active .tab-live{background:#1c1101; box-shadow:none; animation:none;}
.tab-glider{
  position:absolute; z-index:1; top:5px; bottom:5px; right:auto; left:0;
  border-radius:100px;
  background:linear-gradient(180deg, var(--amber), var(--amber-2));
  box-shadow:0 6px 18px -6px var(--amber-glow);
  transition:transform .35s cubic-bezier(.4,.9,.2,1), width .35s cubic-bezier(.4,.9,.2,1);
  width:0;
}

main{flex:1; display:flex; justify-content:center; padding:24px 20px 48px;}
.main-inner{width:100%; max-width:720px;}

/* views */
.view{display:none; flex-direction:column; gap:20px;}
.view.is-active{display:flex; animation:fade-up .45s cubic-bezier(.2,.7,.2,1) both;}

/* ---------- fault banner ---------- */
.fault-banner{
  background:var(--red-soft); border:1px solid rgba(255,95,114,.42);
  border-radius:var(--radius-sm); padding:14px 16px; display:flex; align-items:center; gap:11px;
  font-size:13px; color:#ffd0d5; font-weight:500;
}
.fault-banner svg{color:var(--red); flex-shrink:0;}

/* ======================================================
   CONTROL CARD — signature element
   ====================================================== */
.control-card{
  position:relative; overflow:hidden;
  background:
    radial-gradient(620px 340px at 50% -8%, rgba(255,160,45,0.07), transparent 70%),
    linear-gradient(180deg, rgba(19,28,41,0.9), rgba(15,21,32,0.95));
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px 24px 38px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.control-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,180,61,.5), transparent);
}
.card-eyebrow{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  align-self:flex-start;
}
.switch-zone{display:flex; flex-direction:column; align-items:center; gap:22px;}
.switch-wrap{position:relative; width:236px; height:236px; display:grid; place-items:center;}

/* glowing aura behind the orb */
.orb-aura{
  position:absolute; width:150%; height:150%; border-radius:50%;
  background:radial-gradient(circle, var(--amber-glow), transparent 62%);
  opacity:0; transform:scale(.7); transition:opacity .5s, transform .5s;
  pointer-events:none;
}

svg.ring{position:absolute; inset:0; transform:rotate(-90deg);}
.ring-track{fill:none; stroke:var(--line); stroke-width:2;}
.ring-heartbeat{
  fill:none; stroke:var(--green); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:16 300; opacity:.95;
  filter:drop-shadow(0 0 5px var(--green-glow));
  animation:heartbeat-run 3.2s linear infinite;
}
.ring-heartbeat.offline{animation-play-state:paused; opacity:0;}
@keyframes heartbeat-run{ to{ stroke-dashoffset:-316; } }

#power-btn{
  position:absolute; inset:20px; border-radius:50%; border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 32%, var(--panel-3), var(--panel) 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  transition:box-shadow .4s, border-color .4s, transform .14s;
  box-shadow:inset 0 2px 24px rgba(0,0,0,.5);
}
#power-btn:not(:disabled):hover{transform:scale(1.02);}
#power-btn:active{transform:scale(.97);}
#power-btn:disabled{cursor:not-allowed;}
#power-btn .icon{
  width:40px; height:40px; border-radius:50%; border:3px solid var(--dim);
  position:relative; transition:border-color .4s, box-shadow .4s;
}
#power-btn .icon::before{
  content:''; position:absolute; top:-5px; right:50%; width:3px; height:17px;
  background:var(--dim); transform:translateX(50%); border-radius:3px;
  transition:background .4s;
}
#power-btn .state-label{font-size:17px; font-weight:700; letter-spacing:.02em; color:var(--muted); transition:color .3s;}
#power-btn .state-sub{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.04em;}

/* ON */
#power-btn.state-on{
  border-color:rgba(255,180,61,.6);
  box-shadow:0 0 60px var(--amber-glow), inset 0 0 34px rgba(255,180,61,.14);
}
#power-btn.state-on .icon{border-color:var(--amber); box-shadow:0 0 20px var(--amber-glow);}
#power-btn.state-on .icon::before{background:var(--amber);}
#power-btn.state-on .state-label{color:var(--amber);}
.control-card:has(#power-btn.state-on) .orb-aura{opacity:.9; transform:scale(1); animation:aura-breathe 3.4s ease-in-out infinite;}
@keyframes aura-breathe{0%,100%{opacity:.6; transform:scale(.96);} 50%{opacity:1; transform:scale(1.04);}}

/* OFF */
#power-btn.state-off .icon{border-color:var(--muted);}
#power-btn.state-off .icon::before{background:var(--muted);}
#power-btn.state-off .state-label{color:var(--text);}

/* OFFLINE */
#power-btn.state-offline{border-color:rgba(255,95,114,.45);}
#power-btn.state-offline .icon{border-color:var(--red);}
#power-btn.state-offline .icon::before{background:var(--red);}
#power-btn.state-offline .state-label{color:var(--red);}

/* PENDING */
#power-btn.state-pending .icon{animation:spin 1s linear infinite; border-style:dashed; border-color:var(--amber);}
#power-btn.state-pending .icon::before{background:var(--amber);}
@keyframes spin{to{transform:rotate(360deg);}}

.relay-caption{
  font-size:12.5px; color:var(--muted); text-align:center; max-width:330px; line-height:1.7;
}

/* ======================================================
   COMMAND LOG
   ====================================================== */
.panel{
  background:linear-gradient(180deg, rgba(19,28,41,0.85), rgba(15,21,32,0.9));
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow);
}
.panel-head{
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.panel-title{font-size:14px; font-weight:700;}
.panel-refresh{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; color:var(--dim); letter-spacing:.04em;
}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green-glow); animation:dotpulse 1.8s ease-in-out infinite;}

.cmd-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--line-soft); font-size:12.5px;
  transition:background .14s;
}
.cmd-row:last-child{border-bottom:none;}
.cmd-row:hover{background:rgba(255,255,255,.02);}
.cmd-left{display:flex; align-items:center; gap:12px; color:var(--muted);}
.cmd-cmd{
  font-family:var(--mono); font-weight:700; font-size:11px; min-width:44px; text-align:center;
  padding:5px 9px; border-radius:8px; border:1px solid var(--line);
}
.cmd-cmd.ON{color:var(--amber); background:var(--amber-soft); border-color:rgba(255,180,61,.3);}
.cmd-cmd.OFF{color:var(--muted); background:var(--panel-3);}
.cmd-time{font-family:var(--mono); color:var(--dim); font-size:11.5px;}
.badge{
  font-family:var(--mono); font-size:10px; padding:5px 11px; border-radius:100px;
  letter-spacing:.02em; font-weight:600;
}
.badge.confirmed{background:var(--green-soft); color:#8ef0c2; border:1px solid rgba(62,230,150,.3);}
.badge.sent, .badge.pending{background:var(--amber-soft); color:var(--amber); border:1px solid rgba(255,180,61,.3);}
.badge.failed, .badge.timeout{background:var(--red-soft); color:#ffc0c6; border:1px solid rgba(255,95,114,.3);}
.empty-row{padding:44px 32px; text-align:center; color:var(--dim); font-size:12.5px;}

/* ---------- footer ---------- */
.app-foot{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; padding:20px; font-size:10.5px; color:var(--dim);
  letter-spacing:.05em; border-top:1px solid var(--line-soft);
}
.foot-client{
  display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--muted);
}
.foot-client-logo{width:20px; height:20px; border-radius:6px; object-fit:contain;}
#client-name{color:var(--text); font-weight:600;}

/* ======================================================
   FACTORY BADGE (login + header)
   ====================================================== */
.factory-badge{
  display:flex; align-items:center; gap:10px;
  background:rgba(15,21,32,0.6); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:9px 13px; margin-bottom:22px;
}
.factory-badge-logo{width:30px; height:30px; border-radius:8px; object-fit:contain; flex-shrink:0;}
.factory-badge-text{font-size:11.5px; color:var(--muted);}
.factory-badge-text strong{color:var(--text);}

.header-divider{width:1px; height:20px; background:var(--line); margin-inline:2px;}
.header-factory-logo{width:26px; height:26px; border-radius:7px; object-fit:contain;}
@media (max-width:560px){
  .header-factory-logo, .header-divider{display:none;}
}

/* ======================================================
   USERS MANAGEMENT
   ====================================================== */
.user-form{padding:18px 20px 20px;}
.user-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.user-form select{
  width:100%; background:rgba(7,10,15,0.7); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; color:var(--text); font-size:14px; outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.user-form select:focus{border-color:var(--amber); box-shadow:0 0 0 4px var(--amber-soft);}
.user-form .btn-primary{width:auto; padding:12px 26px;}
@media (max-width:560px){
  .user-form-row{grid-template-columns:1fr;}
}

.user-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--line-soft); font-size:12.5px;
  transition:background .14s;
}
.user-row:last-child{border-bottom:none;}
.user-row:hover{background:rgba(255,255,255,.02);}
.user-row-left{display:flex; align-items:center; gap:12px; min-width:0;}
.user-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-weight:700; font-size:13px;
  background:var(--panel-3); color:var(--amber); border:1px solid var(--line);
}
.user-meta{display:flex; flex-direction:column; gap:2px; min-width:0;}
.user-meta-name{color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-meta-sub{font-family:var(--mono); color:var(--dim); font-size:11px;}
.user-role-badge{
  font-family:var(--mono); font-size:10px; padding:5px 11px; border-radius:100px;
  letter-spacing:.02em; font-weight:600; flex-shrink:0;
}
.user-role-badge.admin{background:var(--amber-soft); color:var(--amber); border:1px solid rgba(255,180,61,.3);}
.user-role-badge.operator{background:var(--panel-3); color:var(--muted); border:1px solid var(--line);}
.user-delete-btn{
  flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:transparent; border:1px solid var(--line); color:var(--dim);
  transition:all .16s;
}
.user-delete-btn:hover{border-color:var(--red); color:#ffc0c6; background:var(--red-soft);}
.user-delete-btn:disabled{opacity:.35; cursor:not-allowed;}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:560px){
  header{padding:13px 16px;}
  .brand-id{display:none;}
  .tabbar{padding:18px 14px 0;}
  main{padding:20px 14px 36px;}
  .switch-wrap{width:210px; height:210px;}
  .user-chip{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}
.user-row.is-disabled{ opacity:.5; }
.user-role-badge.disabled{
  background:rgba(255,255,255,.05); color:var(--dim); border:1px solid var(--line);
}
.user-delete-btn.is-reactivate:hover{
  border-color:var(--amber); color:var(--amber); background:var(--amber-soft);
}
.user-row.is-disabled{ opacity:.5; }
.user-role-badge.disabled{
  background:rgba(255,255,255,.05); color:var(--dim); border:1px solid var(--line);
}
.user-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.user-delete-btn.is-reactivate:hover{
  border-color:var(--amber); color:var(--amber); background:var(--amber-soft);
}
.user-delete-btn.is-danger{ color:#ffb0b8; border-color:rgba(255,90,110,.35); }
.user-delete-btn.is-danger:hover{
  border-color:var(--red); color:#fff; background:var(--red);
}

.user-delete-btn.is-edit:hover{
  border-color:var(--amber); color:var(--amber); background:var(--amber-soft);
}
.toast-region{
  position:fixed; inset-inline-start:20px; bottom:20px; z-index:1000;
  display:flex; flex-direction:column; gap:10px; width:min(390px,calc(100vw - 40px));
}
.toast{
  display:flex; align-items:flex-start; gap:10px; padding:13px 15px;
  color:var(--text); background:rgba(18,24,35,.97); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 16px 44px rgba(0,0,0,.4);
  animation:toast-in .2s ease-out;
}
.toast::before{content:''; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--amber); flex:none;}
.toast.success::before{background:var(--green);}
.toast.error::before{background:var(--red);}
.toast-title{display:block; font-weight:700; margin-bottom:2px;}
.toast-message{display:block; color:var(--muted); font-size:12px; line-height:1.55;}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}