/* ============ Token ============ */

  :root, [data-theme="dark"]{

    --bg:#82baf1; --bg-panel:#131920; --bg-raised:#19212A; --bg-sunken:#0E1318;

    --border:#49a0f8; --border-soft:#1E2832; --border-strong:#34424F;

    --text:#E7EBEF; --text-dim:#98A5B2; --text-faint:#687582;

    --accent:#7AA7FF; --accent-ink:#0A1630; --accent-soft:rgba(122,167,255,0.12); --accent-line:rgba(122,167,255,0.45);

    --ok:#4DB88D; --ok-glow:rgba(77,184,141,0.12); --ok-line:rgba(77,184,141,0.42);

    --bad:#E8685D; --bad-glow:rgba(232,104,93,0.13); --bad-line:rgba(232,104,93,0.44);

    --amber:var(--accent); /* alias: dibaca oleh skrip untuk warna rangka tangan */

    --glow:rgba(122,167,255,0.07);

    --shadow:0 18px 40px -18px rgba(0,0,0,0.65);

    --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    --r-panel:16px; --r-inner:12px; --r-ctl:9px;

  }

  [data-theme="light"]{

    --bg:#EDF0F4; --bg-panel:#FFFFFF; --bg-raised:#F5F7FA; --bg-sunken:#EEF1F5;

    --border:#DCE2E9; --border-soft:#E7EBF0; --border-strong:#C3CDD8;

    --text:#18212B; --text-dim:#566474; --text-faint:#8793A1;

    --accent:#2D5BD1; --accent-ink:#FFFFFF; --accent-soft:rgba(45,91,209,0.09); --accent-line:rgba(45,91,209,0.4);

    --ok:#1F8A62; --ok-glow:rgba(31,138,98,0.09); --ok-line:rgba(31,138,98,0.38);

    --bad:#C64236; --bad-glow:rgba(198,66,54,0.08); --bad-line:rgba(198,66,54,0.38);

    --glow:rgba(45,91,209,0.06);

    --shadow:0 14px 34px -20px rgba(24,33,43,0.28);

  }


  *{ box-sizing:border-box; }

  html,body{ margin:0; padding:0; }

  body{

    background:radial-gradient(1100px 480px at 12% -8%, var(--glow), transparent 62%), var(--bg);

    color:var(--text); font-family:var(--font-sans); font-size:14px; line-height:1.5;

    min-height:100vh; padding:16px 20px 40px; -webkit-font-smoothing:antialiased;

  }

  h1,h2,p{ margin:0; }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .wrap{ max-width:1240px; margin:0 auto; }


  /* ============ Top bar ============ */

  .topbar{

    position:relative; z-index:40; margin-bottom:20px;

    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px;

    padding:12px 16px 12px 14px; background:var(--bg-panel);

    border:1px solid var(--border); border-radius:var(--r-panel);

  }

  .brand{ display:flex; align-items:center; gap:12px; min-width:0; }

  .brand-mark{

    flex-shrink:0; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;

    background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);

  }

  .brand-mark svg{ width:22px; height:22px; display:block; }

  .topbar h1{ font-size:16px; font-weight:700; letter-spacing:-0.01em; line-height:1.25; }

  .topbar-sub{ font-size:12px; color:var(--text-dim); margin-top:1px; }

  .topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }


  .model-badge{

    display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500;

    padding:6px 12px; border-radius:999px; border:1px solid var(--border); color:var(--text-dim);

    background:var(--bg-raised);

  }

  .model-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--text-faint); }

  .model-badge.ready{ color:var(--ok); border-color:var(--ok-line); background:var(--ok-glow); }

  .model-badge.ready::before{ background:var(--ok); }

  .model-badge.busy{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }

  .model-badge.busy::before{ background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }

  @keyframes pulse{ 50%{ opacity:0.3; } }


  .user-pill, #userBadge{

    align-items:center; font-size:12px; color:var(--text-dim); padding:6px 12px; border-radius:999px;

    background:var(--bg-raised); border:1px solid var(--border-soft); max-width:220px;

    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

  }


  /* ============ Layout ============ */

  .layout{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start; }

  .col{ display:flex; flex-direction:column; gap:20px; min-width:0; }

  @media (max-width:1000px){ .layout{ grid-template-columns:1fr; } }


  .panel{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-panel); padding:22px; }

  .panel-head{ margin-bottom:16px; }

  .panel-title{ font-size:16px; font-weight:700; letter-spacing:-0.01em; }

  .panel-desc{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }

  .subhead{ font-size:12.5px; font-weight:600; color:var(--text); margin:18px 0 8px; }


  /* ============ Tombol ============ */

  .btn{

    font-family:var(--font-sans); font-size:13px; font-weight:600; line-height:1.2;

    min-height:36px; padding:8px 14px; border-radius:var(--r-ctl);

    border:1px solid var(--border); background:var(--bg-raised); color:var(--text); cursor:pointer;

    transition:border-color .15s ease, background .15s ease, color .15s ease; user-select:none;

  }

  .btn:hover{ border-color:var(--border-strong); background:color-mix(in srgb, var(--bg-raised) 70%, var(--text) 8%); }

  .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .btn:disabled:hover{ border-color:var(--border); background:var(--bg-raised); }

  .btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

  .btn-primary:hover{ background:var(--accent); border-color:var(--accent); filter:brightness(1.1); }

  .btn-primary:disabled:hover{ background:var(--accent); border-color:var(--accent); filter:none; }

  .btn-ghost{ background:transparent; }

  .btn-block{ width:100%; min-height:42px; }


  .btn-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

  .btn-row + .btn-row{ margin-top:8px; }


  /* ============ Kamera ============ */

  .viewfinder{

    position:relative; width:100%; aspect-ratio:4/3; background:#090C0F; border-radius:var(--r-inner);

    overflow:hidden; display:flex; align-items:center; justify-content:center;

    border:1px solid var(--border-soft);

  }

  .viewfinder video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:none; }

  .viewfinder canvas#skeletonCanvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; transform:scaleX(-1); z-index:1; }

  .viewfinder .corner{ position:absolute; width:20px; height:20px; border-color:var(--accent); opacity:0.8; z-index:2; border-radius:2px; }

  .corner.tl{ top:12px; left:12px; border-top:2px solid; border-left:2px solid; }

  .corner.tr{ top:12px; right:12px; border-top:2px solid; border-right:2px solid; }

  .corner.bl{ bottom:12px; left:12px; border-bottom:2px solid; border-left:2px solid; }

  .corner.br{ bottom:12px; right:12px; border-bottom:2px solid; border-right:2px solid; }

  .cam-placeholder{ color:#8E9AA6; font-size:13px; text-align:center; padding:0 12%; line-height:1.6; }

  .cam-placeholder svg{ width:34px; height:34px; display:block; margin:0 auto 12px; color:#5C6874; }

  .cam-placeholder strong{ display:block; color:#C9D1D9; font-size:14px; font-weight:600; margin-bottom:4px; }


  .readout{

    margin-top:10px; padding:9px 12px; border-radius:var(--r-ctl); background:var(--bg-sunken);

    border:1px solid var(--border-soft); font-family:var(--font-mono); font-size:11.5px;

    color:var(--text-dim); line-height:1.65; white-space:pre-wrap; max-height:96px; overflow-y:auto;

  }

  .readout:empty{ display:none; }

  .readout.ok{ color:var(--ok); border-color:var(--ok-line); background:var(--ok-glow); }

  .readout.bad{ color:var(--bad); border-color:var(--bad-line); background:var(--bad-glow); font-weight:600; }


  .toolbar{ margin-top:14px; }

  .group{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); }

  .group-title{ font-size:12.5px; font-weight:600; margin-bottom:10px; }

  .group-title small{ font-weight:400; color:var(--text-dim); margin-left:6px; }

  .text-input, .field input, .auth-field input{

    background:var(--bg-sunken); border:1px solid var(--border); color:var(--text);

    font-family:var(--font-sans); font-size:13px; padding:9px 12px; border-radius:var(--r-ctl);

    transition:border-color .15s ease, box-shadow .15s ease;

  }

  .text-input::placeholder, .field input::placeholder, .auth-field input::placeholder{ color:var(--text-faint); }

  .text-input:focus, .field input:focus, .auth-field input:focus{

    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);

  }

  .text-input{ flex:1; min-width:200px; }


  /* ============ Bahan pengujian (akordeon) ============ */

  #materialsList{ counter-reset:mat; display:flex; flex-direction:column; gap:10px; }

  .material-row{

    counter-increment:mat; border:1px solid var(--border-soft); border-radius:var(--r-inner);

    background:var(--bg-raised); overflow:hidden; transition:border-color .15s ease;

  }

  .material-row.expanded{ border-color:var(--accent-line); background:var(--bg-panel); }

  .material-header{ display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; user-select:none; }

  .material-header:hover{ background:var(--accent-soft); }

  .material-header::before{ content:"Bahan " counter(mat); order:1; font-size:12.5px; font-weight:700; margin-right:4px; }

  .material-chevron{ order:0; display:inline-flex; color:var(--text-faint); transition:transform .18s ease; }

  .material-chevron svg{ width:14px; height:14px; display:block; }

  .material-row.expanded .material-chevron{ transform:rotate(90deg); color:var(--accent); }

  .material-chip{

    order:2; font-size:12px; font-weight:500; padding:3px 11px; border-radius:999px;

    border:1px solid var(--border); color:var(--text-dim); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

  }

  .material-chip.ok{ color:var(--ok); border-color:var(--ok-line); background:var(--ok-glow); }

  .material-chip.bad{ color:var(--bad); border-color:var(--bad-line); background:var(--bad-glow); }

  .material-body{ display:none; padding:2px 14px 16px; }

  .material-row.expanded .material-body{ display:block; }

  .material-class-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:12px; }

  .class-panel{ min-width:0; }


  .class-panel{ border-radius:var(--r-inner); padding:14px; border:1px solid var(--border-soft); background:var(--bg-raised); }

  .material-row.expanded .class-panel{ background:var(--bg-raised); }

  .class-panel.ok{ border-top:2px solid var(--ok); }

  .class-panel.bad{ border-top:2px solid var(--bad); }

  .model-fixed-label{ font-size:13px; font-weight:700; margin-bottom:2px; display:flex; align-items:center; gap:7px; }

  .model-fixed-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }

  .model-fixed-label.ok{ color:var(--ok); }

  .model-fixed-label.bad{ color:var(--bad); }

  .model-fixed-caption{ font-size:11.5px; color:var(--text-dim); margin-bottom:12px; line-height:1.45; }

  .class-title{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }

  .class-count{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }


  .title-edit-group{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }

  .editable-title{

    font-family:var(--font-sans); font-size:13.5px; font-weight:600; color:var(--text);

    background:transparent; border:none; border-bottom:1px solid transparent;

    padding:3px 0; width:100%; min-width:0; flex:1; border-radius:0;

  }

  .editable-title::placeholder{ color:var(--text-faint); font-weight:400; }

  .editable-title[readonly]{ cursor:default; }

  .editable-title:not([readonly]){ border-bottom-color:var(--accent); cursor:text; }

  .editable-title:focus{ outline:none; }

  .icon-btn{

    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;

    width:28px; height:28px; border-radius:7px; border:1px solid var(--border-soft);

    background:transparent; color:var(--text-dim); cursor:pointer; padding:0;

    transition:border-color .15s ease, color .15s ease, background .15s ease;

  }

  .icon-btn:hover{ border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }

  .icon-btn svg{ width:13px; height:13px; display:block; }

  .btn-save-title{ flex-shrink:0; min-height:28px; padding:4px 11px; font-size:12px; background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

  .btn-save-title:hover{ background:var(--accent); border-color:var(--accent); filter:brightness(1.1); }


  .capture-btn{

    width:100%; padding:16px 12px; border-radius:var(--r-ctl); border:1px dashed var(--border-strong); background:transparent;

    color:var(--text); font-family:var(--font-sans); font-size:12.5px; font-weight:600; cursor:pointer;

    text-align:center; transition:background .12s ease, border-color .12s ease; user-select:none; -webkit-user-select:none;

  }

  .capture-btn.ok:hover, .capture-btn.ok.active{ border-color:var(--ok); background:var(--ok-glow); border-style:solid; }

  .capture-btn.bad:hover, .capture-btn.bad.active{ border-color:var(--bad); background:var(--bad-glow); border-style:solid; }

  .capture-btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .upload-line{ margin-top:10px; font-size:11.5px; color:var(--text-dim); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

  .upload-line input{ font-size:11px; color:var(--text-dim); max-width:100%; min-width:0; font-family:var(--font-sans); }

  .upload-line input::file-selector-button{

    font-family:var(--font-sans); font-size:11.5px; font-weight:600; padding:5px 10px; margin-right:8px;

    border-radius:7px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text); cursor:pointer;

  }

  .upload-line input::file-selector-button:hover{ border-color:var(--border-strong); }

  .thumb-strip{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; max-height:120px; overflow-y:auto; }

  .thumb-strip:empty{ display:none; }

  .thumb-strip img{ width:42px; height:42px; object-fit:cover; border-radius:6px; border:1px solid var(--border-soft); }


  .sync-bar{

    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:16px;

    border-top:1px solid var(--border-soft);

  }

  .sync-bar .class-count{ margin-left:auto; }

   /* ============ Warna dominan, kalibrasi, progress sinkron ============ */

  .cal-body{ padding:0 14px 14px; }

  .cal-body .adv-fields{ padding:0 0 12px; }

  .cal-check{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:var(--text-dim); cursor:pointer; }

  .cal-check input{ width:15px; height:15px; margin:0; accent-color:var(--accent); }


  .sync-progress{ flex-basis:100%; display:none; flex-direction:column; gap:6px; }

  .sync-progress.active{ display:flex; }

  .sync-progress-track{

    height:8px; border-radius:99px; background:var(--bg-sunken); border:1px solid var(--border-soft);

    overflow:hidden; position:relative;

  }

  .sync-progress-fill{ height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .2s ease, background .2s ease; }

  .sync-progress.done .sync-progress-fill{ background:var(--ok); }

  .sync-progress.error .sync-progress-fill{ background:var(--bad); }

  .sync-progress.indeterminate .sync-progress-fill{ width:35% !important; animation:syncSlide 1.1s ease-in-out infinite; }

  @keyframes syncSlide{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(290%); } }

  .sync-progress-text{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; }

  .sync-progress.done .sync-progress-text{ color:var(--ok); }

  .sync-progress.error .sync-progress-text{ color:var(--bad); }


  /* ============ Training ============ */

  details.adv{ margin-bottom:14px; border:1px solid var(--border-soft); border-radius:var(--r-inner); background:var(--bg-raised); }

  details.adv summary{

    cursor:pointer; font-size:12.5px; font-weight:600; color:var(--text); padding:10px 14px; list-style:none;

    display:flex; align-items:center; justify-content:space-between;

  }

  details.adv summary::-webkit-details-marker{ display:none; }

  details.adv summary::after{

    content:""; width:7px; height:7px; border-right:1.6px solid var(--text-dim); border-bottom:1.6px solid var(--text-dim);

    transform:rotate(45deg) translateY(-2px); transition:transform .15s ease;

  }

  details.adv[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }

  .adv-fields{ display:flex; gap:14px; padding:0 14px 14px; flex-wrap:wrap; }

  .field{ display:flex; flex-direction:column; gap:5px; }

  .field label{ font-size:11.5px; font-weight:500; color:var(--text-dim); }

  .field input{ width:104px; font-family:var(--font-mono); font-size:12.5px; padding:7px 10px; }

  .train-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

  .train-log{

    background:var(--bg-sunken); border:1px solid var(--border-soft); border-radius:var(--r-inner); padding:12px 14px;

    font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); height:132px; overflow-y:auto;

    line-height:1.7; white-space:pre-wrap;

  }

  .thumb-strip::-webkit-scrollbar, .train-log::-webkit-scrollbar, .readout::-webkit-scrollbar{ width:6px; }

  .thumb-strip::-webkit-scrollbar-thumb, .train-log::-webkit-scrollbar-thumb, .readout::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:4px; }


  /* ============ Uji langsung ============ */

  .status-readout{

    font-weight:700; font-size:26px; letter-spacing:0.02em; line-height:1.2;

    padding:24px 18px; border-radius:var(--r-inner); text-align:center; background:var(--bg-sunken);

    border:1px solid var(--border); color:var(--text-dim); margin-bottom:14px; transition:background .2s ease, color .2s ease, border-color .2s ease;

  }

  .status-readout.ok{ background:var(--ok-glow); border-color:var(--ok-line); color:var(--ok); }

  .status-readout.bad{ background:var(--bad-glow); border-color:var(--bad-line); color:var(--bad); }

  .status-readout.all-cat-row{ margin-bottom:14px; font-size:20px; }

  .all-cat-hint{ font-size:12px; color:var(--text-dim); margin-bottom:10px; }

  .confidence-bar{ width:100%; height:8px; gap:3px; display:flex; margin-bottom:8px; }

  .confidence-ok, .confidence-bad{ height:100%; border-radius:999px; transition:width .15s linear; }

  .confidence-ok{ background:var(--ok); }

  .confidence-bad{ background:var(--bad); }

  .confidence-caption{ font-size:12px; color:var(--text-dim); text-align:center; font-variant-numeric:tabular-nums; margin-bottom:4px; }


  .esp-box{

    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px; padding:12px 14px;

    border:1px solid var(--border-soft); border-radius:var(--r-inner); background:var(--bg-raised);

  }

  .esp-box .esp-label{ font-size:12.5px; font-weight:600; margin-right:auto; }

  .esp-box .esp-label small{ display:block; font-weight:400; font-size:11.5px; color:var(--text-dim); }

  .esp-box .btn-row{ margin:0; }

  .test-actions{ margin-top:14px; }


  /* Tombol mode uji + tooltip */

  .mode-toggle-wrap{ display:flex; align-items:center; gap:6px; }

  .info-icon{

    position:relative; display:inline-flex; align-items:center; justify-content:center;

    width:20px; height:20px; border-radius:50%; border:1px solid var(--border);

    color:var(--text-dim); font-size:11px; font-weight:700; cursor:help; user-select:none; flex-shrink:0;

  }

  .info-icon:hover, .info-icon:focus{ border-color:var(--accent-line); color:var(--accent); outline:none; }

  .info-tooltip{

    display:none; position:absolute; top:135%; right:-8px; width:290px; z-index:50;

    background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--r-inner);

    padding:14px 16px; font-size:12px; line-height:1.6; color:var(--text); font-weight:400; text-align:left;

    box-shadow:var(--shadow);

  }

  .info-tooltip b{ color:var(--accent); font-weight:700; }

  .info-icon:hover .info-tooltip, .info-icon:focus .info-tooltip{ display:block; }


  /* ============ Halaman masuk / daftar (Tema Arduino & ESP32) ============ */

  .auth-gate{

    position:fixed; inset:0; z-index:100; display:flex; overflow-y:auto; padding:24px 20px;

    background:

      radial-gradient(ellipse 700px 600px at 50% 50%, rgba(10, 24, 48, 0.42) 0%, transparent 85%),

      radial-gradient(1100px 600px at 50% 0%, #4da2f8, transparent 80%),

      radial-gradient(900px 500px at 50% 100%, #1d4ed8, transparent 80%),

      var(--bg);

  }

  .auth-circuit-bg{

    position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden;

    opacity:0.25; /* Dibuat halus dan transparan agar fokus utama tetap pada kotak login */

    transition:opacity .3s ease;

  }

  .auth-card{

    position:relative;

    z-index:2;

    margin:auto; width:100%; max-width:420px; background:var(--bg-panel);

    border:1.5px solid var(--border);

    border-radius:22px; padding:34px 28px 24px; display:flex; flex-direction:column; align-items:stretch;

    box-shadow:

      0 30px 70px -15px rgba(5, 15, 35, 0.8),

      0 0 0 1px rgba(255, 255, 255, 0.12),

      0 0 35px -5px rgba(73, 160, 248, 0.45);

    backdrop-filter:blur(16px);

  }

  .auth-card .corner{

    position:absolute; width:14px; height:14px; border-color:var(--accent);

    opacity:0.75; z-index:2;

  }

  .auth-card .corner.tl{ top:10px; left:10px; border-top:2px solid; border-left:2px solid; }

  .auth-card .corner.tr{ top:10px; right:10px; border-top:2px solid; border-right:2px solid; }

  .auth-card .corner.bl{ bottom:10px; left:10px; border-bottom:2px solid; border-left:2px solid; }

  .auth-card .corner.br{ bottom:10px; right:10px; border-bottom:2px solid; border-right:2px solid; }

  .auth-card .brand-mark{

    margin:0 auto 10px; width:54px; height:54px; border-radius:14px; display:grid; place-items:center;

    background:var(--bg-sunken); border:1px solid var(--border-strong); color:var(--accent);

    box-shadow:0 0 20px -5px var(--accent-line);

  }

  .esp32-icon{ width:38px; height:38px; display:block; }

  @keyframes ledPulse{

    0%, 100%{ opacity:0.45; filter:drop-shadow(0 0 1px var(--ok)); }

    50%{ opacity:1; filter:drop-shadow(0 0 6px var(--ok)); }

  }

  .led-blink{ animation:ledPulse 1.6s infinite ease-in-out; }

  .auth-chip-badge{

    align-self:center; display:inline-flex; align-items:center; gap:7px;

    padding:3px 11px; border-radius:20px; font-family:var(--font-mono); font-size:10.5px;

    font-weight:500; letter-spacing:0.05em; color:var(--text-dim);

    background:var(--bg-sunken); border:1px solid var(--border-soft); margin-bottom:12px;

  }

  .auth-chip-badge .chip-led{

    width:7px; height:7px; border-radius:50%; background:var(--ok);

    box-shadow:0 0 6px var(--ok); animation:ledPulse 1.4s infinite; flex-shrink:0;

  }

  .auth-card h1{ font-size:20px; font-weight:700; letter-spacing:-0.015em; text-align:center; margin:0 0 6px; color:var(--text); }

  .auth-sub{ font-size:12.5px; color:var(--text-dim); text-align:center; margin:0 0 18px; line-height:1.5; }

  .auth-field{ display:flex; flex-direction:column; gap:6px; margin-top:13px; }

  .auth-field:first-of-type{ margin-top:0; }

  .auth-field label{ font-size:12px; font-weight:600; color:var(--text); }

  .input-wrap{ position:relative; display:flex; align-items:center; width:100%; }

  .input-wrap .field-icon, svg.field-icon{

    position:absolute; left:12px; width:17px !important; height:17px !important; max-width:17px !important; max-height:17px !important; flex-shrink:0; color:var(--text-dim);

    pointer-events:none; transition:color .15s ease; z-index:1;

  }

  .input-wrap input{

    width:100%; padding:10px 14px 10px 38px;

    background:var(--bg-sunken); border:1px solid var(--border);

    color:var(--text); font-family:var(--font-sans); font-size:13px;

    border-radius:var(--r-ctl);

    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;

  }

  .input-wrap.has-toggle input{ padding-right:40px; }

  .input-wrap input:focus{

    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);

    background:var(--bg-raised);

  }

  .input-wrap:focus-within .field-icon{ color:var(--accent); }

  .pw-toggle-btn{

    position:absolute; right:8px; display:inline-flex; align-items:center; justify-content:center;

    width:28px; height:28px; padding:0; background:none; border:none;

    color:var(--text-faint); cursor:pointer; border-radius:6px;

    transition:color .15s ease, background .15s ease; z-index:2;

  }

  .pw-toggle-btn:hover{ color:var(--text); background:var(--bg-raised); }

  .pw-toggle-btn svg{ width:16px; height:16px; }

  .auth-actions{ display:flex; flex-direction:column; gap:8px; margin-top:20px; }

  .auth-actions .btn{

    width:100%; min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600;

  }

  .auth-actions .btn .btn-icon{ width:16px; height:16px; flex-shrink:0; }

  .btn-secondary-tech{

    background:var(--bg-sunken); border:1px solid var(--border-strong); color:var(--text);

  }

  .btn-secondary-tech:hover{

    background:var(--bg-raised); border-color:var(--accent-line); color:var(--text);

  }

  .auth-msg{ margin-top:12px; font-size:12.5px; color:var(--text-dim); min-height:18px; text-align:center; line-height:1.5; font-family:var(--font-mono); }

  .auth-msg.error{ color:var(--bad); }

  .auth-msg.ok{ color:var(--ok); }

  .auth-link-row{ text-align:center; margin-top:12px; }

  .auth-link{

    background:none; border:none; padding:4px 8px; color:var(--text-dim); font-family:var(--font-sans);

    font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px;

    display:inline-flex; align-items:center; gap:6px; border-radius:4px;

  }

  .auth-link:hover{ color:var(--accent); }

  .auth-link svg{ width:14px; height:14px; }

  .auth-hw-strip{

    margin-top:18px; padding-top:14px; border-top:1px dashed var(--border-soft);

    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; text-align:center;

  }

  .hw-item{

    display:flex; flex-direction:column; align-items:center; gap:4px;

    padding:6px 4px; border-radius:8px; background:var(--bg-sunken);

    border:1px solid var(--border-soft); color:var(--text-dim);

    font-size:11px; font-family:var(--font-mono);

    transition:border-color .15s ease, color .15s ease;

  }

  .hw-item:hover{ border-color:var(--accent-line); color:var(--text); }

  .hw-item svg{ width:16px; height:16px; color:var(--accent); }


  /* ============ Notifikasi ============ */

  .notif-overlay{

    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;

    background:rgba(5,8,11,0.62); padding:20px;

  }

  .notif-card{

    width:100%; max-width:340px; background:var(--bg-panel); border:1px solid var(--border-strong);

    border-radius:18px; padding:26px 24px 22px; text-align:center; box-shadow:var(--shadow);

  }

  .notif-card p{ font-size:14px; line-height:1.6; color:var(--text); margin:0 0 20px; }

  .notif-card .btn{ width:100%; min-height:42px; }


  @media (max-width:600px){

    body{ padding:10px 12px 32px; }

    .panel{ padding:16px; }

    .status-readout{ font-size:22px; padding:20px 14px; }

  }

  @media (prefers-reduced-motion:reduce){

    *{ animation:none !important; transition:none !important; }

  }