:root{
    --col-left:320px;
    --col-right:240px;
    --col-gap:24px;
    --ink:#0c1016;
    --panel:#141a23;
    --panel-2:#1b2330;
    --line: #2a3341;
    --text: #e9edf3;
    --text-dim: #8b95a5;
    --amber: #ffb238;
    --amber-dim: #7a5a20;
    --amber-hover: #ffc45c;
    --accent-2: #ffb238;
    --on-accent: #1a1200;
    --placeholder: #4d5768;
    --amber-rgb: 255,178,56;
    --live-rgb: 255,90,78;
    --ink-rgb: 12,16,22;
    --panel-rgb: 20,26,35;
    --shade-rgb: 5,8,12;
    --live: #ff5a4e;
    --font-display: 'Roboto', Arial, sans-serif;
    --font-body: 'Roboto', Arial, sans-serif;
    --font-mono: 'Roboto', Arial, sans-serif;
  }
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    min-height:100vh;
  }
  .scanline{
    position:fixed; inset:0; pointer-events:none; z-index:50;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: overlay;
  }
  header{
    padding: 16px clamp(16px,4vw,48px);
    border-bottom: 1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    position: sticky; top:0; background: rgba(var(--ink-rgb),0.92); backdrop-filter: blur(8px); z-index:10;
  }
  .brand-block{ display:flex; flex-direction:column; gap:3px; }
  .brand{ display:flex; align-items:center; gap:8px; }
  .brand .dot{
    width:8px; height:8px; border-radius:50%; background: var(--live);
    box-shadow: 0 0 8px 2px rgba(var(--live-rgb),0.6);
    animation: pulse 1.8s ease-in-out infinite;
    display:inline-block;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
  h1{
    font-family: var(--font-display);
    font-weight:700;
    font-size: clamp(18px,2.4vw,22px);
    letter-spacing: 1px;
    line-height:1;
  }
  .tagline{ font-family: var(--font-mono); font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
  .actions{ display:flex; gap:8px; align-items:center; }
  button, .btn{
    font-family: var(--font-mono); font-size:12px; letter-spacing:0.5px; text-transform:uppercase;
    background: var(--panel-2); color: var(--text); border:1px solid var(--line);
    padding:9px 14px; border-radius:3px; cursor:pointer; transition: all .15s ease;
  }
  button:hover{ border-color: var(--amber); color: var(--amber); }
  button:disabled{ opacity:.4; cursor:default; }
  button:focus-visible, input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
  .btn-primary{ background: var(--amber); color: var(--on-accent); border-color:var(--amber); font-weight:600; }
  .btn-primary:hover{ background: var(--amber-hover); color: var(--on-accent); }

  .apikey-footer{
    padding: 0 clamp(16px,3vw,40px) 28px;
  }
  .apikey-bar{
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    background: var(--panel); border:1px solid var(--line); border-radius:8px;
    padding:10px 12px; max-width:720px;
  }
  .apikey-bar input{
    flex:1; min-width:160px; background: var(--ink); border:1px solid var(--line); color:var(--text);
    padding:8px 12px; border-radius:3px; font-family: var(--font-mono); font-size:12.5px;
  }
  .apikey-bar input::placeholder{ color: var(--placeholder); }
  .apikey-link{ color:var(--amber); font-size:12.5px; text-decoration:none; white-space:nowrap; }
  .apikey-link:hover{ text-decoration:underline; }
  #apiKeyToggleBtn{ padding:8px 11px; }
  .data-bar-label{ font-size:12.5px; color:var(--text-dim); margin-right:2px; white-space:nowrap; flex:0 0 auto; }
  .apikey-bar-label{ font-size:12.5px; color:var(--text-dim); font-weight:600; white-space:nowrap; }

  #infoBtn{ font-size:12px; }

  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:300;
    align-items:center; justify-content:center; padding:20px;
  }
  .modal-overlay.open{ display:flex; }
  .modal-box{
    background: var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:24px; max-width:440px; width:100%;
    max-height:calc(100vh - 40px); overflow-y:auto;   /* long dialogs scroll instead of running off-screen */
  }
  .modal-title{ font-size:18px; font-weight:700; margin-bottom:14px; color:var(--text); }
  .modal-steps{ padding-left:20px; display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
  .modal-steps li{ font-size:13.5px; line-height:1.5; color:var(--text-dim); }
  .modal-steps strong{ color:var(--text); }
  .modal-box button{ margin-top:4px; }
  #infoCloseBtn{ margin-left:8px; }

  /* Darker backdrop just for the video pop-out (Info/Help windows keep the lighter one) */
  #videoModalOverlay{ background:rgba(0,0,0,0.9); }
  /* Landscape: up to 90% of the screen width, leaving room above/below for the close button and fallback link */
  .video-modal-box{
    position:relative; width:min(90vw, calc(80vh * 16 / 9));
  }
  /* Shorts: up to 80% of the screen height, kept in a 9:16 frame */
  .video-modal-box.vertical{ width:min(90vw, calc(80vh * 9 / 16)); }
  .video-modal-frame{
    position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden;
  }
  .video-modal-box.vertical .video-modal-frame{ aspect-ratio:9/16; }
  .video-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }
  .video-modal-fallback{
    display:block; text-align:center; margin-top:12px; color:var(--text-dim);
    font-size:12.5px; text-decoration:none;
  }
  .video-modal-fallback:hover{ color: var(--amber); text-decoration:underline; }
  .video-modal-close{
    position:absolute; top:-40px; right:0; background:transparent; border:none; color:var(--text);
    font-size:20px; padding:6px 10px; cursor:pointer;
  }
  .video-modal-close:hover{ color: var(--amber); border-color:transparent; }

  .add-bar{ display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap; }
  .add-bar input{
    flex:1; min-width:220px; background: var(--panel); border:1px solid var(--line); color:var(--text);
    padding:11px 14px; border-radius:3px; font-family: var(--font-mono); font-size:13px;
  }
  .add-bar input::placeholder{ color: var(--placeholder); }
  .add-bar #genreInput{ flex:0 1 300px; min-width:200px; }
  .add-bar #channelInput{ min-width:180px; }
  .add-bar button{ flex:0 0 auto; }

  main{ padding: 24px clamp(16px,3vw,40px) 64px; max-width:1600px; margin:0 auto; }

  .layout{
    display:grid;
    grid-template-columns: var(--col-left) minmax(0,1fr) var(--col-right);
    gap:var(--col-gap);
    align-items:start;
  }

  .panel-title{
    font-family: var(--font-body); font-size:16px; font-weight:700;
    color: var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px;
    position: relative; min-height:48px; padding-bottom:12px; border-bottom:1px solid var(--line); /* same height for all three headings so the text lines up */
  }
  .panel-title .count{
    background: var(--panel-2); color:var(--text-dim); border-radius:10px; padding:1px 8px; font-size:12px; font-weight:500;
  }

  .filter-btn{
    margin-left:auto; font-size:11.5px; font-weight:500; padding:5px 10px;
    background: var(--panel-2); border:1px solid var(--line); color:var(--text-dim); border-radius:14px;
  }
  .solo-badge{
    margin-left:8px; font-size:12px; font-weight:500; color:var(--amber);
    background: rgba(var(--amber-rgb),0.1); border:1px solid var(--amber-dim);
    padding:3px 6px 3px 10px; border-radius:14px; display:inline-flex; align-items:center; gap:6px;
  }
  .solo-badge button{
    padding:1px 6px; font-size:12px; border-radius:50%; border:none; background:transparent; color:var(--amber);
  }
  .solo-badge button:hover{ background: rgba(var(--amber-rgb),0.2); border-color:transparent; }
  .filter-btn:hover{ color:var(--text); border-color:var(--line); }
  .filter-btn.active{ color: var(--amber); border-color: var(--amber-dim); }
  .filter-dropdown{
    display:none; position:absolute; top:100%; right:0; margin-top:6px; z-index:30;
    background: var(--panel); border:1px solid var(--line); border-radius:8px;
    padding:10px; min-width:200px; max-height:280px; overflow-y:auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  }
  .filter-dropdown.open{ display:block; }
  .filter-dropdown-actions{ display:flex; gap:10px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
  .filter-dropdown-actions button{
    background:transparent; border:none; padding:0; font-size:11.5px; color:var(--amber); border-radius:0;
  }
  .filter-dropdown-actions button:hover{ text-decoration:underline; color:var(--amber); border-color:transparent; }
  .filter-option{
    display:flex; align-items:center; gap:8px; padding:6px 4px; font-size:13px; font-weight:400;
    color: var(--text); cursor:pointer; border-radius:5px;
  }
  .filter-option:hover{ background: var(--panel-2); }
  .filter-option input{ accent-color: var(--amber); cursor:pointer; }

  /* --- Shorts rail --- */
  .shorts-rail{
    position: sticky; top:85px;
    height: calc(100vh - 115px);
    display:flex; flex-direction:column;
    min-height:0;
  }
  .shorts-scroll{
    flex:1; min-height:0;
    overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding-right:6px; padding-bottom:8px;
  }
  .short-card{
    flex:0 0 auto;
    display:block; background: transparent; border-radius:12px;
    overflow:hidden; text-decoration:none; color:inherit;
  }
  .short-thumb{ position:relative; width:100%; aspect-ratio:9/16; background:#000; border-radius:12px; overflow:hidden; }
  .short-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .2s ease; }
  .short-card:hover .short-thumb img{ transform: scale(1.06); }
  .short-thumb.watched img{ filter: brightness(0.35); }
  .short-badge{
    position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.7); color:#fff;
    font-family: var(--font-body); font-size:11px; font-weight:500;
    padding:2px 8px; border-radius:4px;
  }
  .short-info{ padding:8px 2px 0; }
  .short-title{ font-size:13px; line-height:1.35; font-weight:500; color:var(--text); margin-bottom:3px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .short-chan{ font-size:12px; color:var(--text-dim); }

  /* --- Creators panel --- */
  .creators-panel{
    position: sticky; top:85px;
    height: calc(100vh - 115px);
    display:flex; flex-direction:column;
    min-height:0;
  }

  .chip-list{
    flex:1; min-height:0; overflow-y:auto;
    display:flex; flex-direction:column; gap:4px; padding-right:6px; padding-bottom:8px;
  }
  .genre-group{ margin-bottom:6px; }
  .genre-header{
    width:100%; display:flex; align-items:center; gap:2px;
    border:1px solid transparent; border-radius:6px; background:transparent;
  }
  .genre-header:hover{ background: var(--panel-2); }
  .genre-header.selected{ background: rgba(var(--amber-rgb),0.1); border-color: var(--amber-dim); }
  .genre-header button{
    background:transparent; border:none; color: var(--accent-2); cursor:pointer; border-radius:6px;
    font-family: var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  }
  .genre-header button:hover{ background:transparent; border-color:transparent; color: var(--accent-2); }
  .genre-arrow-btn{ flex:0 0 auto; padding:8px 6px 8px 6px; font-size:11px; }
  .genre-arrow-btn:hover{ background: rgba(var(--amber-rgb),0.15) !important; }
  .genre-label-btn{
    flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:8px 6px 8px 2px; text-align:left;
  }
  .genre-name{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .genre-header .count{ background: var(--panel-2); color:var(--text-dim); border-radius:10px; padding:1px 7px; font-size:10.5px; }
  .genre-items{ display:flex; flex-direction:column; gap:2px; padding-left:18px; }

  .chan-chip{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background: transparent; border-radius:8px; border:1px solid transparent;
    padding:8px 8px 8px 4px; font-size:14px; color:var(--text-dim);
  }
  .chan-chip:hover{ background: var(--panel-2); }
  .chan-chip strong{
    color:var(--text); font-weight:500; font-size:14px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; cursor:pointer; flex:1; min-width:0;
  }
  .chan-chip strong:hover{ color: var(--amber); }
  .chan-chip.solo-active{ background: rgba(var(--amber-rgb),0.1); border-color: var(--amber-dim); }
  .chan-chip.solo-active strong{ color: var(--amber); }
  .chan-chip button{
    flex:0 0 auto; padding:2px 7px; font-size:13px; border-radius:50%; border:none; background:transparent; color:var(--text-dim);
  }
  .chan-chip button:hover{ color: #fff; border-color:transparent; background:rgba(255,255,255,0.12); }
  .chan-chip-edit{ background: var(--panel-2); gap:6px; flex-wrap:wrap; }
  .chan-chip-edit strong{ flex:0 0 auto; max-width:35%; }
  .chan-chip-edit input{
    flex:1; min-width:0; background: var(--panel); border:1px solid var(--line); color:var(--text);
    padding:5px 8px; border-radius:4px; font-family: var(--font-mono); font-size:12px;
  }
  .chan-chip-edit select{
    flex:1; min-width:0; background: var(--panel); border:1px solid var(--line); color:var(--text);
    padding:5px 8px; border-radius:4px; font-family: var(--font-body); font-size:12px;
  }
  .panel-empty{ font-size:13px; color:var(--text-dim); padding:4px; }

  /* --- Feed --- */
  .feed-col{
    min-width:0;
    position: sticky; top:85px;
    height: calc(100vh - 115px);
    display:flex; flex-direction:column;
    min-height:0;
  }
  .status-line{ font-family: var(--font-body); font-size:13px; color: var(--text-dim); min-height:18px; margin-bottom:18px; }
  .status-line.error{ color: #ff6b6b; }

  .feed-scroll{ flex:1; min-height:0; overflow-y:auto; padding-right:6px; padding-bottom:8px; }

  .grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:24px 16px;
  }
  .card{
    background: transparent; border:none; border-radius:0; overflow:visible;
    display:flex; flex-direction:column; transition: opacity .15s ease;
  }
  .card:hover{ opacity:0.92; }
  .thumb-wrap{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius:12px; }
  .thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
  .thumb-wrap.watched img{ filter: brightness(0.35); }
  .watched-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,0.25);
    color:#fff; font-family: var(--font-body); font-weight:600; font-size:13px;
    letter-spacing:0.5px; text-transform:uppercase; pointer-events:none;
  }
  .card-body{ padding:10px 0 0; display:flex; flex-direction:column; gap:6px; flex:1; }
  .card-title{ font-size:14px; font-weight:500; line-height:1.4; color:var(--text); }
  .card-title a{ color:inherit; text-decoration:none; }
  .card-title a:hover{ color: var(--text); }
  .card-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
  .chan-name{ font-size:13px; color: var(--text-dim); font-weight:400; }
  .timestamp{ font-family: var(--font-body); font-size:13px; color:var(--text-dim); }

  .empty{
    text-align:center; padding: 80px 20px; color: var(--text-dim);
  }
  .empty .big{ font-family: var(--font-display); font-weight:700; font-size:22px; color: var(--text); margin-bottom:8px;}

  .skeleton{ background: transparent; border:none; border-radius:0; overflow:hidden;}
  .skeleton .thumb-wrap{ background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 37%, var(--panel) 63%); background-size:400% 100%; animation: shimmer 1.4s infinite; border-radius:12px; }
  @keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

  ::-webkit-scrollbar{ height:8px; width:8px; }
  ::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }

  @media (max-width: 980px){
    .layout{ grid-template-columns: 1fr; }
    .shorts-rail, .creators-panel, .feed-col{ position:static; max-height:none; height:auto; }
    .shorts-scroll{ flex-direction:row; overflow-x:auto; overflow-y:visible; padding-bottom:8px; }
    .short-card{ flex:0 0 130px; }
    .feed-col{ order:-1; }
  }

