:root{
  color-scheme:dark;
  --bg:#000000;
  --line:#333333;
  --line-soft:#2a2a2a;
  --red:#d32f2f;
  --red-hot:#e53945;
  --text:#ffffff;
  --muted:#9a9aa3;
  --field:#0a0a0a;
  --field-text:#8a8a93;       /* input value — dimmer than pure white */
  --field-placeholder:#6a6a74; /* placeholder — softer */
  --btn-grey:#333333;
  --pad:max(14px, env(safe-area-inset-left));
  --pad-r:max(14px, env(safe-area-inset-right));
  --pad-t:max(10px, env(safe-area-inset-top));
  --pad-b:max(14px, env(safe-area-inset-bottom));
  --tap:44px;
  --radius:10px;
  /* Name/SAVE wide; PIN field and CHECK button same size */
  --name-fr:1fr;
  --pin-fr:108px;
  --pin-h:44px;   /* PIN field height */
  --btn-h:28px;   /* A: matalin SAVE/CHECK */
  /* Style C — one font model for the whole portal */
  --font:"Montserrat",system-ui,-apple-system,sans-serif;
  --fs:.875rem;          /* 14px — same size everywhere */
  --fw:700;
  --fw-strong:800;
  --track:.06em;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw);
  line-height:1.35;
  letter-spacing:var(--track);
}
button,input,select,textarea{
  font:inherit;
  letter-spacing:inherit;
}
main{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad);
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

[hidden]{display:none!important}
#dashboard{display:flex;flex-direction:column;flex:1;min-height:0}

/* ---- top bar: MAC field · LOG IN · M3U | XTREAM (same row/level) ---- */
.topbar{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  padding:2px 0 4px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:4px; /* C TIUKIN: lomake melkein kiinni valikossa */
}
.connect-row{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin:0;
}
.tabs{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin:0 0 0 auto;
  min-width:0;
}
#code{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  height:28px;
  min-height:28px;
  max-height:28px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--field);
  color:var(--field-text);
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw-strong);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.btn-connect{
  flex:0 0 auto;
  height:28px;
  min-height:28px;
  max-height:28px;
  margin:0;
  padding:0 10px;
  border:0;
  border-radius:6px;
  background:var(--red);
  color:#fff;
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw-strong);
  letter-spacing:var(--track);
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
/* All topbar labels share one type style (M3U = XTREAM = MAC = LOG OUT) */
.topbar .tab,
.topbar .mac,
.topbar .logout{
  margin:0;
  padding:4px 1px 6px;
  border:0;
  border-radius:0;
  background:transparent;
  min-height:28px;
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw-strong);
  line-height:1;
  letter-spacing:var(--track);
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  display:inline-flex;
  align-items:center;
}
.topbar .tab{
  flex:0 0 auto;
  cursor:pointer;
  font-size:var(--fs); /* same size M3U = XTREAM */
  min-width:0;
  padding-left:2px;
  padding-right:2px;
}
.topbar .tab.active{
  color:var(--red);
  border-bottom:3px solid var(--red);
  padding-bottom:3px;
}
.top-end{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
.topbar .logout{
  cursor:pointer;
}
.topbar .logout span{margin-left:2px}

/* ---- form ---- */
.form{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.form input{
  display:block;width:100%;min-height:var(--tap);margin:0;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--field);color:var(--field-text);
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw);
  letter-spacing:var(--track);
  appearance:none;
  caret-color:#c8c8d0;
}
.form input::placeholder{
  color:var(--field-placeholder);
  opacity:1;
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw);
  letter-spacing:var(--track);
}
.form input:focus{
  color:#c4c4cc;
}
#xtreamfields{display:flex;flex-direction:column;gap:10px}
#xtreamfields[hidden]{display:none!important}
.row{display:grid;gap:10px;align-items:stretch}
.row-2{grid-template-columns:1fr 1fr}
.row-name-pin,.row-actions{
  grid-template-columns:minmax(0,1fr) var(--pin-fr);
}
.form .field-pin{
  width:var(--pin-fr);
  min-width:var(--pin-fr);
  max-width:var(--pin-fr);
  height:var(--pin-h);
  min-height:var(--pin-h);
  max-height:var(--pin-h);
  box-sizing:border-box;
  justify-self:end;
  border-radius:var(--radius);
  padding:0 8px;
  border:1px solid var(--line);
  background:var(--field);
  color:var(--field-text);
  text-align:center;
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw);
  letter-spacing:var(--track);
}
.btn-save,.btn-check{
  height:var(--btn-h);
  min-height:var(--btn-h);
  max-height:var(--btn-h);
  margin:0;border:0;border-radius:var(--radius);
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw-strong);
  line-height:1;
  letter-spacing:var(--track);
  text-transform:uppercase;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.btn-save{
  background:var(--red);color:#fff;width:100%;
}
.btn-check{
  width:var(--pin-fr);
  min-width:var(--pin-fr);
  max-width:var(--pin-fr);
  justify-self:end;
  background:var(--btn-grey);color:#fff;
  padding:0 8px;
  box-sizing:border-box;
}

/* ---- playlist list ---- */
.plist{
  flex:1;
  display:flex;
  flex-direction:column;
  margin:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.plist:empty::before{
  content:"No playlists yet";
  display:block;color:var(--muted);
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw);
  letter-spacing:var(--track);
  padding:8px 2px;
}
.prow{
  display:flex;align-items:center;gap:8px;
  min-height:32px;
  padding:4px 2px;
  border-top:1px solid var(--line-soft);
}
.prow:last-child{border-bottom:1px solid var(--line-soft)}
.prow-name{
  flex:1;min-width:0;
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw-strong);
  line-height:1.1;
  letter-spacing:var(--track);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prow-actions{display:flex;gap:6px;flex-shrink:0}
.icon-btn{
  width:28px;height:28px;margin:0;padding:0;
  border:1.5px solid var(--red);border-radius:6px;
  background:transparent;color:var(--red);
  display:grid;place-items:center;cursor:pointer;
}
.icon-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- footer ---- */
.foot{
  margin-top:auto;
  padding:16px 0 4px;
  text-align:center;
  color:var(--muted);
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw);
  letter-spacing:var(--track);
}
.foot strong{color:var(--red);font-weight:var(--fw-strong)}
.foot a{color:var(--muted);text-decoration:none;font:inherit}
.foot a:hover{color:#fff}
.foot a.download{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 22px;margin:0 0 14px;
  border-radius:var(--radius);background:var(--red);color:#fff;
  font-weight:var(--fw-strong);letter-spacing:var(--track);
}
.foot a.download:hover{background:var(--red-hot)}
.foot a.download + span{display:block}

.intro,.device-state{
  margin:10px 0 0;color:var(--muted);
  font-family:var(--font);font-size:var(--fs);font-weight:var(--fw);line-height:1.45;
}
.intro strong{color:#fff}
.device-state{color:#7ee2a0}
.device-state.waiting{color:#ffd54a}
#status{
  margin:8px 0 0;min-height:1em;color:#ffd54a;
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:var(--fw);
  letter-spacing:var(--track);
  white-space:pre-wrap;
}

input:focus,button:focus-visible,.tab:focus-visible,.icon-btn:focus-visible{
  outline:2px solid var(--red-hot);outline-offset:2px;
}

@media (min-width:480px){
  main{padding-top:14px}
}