/* ============================================================
   SAMARITANUS · FAMILIA — Mission Control aesthetic
   Bleumarin profund + accente cyan/auriu, tipografie clară
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg-1:#050d24;
  --bg-2:#0c1a3c;
  --bg-3:#15265a;
  --line:#1f2f55;
  --cyan:#5ce8ff;
  --cyan-2:#2fd4ff;
  --gold:#ffb547;
  --green:#2cf3a0;
  --red:#ff4d57;
  --warn:#ffd166;
  --txt:#eaf2ff;
  --muted:#9eb3d6;
  --card:rgba(20,32,68,.85);
  --card-strong:rgba(28,44,86,.95);
  --shadow:0 18px 48px rgba(0,0,0,.5);
}
html,body{
  height:100%;
  font-family:-apple-system, "SF Pro Text", Segoe UI, Roboto, system-ui, sans-serif;
  color:var(--txt);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(92,232,255,.07), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(255,181,71,.05), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  background-attachment: fixed;
  overflow-x:hidden;
}
body{
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.hidden{display:none !important}

/* ===== SCREEN BASE ===== */
.screen{ min-height:100vh; display:flex; flex-direction:column }

/* ============================================================
   ECRAN 1: PAIRING
   ============================================================ */
.screen--pair{ padding:20px; align-items:center; justify-content:center; }

.pair-wrap{
  width:100%; max-width:440px;
  display:flex; flex-direction:column; gap:18px;
}

.brand-head{
  text-align:center; padding:18px 0 6px;
}
.brand-head .logo{
  font-size:48px; line-height:1; margin-bottom:8px;
  filter:drop-shadow(0 6px 18px rgba(92,232,255,.35));
}
.brand-head .brand{
  font-size:24px; font-weight:800; letter-spacing:3px; color:var(--cyan);
  font-variant: small-caps;
}
.brand-head .sub{
  font-size:14px; color:var(--muted); margin-top:2px; letter-spacing:1px;
}

.pair-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px; padding:22px 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.pair-card h2{
  font-size:20px; font-weight:800; text-align:center; color:var(--txt);
  margin-bottom:6px;
}
.pair-card .muted{
  font-size:14px; color:var(--muted); text-align:center;
  line-height:1.5; margin-bottom:18px;
}

.pair-digits{
  display:flex; align-items:center; justify-content:center;
  gap:6px; margin:10px 0 16px;
}
.pair-digits .dig{
  width:42px; height:56px;
  text-align:center; font-size:24px; font-weight:800;
  background:rgba(255,255,255,.04);
  border:2px solid var(--line);
  color:var(--cyan);
  border-radius:10px;
  outline:none; transition:border-color .15s, background .15s;
}
.pair-digits .dig:focus{
  border-color:var(--cyan); background:rgba(92,232,255,.08);
}
.pair-digits .dash{
  color:var(--muted); font-size:24px; font-weight:700; padding:0 2px;
}

.lbl{
  display:block; margin:14px 0 6px 4px;
  font-size:12px; letter-spacing:1.5px; color:var(--muted);
  text-transform:uppercase;
}
.text-input{
  width:100%; padding:14px 14px;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--line);
  color:var(--txt);
  font-size:16px; border-radius:10px;
  outline:none; transition:border-color .15s;
}
.text-input:focus{ border-color:var(--cyan); }
select.text-input{
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.btn-main{
  margin-top:18px; width:100%;
  padding:16px; font-size:16px; font-weight:800; letter-spacing:2px;
  color:#062;
  background: linear-gradient(180deg, var(--green), #1ea870);
  border:0; border-radius:12px;
  cursor:pointer; transition:transform .1s;
  box-shadow:0 8px 24px rgba(44,243,160,.25);
}
.btn-main:active{ transform:translateY(1px); }
.btn-main:disabled{ opacity:.6; cursor:wait; }

.err{
  min-height:18px; text-align:center; margin-top:10px;
  font-size:13px; color:#ff8a92;
}

.pair-secure{
  text-align:center; font-size:11px; color:var(--muted);
  letter-spacing:1px; opacity:.7; padding:4px;
}

/* ============================================================
   ECRAN 2: STAȚIA
   ============================================================ */
.screen--station{ padding:0; }

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background: rgba(5,13,36,.85);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-left{ display:flex; flex-direction:column; gap:2px; }
.brand-mini{
  font-size:13px; font-weight:800; letter-spacing:2px; color:var(--cyan);
}
.who{
  font-size:12px; color:var(--muted); letter-spacing:.5px;
}
.icon-btn{
  width:42px; height:42px;
  background:rgba(92,232,255,.08);
  border:1px solid var(--line);
  color:var(--cyan);
  font-size:18px;
  border-radius:50%;
  cursor:pointer; transition:background .15s;
}
.icon-btn:active{ background:rgba(92,232,255,.18); }

/* ===== VU PANEL (cadran rutina) ===== */
.vu-panel{
  margin:18px 16px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow);
}
.vu-panel::before{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(135deg, transparent, rgba(92,232,255,.15), transparent);
  border-radius:22px; z-index:-1; opacity:.7;
}
.vu-label{
  font-size:11px; letter-spacing:3px; color:var(--muted);
  text-align:center; text-transform:uppercase; margin-bottom:8px;
}
.vu-arc{ display:flex; justify-content:center; }
.vu-svg{ width:100%; max-width:280px; height:auto; }
.vu-arc-bg{ stroke: rgba(255,255,255,.06); }
.vu-readout{
  display:flex; align-items:baseline; justify-content:center; gap:4px;
  margin-top:4px;
}
.vu-readout #vu-percent{
  font-size:54px; font-weight:200; color:var(--cyan);
  letter-spacing:-2px; line-height:1;
  font-variant-numeric: tabular-nums;
}
.vu-percent-sign{
  font-size:24px; color:var(--cyan); opacity:.6;
}
.vu-sub{
  display:block; width:100%; text-align:center;
  margin-top:4px; font-size:13px; color:var(--muted);
  letter-spacing:.5px;
}