/* ---------- Shared multi-page additions (nav, content pages, forms) ---------- */

.content-page{
  max-width:760px; margin:0 auto; padding: 40px clamp(16px,4vw,40px) 80px;
}
.content-page h2{
  font-family: var(--font-display); font-weight:700; font-size:26px; color:var(--text);
  margin: 40px 0 14px;
}
.content-page h2:first-child{ margin-top:0; }
.content-page p{
  font-size:14.5px; line-height:1.7; color:var(--text-dim); margin-bottom:12px;
}
.content-page a{ color: var(--amber); text-decoration:none; }
.content-page a:hover{ text-decoration:underline; }
.page-intro{
  font-size:15px; line-height:1.7; color:var(--text); margin-bottom:32px;
  padding-bottom:24px; border-bottom:1px solid var(--line);
}

.faq-item{
  background: var(--panel); border:1px solid var(--line); border-radius:8px;
  margin-bottom:12px; overflow:hidden;
}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:transparent; border:none; color:var(--text); font-family: var(--font-body);
  font-size:14.5px; font-weight:600; text-align:left; padding:16px 18px; cursor:pointer; border-radius:0;
}
.faq-question:hover{ background: var(--panel-2); border-color:transparent; }
.faq-question .faq-arrow{ color:var(--amber); font-size:12px; flex:0 0 auto; transition: transform .15s ease; }
.faq-answer{
  display:none; padding: 14px 18px 16px; font-size:14px; line-height:1.7; color:var(--text-dim);
}
.faq-answer p{ margin:0; }
.faq-answer p + p{ margin-top:10px; }
.faq-answer a{ color:var(--amber); }
.faq-item.open .faq-answer{ display:block; }
.faq-item.open .faq-arrow{ transform: rotate(90deg); }

