* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
html { scroll-padding-top: 76px; scroll-behavior: smooth; }
body { background-image: radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 45%), radial-gradient(ellipse at 90% 25%, color-mix(in srgb, var(--focus) 6%, transparent), transparent 50%); }
.top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; max-width: 880px; margin: 0 auto; padding: 28px 16px 8px; }
.top h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.top > div { flex: 1 1 300px; }
.feedback-btn { flex: none; }
.theme-pick { flex: none; flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
.theme-pick select { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); }
.sub { margin: 2px 0 0; color: var(--muted); }
main { max-width: 880px; margin: 0 auto; padding: 8px 16px 48px; display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.04); }
.card h2 { margin: 0 0 12px; font-size: 17px; }
.top { max-width: 1080px; padding-top: 36px; padding-bottom: 22px; }
.top > img { width: 56px; height: 56px; padding: 6px; border-radius: 18px; background: var(--card); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-2) 20%, transparent); transform: rotate(-5deg); }
.top h1 { font-size: 34px; letter-spacing: -.045em; }
main { max-width: 1080px; gap: 22px; padding-bottom: 80px; }
.card { border-radius: 24px; padding: clamp(18px, 3vw, 30px); box-shadow: 0 4px 24px color-mix(in srgb, var(--text) 4%, transparent); }
.card h2 { font-size: 22px; letter-spacing: -.025em; display: flex; align-items: center; gap: 12px; }
.card h2::before { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 22%, var(--card)); font-size: 23px; content: '✨'; }
#lines-card h2::before { content: '😂'; }
#clips-card h2::before { content: '🎙️'; }
#packs-card h2::before { content: '📦'; }
#online-card h2::before { content: '🌍'; }
#party-card h2::before { content: '🪩'; }
#pro-card h2::before { content: '⭐'; }
.studio-launch { padding: 24px; border: 1px solid color-mix(in srgb, var(--brand-2) 45%, var(--line)); border-radius: 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--card)), color-mix(in srgb, var(--focus) 5%, var(--card))); display: flex; gap: 24px; align-items: center; }
.studio-mascots { display: flex; flex: 0 0 auto; align-items: center; padding-inline: 8px; }
.studio-mascots span { display: grid; place-items: center; width: 58px; height: 68px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; font-size: 35px; box-shadow: 0 5px 12px color-mix(in srgb, var(--text) 8%, transparent); }
.studio-mascots span:nth-child(odd) { transform: rotate(-8deg); }
.studio-mascots span:nth-child(even) { transform: translateY(5px) rotate(7deg); margin-inline-start: -8px; }
.studio-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; gap: 10px; }
.studio-shortcuts a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 90px; padding: 10px; text-align: center; color: var(--text); text-decoration: none; border-radius: 18px; border: 1px solid var(--line); background: var(--card); font-weight: 700; }
.studio-shortcuts a > span:first-child { font-size: 26px; }
.studio-shortcuts a:hover { border-color: var(--brand-2); box-shadow: 0 5px 14px color-mix(in srgb, var(--brand-2) 12%, transparent); }
.studio-shortcuts a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hint { color: var(--muted); font-size: 12.5px; font-weight: 400; }
p.hint { margin: 10px 0 0; }
.pack-item-credits { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.pack-item-credits li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 8px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pack-item-title { font-weight: 650; }
a { color: var(--focus); }

.grid-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.grid-form .wide { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
input, select, button, .button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=file]), select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); font-weight: 400; min-width: 0;
}
input[type=file] { font-weight: 400; }
input:focus-visible, select:focus-visible, button:focus-visible, .button:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
button, .button {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; transition: transform .1s, box-shadow .1s;
  border: 1px solid var(--line); background: var(--field); cursor: pointer; font-weight: 600; font-size: 13px;
}
button:hover, .button:hover { filter: brightness(.97); }
button.primary, .button.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: var(--on-brand); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-2) 35%, transparent); }
button:hover:not(:disabled), .button:hover { transform: translateY(-1px); }
button.danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
button.small { padding: 3px 8px; font-size: 12px; }
.switch { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent-strong); }

.table-wrap { overflow-x: auto; }
table.lines { width: 100%; border-collapse: collapse; }
.lines th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lines td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lines td.text { width: 100%; overflow-wrap: anywhere; }
.lines td.text .say { display: block; color: var(--muted); font-size: 12px; }
.lines .right { text-align: right; white-space: nowrap; }
.lines .picture-row .right { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.line-thumbnail { float:inline-start; width:56px; height:42px; object-fit:contain; margin-inline-end:10px; border-radius:6px; background:var(--field); }
.line-share { position:relative; }
.line-share summary { cursor:pointer; list-style:none; border:1px solid var(--line); border-radius:8px; padding:2px 10px; }
.line-share summary::-webkit-details-marker { display:none; }
.line-share > .actions { position:absolute; inset-inline-end:0; top:100%; z-index:2; background:var(--field); padding:8px; border:1px solid var(--line); border-radius:10px; flex-wrap:nowrap; }
.lines tr.editing td { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 16%, transparent); font-size: 12px; white-space: nowrap; }

