:root {
    --bg: #1a1a2e; --surface: #16213e; --surface2: #1e1e3a;
    --border: #2a2a4a; --border-hi: #3b2d6b;
    --text: #e0e0e0; --text-muted: #a0a0b8; --text-dim: #6b6b8a;
    --text-label: #c8c8d8; --text-card: #d0d0e0;
    --accent: #7c3aed; --accent-dark: #6d28d9; --accent-deep: #5b21b6;
    --accent-soft: rgba(124,58,237,.15); --accent-glow: rgba(124,58,237,.4);
    --inter: #a78bfa; --inter-bg: #1e1845; --inter-border: #3b2d6b;
    --inter-active-bg: linear-gradient(135deg,#3b2d6b 0%,#2d1b69 100%);
    --active-bg: linear-gradient(135deg,#2d1b69 0%,#1e1145 100%);
    --toggle-on-bg: #2a2415; --toggle-on-border: #f59e0b;
    --hint-bg: #1a1a35; --hint-border: #3b2d6b; --hint-text: #a78bfa; --hint-title: #c4b5fd;
    --output-bg: #121228; --char-bg: #1e1e3a;
    --warning: #f87171; --success: #059669;
    --shadow1: 0 1px 3px rgba(0,0,0,.4),0 2px 6px 1px rgba(0,0,0,.25);
    --shadow2: 0 2px 6px rgba(0,0,0,.4),0 6px 16px 4px rgba(124,58,237,.1);
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f4f4f8; --surface: #ffffff; --surface2: #f0f0f6;
      --border: #d4d4e8; --border-hi: #c4b5fd;
      --text: #1a1a2e; --text-muted: #5a5a7a; --text-dim: #9090b0;
      --text-label: #3a3a5a; --text-card: #2a2a4a;
      --accent: #7c3aed; --accent-dark: #6d28d9; --accent-deep: #5b21b6;
      --accent-soft: rgba(124,58,237,.15); --accent-glow: rgba(124,58,237,.4);
      --inter: #6d28d9; --inter-bg: #f3e8ff; --inter-border: #ddd6fe;
      --inter-active-bg: linear-gradient(135deg,#e9d5ff 0%,#f3e8ff 100%);
      --active-bg: linear-gradient(135deg,#ede9fe 0%,#f5f3ff 100%);
      --toggle-on-bg: #fef3c7; --toggle-on-border: #f59e0b;
      --hint-bg: #f3e8ff; --hint-border: #ddd6fe; --hint-text: #6d28d9; --hint-title: #5b21b6;
      --output-bg: #ffffff; --char-bg: #f0f0f6;
      --shadow1: 0 1px 3px rgba(0,0,0,.08),0 2px 6px 1px rgba(0,0,0,.04);
      --shadow2: 0 2px 6px rgba(0,0,0,.08),0 6px 16px 4px rgba(124,58,237,.05);
    .output-box { box-shadow: inset 0 0 0 1px rgba(124,58,237,.2), 0 2px 4px rgba(0,0,0,.05); }
    }
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { height:100%; }
  body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:1rem; line-height:1.5; }
  .container { max-width:900px; margin:0 auto; padding:2rem 1rem; }
  .header { margin-bottom:2.5rem; text-align:center; position:relative; }

  /* Core/Pro toggle */
  .pro-toggle { display:inline-flex; margin-left:1rem; }
  .pro-toggle-btn { background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:0.3rem; cursor:pointer; display:flex; gap:0; position:relative; min-width:100px; }
  .pro-label-core, .pro-label-pro { padding:0.25rem 0.75rem; border-radius:16px; font-size:0.75rem; font-weight:600; transition:all 0.2s; color:var(--text-muted); }
  .pro-label-core { background:var(--accent); color:#fff; }
  .pro-label-pro { background:transparent; }
  .pro-toggle-btn[aria-pressed="true"] .pro-label-core { background:transparent; color:var(--text-muted); }
  .pro-toggle-btn[aria-pressed="true"] .pro-label-pro { background:var(--accent); color:#fff; }
  .header h1 { font-size:2rem; margin-bottom:0.5rem; }
  .header p { color:var(--text-muted); font-size:0.95rem; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2rem; margin-bottom:2rem; box-shadow:var(--shadow1); }
  .input-section { margin-bottom:1.75rem; }
  .section-label { font-weight:600; color:var(--accent); margin-bottom:1rem; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.5px; }
  .section-label.interdisciplinar { color:var(--inter); }
  label { display:block; margin-bottom:0.6rem; font-weight:500; color:var(--text-label); }
  input[type="text"], textarea { width:100%; padding:0.75rem 1rem; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:inherit; font-size:1rem; transition:all 0.2s; }
  input[type="text"]:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  textarea { resize:vertical; }
  input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 1; }
  .recommended-badge { color:var(--accent); font-size:0.85rem; font-weight:normal; }
  #sourceTipBox { display:none; margin-top:0.6rem; padding:0.75rem 1rem; background:rgba(5,150,105,0.08); border:1px solid rgba(5,150,105,0.25); border-radius:8px; font-size:0.82rem; color:var(--success); line-height:1.6; }
  #sourceTipTitle { font-weight:600; margin-bottom:0.35rem; color:var(--success); }
  #focusHintBox { display:none; margin-top:0.6rem; padding:0.75rem 1rem; background:var(--hint-bg); border:1px solid var(--hint-border); border-radius:8px; font-size:0.82rem; color:var(--hint-text); line-height:1.6; }
  #focusHintTitle { font-weight:600; margin-bottom:0.35rem; color:var(--hint-title); }

  /* Source type guidance */
  .source-type-details { margin-bottom:1rem; }
  .source-type-details summary { cursor:pointer; color:var(--text-muted); font-weight:500; padding:0.5rem 0.75rem; background:var(--surface2); border-radius:6px; font-size:0.85rem; transition:all 0.2s; user-select:none; }
  .source-type-details summary:hover { color:var(--accent); }
  .source-type-details summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .source-type-content { padding:0.75rem 1rem; margin-top:0.5rem; font-size:0.82rem; color:var(--text-muted); line-height:1.6; }
  .source-type-list { font-weight:500; color:var(--text-card); margin:0.35rem 0; }
  .source-type-limit { font-style:italic; margin-top:0.35rem; }

  /* Template selection banner */
  #templateBanner { display:none; background:var(--accent-soft); border:1px solid var(--accent); border-radius:8px; padding:0.75rem 1rem; margin-bottom:1.25rem; font-size:0.95rem; color:var(--text); }
  #templateBanner.active { display:flex; align-items:center; justify-content:space-between; }
  #bannerLabel { font-weight:500; }
  #deselectBtn { background:var(--accent); color:#fff; border:none; padding:0.4rem 0.8rem; border-radius:4px; cursor:pointer; font-size:0.85rem; transition:all 0.2s; }
  #deselectBtn:hover { background:var(--accent-dark); }
  #deselectBtn:focus-visible { outline:2px solid var(--text); outline-offset:2px; }

  .templates { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
  .template-btn { background:var(--surface2); border:2px solid var(--border); border-radius:8px; padding:1rem; text-align:center; cursor:pointer; transition:all 0.2s; position:relative; }
  .template-btn[data-template-id] { font-weight:500; color:var(--text-card); }
  .template-btn:hover { border-color:var(--accent); background:var(--surface2); }
  .template-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .template-btn.active { border-color:var(--accent); background:var(--active-bg); box-shadow:0 0 0 3px var(--accent-soft); }
  .template-btn .icon { font-size:1.5rem; margin-bottom:0.5rem; display:block; }
  .template-btn .label { font-size:0.85rem; }
  .template-btn .hint-badge { position:absolute; top:0.35rem; right:0.35rem; font-size:0.75rem; }

  details { margin-bottom:1.5rem; }
  details summary { cursor:pointer; color:var(--accent); font-weight:500; padding:0.75rem; background:var(--surface2); border-radius:6px; transition:all 0.2s; user-select:none; }
  details summary:hover { background:var(--border-hi); }
  details summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  details[open] summary { margin-bottom:1rem; }
  details .templates { margin-top:1rem; }

  .toggle-row { display:flex; align-items:center; gap:1rem; padding:1rem; background:var(--surface2); border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all 0.2s; margin-bottom:1rem; }
  .toggle-row:hover { border-color:var(--accent); }
  .toggle-row:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
  .toggle-switch { width:2rem; height:1.125rem; background:var(--border); border-radius:1rem; position:relative; flex-shrink:0; transition:all 0.3s; }
  .toggle-switch.active { background:var(--accent); }
  .toggle-knob { width:0.875rem; height:0.875rem; background:#fff; border-radius:50%; position:absolute; top:0.125rem; left:0.125rem; transition:all 0.3s; }
  .toggle-switch.active .toggle-knob { transform:translateX(0.875rem); }
  .toggle-label { font-weight:500; color:var(--text-card); flex:1; }
  .toggle-desc { color:var(--text-muted); font-size:0.85rem; }

  .button-group { display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
  .generate-btn, .reset-btn, .preview-btn, .back-btn { padding:0.75rem 1.5rem; border:none; border-radius:8px; font-weight:600; cursor:pointer; transition:all 0.2s; font-size:1rem; min-height:44px; }
  .generate-btn { background:var(--accent); color:#fff; flex:1; min-width:200px; }
  .generate-btn:hover { background:var(--accent-dark); }
  .generate-btn:focus-visible { outline:2px solid var(--accent-glow); outline-offset:2px; }
  .reset-btn { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
  .reset-btn:hover { background:var(--border); }
  .reset-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .preview-btn { background:var(--accent); color:#fff; }
  .preview-btn:hover { background:var(--accent-dark); }
  .preview-btn:focus-visible { outline:2px solid var(--accent-glow); outline-offset:2px; }
  .back-btn { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
  .back-btn:hover { background:var(--border); }
  .back-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

  #outputSection { display:none; }
  .output-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
  .output-header h3 { font-size:1.1rem; }
  .copy-btn { background:var(--accent); color:#fff; border:none; padding:0.6rem 1.2rem; border-radius:8px; cursor:pointer; transition:all 0.2s; font-weight:500; min-height:40px; display:flex; gap:0.5rem; align-items:center; }
  .copy-btn:hover { background:var(--accent-dark); }
  .copy-btn:focus-visible { outline:2px solid var(--accent-glow); outline-offset:2px; }
  .copy-btn.copied { background:var(--success); }
  .output-box { background:var(--output-bg); border:1px solid var(--border); border-radius:8px; padding:1.5rem; font-size:0.95rem; line-height:1.7; white-space:pre-wrap; word-wrap:break-word; max-height:500px; overflow-y:auto; color:var(--text-card); }
  .char-count { margin-top:1rem; padding:0.75rem 1rem; background:var(--char-bg); border-radius:6px; font-size:0.85rem; }
  .char-count.warn { color:var(--warning); }
  .char-count.caution { color:#eab308; }
  .char-count.good { color:var(--success); }

  /* Recent prompts section */
  #recentPromptsSection { margin-top:2rem; display:none; }
  #recentPromptsList { margin-top:1rem; }
  .recent-prompt-item { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:1rem; margin-bottom:0.75rem; cursor:pointer; transition:all 0.2s; }
  .recent-prompt-item:hover { border-color:var(--accent); background:var(--border-hi); }
  .recent-prompt-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .recent-prompt-meta { display:flex; justify-content:space-between; font-size:0.85rem; color:var(--text-muted); }
  .recent-prompt-template { font-weight:500; color:var(--text); margin-bottom:0.35rem; }
  .recent-prompt-preview { font-size:0.8rem; color:var(--text-dim); margin-top:0.35rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Preview modal */
  #previewModal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center; }
  #previewModal.active { display:flex; }
  .preview-content { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2rem; max-width:600px; max-height:80vh; overflow-y:auto; box-shadow:var(--shadow2); }
  .preview-content h2 { margin-bottom:1rem; color:var(--accent); }
  .preview-content p { margin-bottom:1rem; line-height:1.7; color:var(--text); }
  .preview-meta { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:0.75rem 1rem; margin:1.5rem 0; font-size:0.85rem; }
  .preview-buttons { display:flex; gap:1rem; margin-top:2rem; }
  .preview-buttons button { flex:1; }

  /* Character count live update */
  .char-indicator { display:inline-block; padding:0.2rem 0.5rem; border-radius:3px; font-size:0.8rem; margin-left:0.5rem; font-weight:500; }
  .char-indicator.good { background:rgba(5,150,105,0.2); color:var(--success); }
  .char-indicator.warn { background:rgba(234,179,8,0.2); color:#eab308; }
  .char-indicator.bad { background:rgba(248,113,113,0.2); color:var(--warning); }

  @keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

  /* Toast notifications */
  #toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; padding:1rem 1.5rem; border-radius:8px; box-shadow:var(--shadow2); display:none; opacity: 0; z-index:2000; max-width:400px; text-align:center; transition: opacity 0.3s ease, transform 0.3s ease; }
  #toast.show { display:block; opacity: 1; animation: fadeIn 0.3s ease forwards; }
  #toast.error { background:var(--warning); }
  #toast.success { background:var(--success); }

  /* Persona section */
  .persona-section { margin-bottom:1.75rem; }
  .persona-section label { font-weight:600; font-size:0.95rem; display:block; margin-bottom:0.5rem; }
  .persona-buttons { display:flex; gap:0.5rem; flex-wrap:wrap; }
  .persona-btn { background:var(--surface2); border:2px solid var(--border); border-radius:8px; padding:0.5rem 0.9rem; cursor:pointer; transition:all 0.2s; font-size:0.82rem; font-weight:500; color:var(--text-card); min-height:38px; }
  .persona-btn:hover { border-color:var(--accent); }
  .persona-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .persona-btn.active { border-color:var(--accent); background:var(--active-bg); color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .persona-btn.pro-only { opacity:0.5; cursor:not-allowed; }
  .persona-btn.pro-only:hover { border-color:var(--border); }
  body.pro-mode .persona-btn.pro-only { opacity:1; cursor:pointer; }
  body.pro-mode .persona-btn.pro-only:hover { border-color:var(--accent); }

  .output-mode-section { margin-bottom:1.75rem; }
  .output-mode-buttons { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem; }
  .output-mode-btn { background:var(--surface2); border:2px solid var(--border); border-radius:8px; padding:0.6rem 1rem; cursor:pointer; transition:all 0.2s; font-size:0.85rem; font-weight:500; color:var(--text-card); min-height:40px; }
  .output-mode-btn:hover { border-color:var(--accent); }
  .output-mode-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .output-mode-btn.active { border-color:var(--accent); background:var(--active-bg); color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

  /* Pro-only output modes */
  .output-mode-btn.pro-only { opacity:0.5; cursor:not-allowed; position:relative; }
  .output-mode-btn.pro-only:hover { border-color:var(--border); }
  .pro-badge { font-size:0.6rem; font-weight:700; background:var(--accent); color:#fff; padding:0.1rem 0.35rem; border-radius:4px; margin-left:0.3rem; vertical-align:middle; letter-spacing:0.5px; }
  body.pro-mode .output-mode-btn.pro-only { opacity:1; cursor:pointer; }
  body.pro-mode .output-mode-btn.pro-only:hover { border-color:var(--accent); }
  body.pro-mode .pro-badge { display:none; }

  .audio-formats { display:none; margin-top:0.75rem; padding:0.75rem; background:var(--hint-bg); border:1px solid var(--hint-border); border-radius:8px; }
  .audio-formats.visible { display:block; }
  .audio-format-buttons { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem; }
  .audio-format-btn { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:0.4rem 0.8rem; cursor:pointer; transition:all 0.2s; font-size:0.8rem; color:var(--text-card); }
  .audio-format-btn:hover { border-color:var(--accent); }
  .audio-format-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .audio-format-btn.active { border-color:var(--inter); background:var(--inter-bg); color:var(--inter); }

  /* Mobile responsive */
  @media(max-width:768px){
    .container { padding:1rem 0.75rem; }
    .card { padding:1.5rem; }
    .header h1 { font-size:1.5rem; }
    .templates { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.75rem; }
    .template-btn { padding:0.75rem; }
    .template-btn .icon { font-size:1.25rem; margin-bottom:0.35rem; }
    .template-btn .label { font-size:0.75rem; }
    .button-group { flex-direction:column; }
    .generate-btn, .reset-btn, .preview-btn, .back-btn { width:100%; }
    input[type="text"], textarea { font-size:16px; }
    .persona-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; }
    .persona-btn { min-height:44px; font-size:0.78rem; padding:0.5rem; }
    .output-mode-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; }
    .output-mode-btn { min-height:44px; font-size:0.8rem; padding:0.5rem; }
    .audio-format-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; }
    .audio-format-btn { min-height:44px; font-size:0.75rem; padding:0.5rem; }
  }
  @media(max-width:480px){
    .templates { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
    .lang-switcher { position:static; margin-bottom:1rem; justify-content:center; }
    .header { margin-bottom:2rem; }

    .preview-content { max-width: calc(100vw - 2rem); margin: 1rem; }
  }

  /* Tab navigation */
  .tab-nav { display:flex; gap:0; margin-bottom:2rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:0.3rem; box-shadow:var(--shadow1); }
  .tab-btn { flex:1; background:transparent; border:none; padding:0.7rem 1rem; font-size:0.95rem; font-weight:600; color:var(--text-muted); cursor:pointer; border-radius:8px; transition:all 0.2s; min-height:44px; }
  .tab-btn:hover:not(.active) { color:var(--text); background:var(--surface2); box-shadow:inset 0 0 0 1px var(--border-hi); }
  .tab-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .tab-btn.active { background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(124,58,237,0.3); }
  .tab-btn.active:hover { background:var(--accent-dark); }

  /* Planner */
  .planner-subtitle { color:var(--text-muted); margin-bottom:1.5rem; line-height:1.6; }

  /* Workflow grid */
  .workflow-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
  .workflow-card { background:var(--surface2); border:2px solid var(--border); border-radius:10px; padding:1.25rem; text-align:left; cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; gap:0.5rem; }
  .workflow-card:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .workflow-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .workflow-card-icon { font-size:1.75rem; }
  .workflow-card-label { font-weight:600; font-size:1rem; color:var(--text); }
  .workflow-card-desc { font-size:0.82rem; color:var(--text-muted); line-height:1.5; }
  .workflow-card-steps { font-size:0.75rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:auto; padding-top:0.5rem; }

  /* Workflow detail */
  .workflow-back-btn { background:none; border:none; color:var(--accent); cursor:pointer; font-size:0.9rem; font-weight:500; padding:0; margin-bottom:1rem; transition:color 0.2s; }
  .workflow-back-btn:hover { color:var(--accent-dark); }
  .workflow-back-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .workflow-export-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text-card); padding:0.5rem 1rem; border-radius:6px; cursor:pointer; font-size:0.85rem; font-weight:500; transition:all 0.2s; margin-bottom:1.5rem; }
  .workflow-export-btn:hover { border-color:var(--accent); color:var(--accent); }
  .workflow-export-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

  /* Workflow steps timeline */
  .workflow-steps { display:flex; flex-direction:column; gap:0; }
  .workflow-step { display:flex; gap:1rem; }
  .step-timeline { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:2.5rem; }
  .step-dot { width:2rem; height:2rem; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; flex-shrink:0; }
  .step-line { width:2px; flex:1; background:var(--border); min-height:1.5rem; }
  .step-content { flex:1; padding-bottom:1.5rem; }
  .step-title { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:0.5rem; }
  .step-instructions { font-size:0.88rem; color:var(--text-muted); line-height:1.6; margin-bottom:0.75rem; }
  .step-meta { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.75rem; }
  .step-tag { font-size:0.72rem; padding:0.25rem 0.6rem; border-radius:4px; background:var(--surface2); border:1px solid var(--border); color:var(--text-card); white-space:nowrap; }
  .step-tag-persona { background:var(--hint-bg); border-color:var(--hint-border); color:var(--hint-text); }
  .step-tag-output { background:var(--inter-bg); border-color:var(--inter-border); color:var(--inter); }
  .step-tag-focus { background:rgba(5,150,105,0.08); border-color:rgba(5,150,105,0.25); color:var(--success); white-space:normal; }
  .step-generate-btn { background:var(--accent); color:#fff; border:none; padding:0.5rem 1rem; border-radius:6px; cursor:pointer; font-size:0.85rem; font-weight:600; transition:all 0.2s; min-height:38px; }
  .step-generate-btn:hover { background:var(--accent-dark); }
  .step-generate-btn:focus-visible { outline:2px solid var(--accent-glow); outline-offset:2px; }
  .step-save-tip { margin-top:0.75rem; padding:0.6rem 0.8rem; background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.25); border-radius:6px; font-size:0.78rem; color:#f59e0b; line-height:1.5; }

  /* Phase 5: Cross-source section label */
  .cross-source { color: #f59e0b; }

  /* Phase 5: Template search */
  #templateSearchBox { margin-bottom: 1rem; }
  #templateSearch {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
  }
  #templateSearch:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  #templateSearch::placeholder { color: var(--text-dim); }

  /* Phase 5: Custom persona button */
  .custom-persona { border-style: dashed !important; position: relative; }
  .custom-persona-delete {
    display: inline-block;
    font-size: 0.65rem;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: var(--warning);
    color: #fff;
    cursor: pointer;
    margin-left: 0.3rem;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .custom-persona:hover .custom-persona-delete { opacity: 1; }

  /* Phase 5: Custom persona modal overlay */
  .preview-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
  }
  .preview-modal-overlay .preview-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    width: 90%;
    max-width: 500px;
  }
  .preview-modal-overlay label { display: block; font-size: 0.9rem; color: var(--text-label); margin-top: 0.75rem; }
  .preview-modal-overlay input, .preview-modal-overlay textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.9rem;
    margin-top: 0.3rem;
  }
  .preview-modal-overlay textarea { resize: vertical; }

  /* Phase 5: Favorites section */
  .favorite-item { position: relative; }
  .favorite-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

  /* Phase 5: Output header buttons */
  .output-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .output-header h3 { flex: 1; }

  /* Phase 6: Audience Adapter */
  .audience-section { margin:1.2rem 0; }
  .audience-section label { display:block; font-size:0.95rem; color:var(--text-label); margin-bottom:0.5rem; }
  .audience-buttons { display:flex; flex-wrap:wrap; gap:0.4rem; }
  .audience-btn {
    padding:0.4rem 0.8rem; border-radius:6px; border:1px solid var(--border);
    background:var(--surface2); color:var(--text-card); font-size:0.8rem;
    cursor:pointer; transition:all 0.2s; white-space:nowrap;
  }
  .audience-btn:hover { border-color:var(--accent); color:var(--text); }
  .audience-btn.active {
    background:var(--active-bg); border-color:var(--accent); color:#fff;
    box-shadow:0 0 0 1px var(--accent-glow);
  }

  /* Phase 6: Version badges */
  .version-badge {
    position:absolute; bottom:4px; left:6px;
    font-size:0.6rem; color:var(--text-dim); opacity:0.6;
    pointer-events:none;
  }
  .template-btn { position:relative; }

  /* Phase 6: Keyboard shortcuts */
  .shortcuts-list { margin-top:1rem; }
  .shortcut-row { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--text-card); }
  .shortcut-row:last-child { border-bottom:none; }
  .shortcut-row kbd {
    display:inline-block; padding:0.15rem 0.45rem; border-radius:4px;
    background:var(--surface2); border:1px solid var(--border);
    font-family:monospace; font-size:0.78rem; color:var(--text); min-width:1.5rem; text-align:center;
  }
  .shortcut-row span { margin-left:auto; color:var(--text-muted); font-size:0.85rem; }

  /* UX: Welcome banner */
  .welcome-banner {
    background: linear-gradient(135deg, var(--accent-soft), rgba(124,58,237,0.05));
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
  }
  .welcome-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
  .welcome-title { font-weight: 700; font-size: 1rem; color: var(--text); }
  .welcome-dismiss { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; padding: 0.25rem; line-height: 1; border-radius: 4px; }
  .welcome-dismiss:hover { color: var(--text); background: var(--surface2); }
  .welcome-text { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0.75rem; }
  .welcome-steps { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .welcome-step-chip { font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 6px; background: var(--accent); color: #fff; }
  .welcome-arrow { color: var(--text-dim); font-size: 0.85rem; }

  /* UX: Progress tracker */
  .progress-tracker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow1);
  }
  .progress-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.45;
    transition: all 0.3s;
  }
  .progress-step.active { opacity: 1; }
  .progress-step.completed { opacity: 0.8; }
  .progress-dot {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    transition: all 0.3s;
    flex-shrink: 0;
  }
  .progress-step.active .progress-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
  .progress-step.completed .progress-dot { background: var(--success); color: #fff; }
  .progress-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); transition: color 0.3s; }
  .progress-step.active .progress-label { color: var(--accent); }
  .progress-step.completed .progress-label { color: var(--success); }
  .progress-connector { width: 2.5rem; height: 2px; background: var(--border); margin: 0 0.35rem; transition: background 0.3s; flex-shrink: 0; }
  .progress-connector.active { background: var(--success); }

  /* UX: Step sections */
  .step-section { margin-bottom: 1rem; margin-top: 0.5rem; }
  .step-section:first-child { margin-top: 0; }
  .step-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
  .step-badge {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .step-title-text { font-weight: 700; font-size: 1.05rem; color: var(--text); }
  .step-helper { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.75rem; padding-left: 2.1rem; }

  /* UX: Field-level helper text */
  .field-helper { font-size: 0.8rem; color: var(--text-dim); line-height: 1.45; margin: -0.25rem 0 0.5rem 0; }

  /* UX: Optional settings collapsible */
  .optional-settings { margin: 1.25rem 0; }
  .optional-settings-summary {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.6rem 0.85rem;
    background: var(--surface2);
    border-radius: 6px;
    font-size: 0.88rem;
    transition: all 0.2s;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .optional-settings-summary:hover { color: var(--accent); background: var(--border-hi); }
  .optional-tag {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: var(--border);
    color: var(--text-dim);
  }
  .optional-settings-content { padding: 1rem 0 0 0; }
  .optional-settings[open] .optional-settings-summary { margin-bottom: 0; }

  /* UX: Generate button pulse when ready */
  @keyframes readyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(124,58,237,0); }
  }
  .generate-btn.ready { animation: readyPulse 2s ease-in-out 1; }

  /* UX: Output section success emphasis */
  @keyframes outputReveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  #outputSection.revealed { animation: outputReveal 0.4s ease-out; }

  /* UX: How-to-use hint after output */
  .usage-hint {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #f59e0b;
    line-height: 1.6;
  }
  .usage-hint strong { color: #fbbf24; }

  @media(max-width:768px){
    .workflow-grid { grid-template-columns:1fr; }
    .tab-btn { font-size:0.85rem; padding:0.6rem; }
    .progress-tracker { padding: 0.5rem; gap: 0; }
    .progress-label { display: none; }
    .progress-connector { width: 1.5rem; }
    .welcome-steps { justify-content: center; }
    .step-helper { padding-left: 0; }
    .audience-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  }

  /* Live char budget bar */
  .char-budget-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
  }
  .char-budget-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
  }
  .char-budget-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
    background: var(--success);
  }
  .char-budget-fill.warn { background: #eab308; }
  .char-budget-fill.caution { background: #eab308; }
  .char-budget-fill.bad { background: var(--warning); }
  .char-budget-text {
    font-size: 0.78rem;
    color: var(--text-dim);
    white-space: nowrap;
    min-width: 9rem;
    text-align: right;
  }