/* ============================================================
   KONFIGURACJA — zmień tutaj
   TOPIC musi być identyczny z smart-admin.html
   ============================================================ */
:root {
  --navy:  #0d1117;
  --navy2: #161d27;
  --gold:  #c8a96e;
  --gold2: #e8c97a;
  --white: #f0ece4;
  --muted: #6b7a8d;
  --red:   #e63946;
  --green: #52b788;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{font-family:"Crimson Pro",Georgia,serif;background:var(--navy);color:var(--white);min-height:100dvh;overflow-x:hidden}

/* ── MAIN PAGE ── */
#main-page{display:block;opacity:1}
#main-page.visible{display:block;opacity:1}

/* ── HEADER ── */
.header{background:var(--navy);border-bottom:1px solid rgba(200,169,110,.15);padding:14px 20px;position:sticky;top:0;z-index:50;backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:420px;margin:0 auto}
.header-logo-img{height:28px}
.header-badge{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(200,169,110,.3);padding:3px 10px;border-radius:2px}

/* ── STATUS GRID ── */
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:420px;margin:0 auto;padding:16px 20px 8px}
.status-card{background:var(--navy2);border:1px solid rgba(200,169,110,.1);border-radius:3px;padding:18px 14px;text-align:center}
.status-icon{font-size:20px;margin-bottom:5px;display:block}
.status-num{font-family:"Rajdhani",sans-serif;font-size:26px;font-weight:700;color:var(--gold);display:block;line-height:1}
.status-lbl{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px;display:block}

/* ── DATA PANEL ── */
.data-panel{max-width:420px;margin:0 auto;padding:8px 20px}
.panel-header{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;margin-top:8px;display:flex;align-items:center;gap:8px}
.panel-header::after{content:"";flex:1;height:1px;background:rgba(200,169,110,.2)}
.device-card{background:var(--navy2);border:1px solid rgba(200,169,110,.12);border-radius:3px;overflow:hidden;margin-bottom:10px}
.device-card-title{background:rgba(200,169,110,.06);padding:12px 16px;font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(200,169,110,.1);display:flex;align-items:center;gap:8px}
.blink-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blinkDot 1.5s infinite}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.2}}
.data-row{display:flex;align-items:baseline;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.03);gap:8px}
.data-row:last-child{border-bottom:none}
.data-key{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);flex-shrink:0;min-width:120px}
.data-val{font-family:"Rajdhani",sans-serif;font-size:16px;color:var(--white);text-align:right;word-break:break-all;line-height:1.4}
.data-val.gold{color:var(--gold)}.data-val.green{color:var(--green)}

/* ── BATERIA ── */
.battery-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.03)}
.battery-row:last-child{border-bottom:none}
.batt-icon{position:relative;width:38px;height:19px;border:2px solid rgba(200,169,110,.5);border-radius:3px;flex-shrink:0}
.batt-icon::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:3px;height:9px;background:rgba(200,169,110,.5);border-radius:0 2px 2px 0}
.batt-fill{height:100%;border-radius:1px;background:var(--green);transition:width .5s,background .5s}
.batt-text{font-family:"Rajdhani",sans-serif;font-size:17px;font-weight:700;color:var(--white)}
.batt-status-txt{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:1px;color:var(--muted);margin-top:2px}