.feedback-form{
  background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px;
  display:flex; flex-direction:column; gap:16px; margin-top:8px;
}
.feedback-form label{
  font-family: var(--font-body); font-size:13px; font-weight:600; color:var(--text);
  display:flex; flex-direction:column; gap:6px;
}
.feedback-form input, .feedback-form select, .feedback-form textarea{
  background: var(--ink); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:5px; font-family: var(--font-body); font-size:13.5px;
  font-weight:400; resize:vertical;
}
.feedback-form input::placeholder, .feedback-form textarea::placeholder{ color: var(--placeholder); }
.feedback-form .req{ color:var(--amber); margin-left:1px; }
.feedback-form small{ font-weight:400; color:var(--text-dim); font-size:12px; }
.feedback-note{
  background: rgba(var(--amber-rgb),0.08); border:1px solid var(--amber-dim); border-radius:8px;
  padding:14px 16px; font-size:13px; line-height:1.6; color:var(--text-dim); margin-bottom:24px;
}
.feedback-note strong{ color: var(--amber); }
.feedback-success{
  display:none; background: rgba(46,160,67,0.1); border:1px solid #2ea043; border-radius:8px;
  padding:16px 18px; color:#7ee08a; font-size:14px; margin-top:16px;
}
.feedback-success.show{ display:block; }

