/* Vibe Check - Listen Later studio (producer). v6 "premium studio": light page,
   white cards, hairline borders, soft shadow (no neumorphism/glow). Mirrors the
   listener + shared vc.css tokens. Blue = primary actions; coral = expiry only. */
@font-face { font-family:'Inter'; src:url('/l/_assets/fonts/InterVariable.ttf') format('truetype'); font-weight:100 900; font-display:swap; }

:root{
  --page:#edeff2; --card:#ffffff; --card-2:#f6f7f9; --line:#e4e7ec; --line-2:#eef0f3;
  --ink:#2f343b; --ink-2:#5b626b; --ink-3:#878d96;
  --blue:#3f72cc; --blue-press:#33609f; --blue-soft:rgba(63,114,204,.12);
  --coral:#e6795c; --coral-line:rgba(230,121,92,.42);
  --sh-card:0 1px 2px rgba(22,30,48,.05), 0 8px 22px rgba(22,30,48,.07);
  --sh-pop:0 10px 30px rgba(22,30,48,.14);
  --sh-blue:0 6px 16px rgba(63,114,204,.30);
  --r-card:18px; --r-panel:14px; --r-ctl:10px; --r-pill:999px;
  --f:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ margin:0; min-height:100%; }
body{ background:var(--page); color:var(--ink); font-family:var(--f); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; justify-content:center; padding:32px 20px; }
.wrap{ width:100%; max-width:600px; display:flex; flex-direction:column; gap:16px; }

/* lockup */
.lockup{ text-align:center; margin-top:2px; }
.logo-img{ display:block; margin:0 auto; width:345px; max-width:93%; height:auto; }
.modewrap{ display:flex; justify-content:center; }
.mode{ display:inline-flex; align-items:center; height:23px; padding:0 11px; border-radius:var(--r-pill); font-size:9.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; background:var(--card); border:1px solid var(--line); color:var(--ink-3); }
.mode--later{ color:var(--ink-2); border-color:var(--line); }  /* Listen Later = calm/neutral */

/* sheet (card) */
.sheet{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:30px 30px 24px; }
.muted{ color:var(--ink-2); font-size:13.5px; line-height:1.55; }

/* signed-out */
.signedout{ text-align:center; }
.signedout h2{ margin:14px 0 8px; font-size:19px; font-weight:700; color:var(--ink); }
.signedout .muted{ margin:0 auto 20px; max-width:400px; }
.bigGlyph{ color:var(--blue); display:flex; justify-content:center; }
.bigGlyph svg{ width:38px; height:38px; }

/* header row: section label left · usage opposite (right) */
.lhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:14px; }
.sect{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding-top:3px; }
.sect2{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin:26px 0 2px; }