.timers { list-style: none; margin: 0; padding: 0; }
.timers li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.timers li span.what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.timers .empty { color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 10px; background: #202124; color: #fff; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.error { background: #a50e0e; }

@media (max-width: 640px) {
  .grid-form { grid-template-columns: 1fr; }
  .lines th:nth-child(3), .lines td:nth-child(3), .lines th:nth-child(4), .lines td:nth-child(4) { display: none; }
}

/* ---- Step 4 additions ---- */
body { font-family: system-ui, -apple-system, "Segoe UI", "Nirmala UI", sans-serif; }
h3 { margin: 16px 0 8px; font-size: 14px; }
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; max-width: 880px; margin: 0 auto; padding: 8px 16px;
  background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: 6px 12px; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.tabs a:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.tabs { max-width: 1080px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); padding-block: 12px; gap: 8px; }
.tabs a { padding: 9px 18px; }
.tabs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.toolbar { padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--muted) 5%, var(--card)); }
.lines td { padding-block: 12px; }
.lines tr:hover td { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.grid-form { padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--muted) 4%, var(--card)); border: 1px solid var(--line); }
.packs li { padding-block: 14px; gap: 12px; }
@media (max-width: 800px) { .studio-launch { flex-direction: column; } .studio-shortcuts { width: 100%; } }
@media (max-width: 480px) { .studio-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-launch { padding: 16px; } .top h1 { font-size: 28px; } .grid-form { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } button, .button { transition: none; } button:hover:not(:disabled), .button:hover { transform: none; } }
.grid-form .span2 { grid-column: span 2; }
.range { display: flex; align-items: center; gap: 10px; }
.range input { flex: 1; accent-color: var(--accent-strong); }
.range output { width: 48px; font-variant-numeric: tabular-nums; font-weight: 400; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.toolbar input, .toolbar select { flex: 1 1 180px; }
.lines td.about { white-space: nowrap; }
button.star { font-size: 16px; padding: 0 6px; color: var(--muted); }
button.star.on { color: #f9ab00; }
.sources { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.linkrow { display: flex; gap: 8px; flex: 1 1 320px; }
.linkrow input { flex: 1; min-width: 0; }
.picture-field { display: grid; gap: 6px; }
.picture-field .label { font-weight: 600; font-size: 13px; }
.picture-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.picture-row label { flex-direction: row; }
#line-pic-preview { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
#pro-card .linkrow { margin: 10px 0; max-width: 520px; }
#pro-status { margin: 4px 0 0; font-weight: 600; }
.trimmer { margin-top: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; display: grid; gap: 10px; }
.wave-wrap { border-radius: 8px; overflow: hidden; }
#wave { display: block; width: 100%; height: 120px; cursor: ew-resize; touch-action: none; }
.trim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trim-row input { width: 100%; accent-color: var(--accent-strong); }
.trim-info { margin: 0; font-variant-numeric: tabular-nums; }
.hint.bad { color: var(--danger); font-weight: 600; }
.packs { list-style: none; margin: 0; padding: 0; }
.packs li { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.packs li .what { flex: 1; }
.errors { margin: 10px 0 0; padding: 10px 10px 10px 28px; border-radius: 8px; background: var(--danger-bg); color: var(--danger); font-size: 12.5px; }
@media (max-width: 640px) { .grid-form .span2 { grid-column: auto; } .trim-row { grid-template-columns: 1fr; } }

label.check { flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; } label.check input[type=checkbox] { flex:0 0 auto; width:18px; height:18px; margin:0; }
#line-pic-preview { width:auto; height:auto; max-width:240px; max-height:180px; object-fit:contain; }

.my-key-balances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.my-key-balances article{background:var(--field);border:1px solid var(--line);padding:14px;border-radius:12px}.my-key-balances strong,.my-key-balances span{display:block;line-height:1.7;overflow-wrap:anywhere}#my-key-coverage,#my-key-pending{font-size:13px;line-height:1.6;color:var(--muted)}@media(max-width:480px){.my-key-balances{grid-template-columns:1fr}}
/* Keep the key dashboard and existing settings usable on narrow screens. */
main{grid-template-columns:minmax(0,1fr)}main>*{min-width:0}.studio-shortcuts{min-width:0}.studio-shortcuts a{min-width:0;overflow-wrap:anywhere}.grid-form{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-form>*{min-width:0}#pro-status,#my-key-usage{overflow-wrap:anywhere}.table-wrap{max-width:100%}@media(max-width:640px){.grid-form{grid-template-columns:minmax(0,1fr)}.top>div{min-width:0;flex-basis:220px}.theme-pick{max-width:100%}.theme-pick select{max-width:100%}.tabs{max-width:100%;overflow-x:auto}.linkrow{flex-wrap:wrap}.linkrow input{flex-basis:180px}}