:root{
    --bg: #14181c;
    --bg-panel: #1c2126;
    --bg-panel-raised: #232930;
    --hairline: #2e3540;
    --text-primary: #e8ebee;
    --text-dim: #7d8792;
    --amber: #ffb020;
    --amber-dim: #7a5312;
    --red: #e5484d;
    --red-dim: #4a1f21;
    --green: #34d399;
    --green-dim: #123328;
    --mono: 'SF Mono', 'Menlo', 'Consolas', monospace;
    --sans: -apple-system, 'Segoe UI', Roboto, sans-serif;
  }
  *{ box-sizing: border-box; }
  [hidden]{ display:none !important; }
  body{
    margin:0; min-height:100vh; background:var(--bg); color:var(--text-primary);
    font-family: var(--sans); padding: 24px 16px 60px;
    display:flex; justify-content:center;
  }
  .wrap{ width:100%; max-width:420px; }
  .page{ animation: fadein .25s ease; }
  @keyframes fadein{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

  header{ text-align:center; margin-bottom:28px; }
  .eyebrow{
    font-family:var(--mono); font-size:16px; letter-spacing:.14em; color:var(--text-dim);
    text-transform:uppercase;
  }
  h1{
    font-size:26px; font-weight:800; letter-spacing:-0.01em; margin:6px 0 0;
  }

  /* ---------- Splash ---------- */
  .splash{
    position:fixed; inset:0; background:var(--bg); z-index:2000;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    transition:opacity .6s ease, visibility .6s ease;
  }
  .splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .splash img{ 
    border-radius:2px; 
    filter: drop-shadow(0 0 15px rgba(103, 104, 103, 0.8));
    animation: glow 2s infinite alternate;
  }
@keyframes glow {
  from { filter: drop-shadow(0 0 5px rgba(53, 53, 53, 0.5)); }
  to   { filter: drop-shadow(0 0 20px rgb(95, 95, 95)); }
}

  .spinner{
    width:37px; height:37px; border:3px solid var(--hairline); border-top-color:var(--amber);
    border-radius:50%; animation:spin .8s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* ---------- Gauge (halaman 1) ---------- */
  .gauge{
    position:relative; width:180px; height:180px; margin:0 auto 28px;
    border-radius:50%; background: radial-gradient(circle at 50% 40%, var(--bg-panel-raised), var(--bg-panel) 70%);
    border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    transition: box-shadow .4s ease;
  }
  .gauge.state-locked{ box-shadow: 0 0 0 1px var(--red-dim), 0 0 32px -4px rgba(229,72,77,.35); }
  .gauge.state-unlocked{ box-shadow: 0 0 0 1px var(--green-dim), 0 0 32px -4px rgba(52,211,153,.4); }
  .gauge.state-offline{ box-shadow:none; }
  .gauge .dot{
    width:10px; height:10px; border-radius:50%; margin-bottom:10px; background:var(--text-dim); z-index:1;
  }
  .gauge.state-locked .dot{ background:var(--red); box-shadow:0 0 10px var(--red); }
  .gauge.state-unlocked .dot{ background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .gauge .label{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); z-index:1; }
  .gauge .value{ font-size:19px; font-weight:700; margin-top:2px; z-index:1; }

  .ripple{
    position:absolute; inset:0; border-radius:50%; border:2px solid var(--amber); opacity:0; pointer-events:none;
  }
  .gauge.state-connecting .ripple{ animation:ripple-anim 1.8s ease-out infinite; }
  @keyframes ripple-anim{
    0%{ transform:scale(.55); opacity:.75; }
    100%{ transform:scale(1.4); opacity:0; }
  }

  /* ---------- Status pill (halaman 2) ---------- */
  .status-pill{
    display:flex; align-items:center; gap:10px; background:var(--bg-panel); border:1px solid var(--hairline);
    border-radius:999px; padding:9px 14px 9px 16px; margin-bottom:18px;
  }
  .status-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
  .status-pill.locked .dot{ background:var(--red); box-shadow:0 0 8px var(--red); }
  .status-pill.unlocked .dot{ background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
  .status-pill .txt{ flex:1; font-size:13px; }
  .status-pill button{ padding:6px 12px; font-size:11px; background:var(--bg-panel-raised); color:var(--text-dim); border:1px solid var(--hairline); }

  .panel{
    background:var(--bg-panel); border:1px solid var(--hairline); border-radius:14px;
    padding:18px; margin-bottom:16px;
  }
  .panel + .panel{ margin-top: -2px; }

  label{ display:block; font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
  input[type="password"], input[type="text"]{
    width:100%; background:var(--bg-panel-raised); border:1px solid var(--hairline); color:var(--text-primary);
    border-radius:8px; padding:11px 12px; font-family:var(--mono); font-size:14px; outline:none;
  }
  input:focus{ border-color: var(--amber); }

  button{
    font-family:var(--sans); font-weight:600; font-size:14px; border:none; border-radius:10px;
    padding:13px 16px; cursor:pointer; transition:filter .15s ease, transform .1s ease;
  }
  button:active{ transform: scale(.98); }
  button:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
  button:disabled{ opacity:.4; cursor:not-allowed; }

  .btn-primary{ width:100%; background:var(--amber); color:#1a1300; }
  .btn-primary:hover:not(:disabled){ filter:brightness(1.08); }

  .grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
  .btn-cmd{ background:var(--bg-panel-raised); color:var(--text-primary); border:1px solid var(--hairline); }
  .btn-cmd:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); }

  .btn-danger{ background:transparent; color:var(--red); border:1px solid var(--red); }
  .btn-danger:hover:not(:disabled){ background:var(--red-dim); }

  .log-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .log{
    font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--text-dim);
    max-height:220px; overflow-y:auto; padding-right:4px;
  }
  .log div{ border-bottom:1px dashed var(--hairline); padding:4px 0; }
  .log .in{ color:var(--green); }
  .log .out{ color:var(--amber); }
  .log .err{ color:var(--red); }
  .log::-webkit-scrollbar{ width:6px; }
  .log::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:3px; }

  .notice{
    font-size:12px; color:var(--text-dim); text-align:center; margin-top:18px; line-height:1.6;
  }
  .notice b{ color:var(--text-primary); }

  .remember-row{
    display:flex; align-items:center; gap:8px; margin-top:12px; cursor:pointer;
    font-size:12px; color:var(--text-dim);
  }
  .remember-row input{ width:16px; height:16px; accent-color:var(--amber); }

  .pin-row{ display:flex; gap:8px; margin-top:10px; }
  .pin-row[hidden]{ display:none; }
  .pin-row input{
    flex:1; background:var(--bg-panel-raised); border:1px solid var(--hairline); color:var(--text-primary);
    border-radius:8px; padding:10px 12px; font-family:var(--mono); font-size:14px; outline:none;
  }
  .pin-row input:focus{ border-color:var(--amber); }
  .pin-msg{ font-size:12px; color:var(--red); margin:8px 0 0; }

  .queue-badge{
    font-family:var(--mono); font-size:11px; color:var(--amber); background:var(--amber-dim);
    border-radius:999px; padding:3px 10px; margin-right:auto; margin-left:10px;
  }

  .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  background: #000; /* opsional */
}
.footer a {
  color: #ffb020;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}