*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg: #07080b;
  --panel: rgba(16, 18, 24, .72);
  --line: rgba(255,255,255,.08);
  --text: #eaeaea;
  --muted: #9aa0aa;
  --accent: #9b6cff;     
  --accent2: #2ee7ff;    
  --danger: #ff5d6c;
  --orb-opacity: .18;
  --orb-blur: 22px;

  --panel-strong: rgba(12, 14, 18, .92); 
  --panel-soft: var(--panel);

  --ui-transition: 260ms ease; 
}

body{
  margin:0;
  min-height:100vh;
  background: radial-gradient(1200px 900px at 70% 10%, rgba(155,108,255,.12), transparent 55%),
              radial-gradient(900px 700px at 20% 80%, rgba(46,231,255,.10), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
}

.screen{
  width:min(760px, 92vw);
  padding:22px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bg-orb{
  position:absolute;
  width:280px; height:280px;
  border-radius:999px;
  filter: blur(var(--orb-blur));
  opacity: var(--orb-opacity);

  pointer-events:none;
}

.orb1{ top:-60px; right:-40px; background: radial-gradient(circle at 30% 30%, var(--accent2), transparent 60%); }
.orb2{ bottom:-70px; left:-30px; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); }

.hero{
  padding:18px 18px 10px;
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
}

.title{
  margin:12px 0 6px;
  font-size:38px;
  line-height:1.05;
}

.subtitle{
  margin:0;
  color:var(--muted);
}

.brand-24 {
  background: linear-gradient(
    135deg,
    #ffd54f 0%,
    #ffb300 40%,
    #ff8f00 70%,
    #ff6f00 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  font-weight: 900;
  letter-spacing: .3px;

  text-shadow:
    0 0 0 rgba(255, 193, 7, .0),
    0 6px 18px rgba(255, 193, 7, .25);

  margin-left:2px;
}

.panel{
  margin-top:14px;
  border:1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px);
  border-radius:18px;
  padding:16px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

.btn:hover{ border-color: rgba(255,255,255,.22); }
.btn:active{ transform: translateY(1px); }

.primary{
  border-color: rgba(46,231,255,.28);
  background: linear-gradient(180deg, rgba(46,231,255,.14), rgba(155,108,255,.10));
}

.ghost{
  background: rgba(0,0,0,.18);
}

.meter{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
}

.meter-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.meter-label{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.35em;
}

.meter-val{
  font-size:12px;
  color:var(--muted);
}

.meter-bar{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow:hidden;
}

.meter-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  box-shadow: 0 0 18px rgba(46,231,255,.25);
  transition: width .35s ease;
}

.meter-hint{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

.scene{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
}

.scene h2{ margin:0 0 6px; font-size:20px; }
.scene p{ margin:0; color:var(--muted); line-height:1.45; }

.hidden { display: none !important; }

.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px;
}

.overlay-card{
  width:min(860px, 96vw);
  max-height:min(80vh, 720px);
  overflow:auto;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(12, 14, 18, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.6);
  padding:14px;
}

.overlay-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.overlay-title{
  font-weight:700;
}

.xbtn{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color:var(--text);
  cursor:pointer;
}

.xbtn:hover{ border-color: rgba(255,255,255,.22); }

.scenes{
  padding:12px 6px 6px;
  display:grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap:10px;
}

@media (max-width: 620px){
  .scenes{ grid-template-columns: 1fr; }
  .title{ font-size:32px; }
}

.scene-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
  cursor:pointer;
}

.scene-card:hover{ border-color: rgba(46,231,255,.25); }
.scene-card .name{ font-weight:700; margin-bottom:6px; }
.scene-card .meta{ color:var(--muted); font-size:12px; }
.scene-card .hint{ color:var(--muted); margin-top:8px; font-size:13px; line-height:1.4; }

.overlay { z-index: 9999; }
.overlay-card { position: relative; z-index: 10000; }

.xbtn {
  position: relative;
  z-index: 10001;
  pointer-events: auto;
}

.welcome-card {
  max-width: 560px;
}

.welcome-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.marker {
  margin: 14px 0 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.7;
  color: #9fb0c8;

  transition: opacity .4s ease, color .4s ease;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  text-transform: uppercase;
}

