:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --text:#111111;
  --muted:#5f6b7a;
  --border:#d7dde5;
  --accent:#0b6fb8;
  --accent-dark:#0a4d7d;
  --danger:#c62828;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:68px;height:68px;object-fit:contain}
.brand h1{margin:0;font-size:32px}
.brand p{margin:4px 0 0;color:var(--muted);font-style:italic}
.top-actions,.toolbar-actions,.picker-actions,.button-row{display:flex;gap:10px;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:360px 1fr 340px;gap:16px;padding:16px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sidebar,.rightbar{max-height:calc(100vh - 110px);overflow:auto}
section+section{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
h2{margin:0 0 12px;font-size:18px}
label{display:block;margin:10px 0 6px;font-weight:600}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#111}
textarea{resize:vertical}
button{padding:10px 12px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
button.secondary{background:#fff;color:var(--accent);border-color:var(--border)}
button:hover{filter:brightness(.97)}
.editor-panel{min-height:calc(100vh - 110px);display:flex;flex-direction:column}
.editor-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.editor{flex:1;min-height:70vh;border:1px solid var(--border);border-radius:12px;padding:18px;line-height:1.7;background:#fff;white-space:pre-wrap;overflow:auto}
.editor .inline-select,.editor .fill-token,.editor .inline-note{vertical-align:baseline}
.report-header{border:1px solid var(--border);background:#fbfcfd;border-radius:10px;padding:12px;margin-bottom:16px}
.report-header .header-title{font-weight:700;margin-bottom:8px}
.editor .inline-select{width:auto;display:inline;min-width:110px;max-width:320px;padding:2px 28px 2px 8px;margin:0 3px;color:var(--danger);border:1px solid #f0b2b2;background:#fff5f5;border-radius:6px}
.editor .inline-select.done{color:#111;border-color:var(--border);background:#fff}
.editor .fill-token{display:inline-block;min-width:90px;padding:2px 6px;border-bottom:2px solid var(--danger);color:var(--danger);background:#fff7f7;border-radius:4px}
.editor .fill-token.filled{color:#111;border-bottom-color:#9aa7b4;background:#fff}
.inline-note{color:var(--danger);font-weight:600}
.list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.list-item{border:1px solid var(--border);border-radius:10px;padding:10px}
.item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.search-results{max-height:200px;overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.search-hit{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fafbfc;cursor:pointer}
.search-hit:hover{background:#f1f6fb}
.drop-zone{border:2px dashed #b8c7d9;border-radius:12px;padding:16px;text-align:center;background:#fbfdff}
.drop-zone.drag{border-color:var(--accent);background:#f2f8fe}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.spaced{margin-top:16px}
.footer{margin:0 16px 16px;padding:12px;text-align:center;font-size:12px;color:#555;border:1px solid var(--border);border-radius:12px;background:#fafafa}
.preview-dialog{border:none;padding:0;background:transparent;max-width:min(900px,92vw)}
.preview-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;min-width:min(900px,92vw)}
.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.preview-card pre{white-space:pre-wrap;max-height:70vh;overflow:auto;background:#fafafa;padding:14px;border-radius:10px;border:1px solid var(--border)}
@media (max-width: 1280px){.layout{grid-template-columns:1fr}.sidebar,.rightbar{max-height:none}.editor-panel{order:-1}}
@media print{
  body{background:#fff}
  .topbar,.sidebar,.rightbar,.footer,.editor-toolbar{display:none !important}
  .layout{display:block;padding:0}
  .panel{border:none;box-shadow:none;padding:0}
  .editor{border:none;padding:0;min-height:auto}
}

select[multiple]{min-height:120px}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.compact-gap button{padding:8px 10px}

.inline-preview{margin-top:10px;padding:10px;border:1px dashed var(--border);border-radius:10px;background:#fafcff;white-space:pre-wrap;max-height:220px;overflow:auto}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.inline-select.gender-select{min-width:160px;}

/* ── FIX v6: Focus styles for accessibility ────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── FIX v6: Export Dropdown ─────────────────────────────────────────────── */
.export-dropdown { position: relative; display: inline-block; }
.export-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  z-index: 100;
  min-width: 160px;
  overflow: hidden;
}
.export-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  padding: 10px 16px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.export-menu button:hover { background: var(--bg); }
.export-dropdown:focus-within .export-menu,
.export-dropdown:hover .export-menu { display: block; }
.export-trigger { white-space: nowrap; }

/* ── FIX v6: Dark Mode ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --panel: #1a1e2a;
    --text: #e2e8f0;
    --border: #2d3748;
    --muted: #94a3b8;
  }
  body { background: var(--bg); color: var(--text); }
  input, select, textarea { background: #1e2436; color: var(--text); border-color: var(--border); }
  button.secondary { background: #1e2436; color: var(--accent); }
  .report-header { background: #1a1e2a; }
  .editor { background: #1e2436; color: var(--text); }
  .search-hit { background: #1e2436; }
  .search-hit:hover { background: #252d40; }
  .drop-zone { background: #1e2436; border-color: #3a4a60; }
  .footer { background: #1a1e2a; }
  .preview-card { background: #1a1e2a; }
  .preview-card pre { background: #13161f; }
  .inline-preview { background: #1a1e2a; }
  .export-menu { background: #1a1e2a; }
}