/* ============================================================
   ADMIN · LANDING
   Split from css/app.css — screen-specific styles.
   ============================================================ */

body:not([data-screen="app"]) .app{display:none}
.screen{display:none;position:fixed;inset:0;z-index:200;overflow-y:auto;background:var(--bg)}
body[data-screen="landing"] #screen-landing{display:block}
body[data-screen="login"] #screen-login{display:block}
.screen-theme{position:fixed;top:18px;right:18px;z-index:210}

/* --- Landing --- */
.l-nav{
  display:flex;align-items:center;gap:26px;max-width:1140px;margin:0 auto;
  padding:20px 24px;
}
.l-nav .brand{padding:0;flex:none}
.l-links{display:flex;gap:24px;margin-left:18px}
.l-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;transition:.15s;cursor:pointer}
.l-links a:hover{color:var(--gold)}
.l-nav .btn.primary{margin-left:auto}
.l-hero{
  max-width:1140px;margin:0 auto;padding:70px 24px 80px;text-align:center;position:relative;overflow:hidden;
}
.l-hero::before{
  content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:760px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(240,180,41,.16),transparent 65%);
}
.l-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.6px;
  padding:7px 16px;border-radius:20px;background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.3);
  color:var(--gold);margin-bottom:26px;position:relative;
}
.l-h1{
  font-size:clamp(34px,5.4vw,58px);font-weight:800;letter-spacing:-2px;line-height:1.08;
  position:relative;margin-bottom:20px;
}
.l-h1 em{font-style:normal;background:linear-gradient(135deg,var(--gold),#ff9d3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.l-sub{font-size:17px;color:var(--muted);max-width:620px;margin:0 auto 34px;line-height:1.65;position:relative}
.l-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.l-cta .btn{padding:13px 28px;font-size:14.5px;border-radius:12px}
.l-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px;margin:60px auto 0;position:relative;
}
.l-stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px}
.l-stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-1px}
.l-stat span{font-size:12px;color:var(--muted);font-weight:600}
.l-band{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px 24px}
.l-band-in{max-width:1140px;margin:0 auto;display:flex;gap:36px;justify-content:center;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);font-weight:600}
.l-band-in i{font-style:normal;color:var(--green-2);font-weight:800}
.l-sec{max-width:1140px;margin:0 auto;padding:74px 24px}
.l-sec-head{text-align:center;margin-bottom:44px}
.l-sec-head h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-1.2px;margin-bottom:12px}
.l-sec-head p{color:var(--muted);font-size:15.5px;max-width:560px;margin:0 auto}
.l-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.l-feat .kpi{padding:24px}
.l-feat h3{font-size:15.5px;font-weight:700;margin:14px 0 8px}
.l-feat p{font-size:13.5px;color:var(--muted);line-height:1.6}
.l-price{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.l-card{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px 24px;position:relative;transition:.2s;
}
.l-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.l-card.hot{border-color:rgba(240,180,41,.5);background:linear-gradient(180deg,rgba(240,180,41,.06),var(--panel) 40%)}
.l-card .hot-tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),#de911d);
  color:#1a1200;font-size:11px;font-weight:800;padding:5px 14px;border-radius:20px;letter-spacing:.5px;
}
.l-card h3{font-size:16px;font-weight:700;margin-bottom:6px}
.l-price-val{font-size:36px;font-weight:800;letter-spacing:-1.5px;margin:14px 0 4px}
.l-price-val small{font-size:14px;color:var(--muted);font-weight:600}
.l-card ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:11px}
.l-card li{font-size:13.5px;color:var(--muted);display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.l-card li::before{content:'✓';color:var(--green-2);font-weight:800;flex:none}
.l-card .btn{width:100%;justify-content:center;padding:11px}
.l-foot{border-top:1px solid var(--border);padding:34px 24px;text-align:center;color:var(--dim);font-size:13px}
.l-foot b{color:var(--muted)}

/* --- Login --- */
.login-wrap{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.lx-h-live i{width:8px;height:8px;border-radius:50%;background:#e11d48;animation:pulse 1.3s infinite}
.lx-wrap{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 14px 44px rgba(0,0,0,.13)}
.lx-stage{border-radius:12px}
.lx-marquee{margin-top:10px;background:#05070b;border:1px solid var(--border);border-radius:9px;overflow:hidden;padding:7px 0}
.lx-marquee-in{display:flex;gap:34px;width:max-content;animation:lxmarquee 26s linear infinite;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#94a3b8;white-space:nowrap}
.lx-marquee-in span b{color:#e2e8f0;font-weight:700}
.lx-marquee-in i{font-style:normal;font-weight:700}
.lx-marquee-in i.up{color:#34d399}
.lx-marquee-in i.dn{color:#f87171}
.lx-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:13px 4px 3px}
.lx-meta b{display:block;font-size:14.5px}
.lx-meta span{font-size:12px;color:var(--muted)}
.lx-meta-acts{margin-left:auto;display:flex;gap:9px;align-items:center}
.lx-sched{display:flex;flex-direction:column;gap:11px}
.lx-sched-row{display:flex;gap:14px;align-items:center;padding:13px 15px;border-radius:14px;background:var(--panel);border:1px solid var(--border);transition:.16s}
.lx-sched-row:hover{border-color:rgba(240,180,41,.55);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.13)}
.lx-sched-row.is-live{border-color:rgba(225,29,72,.5);background:linear-gradient(90deg,rgba(225,29,72,.06),transparent 55%)}
.lx-sched-txt{min-width:0;flex:1}
.lx-sched-txt b{display:block;font-size:14px}
.lx-sched-txt span{font-size:11.5px;color:var(--muted)}
.lx-sched-empty{padding:34px 16px;text-align:center;color:var(--dim);font-size:13px;background:var(--panel);border:1px dashed var(--border);border-radius:14px}
.sched-when{flex:none;min-width:76px;text-align:center;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:7px 9px}
.sched-when b{display:block;font-size:15.5px;letter-spacing:.5px}
.sched-when span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.sched-when.live{border-color:rgba(225,29,72,.5);background:rgba(225,29,72,.08)}
.sched-when.live b{color:#e11d48}
.sched-pill{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:5px 11px;border-radius:20px;border:1px solid var(--border);background:var(--bg-2);color:var(--muted);white-space:nowrap}
.sched-pill.up{color:var(--gold,#d9a520);border-color:rgba(240,180,41,.4);background:rgba(240,180,41,.09)}
.sched-pill.live{color:#e11d48;border-color:rgba(225,29,72,.45);background:rgba(225,29,72,.1);animation:lxblink 1.6s ease-in-out infinite}
.sched-pill.past{opacity:.6}
.sched-pill.bad{color:#f87171}
.sched-form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:9px}
.sched-form-row label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.sched-form-row .input{padding:7px 10px}
@media(max-width:640px){
  .lx-sched-row{flex-wrap:wrap;gap:10px}
  .lx-sched-txt{flex:1 1 140px}
  .lx-meta-acts{margin-left:0;width:100%}
  .lx-wrap{padding:10px}
}

/* ---- radio: listening platforms (admin manages · customer shows) ---- */
.rp-add{display:grid;grid-template-columns:1.05fr .95fr 1.25fr 1.5fr auto;gap:11px;align-items:end;margin-bottom:14px}