.pulse {
  width: 100%;
  max-width: 100%;
  height: 140px;          
  display: block;         
  border-radius: 16px;
  overflow: hidden;       
  background: rgba(0,0,0,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 10px 30px rgba(0,0,0,0.45);
}

.marker.noise-filtered { opacity: .35; }
.marker.rhythm-locked { color: var(--danger); opacity: .9; }
.marker.system-listening { opacity: .7; animation: marker-breathe 4.5s ease-in-out infinite; }
.marker.signal-accepted { color: var(--accent2); opacity: .9; }

body[data-scene="night-drive"] .panel { box-shadow: 0 22px 70px rgba(155,108,255,.22); }
body[data-scene="deep-focus"] .panel  { box-shadow: 0 22px 70px rgba(46,231,255,.16); }
body[data-scene="overclock"] .panel   { box-shadow: 0 22px 70px rgba(255,93,108,.18); }

@keyframes marker-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: .85; }
}

.marker.system-listening {
  animation: marker-breathe 4.5s ease-in-out infinite;
}

body[data-scene="night-drive"] {
  --pulse-color: rgba(155,108,255,.65);
}

body[data-scene="deep-focus"] {
  --pulse-color: rgba(46,231,255,.45);
}

body[data-scene="overclock"] {
  --pulse-color: rgba(255,93,108,.55);
}

.sc-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  width:100%;
}

.input{
  flex:1;
  min-width:0;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.35);
  color:rgba(255,255,255,0.92);
  outline:none;
}

.input::placeholder{
  color:rgba(255,255,255,0.42);
}

.player-card{ max-width: 980px; }

.player-host{
  width:100%;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.35);
}

.player-host iframe{
  display:block;
  width:100%;
  height: 220px;
  border:0;
}

.player-hint{
  margin-top:10px;
  color: rgba(255,255,255,0.55);
  font-size: 12.5px;
}

