/* The customer dashboard. Ember: the site's palette and Archivo.
   Design: iptv-player docs/customer-dashboard-design.html. */
@font-face{font-family:Archivo;src:url('/konto/assets/archivo-regular.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:Archivo;src:url('/konto/assets/archivo-bold.woff2') format('woff2');font-display:swap;font-weight:700}
:root{
  color-scheme:dark;
  --bg:#0c0907;--surface:#171210;--surface-2:#221a16;--surface-3:#2a201b;
  --line:#2e241f;--line-2:#5a4a40;
  --text:#f5efe9;--muted:#a08e82;--faint:#9c8b7f;
  --accent:#e8763c;--accent-ink:#0c0907;--focus:#e8763c;
  --ok:#86c97a;--warn:#f2c25a;--danger:#ef7a68;
  --radius:12px;--side:280px;
  font-family:Archivo,Arial,sans-serif;font-synthesis:none;
  background:var(--bg);color:var(--text);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);min-height:100vh}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3,h4,p{margin:0}
h1{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:400;letter-spacing:-.045em;line-height:1.08}
h2{font-size:1.5rem;font-weight:400;letter-spacing:-.035em;line-height:1.15}
h3{font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
h4{font-size:.95rem;font-weight:700}
p,li{color:var(--muted);line-height:1.6}
strong{color:var(--text)}
.skip{position:fixed;top:-100px;left:15px;padding:12px;background:var(--text);color:var(--bg);z-index:100}
.skip:focus{top:10px}
.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--accent);text-transform:uppercase}
.fine{font-size:.84rem;color:var(--muted);line-height:1.55}
.hint{font-size:.9rem;color:var(--muted);background:#ffffff06;border-radius:8px;padding:12px 14px;line-height:1.5}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:10px;font-size:1.35rem;letter-spacing:-.065em;font-weight:700;text-decoration:none}
.brand .wm span{font-weight:400}
.brand-mark{width:28px;height:28px;flex:none}
.language{font-size:.85rem;color:var(--muted);text-decoration:none}
.language:hover{color:var(--text)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 16px;border-radius:6px;font-weight:700;font-size:.9rem;border:1px solid transparent;transition:background .15s,transform .15s;text-align:center}
.btn:not([disabled]):hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:not([disabled]):hover{background:#ffa574}
.btn.secondary{background:var(--surface-2);border-color:var(--line)}
.btn.secondary:not([disabled]):hover{background:var(--surface-3)}
.btn.ghost{color:var(--muted)}
.btn.ghost:not([disabled]):hover{color:var(--text);background:var(--surface-2)}
.btn.small{min-height:36px;padding:7px 12px;font-size:.84rem}
.btn.wide{width:100%;min-height:52px;font-size:1rem}
button[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:20px;font-size:.78rem;border:1px solid var(--line);color:var(--muted);background:var(--surface);white-space:nowrap;width:fit-content}
.pill.on{color:#cdebc6;border-color:#36502f}
.pill.on::before,.pill.asleep::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pill.asleep::before{background:var(--faint)}
.pill.accent{color:#f8b28a;border-color:#815239}

/* Cards */
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:22px}

/* Connect */
.center{min-height:100vh;display:grid;place-items:center;padding:40px 16px;background:radial-gradient(circle at 75% 10%,#2c180d 0,transparent 40%),var(--bg)}
.auth{width:min(480px,100%);display:flex;flex-direction:column;gap:20px}
.auth-top{display:flex;justify-content:space-between;align-items:center}
.auth-card{padding:30px;display:flex;flex-direction:column;gap:16px}
.how{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.92rem}
.how li::marker{color:var(--accent)}
.auth-card label{font-size:.84rem;color:var(--muted);margin-bottom:-8px}
.code-input{font-size:1.6rem;letter-spacing:.3em;text-align:center;padding:14px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);width:100%;text-transform:uppercase}
.code-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #e8763c33}

/* Shell */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.app>*{min-width:0}
.side{border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:20px;background:linear-gradient(180deg,#120d0a,#0c0907 60%);position:sticky;top:0;height:100vh;overflow-y:auto}
.side-top{display:flex;justify-content:space-between;align-items:center;padding:0 6px}
.app-card{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.app-card h2{font-size:1.15rem;letter-spacing:.02em;font-weight:700}
.app-card #contact{font-size:.78rem;white-space:normal;align-items:flex-start;line-height:1.4}
.app-card #contact::before{margin-top:5px;flex:none}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:.68rem;letter-spacing:.15em;color:var(--faint);font-weight:700;padding:6px 10px}
#live-playlists{display:flex;flex-direction:column;gap:2px}
.playlist-choice{display:flex;align-items:center;gap:6px;padding:10px;border-radius:8px;color:var(--muted);text-align:left;font-size:.94rem;width:100%;min-height:42px}
.playlist-choice:not([disabled]):hover{background:var(--surface);color:var(--text)}
.playlist-choice[aria-pressed=true]{background:var(--surface-2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.choice-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.choice-active{color:var(--accent);font-size:.8rem;white-space:nowrap}
#add-playlist{justify-content:flex-start;margin-top:6px}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;align-items:stretch}
.content{padding:34px clamp(18px,4vw,56px) 130px;max-width:1120px;width:100%}

/* Editor */
.editor{display:flex;flex-direction:column;gap:16px}
.editor>h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.045em}
.editor>h3{margin-top:14px}
.editor>p{max-width:640px}
.editor>.btn,.editor>[data-focus=back]{align-self:flex-start}
.page-head{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.page-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.045em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.playlist-card{display:flex;flex-direction:column;gap:12px;min-height:180px}
.playlist-card.is-active{border-color:#5c3b29;background:linear-gradient(155deg,#2a1a11,#171210 60%)}
.playlist-card .btn{margin-top:auto;align-self:flex-start}
.card-top{display:flex;gap:8px;flex-wrap:wrap}

.portal-field{display:flex;flex-direction:column;gap:6px;max-width:560px}
.portal-field label,.editor label{font-size:.84rem;color:var(--muted)}
/* The new playlist's choice and the operator's playlists: groups of choices, no frame. */
[data-playlist-mode],[data-operator-playlists]{border:0;margin:0;padding:0;min-width:0;max-width:560px}
[data-playlist-mode] legend,[data-operator-playlists] legend{padding:0;margin-bottom:6px;font-size:.84rem;color:var(--muted)}
.editor input[type=text],.editor input[type=url],.editor input[type=password],.editor input[type=search],.editor select,.portal-field input{width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--line);background:var(--bg);min-height:44px}
.editor input:focus,.editor select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #e8763c33}
.editor select{width:auto}

/* Groups */
.portal-list-tools{display:flex;gap:10px;flex-wrap:wrap}
.portal-list-tools input[type=search]{flex:1;min-width:200px}
.portal-list-count{font-size:.84rem;color:var(--faint)}
.portal-group-list,.portal-channel-list,.portal-address-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.portal-group-list>p{padding:14px 16px}
.portal-group-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:8px 10px 8px 6px;border-top:1px solid var(--line)}
.portal-group-row:first-child{border-top:0}
.portal-group-open{text-align:left;padding:8px 10px;border-radius:6px;font-size:.95rem;min-height:40px;overflow-wrap:anywhere}
.portal-group-open:not([disabled]):hover{background:var(--surface-2)}
.portal-group-row.is-hidden .portal-group-open{color:var(--faint)}
.portal-kind{font-size:.74rem;color:var(--faint);border:1px solid var(--line);border-radius:20px;padding:3px 9px;white-space:nowrap}
.portal-row-toggle{min-width:76px;min-height:36px;padding:6px 12px;border-radius:20px;font-size:.82rem;font-weight:700;border:1px solid #5c3b29;background:#2a1a11;color:#f8b28a}
.portal-group-row.is-hidden .portal-row-toggle,.portal-channel-row.is-hidden .portal-row-toggle{border-color:var(--line);background:var(--surface-2);color:var(--muted)}

/* Channels */
.portal-channel-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px 10px 16px;border-top:1px solid var(--line)}
.portal-channel-row:first-child{border-top:0}
.portal-channel-row.is-hidden strong{color:var(--faint)}
.portal-channel-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.portal-channel-main strong{font-weight:400;font-size:.98rem;overflow-wrap:anywhere}
.portal-rename summary{cursor:pointer;font-size:.8rem;color:var(--faint);width:fit-content}
.portal-rename summary:hover{color:var(--text)}
.portal-rename[open] .portal-field{margin-top:8px}
.portal-channel-actions{display:flex;gap:8px;align-items:center}
.portal-star{width:40px;height:40px;border-radius:8px;font-size:1.25rem;color:var(--faint);display:grid;place-items:center}
.portal-star[aria-pressed=true]{color:var(--accent)}
.portal-star:not([disabled]):hover{background:var(--surface-2)}
.edit-row{display:flex;gap:10px;flex-wrap:wrap}

/* Server addresses and connection */
.portal-server-addresses{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:12px}
.portal-server-addresses:focus{outline:none}
.portal-address-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.portal-address-row:first-child{border-top:0}
.portal-address-row strong{font-weight:400;flex:1;min-width:120px}
.portal-address-row[aria-current=true]{box-shadow:inset 3px 0 0 var(--accent)}
.portal-address-row[aria-current=true] .portal-kind{color:#f8b28a;border-color:#815239}
.portal-connection,.portal-credentials{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:0 20px}
.portal-credentials{background:var(--surface-2);margin:4px 0}
.portal-connection summary,.portal-credentials summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:.95rem}
.portal-connection[open],.portal-credentials[open]{padding-bottom:18px}
.portal-connection[open]>*+*,.portal-credentials[open]>*+*{margin-top:12px}

/* Save bar and status */
.savebar{position:fixed;left:calc(var(--side) + (100vw - var(--side)) / 2);transform:translateX(-50%);bottom:18px;z-index:30;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 10px 10px 18px;border-radius:12px;background:#1a130f;border:1px solid var(--line-2);box-shadow:0 18px 50px #000a;width:min(760px,calc(100vw - var(--side) - 32px))}
.savebar.has-drafts{background:#21170f;border-color:#815239}
.savebar p{flex:1;min-width:180px;font-size:.9rem;color:var(--text)}
#live-status{position:fixed;right:18px;top:18px;z-index:40;display:flex;gap:10px;align-items:center;max-width:min(420px,calc(100vw - 36px));padding:12px 16px;border-radius:12px;background:#1a130f;border:1px solid var(--line-2);box-shadow:0 18px 50px #000a;font-size:.88rem;color:var(--text);margin:0}
#live-status:has(#live-status-text:empty){display:none}
.spinner{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid var(--surface-3);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Account (phase 3) */
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:.8rem;margin:0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.text-input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg);min-height:46px}
.text-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #e8763c33}
.turnstile{min-height:66px}
#code-sent{overflow-wrap:anywhere}
.code-card{padding:0 22px}
.code-card summary{cursor:pointer;padding:18px 0;font-weight:700}
.code-card[open]{padding-bottom:22px;display:flex;flex-direction:column;gap:14px}
.code-card label{font-size:.84rem;color:var(--muted)}
.nav-item{display:block;width:100%;text-align:left;padding:10px;border-radius:8px;color:var(--muted);font-size:.94rem}
.nav-item:hover{background:var(--surface);color:var(--text)}
.nav-item[aria-current=true]{background:var(--surface-2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.licence-card{display:flex;flex-direction:column;gap:10px;background:linear-gradient(155deg,#2a1a11,#171210 60%);border-color:#5c3b29}
.places{display:flex;gap:5px}
.places i{height:8px;flex:1;max-width:120px;border-radius:4px;background:var(--surface-3)}
.places i.used{background:var(--accent)}
.section{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.device-card{display:flex;flex-direction:column;gap:8px;min-height:140px}
.device-id{margin:0;font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--accent)}
.device-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.add-card{border:1px dashed var(--line-2);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;background:none}
.add-card .btn{align-self:flex-start;margin-top:auto}
.activity{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.activity li{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:12px 16px;border-top:1px solid var(--line);font-size:.9rem;color:var(--text)}
.activity li:first-child{border-top:0}
.activity time{color:var(--faint);font-size:.82rem}
.login-row{padding:14px 0;border-top:1px solid var(--line)}
.login-row:first-child{border-top:0;padding-top:0}
.login-row strong{font-weight:700}
.stack{display:flex;flex-direction:column;gap:14px;max-width:560px}
.stack[hidden]{display:none}
.editor select{min-height:44px}

/* Dashboard v2, V1 (iptv-player docs/dashboard-v2-plan.md): the menu follows
   the household's devices; a device has tabs; its editor sits in the page. */
.nav-device{display:flex;flex-direction:column;gap:2px}
.nav-device-name{color:inherit}
.nav-device-sub{font-size:.76rem;color:var(--faint)}
.nav-sub{padding:7px 10px 7px 24px;font-size:.88rem}
.nav-add{color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:6px}
.tile .btn{align-self:flex-start;margin-top:auto}
.tile-big{font-size:1.5rem;letter-spacing:-.03em;color:var(--text);line-height:1.2}
.attention{border-color:#6a5222;display:flex;flex-direction:column;gap:8px}
.attention-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--text)}
.steps{display:flex;flex-direction:column;gap:12px;border-color:#5c3b29}
.step-list{margin:0;padding-left:22px;display:grid;gap:10px}
.step-list li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--text)}
.step-list li.done{color:var(--faint);text-decoration:line-through}
.step-list li::marker{color:var(--accent)}
.device-tile{display:flex;flex-direction:column;gap:6px;text-align:left;min-height:120px;transition:border-color .15s}
.device-tile:hover{border-color:var(--line-2)}
.device-tile strong{font-size:1.05rem}
.device-meta{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:.86rem;color:var(--muted);margin:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tab{padding:10px 14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-size:.94rem}
.tab:hover{color:var(--text)}
.tab[aria-current=true]{color:var(--text);border-bottom-color:var(--accent)}
.danger-zone{border-color:#5a2c25;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.device-editor{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.editor-bar{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr) auto;gap:16px;align-items:start}
.editor-bar #live-playlists{flex-direction:row;flex-wrap:wrap;gap:6px}
.editor-bar .playlist-choice{width:auto;border:1px solid var(--line)}
.editor-actions{display:flex;flex-direction:column;gap:8px}

/* Phone width */
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:14px 16px;gap:12px}
  .nav{flex-direction:column}
  #live-playlists{flex-direction:row;overflow-x:auto;gap:4px;scrollbar-width:thin}
  .playlist-choice{width:auto;flex:none;border:1px solid var(--line)}
  .playlist-choice[aria-pressed=true]{box-shadow:inset 0 -2px 0 var(--accent)}
  .side-foot{flex-direction:row;flex-wrap:wrap;margin-top:0}
  .content{padding:22px 16px 170px}
  .savebar{left:16px;right:16px;width:auto;transform:none;bottom:12px}
  .portal-group-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .portal-kind{grid-column:1;grid-row:2;justify-self:start;margin-left:10px}
  .portal-row-toggle{grid-column:2;grid-row:1/3}
  #live-status{left:16px;right:16px;top:12px;max-width:none}
  .activity li{grid-template-columns:1fr;gap:2px}
  #account .nav{flex-direction:row;overflow-x:auto;gap:4px;scrollbar-width:none}
  #account .nav-item{width:auto;flex:none;white-space:nowrap;border:1px solid var(--line)}
  #account .nav-item[aria-current=true]{box-shadow:inset 0 -2px 0 var(--accent)}
  #account .nav-label,#account .nav-sub,#account .nav-device-sub{display:none}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .editor-bar{grid-template-columns:minmax(0,1fr)}
  .editor-actions{flex-direction:row;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.servers h3{margin:0}
.server-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.server-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.server-row:first-child{border-top:0}
.server-row[aria-current=true]{box-shadow:inset 3px 0 0 var(--accent)}
.server-choice{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;cursor:pointer}
.server-choice input{margin-top:5px;accent-color:var(--accent)}
.server-text{display:flex;flex-direction:column;min-width:0}
.server-text strong{font-weight:700}
.server-url{overflow-wrap:anywhere}
.servers textarea{width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font:inherit;color:inherit;resize:vertical}

/* Direct to TV: the household's screens are the primary workspace. */
:root{--bg:#0c0907;--surface:#171210;--surface-2:#221a16;--surface-3:#2a201b;--line:#2e241f;--line-2:#5a4a40;--text:#f5efe9;--muted:#a08e82;--faint:#9c8b7f;--accent:#e8763c;--accent-ink:#0c0907;--focus:#e8763c;--ok:#9bd5b3;--warn:#ebc778;--side:210px}
.account-toolbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;border-bottom:1px solid var(--line);background:var(--surface)}
.account-toolbar-actions{display:flex;align-items:center;gap:16px}.account-tools{position:relative}.account-tools summary{list-style:none;cursor:pointer;padding:9px 12px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}.account-tools summary::-webkit-details-marker{display:none}.account-tools-panel{position:absolute;right:0;top:48px;z-index:12;width:min(290px,calc(100vw - 32px));padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px #0005;display:flex;flex-direction:column;gap:6px}.account-tools-panel button{text-align:left;justify-content:flex-start}.account-tools-panel .app-card{margin-bottom:4px}
#account .side{height:calc(100vh - 82px);top:0;background:var(--surface);gap:16px;padding:24px 14px}#account .side-top{display:none}#account>.content{padding:28px 28px 80px;max-width:none}#account .side-foot{font-size:.84rem}.nav-device{padding:12px 10px}.nav-device[aria-current=true]{background:#37271e;color:var(--accent);box-shadow:none}.nav-device-sub{font-size:.75rem}.nav-item{border-radius:8px}.device-meta{font-size:.8rem}.device-meta .device-id{font-size:.8rem}.tabs{overflow:visible;flex-wrap:wrap;gap:5px;padding-bottom:12px}.tab{border:0;border-radius:7px;padding:8px 12px}.tab[aria-current=true]{background:var(--surface-2);color:var(--text)}.page-head{gap:6px}.page-head>.eyebrow{color:var(--muted)}.device-editor{border-top:1px solid var(--line);padding-top:18px}.danger-zone{border-color:var(--line)}
.library-workspace{display:flex;flex-direction:column;gap:14px;min-width:0}.library-head{display:flex;gap:12px;align-items:center}.library-head select{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px}.library-scope{margin:0}.library-body{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:22px;min-width:0}.library-catalog{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;min-width:0;align-items:start}.library-groups{background:var(--bg);border-right:1px solid var(--line);padding:12px;min-width:0}.library-groups>input{width:100%;padding:10px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);font-size:.85rem}.library-group-list{margin-top:12px;max-height:630px;overflow-y:auto;scrollbar-width:thin}.library-group{width:100%;padding:10px 8px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;border-radius:6px;text-align:left;color:var(--muted);font-size:.88rem;overflow-wrap:anywhere}.library-group small{font-size:.7rem}.library-group[aria-current=true]{color:var(--accent);background:#37271e}.library-group:hover{background:var(--surface-2)}.library-channels{min-width:0}.library-channel-head{padding:12px;display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line)}.library-channel-head h3{overflow-wrap:anywhere}.library-channel-search{width:calc(100% - 24px);margin:12px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:6px;font:inherit;color:var(--text)}.library-channel-list{min-height:150px}.library-channel{padding:12px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;min-width:0}.library-channel.is-hidden strong{color:var(--faint);text-decoration:line-through}.library-channel-name{flex:1;min-width:0;overflow-wrap:anywhere}.library-channel-name strong{font-size:.92rem;font-weight:400}.library-channel-name details input{width:100%;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:8px;color:var(--text);font:inherit}.library-channel-actions{display:flex;gap:5px;align-items:center}.library-channel-actions button{min-width:36px}.library-star{font-size:1.3rem;width:36px;min-height:36px;border-radius:6px;color:var(--muted)}.library-star[aria-pressed=true]{background:#37271e;color:var(--accent)}.library-status{border-left:1px solid var(--line);padding-left:20px;display:flex;flex-direction:column;gap:14px;align-self:start;min-width:0;overflow-wrap:anywhere}.library-status .eyebrow{color:var(--muted)}.library-sync{font-size:.88rem}.library-sync.received{color:var(--ok)}.library-sync.pending{color:var(--warn)}.library-savebar{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap}.library-savebar>p{margin-right:auto}.library-message{color:var(--muted);font-size:.88rem;min-height:1.6em;max-width:850px}.library-channels>.fine,.library-channel-list>.fine{padding:18px}.library-channels>.edit-row{padding:12px}.library-channels>h3{padding:18px 18px 0}
@media(max-width:1150px){.library-body{grid-template-columns:minmax(0,1fr)}.library-status{order:-1;border-left:0;border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px}.library-status>.fine{font-size:.8rem}.library-status>.eyebrow{display:none}.library-catalog{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:860px){#account{grid-template-columns:170px minmax(0,1fr)}#account .side{position:sticky;height:calc(100vh - 80px);top:0;border-right:1px solid var(--line);border-bottom:0}#account .nav{flex-direction:column;overflow:visible}#account .nav-item{width:100%;white-space:normal;border:0}#account .nav-label,#account .nav-device-sub{display:block}#account .nav-sub{display:none}#account>.content{padding:22px 18px 70px}.library-catalog{grid-template-columns:180px minmax(0,1fr)}.library-channel{align-items:flex-start;flex-wrap:wrap}.library-channel-actions{margin-left:auto}.account-toolbar{padding:18px}.library-head{flex-wrap:wrap}}
@media(max-width:600px){#account{display:flex;flex-direction:column}.account-toolbar{padding:16px}.account-toolbar .brand{font-size:1.2rem}.account-toolbar-actions{gap:10px}.account-tools summary{font-size:.85rem;padding:8px}.account-tools-panel{top:44px}#account .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 14px}#account .side-foot{display:none}#account .nav{flex-direction:row;overflow-x:auto;gap:6px}#account .nav-item{width:auto;flex:none;white-space:nowrap;padding:10px;border:1px solid var(--line)}#account .nav-label,#account .nav-device-sub{display:none}#account>.content{padding:22px 15px 70px}.library-catalog{display:flex;flex-direction:column}.library-groups{width:100%;border-right:0;border-bottom:1px solid var(--line)}.library-group-list{display:flex;gap:6px;max-height:160px;overflow:auto;flex-wrap:wrap}.library-group{width:auto;max-width:100%;border:1px solid var(--line);padding:8px 12px}.library-group small{display:none}.library-channels{width:100%}.library-channel{align-items:center;flex-wrap:wrap}.library-channel-name{flex-basis:calc(100% - 56px)}.library-channel-actions{width:100%;justify-content:flex-end}.library-channel-actions button{min-height:44px;min-width:44px}.library-savebar{justify-content:space-between}.library-savebar>p{flex-basis:100%}.library-status{gap:8px 12px}.library-status>.fine:last-child{display:none}.tabs{gap:2px}.tab{padding:8px 10px;font-size:.88rem}.library-head select{width:100%}.library-head>.btn{font-size:.8rem}.content .card{padding:18px}.account-toolbar .language{font-size:.78rem}}

#account .page-head h2{font-size:1.75rem;line-height:1.2;letter-spacing:-.04em}#account .page-head .eyebrow{font-size:.68rem}

.device-meta summary{cursor:pointer;color:var(--muted)}.device-facts{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:10px}.device-meta{display:block}.device-meta[open]{padding-bottom:8px}@media(max-width:600px){.library-status h3{display:none}}

/* Account status remains clear of the account menu on every viewport. */
#live-status{top:auto;bottom:18px}.library-channel-actions button{min-height:44px;min-width:44px}
.library-savebar{position:sticky;bottom:0;z-index:8;background:var(--bg);box-shadow:0 -12px 18px var(--bg)}
@media(min-width:601px){.library-channel{padding:6px 12px}}

/* Vector favourites do not depend on font/emoji glyph support. */
.library-star{display:inline-flex;align-items:center;justify-content:center}.library-star svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}.library-star[aria-pressed=true] svg{fill:currentColor}

.account-tools summary{display:inline-flex;align-items:center;gap:6px}.account-gear{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}

.library-drag{flex:none;width:44px;height:44px;display:grid;place-items:center;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;color:var(--muted);border-radius:6px}.library-drag svg{width:24px;height:24px;fill:currentColor}.library-drag:hover,.library-drag:focus-visible{color:var(--accent);background:var(--surface-2)}.library-drag:disabled{cursor:default;opacity:.35}.library-channel{position:relative}.library-channel.is-reordering{opacity:.45}.library-channel.is-reordering .library-drag{cursor:grabbing}.library-channel.drop-before:before,.library-channel.drop-after:after{content:"";position:absolute;left:12px;right:12px;height:3px;background:var(--accent);border-radius:3px;pointer-events:none}.library-channel.drop-before:before{top:-2px}.library-channel.drop-after:after{bottom:-2px}

.library-drag:not(:disabled){touch-action:none}.library-channel-list:has(.is-reordering){-webkit-user-select:none;user-select:none}

.device-rename{margin:0 0 16px;color:var(--muted)}.device-rename summary{cursor:pointer;width:fit-content;color:var(--accent);padding:6px 0}.device-rename form{margin:12px 0;align-items:end}.device-rename .portal-field{flex:1;max-width:360px;min-width:0}.device-rename input{width:100%}.device-rename>.fine{margin-bottom:12px}

.nav-device-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#account .page-head h2,.device-card h3{overflow-wrap:anywhere}
.rooms-toolbar{align-items:flex-end;margin-bottom:16px}
.rooms-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.rooms-table{width:100%;border-collapse:collapse;font-size:.92rem}
.rooms-table th,.rooms-table td{padding:10px 12px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.rooms-table thead th{border-top:0;color:var(--faint);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.rooms-row{cursor:pointer}
.rooms-row:hover,.rooms-row:focus{background:var(--surface-2);outline:none}
.rooms-playlists{max-width:280px}
.room-target-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.room-target-checks{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:var(--surface)}
.room-target-row{display:flex;gap:8px;align-items:flex-start}
.bulk-server{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.bulk-server-row{display:flex;gap:8px;align-items:center}
.bulk-server-m3u{color:var(--faint)}
.places-summary{margin-top:8px}

.device-tile strong{overflow-wrap:anywhere}@media(max-width:600px){#account .nav-device{max-width:calc(100vw - 28px)}}

/* First visit: account creation, storage and trial terms before confirmation. */
.auth{width:min(960px,100%)}
.auth-welcome{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;padding:36px}
.auth-intro,.auth-form{display:flex;flex-direction:column;gap:18px;min-width:0}
.auth-intro h1{font-size:clamp(2rem,4vw,2.8rem);max-width:12ch}
.auth-intro>p{font-size:.95rem}
.auth-form{border-left:1px solid var(--line);padding-left:32px;justify-content:center}
.onboarding-steps{list-style:none;padding:0;margin:0;counter-reset:setup;display:grid;gap:16px}
.onboarding-steps li{counter-increment:setup;position:relative;padding-left:34px;font-size:.86rem;line-height:1.5}
.onboarding-steps li:before{content:counter(setup);position:absolute;left:0;top:1px;color:var(--accent);font-weight:700}
.onboarding-steps strong,.onboarding-steps span{display:block}
.onboarding-steps strong{font-size:.95rem;margin-bottom:3px}
#code-card{width:min(480px,100%);align-self:center}
.trial-notice{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;margin-bottom:22px}
.trial-notice>div{display:grid;gap:4px}.trial-notice>.btn{flex:none}
.onboarding-ready{margin-bottom:24px;display:grid;gap:12px}
@media(max-width:700px){.auth-welcome{grid-template-columns:minmax(0,1fr);padding:24px;gap:28px}.auth-intro h1{max-width:none}.auth-form{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}.trial-notice{align-items:flex-start;flex-direction:column;gap:12px}.center{padding:24px 16px}}

.auth:has(#code-card:not([hidden])){width:min(480px,100%)}
a.btn{text-decoration:none}

.licence-card .beta-policy{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700;color:var(--text);line-height:1.4}

/* Account-bound crypto purchase status. */
.payment-panel{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0;padding:20px;border:1px solid var(--line,#353535);border-radius:12px;min-width:0}
.payment-panel p,.payment-panel strong{flex-basis:100%;margin:0}
.payment-panel .payment-reference{font-size:12px;opacity:.65;overflow-wrap:anywhere}
.payment-success{color:#a8d6ac}

/* Shared FlowStream identity and a workspace that fits a phone. */
:root{--bg:#0c0907;--surface:#171210;--surface-2:#221a16;--surface-3:#2a201b;--line:#2e241f;--line-2:#5a4a40;--text:#f5efe9;--muted:#a08e82;--faint:#9c8b7f;--accent:#e8763c;--accent-ink:#0c0907;--focus:#e8763c}
.center{background:radial-gradient(ellipse at top right,#e8763c0c,transparent 55%),var(--bg)}
.licence-card{background:linear-gradient(145deg,#e8763c0b,var(--surface) 55%);border-color:var(--line)}
.account-toolbar{background:var(--bg);min-height:72px;padding:16px 24px}
#account .side{background:var(--bg)}
.nav-device[aria-current=true],.library-group[aria-current=true],.library-star[aria-pressed=true]{background:#e8763c17;color:var(--accent)}
.nav-item:focus-visible,.library-group:focus-visible{outline-offset:-3px}
.workspace-toggle{display:none}.library-group-select{display:none}
.library-channel-name{min-width:0}.library-channel-name .portal-rename summary{min-height:32px;display:list-item;padding:5px 0;cursor:pointer}
.library-channel-actions{flex:none}.library-channel-actions .btn{padding-inline:10px}
.library-head select{font-size:1rem}.library-groups>input,.library-channel-search{font-size:1rem}
.library-group-select{width:100%;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--text);font-size:1rem}
.library-savebar{bottom:0;padding:12px 0 max(12px,env(safe-area-inset-bottom));gap:10px}
.library-message{overflow-wrap:anywhere}
@media(max-width:860px){
 #account{display:flex;flex-direction:column}
 .account-toolbar{position:sticky;top:0;z-index:25;height:64px;min-height:64px;padding:12px 16px}
 .account-toolbar .brand{font-size:1.2rem;gap:8px}.account-toolbar-actions{gap:12px}.account-toolbar .language{font-size:.8rem}
 .account-tools-panel{max-height:calc(100dvh - 90px);overflow:auto}
 #account .side{position:sticky;top:64px;z-index:15;height:auto;border:0;border-bottom:1px solid var(--line);padding:8px 14px;gap:0}
 #account .side-foot{display:none}
 .workspace-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;min-height:48px;padding:4px 0}
 .workspace-toggle>span:first-child{display:grid;gap:4px;min-width:0}
 .workspace-toggle small{font-size:.63rem;letter-spacing:.13em;color:var(--muted)}
 .workspace-toggle strong{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .workspace-menu-label{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--accent);flex:none}
 .workspace-menu-label svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
 .workspace-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
 #account .side:not(.is-open) #account-nav{display:none}
 #account .side.is-open #account-nav{display:flex;flex-direction:column;overflow:auto;max-height:60dvh;padding:12px 0;gap:4px}
 #account #account-nav .nav-item{width:100%;min-height:46px;flex:none;white-space:normal;overflow-wrap:anywhere;border:0;padding:12px;text-align:left}
 #account #account-nav .nav-label{display:block;padding-top:12px}
 #account>.content{padding:22px 16px 40px;min-width:0}
 .editor input[type=text],.editor input[type=url],.editor input[type=password],.editor input[type=search],.editor select,.servers textarea{font-size:16px}
 .content .card{padding:18px}.device-actions .btn,.editor .btn{min-height:44px}
 #account .page-head h2{font-size:1.65rem}
 .library-status{padding:12px;gap:5px 12px}.library-status h3,.library-status>.eyebrow{display:none}
 .library-status .library-sync{font-weight:700}.library-status>.fine{font-size:.78rem}
 .library-status>.fine:last-child{display:none}
 .library-savebar{position:sticky;margin-inline:-16px;padding-inline:16px;border-top:1px solid var(--line);background:var(--bg)}
 .library-savebar>p{flex-basis:auto;font-size:.78rem}.library-savebar .btn{min-height:44px}
 .library-channel-actions{width:auto;margin-left:auto}.library-channel{padding:10px;align-items:center;flex-wrap:nowrap;gap:8px}
 .library-channel-name{flex:1;flex-basis:auto}.library-channel-name strong{font-size:.9rem}
 .library-channel-actions button{min-height:44px;min-width:44px}.library-channel-actions .btn{font-size:.8rem;padding:8px}
 .library-drag{width:36px;min-width:36px}.library-channel-name .portal-rename summary{font-size:.75rem}
 .tabs{gap:4px}.tab{padding:10px 12px;min-height:44px;font-size:.87rem}
 .auth-card{padding:24px}.center{padding:24px 16px}.auth-welcome{gap:24px}
}
@media(max-width:700px){
 .library-catalog{display:flex;flex-direction:column}.library-channels{width:100%}
 .library-groups{width:100%;border-right:0;border-bottom:1px solid var(--line);display:grid;gap:10px;padding:12px}
 .library-group-select{display:block}.library-group-list{display:none}
 .library-groups>input{font-size:16px;min-height:44px;margin:0}
 .library-head{flex-wrap:nowrap;gap:8px}.library-head select{width:auto;min-width:0;padding:10px}
 .library-head>.btn{font-size:.78rem;flex:none;padding-inline:10px}
 .library-savebar{flex-wrap:wrap}.library-savebar>p{flex-basis:100%}.library-savebar .primary{flex:1}
 .library-channel{flex-wrap:wrap}.library-channel-name{flex-basis:calc(100% - 48px)}
 .library-channel-actions{padding-left:44px;width:100%;justify-content:flex-start}
}
@media(max-width:360px){.account-toolbar{padding-inline:12px}.account-toolbar-actions{gap:8px}.account-toolbar .brand{font-size:1.05rem}.account-toolbar .brand-mark{width:24px;height:24px}.account-tools summary{padding:8px}.tabs .tab{font-size:.8rem;padding-inline:8px}}
.device-tools{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:start}.device-tools>.device-rename{margin:0}.device-tools>details[open]{flex-basis:100%}
.device-tools summary{min-height:44px;padding-block:12px;font-size:.85rem}
@media(max-width:860px){.trial-notice{flex-direction:row;align-items:center;gap:12px;padding:14px;margin-bottom:4px}.trial-notice>div{min-width:0}.trial-notice .fine:last-child{display:none}.trial-notice .fine{font-size:.74rem}.trial-notice strong{font-size:.9rem}.trial-notice>.btn{font-size:.76rem;padding-inline:10px}.device-tools{gap:4px 18px}}
/* Noninteractive notifications must never intercept channel-save controls. */
#live-status{pointer-events:none;bottom:96px;background:var(--surface);border-color:var(--line-2)}
.nav-item{text-decoration:none}
@media(max-width:860px){#live-status{bottom:calc(128px + env(safe-area-inset-bottom));left:16px;right:16px;top:auto;z-index:20}}

.page-head h2{overflow-wrap:anywhere}

@media(max-width:700px){.library-drag{width:44px;min-width:44px}.library-channel-name{flex-basis:calc(100% - 56px)}.library-channel-actions{padding-left:52px}.library-channel-name .portal-rename summary{min-height:44px}}

/* Global site navigation and the workspace share the viewport. */
.workspace-heading{color:var(--text);font-size:.95rem;font-weight:700}
#login.center,#account{min-height:calc(100dvh - var(--site-header-height,88px))}
#account{grid-template-rows:64px minmax(0,1fr)}
#account .account-toolbar{position:sticky;top:var(--site-header-height,88px);z-index:25;height:64px;min-height:64px;padding:10px 24px}
#account .side{top:calc(var(--site-header-height,88px) + 64px);height:calc(100dvh - var(--site-header-height,88px) - 64px)}
@media(max-width:860px){
 #account .account-toolbar{padding-inline:16px}
 #account .side{height:auto}
 #account .side.is-open #account-nav{max-height:calc(100dvh - var(--site-header-height,88px) - 136px)}
}

.vpn-card{max-width:58rem;display:grid;gap:1rem}.vpn-card label{display:grid;gap:.4rem}.vpn-card input[type=checkbox]{justify-self:start;width:1.4rem;height:1.4rem}.vpn-card input[type=file]{max-width:100%;min-width:0}.vpn-camera{width:100%;max-height:28rem;border-radius:12px}.vpn-camera[hidden]{display:none}.vpn-actions{flex-wrap:wrap}.vpn-message,.vpn-imported{overflow-wrap:anywhere}