@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root { --ink:#171512; --muted:#746f67; --line:#ded9cf; --paper:#f4f0e8; --white:#fffdf9; --accent:#d85c35; --green:#436b58; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; }
button,input,textarea { font:inherit; } button { cursor:pointer; }
.icon-btn { border:0; background:transparent; color:inherit; padding:9px 11px; border-radius:12px; }
.icon-btn:hover { background:#0000000a; }
.pill { border:1px solid var(--line); background:var(--white); padding:9px 13px; border-radius:999px; color:var(--ink); }
.pill.selected { background:#fff1bd!important;border-color:#dfaE32!important;color:#17384a!important;box-shadow:0 0 0 2px #f5c84b55; }
.primary { border:0; background:var(--ink); color:white; padding:11px 16px; border-radius:12px; font-weight:700; }
.danger { background:#9d3029; color:white; border:0; border-radius:10px; padding:10px 14px; }
.muted { color:var(--muted); } .eyebrow { font-size:11px; letter-spacing:.15em; font-weight:700; text-transform:uppercase; color:var(--muted); }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; font-family:Playfair Display; }
.message { max-width:720px; margin:0 auto 26px; display:grid; grid-template-columns:38px 1fr; gap:12px; line-height:1.65; }
.message > div:last-child { min-width:0; }
.message.user { grid-template-columns:1fr; } .message.user .bubble { justify-self:end; max-width:76%; background:#e4ded2; border-radius:18px 18px 4px 18px; padding:13px 16px; }
.plain-answer { white-space:pre-wrap; overflow-wrap:anywhere; }
.answer-copy { display:block; margin-top:12px; }
.suno-intro { margin:4px 0 14px; }
.suno-package { display:grid; gap:10px; max-width:100%; margin-top:8px; }
.suno-package-heading { font-size:12px; font-weight:800; letter-spacing:.04em; color:#487082; text-transform:uppercase; }
.suno-mode { width:max-content; max-width:100%; padding:5px 10px; border-radius:999px; background:#fff2bd; color:#3b4c4e; font-size:12px; font-weight:700; }
.suno-merge-note { font-size:12px; color:#557d87; }
.suno-field { background:#f8fdfb; border:1px solid #b7d9df; border-radius:14px; overflow:hidden; }
.suno-field-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; border-bottom:1px solid #d2e8e9; }
.suno-field-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.suno-field-top strong { display:block; line-height:1.25; font-size:13px; }
.suno-field-top span { display:block; line-height:1.25; font-size:11px; color:#5d8490; }
.suno-copy { flex:none; padding:6px 10px; border:1px solid #9bcbd1; border-radius:9px; background:#e6f6f5; color:#245267; font-size:12px; font-weight:700; }
.suno-copy:hover { background:#d0edec; }
.suno-copy:disabled { opacity:.7; cursor:not-allowed; }
.suno-field-value { padding:12px 13px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.55; user-select:text; }
.lyrics-edit-form { display:grid; gap:10px; padding:12px 13px; border-top:1px solid #d2e8e9; }
.lyrics-edit-form label { display:grid; gap:7px; color:#245267; font-size:12px; font-weight:700; }
.lyrics-edit-form textarea { width:100%; min-height:90px; padding:10px 11px; border:1px solid #9bcbd1; border-radius:9px; background:#fff; color:#123247; resize:vertical; font-size:13px; font-weight:400; }
.lyrics-edit-actions { display:flex; justify-content:flex-end; gap:7px; }
.lyrics-revision-error { margin:0 13px 12px; padding:9px 11px; border-radius:9px; background:#fff0ed; color:#8b3328; font-size:12px; line-height:1.4; }
.suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.suggestions button { border:1px solid var(--line); border-radius:12px; background:transparent; text-align:left; padding:10px 12px; }
.listener-idea-list { display:grid;gap:10px;margin-top:12px;max-width:680px; }
.listener-idea-card { border:1px solid var(--line);border-radius:14px;padding:14px;background:#fffdf8; }
.listener-idea-card h3 { font:600 16px Playfair Display;margin:0 0 8px; }
.listener-idea-card p { margin:0 0 12px;white-space:pre-wrap;line-height:1.55; }
.listener-edit { min-height:260px!important;line-height:1.5; }
.composer-box { background:var(--white); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 35px #332b1d12; padding:12px; }
.composer-box textarea { display:block; width:100%; resize:none; border:0; outline:0; background:transparent; min-height:56px; padding:6px; }
.composer-actions { display:flex; align-items:center; gap:8px; justify-content:space-between; } .composer-actions>div { display:flex; gap:7px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#55a277; display:inline-block; }

/* B — production console */
.b-shell { min-height:100vh; color:#123247; background:#dff3f5; display:grid; grid-template-columns:74px 300px 1fr; }
.b-rail { border-right:1px solid #b7d9df; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:18px; background:#c9eaf0; }
.b-logo { width:42px;height:42px;border-radius:13px;background:#f5c84b;color:#17384a;display:grid;place-items:center;font-family:Playfair Display;font-size:24px; box-shadow:0 5px 12px #6daebd55; }
.b-rail button { color:#397185; background:transparent; border:0; width:44px; height:44px; border-radius:12px; } .b-rail button.active,.b-rail button:hover { background:#fff8d8;color:#17384a; }
.b-project { padding:24px 20px; border-right:1px solid #b7d9df; background:#edf9f8; }
.b-project h1 { font:600 27px Playfair Display; margin:9px 0 3px; }
.stage { margin:25px 0; } .stage-row { width:100%; display:flex; gap:10px; align-items:flex-start; margin:15px 0; padding:7px 4px; border:0; border-radius:10px; background:transparent; text-align:left; font:inherit; color:#6a8992; font-size:13px; cursor:pointer; transition:background .18s,color .18s,transform .18s; }
.stage-row:hover { background:#d8f0f1; color:#17384a; }.stage-row:focus-visible { outline:2px solid #4e9eae; outline-offset:2px; }
.stage-row.active { color:#17384a; }.stage-num { width:25px;height:25px;border-radius:50%;border:1px solid #94c2ca;display:grid;place-items:center;flex:none; }.stage-row.active .stage-num { background:#f5c84b;border-color:#e5b72f;color:#17384a; }
.b-card { background:#d8f0f1; border:1px solid #b7d9df; border-radius:14px; padding:15px; margin:11px 0; } .b-card small { color:#5d8490; }
.b-project [contenteditable="true"] { outline:0; border-radius:5px; }.b-project [contenteditable="true"]:focus { box-shadow:0 2px 0 #83bfc8; }.b-project [data-project-field="title"]:focus { box-shadow:0 2px 0 #83bfc8; }.b-project [contenteditable="true"][data-placeholder]:empty::before { content:attr(data-placeholder); color:#72939b; }
.b-card p { min-height:1.5em; margin:8px 0 0; line-height:1.45; overflow-wrap:anywhere; }
.stage-highlight { animation:stage-focus 1.4s ease; border-radius:14px; }
@keyframes stage-focus { 0%,100% { background:transparent; } 22%,72% { background:#fff2bd; box-shadow:0 0 0 10px #fff2bd; } }
.b-work { min-width:0; display:grid; grid-template-rows:64px 1fr auto; }
.b-top { border-bottom:1px solid #b7d9df; padding:0 28px; display:flex; align-items:center; justify-content:space-between; background:#f6fcfa; }
.b-chat { padding:35px 7vw; overflow:auto; }.b-chat .message { max-width:780px; }.b-chat .avatar { background:#f5c84b;color:#17384a; }
.b-chat .message.user .bubble { background:#c6eaf0; }
.b-bottom { padding:15px 7vw 80px; background:linear-gradient(transparent,#dff3f5 25%); }.b-bottom .composer-box { background:#f6fcfa;border-color:#b7d9df;box-shadow:0 12px 30px #6daebd2b; }.b-bottom textarea { color:#123247; }.b-bottom .pill { background:#e6f6f5;border-color:#a9d2d9;color:#245267; }.b-bottom .primary { background:#f5c84b;color:#17384a; }
.primary:disabled { opacity:.65; cursor:wait; }.pending-message { opacity:.65; }.error-message { color:#8a2d26; }.error-message .avatar { background:#d85c35!important; color:white!important; }
.retry-message p { margin:5px 0 12px; font-size:14px; overflow-wrap:anywhere; }
.retry-button { border:1px solid #b8574b; border-radius:10px; background:#fff9f6; color:#8a2d26; padding:8px 12px; font-size:13px; font-weight:700; }
.retry-button:hover { background:#ffece5; }

.auth-shell { min-height:100vh; display:grid; place-items:center; padding:28px; color:#123247; background:radial-gradient(ellipse at 12% 10%,#e9f8f5 0,transparent 38%),linear-gradient(145deg,#dff3f5,#f5f2e9); }
.auth-card { width:min(500px,100%); padding:32px; border:1px solid #b7d9df; border-radius:24px; background:#fbfdfa; box-shadow:0 24px 70px #1232471a; }
.auth-brand { display:flex; align-items:center; gap:16px; }.auth-brand img { width:72px; height:72px; flex:none; }.auth-brand h1 { margin:4px 0 0; font:600 27px Playfair Display,serif; color:#123247; }
.auth-languages { display:flex; justify-content:flex-end; gap:7px; margin:16px 0 22px; }.auth-languages button { padding:7px 11px; border:1px solid #cfddda; border-radius:9px; background:#f1f5f2; color:#7a8d8f; font-size:11px; font-weight:800; letter-spacing:.04em; cursor:pointer; }.auth-languages button:hover,.auth-languages button.selected { border-color:#79aeb4; background:#e2f2ef; color:#123247; }
.auth-email,.auth-owner { display:grid; gap:9px; }.auth-email form { display:grid; gap:9px; }.auth-email form[hidden] { display:none; }.auth-email label,.auth-owner label { font-size:12px; font-weight:800; color:#365c68; }.auth-email-row { display:grid; grid-template-columns:1fr auto; gap:8px; }.auth-email input,.auth-owner input { width:100%; min-width:0; padding:12px 13px; border:1px solid #cbdad7; border-radius:11px; background:white; color:#123247; }.auth-email input:disabled { background:#f0f3f0; color:#899b9b; }.auth-email p,.auth-hint { margin:0; color:#71858a; font-size:12px; line-height:1.5; }.auth-email button:disabled { opacity:.45; cursor:not-allowed; }.auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0 18px; color:#789095; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:#dce7e2; }.auth-owner .primary { width:100%; margin:4px 0; }.auth-error { min-height:1em; margin:0; color:#a33e32; font-size:13px; }.auth-hint { margin-top:4px; }.auth-owner .auth-hint { padding-top:3px; }
.auth-password-field { display:flex; align-items:stretch; min-width:0; }
.auth-password-field input { flex:1; border-radius:11px 0 0 11px; }
.auth-password-toggle { display:grid; place-items:center; width:48px; flex:none; margin-left:-1px; border:1px solid #cbdad7; border-radius:0 11px 11px 0; background:#f6faf7; color:#52727a; cursor:pointer; }
.auth-password-toggle:hover { background:#eaf4ef; color:#123247; }
.auth-password-toggle:focus-visible { position:relative; z-index:1; outline:3px solid #8ebec0; outline-offset:2px; }
.auth-password-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.auth-password-toggle svg[hidden] { display:none; }

.modal-backdrop { position:fixed;inset:0;z-index:80;background:#1119;backdrop-filter:blur(6px);display:grid;place-items:center;padding:12px; }.modal { width:min(460px,100%);max-height:calc(100vh - 24px);overflow:auto;background:var(--white);border-radius:18px;padding:20px;box-shadow:0 30px 80px #0005; }.modal h2 { font:600 25px Playfair Display;margin:0 0 6px; }.field { margin:12px 0; }.field label { display:block;font-size:12px;font-weight:700;margin-bottom:6px; }.field input,.field select,.field textarea { width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:white; }.field textarea { min-height:72px;resize:vertical;font:inherit; }.modal-actions { position:sticky;bottom:-20px;display:flex;justify-content:flex-end;gap:8px;margin:16px -20px -20px;padding:12px 20px;background:var(--white);border-top:1px solid var(--line); }.notice { padding:9px 11px;border-radius:10px;background:#e7efe9;color:#31533f;font-size:12px;margin:11px 0;white-space:pre-wrap; }.notice.analysis-error { background:#fff0ed;color:#8b3328; }
.remember-key { display:flex!important; align-items:center; gap:9px; font-size:13px!important; margin:12px 0 4px; cursor:pointer; user-select:none; }.remember-key input { appearance:auto; -webkit-appearance:checkbox; width:18px!important; height:18px!important; margin:0; accent-color:#e5b72f; cursor:pointer; flex:none; }
.key-input { display:flex; align-items:center; gap:6px; }.key-input input { flex:1; min-width:0; }.key-eye { border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:10px; width:40px; height:40px; cursor:pointer; }.key-eye:hover { background:#fff8d8; color:var(--ink); }
@media(max-width:850px){.b-shell{grid-template-columns:58px 1fr}.b-project{display:none}.pill span{display:none}}