.shelf { margin-top: 16px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shelf-title { font-weight: 700; letter-spacing: .2px; opacity: .95; }

.shelf-tabs { display: flex; gap: 8px; align-items: center; }
.shelf-tab, .shelf-clear {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}

.shelf-tab.active { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.shelf-clear { opacity: .85; }

.shelf-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.shelf-empty { margin-top: 10px; opacity: .7; }
.hidden { display: none !important; }

.card {
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}

.card-thumb { height: 110px; background-size: cover; background-position: center; background-color: rgba(255,255,255,.06); }
.card-body { padding: 10px; display: grid; gap: 6px; }
.card-title { font-weight: 700; font-size: 13px; line-height: 1.25; opacity: .95; }
.card-meta { font-size: 12px; opacity: .7; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-actions { display: flex; gap: 8px; }
.card-btn {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
}

.card-thumb { position: relative; }
.thumb-tag{
  position:absolute; left:10px; bottom:10px;
  padding:4px 8px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.card-thumb { position: relative; overflow: hidden; }

.card-thumb.is-spotify::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(220px 160px at 40% 20%, rgba(29,185,84,.18), transparent 60%),
              radial-gradient(260px 200px at 80% 70%, rgba(255,255,255,.06), transparent 62%);
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events:none;
}

.sp-badge{
  position:absolute; left:10px; bottom:10px;
  padding:4px 9px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  pointer-events:none;
}

.sp-ring{
  position:absolute; right:-18px; top:-18px;
  width:84px; height:84px;
  border-radius:50%;
  border:1px solid rgba(29,185,84,.28);
  box-shadow: 0 0 22px rgba(29,185,84,.22);
  pointer-events:none;
}

.sp-pulse{
  position:absolute; left:14px; top:14px;
  width:34px; height:34px;
  border-radius:50%;
  background: rgba(29,185,84,.22);
  box-shadow: 0 0 26px rgba(29,185,84,.25);
  animation: spPulse 2.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes spPulse{
  0%,100% { transform: scale(1); opacity: .75; }
  50%     { transform: scale(1.22); opacity: 1; }
}

.shelf-sections{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.shelf-section{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 10px;
}

.shelf-sec-title{
  font-size: 11px;
  letter-spacing: .22em;
  opacity: .75;
  margin: 2px 2px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.brand-footer{
  margin-top:auto;
  text-align:center;
  opacity:.85;
  padding: 10px 0 0;
  vertical-align: middle;
}

.brand-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;                 
  padding:10px 16px;
  border-radius:999px;

  background: rgba(10, 11, 14, .62);
  border: 1px solid rgba(255,255,255,.06);

  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter: blur(14px);
}

.brand-mark{
  font-size:12px;
  color: rgba(255,255,255,.45);
  font-weight:600;
}

.brand-name{
  font-size:15px;  
  font-weight:600;
  color: rgba(255,255,255,.85);
  letter-spacing:.2px;
}

.brand-name .brand-24{
  font-weight:800;
}

.brand-year{
  font-size:12px;
  color: rgba(255,255,255,.35);
  letter-spacing:.12em;
}

.visits-stats{
  margin-bottom:10px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  font-size:13px;
  letter-spacing:.3px;
  opacity:.95;
}

.welcome-card{
  max-width: 560px;
  padding: 16px 16px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,14,18,.94), rgba(12,14,18,.88));
  box-shadow:
    0 26px 90px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.welcome-title{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  margin: 10px 2px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  opacity: .95;
}

.welcome-text{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);

  max-width: 48ch;
  margin: 0 2px;

  letter-spacing: .1px;
}

.welcome-text br{
  content: "";
}
.welcome-text br + br{
  display: block;
  margin-top: 10px;
  content: "";
}

.welcome-text b{
  font-weight: 700;
  color: rgba(255,255,255,.92);
}

.welcome-text b .brand-24{
  filter: drop-shadow(0 10px 18px rgba(255,193,7,.18));
}

.welcome-row{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.welcome-row .pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
}

.welcome-row .pill:nth-child(1){
  border-color: rgba(46,231,255,.22);
  color: rgba(46,231,255,.92);
  background: rgba(46,231,255,.06);
}

.welcome-row .pill:nth-child(2){
  border-color: rgba(155,108,255,.22);
  color: rgba(155,108,255,.96);
  background: rgba(155,108,255,.06);
}

.welcome{
  padding: 2px 2px 0;
}

@media (max-width: 520px){
  .welcome-card{ max-width: 94vw; }
  .welcome-text{ max-width: 42ch; font-size: 13.5px; }
}

.hero-top{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  justify-content:flex-start; 
}

.sys-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  margin-left: 2px;
}

.sys-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform var(--ui-transition), border-color var(--ui-transition);
}

.sys-icon:hover{ border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.sys-icon:active{ transform: translateY(0px); }

.sys-icon-emoji{
  font-size:18px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.eco-card{ max-width: 920px; }

.eco-title{
  margin: 14px 6px 4px;
  font-size: 20px;
  font-weight: 800;
}

.eco-sub{
  margin: 0 6px 14px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}

.eco-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:12px;
  padding: 6px;
}

@media (max-width: 720px){
  .eco-grid{ grid-template-columns: 1fr; }
}

.eco-item{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.eco-name{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}

.eco-desc{
  color: rgba(255,255,255,.66);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.eco-go{
  width:100%;
  justify-content:center;
}

.eco-note{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.42);
  text-align:center;
}

.stats-card{ max-width: 920px; }

.stats-row{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.stat-pill{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: 13px;
  color: rgba(255,255,255,.82);
}

.stat-pill b{
  color: rgba(255,255,255,.95);
  font-weight: 800;
}

.stats-hint{
  margin-top: 12px;
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
}

.hero-top{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  flex-wrap:nowrap;
}

.badge{
  display:inline-flex;
  white-space:nowrap;
  margin:0;
}

.actions-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.actions-left,
.actions-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.source-btn{
  font-size:13px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  opacity:.9;
}

.source-btn:hover{ opacity:1; transform: translateY(-1px); }

.source-btn.sc{
  border-color: rgba(255,85,0,.35);
  background: linear-gradient(180deg, rgba(255,85,0,.18), rgba(255,85,0,.06));
}

.source-btn.sp{
  border-color: rgba(29,185,84,.35);
  background: linear-gradient(180deg, rgba(29,185,84,.18), rgba(29,185,84,.06));
}