/* Brand title doubles as a link back to the home page */
a.brand{ text-decoration:none; color:inherit; cursor:pointer; }
a.brand:hover h1{ color: var(--amber); }


/* ---------- Welcome panel (first-time / empty state) ---------- */
.welcome-panel{
  grid-column:1/-1; max-width:640px; margin:32px auto; text-align:center;
  padding:36px 28px; background: var(--panel); border:1px solid var(--line); border-radius:12px;
}
.welcome-kicker{
  font-family: var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--accent-2); margin-bottom:10px;
}
.welcome-panel h2{ font-family: var(--font-display); font-weight:700; font-size:28px; color:var(--text); margin-bottom:14px; }
.welcome-panel p{ font-size:14.5px; line-height:1.7; color:var(--text-dim); margin-bottom:12px; }
.welcome-points{
  list-style:none; display:flex; flex-direction:column; gap:8px; text-align:left;
  margin:18px auto 26px; max-width:470px;
}
.welcome-points li{ font-size:13.5px; line-height:1.55; color:var(--text-dim); padding-left:22px; position:relative; }
.welcome-points li::before{ content:"●"; color:var(--amber); font-size:8px; position:absolute; left:6px; top:5px; }
.welcome-panel .btn-primary{ padding:12px 26px; font-size:13px; }
.welcome-hint{ font-size:12px; color:var(--text-dim); margin-top:12px; }