/* ── ŻYROSKOP ── */
.gyro-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,.03)}
.gyro-axis{background:var(--navy2);padding:14px 8px;text-align:center}
.gyro-lbl{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gyro-val{font-family:"Rajdhani",sans-serif;font-size:26px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;transition:color .2s}
.gyro-val.flash{color:var(--green)}
.gyro-note{font-family:"Crimson Pro",serif;font-size:16px;color:var(--muted);font-style:italic;padding:10px 16px;border-top:1px solid rgba(255,255,255,.03)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blinkDot 1s infinite}

/* ── EXTRA GRID ── */
.extra-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.extra-card{background:var(--navy2);border:1px solid rgba(200,169,110,.1);border-radius:3px;padding:16px 14px}
.extra-lbl{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.extra-val{font-family:"Rajdhani",sans-serif;font-size:17px;font-weight:700;color:var(--white);line-height:1.3}
.extra-val.gold{color:var(--gold)}.extra-val.green{color:var(--green)}.extra-val.red-t{color:#ff6b6b}

/* ── FINGERPRINT ── */
.fp-box{background:var(--navy2);border:1px solid rgba(200,169,110,.25);border-radius:3px;padding:16px;margin-bottom:10px;position:relative;overflow:hidden}
.fp-box::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(200,169,110,.05) 0%,transparent 70%)}
.fp-label{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.fp-hash{font-family:"Rajdhani",monospace;font-size:16px;color:var(--white);letter-spacing:1.5px;word-break:break-all;line-height:1.7}
.fp-note{font-family:"Crimson Pro",serif;font-size:16px;color:var(--muted);margin-top:10px;line-height:1.65;font-style:italic}

/* ── GPS ── */
.gps-block{background:var(--navy2);border:1px solid rgba(200,169,110,.2);border-radius:3px;padding:16px;margin-bottom:10px}
.gps-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.gps-icon{font-size:26px;flex-shrink:0;margin-top:2px}
.gps-title{font-family:"Rajdhani",sans-serif;font-size:17px;font-weight:700;color:var(--gold);letter-spacing:1px}
.gps-sub{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.gps-explain{font-family:"Crimson Pro",serif;font-size:16px;color:rgba(240,236,228,.7);line-height:1.6;margin-bottom:16px}
.gps-btn{width:100%;padding:16px 16px;background:rgba(200,169,110,.1);border:1px solid rgba(200,169,110,.3);border-radius:3px;color:var(--gold);font-family:"Rajdhani",sans-serif;font-size:16px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .2s}
.gps-btn:active{background:rgba(200,169,110,.2)}
.gps-btn.loading{color:var(--muted);border-color:rgba(200,169,110,.15)}
.gps-btn.success{color:var(--green);border-color:rgba(82,183,136,.4);background:rgba(82,183,136,.07)}
.gps-result{margin-top:12px;border-top:1px solid rgba(200,169,110,.1);padding-top:8px}
.gps-link{color:var(--gold);text-decoration:underline}
.gps-denied{margin-top:12px;text-align:center;padding:8px 0}

/* ── AGENDA ── */
.agenda-section{max-width:420px;margin:0 auto;padding:0 20px 10px}
.agenda-item{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.agenda-item:last-child{border-bottom:none}
.agenda-time{font-family:"Rajdhani",sans-serif;font-size:16px;font-weight:700;color:var(--gold);min-width:46px;letter-spacing:1px;padding-top:1px}
.agenda-content h3{font-family:"Rajdhani",sans-serif;font-size:17px;font-weight:600;color:var(--white);letter-spacing:.5px}
.agenda-content p{font-family:"Crimson Pro",serif;font-size:16px;color:var(--muted);margin-top:2px}
.agenda-highlight{border-left:2px solid var(--gold);padding-left:10px}
.agenda-highlight .agenda-content h3{color:var(--gold)}

/* ── FOOTER ── */
.footer{max-width:420px;margin:12px auto 0;padding:18px 20px 48px;border-top:1px solid rgba(200,169,110,.1);display:flex;flex-direction:column;align-items:center;gap:8px}
.footer-logo{height:22px}
.footer-text{font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}


/* Efekt skanowania na data-row */
@keyframes scanRow {
  0%   { background: rgba(200,169,110,0); color: inherit; }
  20%  { background: rgba(200,169,110,.12); }
  40%  { background: rgba(200,169,110,0); }
  60%  { background: rgba(200,169,110,.08); }
  100% { background: rgba(200,169,110,0); }
}
@keyframes flashVal {
  0%,100% { color: inherit; }
  30%     { color: var(--gold); text-shadow: 0 0 12px var(--gold); }
  60%     { color: var(--white); }
}
.scanning .data-row  { animation: scanRow 1.2s ease forwards; }
.scanning .data-val  { animation: flashVal 1.2s ease forwards; }
.scanning .gyro-val  { animation: flashVal 1.2s ease forwards; }
.scanning .extra-val { animation: flashVal 1.2s ease forwards; }
.scanning .fp-hash   { animation: flashVal 1.2s ease forwards; }

/* Staggered delay dla każdego wiersza */
.scanning .data-row:nth-child(1)  { animation-delay: 0.00s }
.scanning .data-row:nth-child(2)  { animation-delay: 0.08s }
.scanning .data-row:nth-child(3)  { animation-delay: 0.16s }
.scanning .data-row:nth-child(4)  { animation-delay: 0.24s }
.scanning .data-row:nth-child(5)  { animation-delay: 0.32s }
.scanning .data-row:nth-child(6)  { animation-delay: 0.40s }
.scanning .data-row:nth-child(7)  { animation-delay: 0.48s }

/* Finalne podświetlenie po skanie */
@keyframes finalGlow {
  0%   { box-shadow: none; border-color: rgba(200,169,110,.12); }
  50%  { box-shadow: 0 0 20px rgba(200,169,110,.15); border-color: rgba(200,169,110,.5); }
  100% { box-shadow: none; border-color: rgba(200,169,110,.12); }
}
.scan-done { animation: finalGlow 1s ease forwards; }

/* ── CONFIRM BUTTON ── */
.confirm-wrap{max-width:420px;margin:0 auto;padding:12px 20px 4px}
.confirm-btn{width:100%;padding:18px 20px;background:rgba(200,169,110,.1);border:1px solid rgba(200,169,110,.35);border-radius:3px;color:var(--gold);font-family:"Rajdhani",sans-serif;font-size:17px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.confirm-btn:active{background:rgba(200,169,110,.2)}
.confirm-btn.confirmed{color:var(--green);border-color:rgba(82,183,136,.4);background:rgba(82,183,136,.07);cursor:default}

/* ── INFO TOGGLE ── */
.info-toggle-btn{background:none;border:none;color:var(--muted);font-family:"Rajdhani",sans-serif;font-size:16px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;padding:4px 0;transition:color .2s}
.info-toggle-btn:hover{color:var(--gold)}