:root { --ink:#241b1c; --wine:#743037; --paper:#f5f0e7; --cream:#fffdf9; --line:#ded4c6; --muted:#756c65; --soft:#eee5d9; }
* { box-sizing:border-box; min-width:0; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; }
.topbar { height:68px; padding:0 4vw; border-bottom:1px solid var(--line); background:rgba(255,253,249,.78); display:flex; align-items:center; justify-content:space-between; gap:.65rem; position:sticky; top:0; z-index:2; backdrop-filter:blur(14px); }
.brand { color:var(--ink); text-decoration:none; font-family:Georgia, serif; letter-spacing:.065em; font-size:1.15rem; display:flex; align-items:center; gap:.55rem; }
.brand-icon { width:30px; height:30px; border-radius:8px; display:block; object-fit:cover; }
.topbar-actions { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.save-status { color:var(--muted); font-size:.8rem; }
.button { border:1px solid var(--line); border-radius:8px; padding:.6rem .85rem; background:transparent; color:var(--ink); }
.button.primary { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.button.ghost:hover, .new-stream:hover { background:var(--soft); }
.workspace { max-width:1440px; margin:0 auto; min-height:calc(100vh - 68px); display:grid; grid-template-columns:220px minmax(360px,660px) minmax(220px,310px); gap:clamp(1rem,4vw,5rem); padding:clamp(1.3rem,4vw,4rem); }
.sidebar { border-right:1px solid var(--line); padding-right:1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.eyebrow { color:var(--muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0:.7rem; }
.stream-nav, .new-stream { text-align:left; border:0; background:transparent; padding:.65rem .55rem; border-radius:7px; color:var(--ink); }
.stream-nav.active { background:var(--soft); font-weight:600; }
.new-stream { color:var(--wine); margin-top:.65rem; }
.sidebar-footer { margin-top:auto; color:var(--muted); font-family:Georgia, serif; font-size:.95rem; line-height:1.45; padding:.8rem .55rem; }
.editor-intro { margin-bottom:2.8rem; }
.template-picker { margin:-1.25rem 0 2rem; }.template-picker .eyebrow { margin-bottom:.5rem; }.template-options { display:flex; flex-wrap:wrap; gap:.45rem; }.template-options button { border:1px solid var(--line); color:var(--ink); background:var(--cream); padding:.48rem .62rem; border-radius:7px; font-size:.82rem; }.template-options button:hover { border-color:var(--wine); color:var(--wine); }
.stream-title-input { display:block; width:100%; margin:0 0:.6rem; border:0; border-bottom:1px solid transparent; background:transparent; padding:0; color:var(--ink); font:500 clamp(2rem,4vw,3.3rem)/1.02 Georgia, serif; }
.stream-title-input:focus { outline:none; border-bottom-color:var(--wine); }
textarea { display:block; resize:vertical; min-height:50px; width:100%; border:0; background:transparent; color:var(--muted); line-height:1.5; padding:0; }
textarea:focus { outline:none; }
.editor-label-row { color:var(--muted); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding-bottom:.65rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.blocks { display:grid; gap:.7rem; padding:1rem 0; width:100%; }
.block { width:100%; overflow:hidden; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:.9rem; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:.75rem; align-items:center; }
.block-icon { background:var(--soft); border-radius:7px; height:34px; display:grid; place-items:center; color:var(--wine); font:1.25rem Georgia,serif; }
.block-main strong { display:block; font:500 1.03rem Georgia,serif; }
.block-main { min-width:0; overflow:hidden; }.block-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.block-main span { color:var(--muted); font-size:.8rem; display:block; margin-top:.16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none; }
.block-actions { display:flex; gap:.25rem; }
.mini { color:var(--muted); border:0; background:transparent; padding:.3rem .4rem; font-size:.85rem; }
.mini:hover { color:var(--wine); }
.add-area { margin-top:.35rem; }
.add-block { width:100%; padding:.9rem; border:1px dashed #b9aa99; border-radius:9px; color:var(--wine); background:transparent; }
.block-options { margin-top:.65rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.block-options button { background:var(--soft); border:0; border-radius:8px; padding:.65rem .4rem; color:var(--ink); }
.block-options span { color:var(--wine); display:block; font:1.2rem Georgia,serif; }
.help-panel { padding-top:4rem; }
.help-panel h2, .modal h2 { font:500 2rem/1.12 Georgia,serif; margin:.15rem 0 1rem; }
.help-panel > p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.tip { margin-top:1.4rem; border-left:2px solid var(--wine); padding:.7rem .9rem; background:rgba(238,229,217,.6); font-size:.9rem; line-height:1.45; }
.tip span { color:var(--wine); }
.viewer-view { min-height:calc(100vh - 68px); padding:2.3rem 1rem; display:grid; place-items:center; }
.back-link { justify-self:start; margin-left:max(1rem,calc((100vw - 920px)/2)); border:0; background:transparent; color:var(--wine); }
.viewer-phone { width:min(100%,400px); margin:1rem auto; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--cream); box-shadow:0 18px 60px rgba(36,27,28,.14); }
.viewer-top { display:flex; justify-content:space-between; padding:1.1rem 1.2rem .75rem; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:var(--muted); }
.progress-track { background:var(--soft); height:3px; margin:0 1.2rem; }.progress-track span { display:block; height:100%; background:var(--wine); width:20%; transition:width .25s; }
.viewer-card { min-height:440px; padding:3.3rem 1.6rem 1.5rem; display:flex; flex-direction:column; }.viewer-card .viewer-kicker { color:var(--wine); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; }.viewer-card h1 { font:500 2.35rem/1.04 Georgia,serif; margin:.8rem 0 1rem; }.viewer-card p { line-height:1.6; margin:0; }.viewer-card .viewer-quote { margin-top:1.6rem; padding:1rem; border-left:2px solid var(--wine); background:var(--soft); font:1.08rem/1.45 Georgia,serif; }.viewer-card .viewer-media { margin-top:1.5rem; border-radius:9px; background:var(--ink); min-height:130px; color:var(--cream); display:grid; place-items:center; font-size:1.8rem; }.viewer-card .viewer-link { margin-top:1.5rem; border:1px solid var(--line); border-radius:9px; padding:.85rem; color:var(--wine); }
.viewer-controls { display:flex; gap:.7rem; padding:1rem 1.2rem 1.2rem; }.viewer-controls .button { flex:1; }
.voice-note { margin-top:1.4rem; display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid var(--line); border-radius:10px; font-size:.86rem; }.play-note { width:2rem; height:2rem; border:0; border-radius:50%; background:var(--wine); color:var(--cream); }.voice-note i { flex:1; height:3px; background:linear-gradient(90deg,var(--wine) 35%,var(--soft) 35%); }.answer-options { display:grid; gap:.55rem; margin-top:1.2rem; }.answer-options button { padding:.75rem .8rem; text-align:left; border:1px solid var(--line); border-radius:8px; background:var(--cream); color:var(--ink); }.answer-options button.selected { border-color:var(--wine); background:var(--soft); color:var(--wine); }.answer-input { margin-top:1.15rem; min-height:100px; padding:.75rem; border:1px solid var(--line); border-radius:8px; background:var(--cream); color:var(--ink); }.save-answer { margin-top:.55rem; border:0; padding:.6rem .75rem; border-radius:7px; background:var(--wine); color:var(--cream); }
.modal-backdrop { position:fixed; inset:0; background:rgba(36,27,28,.45); display:grid; place-items:center; padding:1rem; z-index:4; }.modal { width:min(100%,440px); background:var(--cream); border-radius:12px; padding:1.7rem; box-shadow:0 20px 80px rgba(0,0,0,.2); }.modal p { color:var(--muted); line-height:1.5; }.share-url { background:var(--soft); padding:.85rem; border-radius:7px; margin:1.1rem 0; color:var(--wine); overflow-wrap:anywhere; }.publish-options { display:grid; gap:.65rem; margin:1rem 0; }.publish-choice { display:flex; gap:.7rem; padding:.8rem; border:1px solid var(--line); border-radius:8px; cursor:pointer; }.publish-choice input { margin-top:.25rem; accent-color:var(--wine); }.publish-choice strong,.publish-choice small { display:block; }.publish-choice small { color:var(--muted); margin-top:.16rem; line-height:1.4; }.password-setting { display:flex; gap:.55rem; align-items:center; font-size:.9rem; margin:1rem 0; }.password-setting input { accent-color:var(--wine); }.password-row label { display:block; font-size:.8rem; color:var(--muted); margin-bottom:.35rem; }.password-row input { width:100%; border:1px solid var(--line); border-radius:8px; padding:.65rem; background:var(--paper); }.text-button { display:block; width:100%; border:0; background:transparent; color:var(--muted); margin-top:.7rem; padding:.45rem; }
.access-gate { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:1.2rem; background:var(--paper); }.access-card { width:min(100%,360px); padding:2rem; border:1px solid var(--line); border-radius:14px; background:var(--cream); box-shadow:0 18px 60px rgba(36,27,28,.11); }.access-card h1 { margin:.1rem 0 .75rem; font:500 2.25rem Georgia,serif; letter-spacing:.04em; }.access-card p:not(.eyebrow) { color:var(--muted); line-height:1.5; margin:0 0 1.2rem; }.access-card label { display:block; margin:1rem 0 .4rem; font-size:.82rem; color:var(--muted); }.access-card input { width:100%; border:1px solid var(--line); border-radius:8px; padding:.7rem .8rem; background:var(--paper); }.access-card .button { width:100%; margin-top:1rem; }.access-error { color:var(--wine) !important; font-size:.85rem; margin: .7rem 0 0 !important; }
@media (max-width:900px) { .workspace { grid-template-columns:170px minmax(0,1fr); gap:1.5rem; }.help-panel { display:none; } }
@media (max-width:620px) {
  html, body { width:100%; overflow-x:hidden; }
  .topbar { height:62px; padding:0 .8rem; gap:.45rem; }
  .brand { font-size:clamp(.9rem,4.35vw,1rem); gap:.36rem; overflow:hidden; white-space:nowrap; flex:1 1 auto; }
  .brand span { overflow:hidden; text-overflow:ellipsis; }
  .brand-icon { width:25px; height:25px; border-radius:7px; flex:0 0 auto; }
  .save-status, .sidebar { display:none; }
  .topbar-actions { gap:.32rem; }
  .topbar-actions .button { padding:.52rem .55rem; font-size:.86rem; }
  #responses-button { display:none; }
  .workspace { display:block; width:100%; padding:1.45rem 1rem 2.2rem; }
  .editor { width:100%; }
  .editor-intro { margin-bottom:1.8rem; }
  .stream-title-input { font-size:clamp(1.95rem,9vw,2.35rem); line-height:1.05; }
  textarea { font-size:.95rem; min-height:72px; }
  .editor-label-row { font-size:.7rem; }
  .blocks { gap:.6rem; }
  .block { padding:.72rem; grid-template-columns:31px minmax(0,1fr) auto; gap:.58rem; }
  .block-icon { height:31px; font-size:1.1rem; }
  .block-main strong { font-size:1rem; }
  .block-main span { font-size:.76rem; }
  .block-actions { gap:0; }
  .mini { padding:.25rem .27rem; font-size:.8rem; }
  .add-block { padding:.82rem; }
  .block-options { grid-template-columns:repeat(2,1fr); }
  .template-picker { margin:-.8rem 0 1.65rem; }.template-options { display:grid; grid-template-columns:1fr; }
  .viewer-view { padding:1.2rem .7rem; }.back-link { margin-left:.3rem; }.viewer-card { min-height:400px; padding-top:2.5rem; }
}
@media (max-width:390px) { .brand span { display:none; } .topbar-actions .button { padding:.5rem .52rem; } }

.responses-list { display:grid; gap:.7rem; max-height:52vh; overflow:auto; padding-right:.15rem; }
.response-item { border:1px solid var(--line); border-radius:9px; padding:.8rem; }
.response-item strong { display:block; font:500 1rem Georgia,serif; }
.response-item p { color:var(--ink) !important; margin:.45rem 0 0 !important; white-space:pre-wrap; }
.response-meta { color:var(--muted); font-size:.75rem; margin-top:.4rem; }
.empty-responses { color:var(--muted); margin:0; }