/* ---------- Guided tour (spotlight + speech bubble) ---------- */
#tourBlocker{ display:none; position:fixed; inset:0; z-index:200; }
#tourBlocker.active{ display:block; }
#tourSpot{
  display:none; position:fixed; z-index:201; border-radius:10px; pointer-events:none;
  box-shadow: 0 0 0 2px var(--amber), 0 0 0 9999px rgba(var(--shade-rgb),0.8);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
#tourBubble{
  display:none; position:fixed; z-index:203; width:min(340px, calc(100vw - 24px));
  background: var(--panel); border:1px solid var(--amber); border-radius:12px;
  padding:16px 16px 14px; box-shadow:0 12px 40px rgba(0,0,0,0.6);
}
.tour-title{ font-weight:700; color: var(--accent-2); font-size:14px; margin-bottom:6px; }
.tour-text{ font-size:13.5px; line-height:1.55; color: var(--text); margin-bottom:14px; }
.tour-footer{ display:flex; align-items:center; gap:8px; }
.tour-count{ font-size:12px; color: var(--text-dim); margin-right:auto; }
.tour-skip{ background:transparent; border:none; color: var(--text-dim); padding:6px 8px; }
.tour-skip:hover{ background:transparent; border-color:transparent; color: var(--text); }
.tour-arrow{
  position:absolute; width:14px; height:14px; background: var(--panel);
  border:1px solid var(--amber); transform:rotate(45deg); display:none;
}
.tour-arrow.up{ top:-8px; border-right:none; border-bottom:none; }
.tour-arrow.down{ bottom:-8px; border-left:none; border-top:none; }
.tour-arrow.left{ left:-8px; border-top:none; border-right:none; }
.tour-arrow.right{ right:-8px; border-bottom:none; border-left:none; }


/* ---------- Soft outlines so the three feeds read as separate sections ---------- */
.creators-panel, .feed-col, .shorts-rail{
  background: rgba(var(--panel-rgb),0.5);
  border:1px solid var(--line);
  border-radius:3px;   /* same corner as the add-creator bar */
  padding:16px 16px 12px;
}

/* ---------- Channel card (selected creator with nothing in the feed) ---------- */
.channel-card{
  grid-column:1/-1; justify-self:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  width:250px; padding:22px 16px; margin-top:24px; text-align:center; text-decoration:none;
  background: var(--panel); border:1px solid var(--line); border-radius:14px;
  transition: border-color .15s ease, transform .15s ease;
}
.channel-card:hover{ border-color: var(--amber-dim); transform: translateY(-2px); }
.channel-card-img{
  width:160px; height:160px; border-radius:14px; overflow:hidden; background: var(--panel-2);
  display:flex; align-items:center; justify-content:center;
  font-size:64px; font-weight:700; color: var(--amber);
}
.channel-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.channel-card-name{ font-size:16px; font-weight:700; color: var(--text); }
.channel-card-hint{ font-size:12.5px; line-height:1.5; color: var(--text-dim); }
.channel-card-link{ font-size:12.5px; color: var(--amber); }
.channel-card:hover .channel-card-link{ text-decoration:underline; }