/* ===== LED RACK (lista rutina) ===== */
.led-rack{
  margin:14px 16px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.led-row{
  display:grid;
  grid-template-columns: 28px 56px 1fr 44px 44px;
  align-items:center; gap:8px;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.led-row:last-child{ border-bottom:0; }

.led{
  width:14px; height:14px; border-radius:50%;
  background:#1a2540;
  box-shadow: inset 0 0 4px rgba(0,0,0,.5);
  display:inline-block;
}
.led--ok{ background:var(--green); box-shadow:0 0 12px rgba(44,243,160,.7), inset 0 0 4px rgba(0,80,40,.4); }
.led--warn{ background:var(--warn); box-shadow:0 0 12px rgba(255,209,102,.6), inset 0 0 4px rgba(120,80,0,.4); }
.led--miss{ background:var(--red); box-shadow:0 0 12px rgba(255,77,87,.6), inset 0 0 4px rgba(100,0,0,.4); }
.led--rec{ background:var(--cyan); box-shadow:0 0 12px rgba(92,232,255,.6); }

.led-time{
  font-size:14px; font-weight:700; color:var(--cyan);
  font-variant-numeric: tabular-nums;
}
.led-title{
  font-size:14px; color:var(--txt); line-height:1.3;
}
.led-title small{
  display:block; color:var(--muted); font-size:11px; margin-top:2px;
}
.led-act{
  width:40px; height:40px; border-radius:10px;
  background:rgba(92,232,255,.08);
  border:1px solid var(--line);
  color:var(--cyan);
  font-size:16px; cursor:pointer;
  transition:background .15s, transform .1s;
}
.led-act:active{ transform:scale(.94); }
.led-act--rec.has{
  background:rgba(44,243,160,.15);
  border-color: var(--green);
  color: var(--green);
}

/* ===== PHONE ROW (Suna abonatul / dispecer) ===== */
.phone-row{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin:14px 16px;
}
.phone-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:18px 10px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1.5px solid var(--line);
  border-radius:18px;
  color:var(--txt); text-decoration:none;
  cursor:pointer; transition:transform .1s, border-color .2s;
  box-shadow: var(--shadow);
  min-height:108px;
}
.phone-btn:active{ transform:translateY(2px); }
.phone-btn--patient{ border-color: var(--cyan); }
.phone-btn--patient .phone-ico{ color: var(--cyan); }
.phone-btn--disp{ border-color: var(--gold); }
.phone-btn--disp .phone-ico{ color: var(--gold); }
.phone-ico{ font-size:36px; line-height:1; }
.phone-lbl{
  font-size:12px; letter-spacing:1.5px; text-align:center;
  text-transform:uppercase; line-height:1.3;
}
.phone-lbl b{ font-size:15px; font-weight:800; }

/* ===== Hello btn ===== */
.hello-btn{
  display:block; margin:6px 16px 16px;
  padding:16px; width:calc(100% - 32px);
  background: linear-gradient(180deg, rgba(255,181,71,.18), rgba(255,181,71,.06));
  border:1.5px solid var(--gold);
  border-radius:14px;
  color:var(--gold);
  font-size:15px; font-weight:700; letter-spacing:.5px;
  cursor:pointer; transition:transform .1s;
}
.hello-btn:active{ transform:translateY(2px); }

/* ===== Legend ===== */
.legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px;
  padding:10px 16px 24px;
  font-size:11px; color:var(--muted); letter-spacing:.5px;
}
.legend span{ display:inline-flex; align-items:center; gap:6px; }

