:root { --bg:#2c2f31; --fg:#e8e8ea; --muted:#b7b7bf; --accent:#e5d1a1; --panel:#1f2123; --border:#d9d9d9; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#1b1d1f;color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Layout: sidebar + workspace */
.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 12px;
  height: 100vh;
}

/* Sidebar */
.sidebar{
  background:#141516;
  border-right:1px solid #2a2d2f;
  padding:10px 10px 14px;
  overflow:auto;
}
.brand-block{display:flex;gap:10px;align-items:center;margin:6px 0 12px}
.brand-logo{width:84px;height:84px;object-fit:cover;border-radius:8px;border:2px solid var(--accent);background:#fff}
.brand-text h1{margin:0;font-size:20px}
.tagline{margin:2px 0 0;color:#ddd;font-style:italic}
.version{color:#c9c9c9}

.side-buttons{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.side-btn{background:#d8d2c6;color:#1b1b1b;border:2px solid #b8aea0;border-radius:6px;padding:10px;font-weight:600;cursor:pointer}
.side-btn:hover{filter:brightness(0.95)}

.stats-box{background:#222427;border:1px solid #32363a;border-radius:8px;padding:10px;color:#fff;margin-bottom:14px}
.stats-box strong{color:#f2f2f2}

.side-quote{background:#222427;border:1px solid #32363a;border-radius:8px;padding:10px;color:#eaeaea}
.side-image{width:100%;height:120px;object-fit:cover;border-radius:6px;margin:4px 0 10px}
.side-quote blockquote{margin:0;font-style:italic;color:#ddd}
.shuffle{margin-top:8px;background:#2a2d31;color:#fff;border:1px solid #3a3f44;border-radius:6px;padding:6px 10px;cursor:pointer}
.shuffle:hover{border-color:#6b7280}

/* Workspace (right) */
.workspace{display:flex;flex-direction:column;min-width:0}

/* Welcome */
.welcome{background:#1f2123;border:1px solid #2c2f33;border-radius:10px;padding:12px;margin-bottom:12px}
.welcome .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.muted{color:var(--muted);margin:0}

/* Prep bar */
.prepbar{
  display:grid;
  /* three columns: word goal | time goal | filename */
  grid-template-columns: 140px 160px 1fr;
  grid-template-areas:
    "goal time filename"
    "prompt prompt prompt"
    "buttons buttons buttons";
  gap:10px;align-items:end;background:#1f2123;border:1px solid #2c2f33;border-radius:10px;padding:12px;margin-bottom:12px
}
.field{display:flex;flex-direction:column;gap:6px}
.field:nth-child(1){grid-area:goal}
.field:nth-child(2){grid-area:time}
.field:nth-child(3){grid-area:filename}
.span2{grid-area:prompt}
.buttons{grid-area:buttons;display:flex;gap:10px;justify-content:flex-end}
label{color:var(--muted);font-size:20px}
input[type=number],textarea,input[type=text]{width:100%;background:#0f1113;color:var(--fg);border:1px solid #2b2f34;border-radius:8px;padding:10px}

/* Editor frame with border like screenshot */
.editor-frame{
  background:#2e3236;
  border: 10px solid #131517;     /* thick outer */
  outline: 2px solid #cfcfcf;     /* light inner like screenshot */
  border-radius: 6px;
  padding: 10px;
  display:flex;flex-direction:column;gap:10px;
  flex:1;min-height:0;
}
.top-stats{display:flex;gap:12px;color:#ddd;flex-wrap:wrap;align-items:center}
.progress{height:8px;background:#1a1d20;border-radius:999px;overflow:hidden}
.bar{height:100%;width:0%;background:#9fd3ff;transition:width .2s ease}

#writer {
  width: 100%;
  flex: 1;
  min-height: 300px;
  resize: none;
  background: #2e3236;
  color: #f2f2f2;
  border: 1px solid #444a50;
  border-radius: 6px;
  padding: 14px;
  outline: none;
  
  /* Force font for typing area */
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;   /* visibly larger than body text */
  line-height: 1.6;
}

#writer:focus{border-color:#b7d4ff}
#writer:disabled{opacity:.7;cursor:not-allowed}

.controls{display:flex;gap:10px;flex-wrap:wrap}
button{background:#2a2d31;color:#fff;border:1px solid #3a3f44;border-radius:8px;padding:8px 12px;cursor:pointer}
button:hover{border-color:#6b7280}

/* Modal + Toast */
.hidden{display:none !important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10}
.modal-body{background:#16181a;border:1px solid #2c2f33;border-radius:10px;padding:16px;max-width:720px;width:92%}
.modal .p{white-space:pre-wrap;margin:8px 0 6px}
.modal .meta{color:#c9c9c9;font-style:italic;white-space:pre-wrap}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1d1f22;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transition:opacity .2s ease;border:1px solid #2a2f35;z-index:11}
.toast.show{opacity:1}