/* usage + thin blue bar */
.usage{ text-align:right; min-width:210px; }
.usage .nums{ font-size:12px; color:var(--ink-2); margin-bottom:6px; }
.usage .nums b{ color:var(--ink); font-weight:600; }
.pbar{ height:6px; border-radius:4px; background:#e1e5ea; overflow:hidden; }
.pbar > i{ display:block; height:100%; width:0%; background:var(--blue); border-radius:4px; transition:width .3s ease; }
.pbar > i.warn{ background:var(--coral); }

/* drop zone - neutral panel, blue cloud icon */
.drop{ display:block; border:1.5px dashed #cdd4dd; border-radius:var(--r-panel); background:#f5f7fb;
  cursor:pointer; transition:border-color .15s, background .15s; }
.drop:hover, .drop.drag{ border-color:var(--blue); background:#eef3fb; }
.drop.has{ border-style:solid; border-color:var(--blue); background:#eef3fb; }
.dropInner{ padding:26px 20px; text-align:center; }
.dropGlyph{ width:38px; height:38px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; color:var(--blue); }
.dropGlyph svg{ width:30px; height:30px; }
.dropText{ font-size:15px; font-weight:700; color:var(--ink); }
.dropText b{ color:var(--ink); }
.dropHint{ margin-top:4px; font-size:12.5px; color:var(--ink-2); }

/* fields */
.fields{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.fieldRow{ display:flex; gap:14px; }
.fieldRow .field{ flex:1 1 0; min-width:0; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field span{ font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.field input, .field select{ height:44px; padding:0 13px; border-radius:var(--r-ctl); background:var(--card);
  border:1px solid var(--line); color:var(--ink); font:500 14px/1 var(--f); outline:none; width:100%; }
.field input::placeholder{ color:#a7adb6; }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23878d96' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.field input:focus, .field select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }

/* buttons */
.btn{ height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 16px;
  border-radius:var(--r-ctl); font:600 14px/1 var(--f); cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; white-space:nowrap; }
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.btn--primary:hover{ background:var(--blue-press); }
.btn--primary:disabled{ background:#c2c6cd; color:#fff; box-shadow:none; cursor:default; }
.btn--secondary{ background:var(--card); color:var(--ink); border-color:var(--line); box-shadow:0 1px 1px rgba(22,30,48,.03); }
.btn--secondary:hover{ background:var(--card-2); border-color:#d7dbe2; }
.btn--secondary svg{ color:var(--ink-2); }
.btn--block{ width:100%; margin-top:18px; }
.btn.danger{ color:var(--coral); border-color:var(--coral-line); }
.btn.danger:hover{ background:var(--coral-soft, #fdede8); }

/* progress + messages */
.prog{ margin-top:14px; height:30px; border-radius:9px; background:#e6e9ee; position:relative; overflow:hidden; }
.prog i{ display:block; height:100%; width:0%; background:var(--blue); transition:width .15s ease; }
.prog span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; }
.formMsg{ margin-top:14px; font-size:13px; padding:10px 12px; border-radius:10px; }
.formMsg.err{ background:#fdece8; color:#b4472f; border:1px solid var(--coral-line); }
.formMsg.info{ background:var(--blue-soft); color:var(--blue-press); border:1px solid rgba(63,114,204,.28); }

/* link list (single column rows) */
.links{ margin-top:8px; }
.lrow{ display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.lrow .info{ flex:1; min-width:0; }
.lrow .lt{ font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow .lm{ font-size:12px; color:var(--ink-2); margin-top:2px; }
.lrow .lm .dot{ opacity:.55; margin:0 6px; width:auto; height:auto; border-radius:0; background:none; display:inline; }
.lrow .lm .exp{ color:var(--coral); font-weight:600; }
.lrow .lm .pin{ color:var(--ink-2); font-weight:600; }
.iconbtn{ width:30px; height:30px; flex:0 0 auto; border:1px solid var(--line); border-radius:8px; background:var(--card);
  display:flex; align-items:center; justify-content:center; color:var(--ink-3); cursor:pointer; text-decoration:none; transition:.15s; }
.iconbtn:hover{ background:var(--card-2); color:var(--ink-2); }
.iconbtn.copied{ color:var(--blue); border-color:var(--blue-line, rgba(63,114,204,.40)); }
.iconbtn svg{ width:14px; height:14px; }

/* Click a file name to play it inline (one track at a time); the play button shows the state. */
.lrow .lt{ cursor:pointer; }
.lrow.playing .lt{ color:var(--blue); }
.lrow .playbtn .i-pause{ display:none; }
.lrow.playing .playbtn{ background:var(--blue); border-color:var(--blue); color:#fff; }
.lrow.playing .playbtn .i-play{ display:none; }
.lrow.playing .playbtn .i-pause{ display:inline; }

/* transient undo bar for a just-deleted link */
.undobar{ display:flex; align-items:center; justify-content:space-between; background:var(--card-2); border:1px solid var(--line);
  border-radius:10px; padding:12px 15px; margin-top:12px; font-size:13px; color:var(--ink-2); }
.undobar button{ background:none; border:none; color:var(--blue); font:600 13px var(--f); cursor:pointer; }
.empty{ color:var(--ink-3); font-size:13px; text-align:center; padding:18px; }

/* footer */
.foot{ text-align:center; color:var(--ink-3); font-size:12px; margin-top:2px; }
.foot a{ color:var(--blue); text-decoration:none; font-weight:600; }

/* ---------- Modal (link ready / edit) ---------- */
.overlay{ position:fixed; inset:0; background:rgba(28,34,46,.42); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50; }
.modal{ width:520px; max-width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-pop); padding:26px 26px 24px; }
.modal__t{ display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:20px; }
.modal__t svg{ width:16px; height:16px; }
.modal__l{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; }
.copyrow{ display:flex; align-items:center; gap:8px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-ctl); padding:0 14px; height:48px; }
.copyrow .url{ flex:1; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal__note{ font-size:12.5px; color:var(--ink-2); line-height:1.55; margin-top:14px; text-align:center; }
.modal__rows{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.modal__rows .r{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); }
.modal__rows.specrows .r{ justify-content:space-between; }
.modal__rows.specrows .r .k{ color:var(--ink-3); }
.minisel{ height:32px; border:1px solid var(--line); border-radius:8px; background:var(--card); padding:0 28px 0 11px; font:600 13px var(--f); color:var(--ink); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23878d96' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; }
.minisel:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); outline:none; }
.miniinput{ height:32px; width:160px; border:1px solid var(--line); border-radius:8px; background:var(--card); padding:0 11px; font:600 13px var(--f); color:var(--ink); outline:none; }
.miniinput::placeholder{ color:#a7adb6; font-weight:500; }
.miniinput:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.modal__actions{ display:flex; gap:12px; justify-content:center; margin-top:22px; }

@media (max-width:480px){ .sheet{ padding:22px 18px 20px; } .fieldRow{ flex-direction:column; } .lhead{ flex-direction:column; gap:12px; } .usage{ text-align:left; min-width:0; width:100%; } }