/* ===== Lang button + footer ===== */
.footer-row{
  display:flex; justify-content:center; padding:0 16px 14px;
}
.mini-btn{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px; padding:8px 14px; border-radius:999px;
  cursor:pointer; transition:color .15s, border-color .15s;
}
.mini-btn:active{ color:var(--cyan); border-color:var(--cyan); }

/* ============================================================
   MODAL: RECORDER (înregistrare voce)
   ============================================================ */
.modal-back{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.78);
  display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter: blur(6px);
}
.modal-back.hidden{ display:none; }

.reel-modal{
  width:100%; max-width:520px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1px solid var(--line);
  border-radius:24px 24px 0 0;
  padding:18px 18px 24px;
  animation: slideUp .25s ease-out;
}
@keyframes slideUp{ from{ transform:translateY(40px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

.reel-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:16px;
}
.reel-title{
  font-size:16px; font-weight:800; color:var(--cyan); letter-spacing:1px;
}
.reel-sub{
  font-size:12px; color:var(--muted); margin-top:4px;
}

/* === Tape deck redesign: cerc pulsator în loc de rolele vintage === */
.tape-deck{
  position:relative;
  height:140px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.tape-deck::before{
  content:""; position:absolute; left:50%; top:50%;
  width:130px; height:130px; transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid var(--line);
  background: radial-gradient(circle at 30% 30%, rgba(92,232,255,.15), transparent 60%);
}
.reel{
  position:absolute; left:50%; top:50%;
  width:80px; height:80px; transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, var(--cyan-2) 0%, var(--cyan) 30%, transparent 60%);
  opacity:.25; transition:opacity .2s;
}
.reel.spin{
  opacity:.7;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1) }
  50%{ transform:translate(-50%,-50%) scale(1.4) }
}
.reel-spokes, .tape, .reel-right{ display:none; }

.rec-vu{
  height:8px;
  background:rgba(255,255,255,.06);
  border-radius:99px;
  margin-bottom:8px;
  overflow:hidden;
}
.rec-vu-bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--green), var(--warn), var(--red));
  transition: width .08s;
  border-radius:99px;
}

.rec-time{
  text-align:center; font-size:32px; font-weight:200;
  color:var(--cyan); font-variant-numeric: tabular-nums;
  letter-spacing:2px; margin-bottom:14px;
}

.reel-suggest{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:12px;
}
.suggest-lbl{
  font-size:11px; letter-spacing:1.5px; color:var(--muted);
  text-transform:uppercase; margin-bottom:4px;
}
.suggest-text{
  font-size:14px; color:var(--txt); line-height:1.4;
}

#rec-preview{
  width:100%; margin-bottom:12px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
}

.rec-actions{
  display:grid; grid-template-columns: 2fr 1fr 2fr; gap:10px;
  margin-bottom:10px;
}
.rec-btn{
  padding:14px 8px; font-size:14px; font-weight:800; letter-spacing:1px;
  border:0; border-radius:12px;
  cursor:pointer; transition:transform .1s, opacity .15s;
  color:#fff;
}
.rec-btn:disabled{ opacity:.4; cursor:not-allowed; }
.rec-btn:active:not(:disabled){ transform:scale(.96); }
.rec-btn--rec{ background: linear-gradient(180deg, var(--red), #b8252e); }
.rec-btn--rec.recording{ animation: blink 1s infinite; }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
.rec-btn--stop{ background:#3a4a6a; }
.rec-btn--save{ background: linear-gradient(180deg, var(--green), #1ea870); color:#062; }

.rec-dot{
  display:inline-block; width:10px; height:10px;
  border-radius:50%; background:#fff;
  vertical-align:middle; margin-right:4px;
}

.rec-status{
  text-align:center; font-size:13px; color:var(--muted);
  min-height:36px; padding:6px;
}

/* ===== TOAST ===== */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
  max-width:90%;
  background:var(--card-strong);
  border:1px solid var(--cyan);
  color:var(--txt);
  padding:14px 18px;
  border-radius:12px;
  font-size:14px; line-height:1.4;
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
  opacity:0; transition: opacity .25s, transform .25s;
  z-index: 10000;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.hidden{ pointer-events:none; }