/* ---------- Example pictures inside the tour bubbles ---------- */
.tour-preview{
  position:relative; margin:0 0 14px; padding:22px 10px 10px; border:1px dashed var(--line);
  border-radius:8px; background: rgba(var(--ink-rgb),0.6);
}
.tour-preview-label{
  position:absolute; top:5px; left:10px; font-family: var(--font-mono); font-size:9.5px;
  letter-spacing:1px; text-transform:uppercase; color: var(--text-dim);
}
.mock-genre{
  display:flex; align-items:center; gap:6px; margin:4px 0 2px; font-family: var(--font-mono);
  font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color: var(--amber);
}
.mock-genre span{ background: var(--panel-2); color: var(--text-dim); border-radius:8px; padding:0 6px; }
.mock-chip{
  display:flex; justify-content:space-between; align-items:center; margin-left:12px; padding:3px 6px;
  border-radius:5px; font-size:11px; color: var(--text);
}
.mock-chip.on{ background: rgba(var(--amber-rgb),0.12); border:1px solid var(--amber-dim); color: var(--amber); }
.mock-chip i{ font-style:normal; color: var(--text-dim); font-size:10px; letter-spacing:2px; }
.mock-row{ display:flex; gap:8px; }
.mock-card{ flex:1; min-width:0; }
.mock-thumb{
  position:relative; aspect-ratio:16/9; border-radius:5px; overflow:hidden;
  background: linear-gradient(135deg, var(--line), var(--panel-2));
}
.mock-thumb.watched{ background: linear-gradient(135deg, var(--panel), var(--ink)); }
.mock-thumb.watched span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:7.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#fff;
}
.mock-line{ height:4px; border-radius:2px; background: var(--text-dim); margin-top:5px; opacity:.8; }
.mock-line.dim{ opacity:.4; height:3px; }
.mock-line.w80{ width:80%; } .mock-line.w70{ width:70%; } .mock-line.w50{ width:50%; } .mock-line.w40{ width:40%; }
.mock-short{ flex:1; min-width:0; }
.mock-short .mock-thumb{ aspect-ratio:9/16; }
.mock-short .mock-thumb b{
  position:absolute; top:4px; left:4px; font-size:6.5px; font-weight:600; color:#fff;
  background: rgba(0,0,0,0.7); padding:1px 4px; border-radius:3px;
}

/* Keep the Creators heading row on one line: no wrapping inside the Filter / Undo buttons */
.panel-title .filter-btn{ white-space:nowrap; flex:0 0 auto; padding:5px 9px; }
.panel-title .count{ flex:0 0 auto; }
#undoRemoveBtn{ margin-left:0; }


/* ---------- Footer: two separate boxes, centred under the middle (Videos) section ---------- */
.footer-inner{
  display:grid;
  grid-template-columns: var(--col-left) minmax(0,1fr) var(--col-right);
  column-gap: var(--col-gap);
  max-width: calc(1600px - 2 * clamp(16px,3vw,40px));
  margin:0 auto;
}
.footer-mid{
  grid-column:2;                       /* the middle column, same as the Videos section */
  display:flex; justify-content:center; flex-wrap:nowrap; gap:12px;
}
.footer-mid > .apikey-bar{ flex:0 0 auto; }   /* keep each box its natural size; any overflow spreads evenly either side */
/* Not enough room for three columns: centre the pair on the page and let it wrap */
@media (max-width: 1180px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-mid{ grid-column:1; flex-wrap:wrap; }
}

/* "Get a free key" as a button */
.apikey-getkey{
  display:inline-block; text-decoration:none; white-space:nowrap;
  color: var(--amber); border-color: var(--amber-dim);
}
.apikey-getkey:hover{ border-color: var(--amber); background: rgba(var(--amber-rgb),0.1); color: var(--amber); text-decoration:none; }

/* Help dialog: plain-English intro */
.modal-box-wide{ max-width:560px; }
.modal-text{ font-size:13.5px; line-height:1.6; color: var(--text-dim); margin-bottom:10px; }
.modal-text strong{ color: var(--text); }
.modal-facts{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:12px 0 4px; }
.modal-facts li{
  font-size:13.5px; line-height:1.5; color: var(--text-dim);
  padding:10px 12px; background: var(--panel-2); border-radius:3px;
}
.modal-facts strong{ color: var(--accent-2); }
.modal-subtitle{ font-size:14px; font-weight:700; color: var(--accent-2); margin:18px 0 10px; }

#tourBlocker.dim{ background: rgba(var(--shade-rgb), 0.8); }


/* =====================================================================
   COLOUR THEMES  (Default = the :root values above)
   Each theme just re-defines the same set of variables.
   ===================================================================== */
:root[data-theme="bubblegum"]{
  --ink:#08060a; --panel:#121014; --panel-2:#1c191f; --line:#302a33;
  --text:#f6f3f5; --text-dim:#a69ca4;
  --amber:#ff5fa8; --amber-dim:#8a2b5c; --amber-hover:#ff82bd; --accent-2:#ff8ec4;
  --live:#ff3d9a; --on-accent:#1a0010; --placeholder:#5e545b;
  --amber-rgb:255,95,168; --live-rgb:255,61,154; --ink-rgb:8,6,10; --panel-rgb:18,16,20; --shade-rgb:3,2,4;
}
:root[data-theme="rouge"]{
  --ink:#070709; --panel:#111115; --panel-2:#1b1b21; --line:#2e2e38;
  --text:#f4f4f6; --text-dim:#9d9da8;
  --amber:#ff3b3b; --amber-dim:#8a1f1f; --amber-hover:#ff6161; --accent-2:#ff5a5a;
  --live:#ff1f3d; --on-accent:#1a0000; --placeholder:#5a5a66;
  --amber-rgb:255,59,59; --live-rgb:255,31,61; --ink-rgb:7,7,9; --panel-rgb:17,17,21; --shade-rgb:2,2,3;
}
:root[data-theme="amethyst"]{
  --ink:#140f24; --panel:#1e1636; --panel-2:#2a1f4a; --line:#43376f;
  --text:#f5f0ff; --text-dim:#b9acdd;
  --amber:#c9a2ff; --amber-dim:#6b4f9e; --amber-hover:#dcbfff; --accent-2:#ff9ad5;
  --live:#ff8fd6; --on-accent:#1e0f3a; --placeholder:#6d6194;
  --amber-rgb:201,162,255; --live-rgb:255,143,214; --ink-rgb:20,15,36; --panel-rgb:30,22,54; --shade-rgb:8,5,18;
}
:root[data-theme="azure"]{
  --ink:#070d18; --panel:#0d1727; --panel-2:#142238; --line:#223a5c;
  --text:#e8f2ff; --text-dim:#8aa6c9;
  --amber:#3db8ff; --amber-dim:#1d5c8a; --amber-hover:#6accff; --accent-2:#9ad8ff;
  --live:#00d4ff; --on-accent:#04121f; --placeholder:#4a6285;
  --amber-rgb:61,184,255; --live-rgb:0,212,255; --ink-rgb:7,13,24; --panel-rgb:13,23,39; --shade-rgb:3,6,12;
}

:root[data-theme="forest"]{
  --ink:#07100b; --panel:#0e1a13; --panel-2:#15261c; --line:#25402f;
  --text:#eaf5ee; --text-dim:#8fb09b;
  --amber:#4ade80; --amber-dim:#1f6b3e; --amber-hover:#7ceea3; --accent-2:#a7e8b8;
  --live:#2ee59d; --on-accent:#04150a; --placeholder:#4a6a57;
  --amber-rgb:74,222,128; --live-rgb:46,229,157; --ink-rgb:7,16,11; --panel-rgb:14,26,19; --shade-rgb:3,8,5;
}

/* ---------- Theme picker (injected by theme.js) ---------- */
.menu-wrap{ position:relative; }
.site-menu{
  display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  background: var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:6px; min-width:200px; box-shadow:0 12px 32px rgba(0,0,0,0.5);
}
.site-menu.open{ display:block; }
.menu-link{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; box-sizing:border-box;
  background:transparent; border:none; color: var(--text); border-radius:5px; text-decoration:none;
  font-family: var(--font-body); font-size:13px; text-transform:none; letter-spacing:0; padding:9px 10px; cursor:pointer;
}
.menu-link:hover{ background: var(--panel-2); color: var(--text); border-color:transparent; }
.menu-link.active{ color: var(--amber); }
.menu-caret{ margin-left:auto; color: var(--text-dim); }

/* half-circle theme icon */
.theme-icon{
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--text-dim); flex:0 0 auto;
  background: linear-gradient(135deg, var(--theme-icon-a, #0c1016) 50%, var(--theme-icon-b, #ffb238) 50%);
  box-sizing:border-box; background-origin:border-box; background-repeat:no-repeat;
}
.theme-item{ position:relative; }
.theme-list{
  display:none; position:absolute; right:100%; top:-7px; padding-right:6px;   /* padding bridges the gap so hover isn't lost */
}
.theme-list-inner{
  background: var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:6px; min-width:180px; box-shadow:0 12px 32px rgba(0,0,0,0.5);
}
.theme-item:hover > .theme-list, .theme-item:has(:focus-visible) > .theme-list, .theme-item.open > .theme-list{ display:block; }
.theme-item:hover > .menu-theme-toggle{ background: var(--panel-2); }
@media (max-width:700px){ .theme-list{ right:0; top:100%; padding:4px 0 0; position:static; } .theme-list-inner{ box-shadow:none; border:none; padding:0 0 0 14px; } }
.theme-option{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; color: var(--text); border-radius:5px;
  font-family: var(--font-body); font-size:13px; text-transform:none; letter-spacing:0; padding:8px 10px;
}
.theme-option:hover{ background: var(--panel-2); color: var(--text); border-color:transparent; }
.theme-option .theme-check{ margin-left:auto; color: var(--amber); visibility:hidden; }
.theme-option.selected .theme-check{ visibility:visible; }
.theme-option.selected{ background: rgba(var(--amber-rgb),0.12); color: var(--amber); }
.theme-swatch{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--text-dim); flex:0 0 auto; box-sizing:border-box; background-origin:border-box; background-repeat:no-repeat; }


/* ---------- Watch-later queue ---------- */
.thumb-box{ position:relative; }
.queue-btn{
  position:absolute; bottom:8px; right:8px; z-index:2;
  width:28px; height:28px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; letter-spacing:0;
  background: rgba(var(--ink-rgb), 0.45); color: rgba(255,255,255,0.85);
  border:none; opacity:0.7; transition: opacity .15s ease, background .15s ease;
}
.queue-btn:hover, .queue-btn.queued{ opacity:1; background: var(--amber); color: var(--on-accent); }
/* the plus is drawn with two bars so it sits exactly in the middle of the circle */
.queue-btn.plus{ position:absolute; font-size:0; }
.queue-btn.plus::before, .queue-btn.plus::after{
  content:""; position:absolute; left:50%; top:50%; background: currentColor; border-radius:1px;
  transform: translate(-50%,-50%);
}
.queue-btn.plus::before{ width:12px; height:2px; }
.queue-btn.plus::after{ width:2px; height:12px; }
#queueToggleBtn{ text-transform:none; letter-spacing:0; font-size:12px; }
#shortsQueueBtn{ text-transform:none; letter-spacing:0; font-size:11.5px; }
#shortsQueueBtn.has-items, #queueToggleBtn.has-items{ color: var(--amber); border-color: var(--amber-dim); }
.panel-title.queue-mode .solo-badge{ display:none !important; }
#soloBadgeName{ display:inline-block; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.queue-bar{
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.5px; color: var(--text-dim);
}

.tour-panel{ display:none; position:fixed; z-index:200; }
.tour-panel.active{ display:block; }
.tour-hint{ font-size:12px; font-style:italic; color: var(--accent-2); margin:-6px 0 12px; }

.info-i{ display:inline-block; width:10px; height:15px; vertical-align:-2px; margin-right:3px; }

/* Help dialog as a two-slide carousel */
.help-box{ max-width:440px; padding:20px 22px; }
.help-box .modal-title{ font-size:16px; margin-bottom:10px; }
.help-sub{ font-size:12px; font-weight:400; color:var(--text-dim); }
.help-box .modal-text, .help-box .modal-facts li, .help-box .modal-steps li{ font-size:13px; line-height:1.5; }
.help-box .modal-text{ margin-bottom:8px; }
.help-box .modal-facts{ gap:6px; margin:8px 0 0; }
.help-box .modal-facts li{ padding:8px 10px; }
.help-box .modal-steps{ gap:7px; margin-bottom:10px; }
.help-slide{ display:none; }
.help-slide.active{ display:block; }
.help-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.help-actions{ display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.help-actions button{ margin-top:0; }
.help-dots{ display:flex; gap:6px; }
.help-dots span{ width:7px; height:7px; border-radius:50%; background: var(--line); }
.help-dots span.on{ background: var(--amber); }

/* queue tick, drawn so it sits in the middle of the circle */
.queue-btn.check{ font-size:0; }
.queue-btn.check::after{
  content:""; position:absolute; left:50%; top:46%; width:5px; height:10px;
  border:solid currentColor; border-width:0 2px 2px 0; border-radius:1px;
  transform: translate(-50%,-55%) rotate(45deg);
}
.short-thumb .queue-btn{ bottom:8px; right:8px; }

.help-addr{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.help-addr code{
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere; background: var(--panel-2); border:1px solid var(--line);
  border-radius:5px; padding:6px 8px; font-size:12px; color:var(--text);
}
.help-addr button{ flex:0 0 auto; margin-top:0; padding:5px 10px; font-size:12px; }
.help-addr-note{ display:block; margin-top:6px; font-size:12px; }