* { box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; color:#000; font-family:Verdana,"MS Sans Serif",Arial,sans-serif; font-size:12px; }
header{ display:flex; align-items:center; background:#000080; color:#fff; padding:10px 14px; font-size:22px; font-weight:bold; letter-spacing:2px; border-bottom:3px solid #000; }
.layout{ display:flex; align-items:flex-start; }
.sidebar{ width:390px; min-width:340px; max-width:420px; background:#e8e8e8; border-right:3px solid #808080; padding:12px; height:calc(100vh - 62px); overflow-y:auto; overflow-x:hidden; }
.preview-area{ flex:1; background:#c0c0c0; padding:24px; min-height:calc(100vh - 62px); display:flex; flex-direction:column; align-items:center; }
fieldset{ border:2px groove #fff; background:#f4f4f4; margin-bottom:12px; padding:10px 12px; }
legend{ font-weight:bold; padding:0 5px; background:#e8e8e8; }
label.row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:5px 0; line-height:1.3; flex-wrap:wrap; }
label.row>span:first-child{ flex-shrink:0; max-width:55%; }
.small{ font-size:11px; color:#333; }
input[type=text],input[type=number],select,textarea{ border:2px inset #fff; background:#fff; color:#000; font-family:inherit; font-size:12px; padding:3px 4px; }
input[type=number]{ width:68px; }
input[type=color]{ width:34px; height:22px; border:2px inset #fff; padding:0; cursor:pointer; }
input[type=range]{ flex:1; min-width:0; accent-color:#2255cc; }
select{ cursor:pointer; max-width:100%; }
button{ background:#d6d3ce; border:2px outset #fff; padding:5px 9px; cursor:pointer; font-family:inherit; font-size:12px; color:#000; white-space:nowrap; }
button:hover{ background:#e2ded7; }
button:active{ border-style:inset; }
button.active{ background:#2255cc !important; color:#fff !important; border-style:inset !important; }
.switchrow{ display:flex; gap:4px; flex-wrap:wrap; margin:6px 0; }
.switch-btn{ background:#e2e2e2; border:2px outset #fff; padding:5px 9px; cursor:pointer; font-size:12px; }
.switch-btn:hover{ background:#ececec; }
.switch-btn.active{ background:#2255cc; color:#fff; border-style:inset; font-weight:bold; }
.tabs{ display:flex; gap:3px; margin-bottom:10px; }
.tab-btn{ flex:1; background:#cfcfcf; border:2px outset #fff; padding:9px 4px; cursor:pointer; font-weight:bold; font-size:11px; text-align:center; line-height:1.3; }
.tab-btn:hover{ background:#d8d8d8; }
.tab-btn.active{ background:#2255cc; color:#fff; border-style:inset; }
.hidden{ display:none !important; }

/* ── two-line slider layout ─────────────────────────────────── */
label.sl{ display:flex; flex-direction:column; gap:2px; margin:5px 0; }
label.sl .sl-head{ display:flex; justify-content:space-between; align-items:baseline; gap:4px; }
label.sl .sl-body{ display:flex; align-items:center; gap:4px; }
label.sl .sl-body input[type=range]{ flex:1; width:100%; }
.val-badge{ font-weight:bold; color:#2255cc; min-width:44px; text-align:right; font-size:11px; }
.reset-btn{ min-width:24px; max-width:28px; padding:2px 5px; font-size:14px; color:#444; background:#ddd; flex-shrink:0; }

/* ── paper dims row ─────────────────────────────────────────── */
.paper-dims{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.paper-dims label{ display:flex; align-items:center; gap:4px; font-size:11px; }
.paper-dims input{ width:54px; }

/* ── section groups inside fieldset ────────────────── */
.sec-group{ background:#ececec; border:1px solid #d0d0d0; padding:7px 9px; margin:7px 0 3px; border-radius:0; }
.sec-group .sec-label{ margin:0 0 5px; }
.mini-lbl{ font-size:11px; color:#444; flex-shrink:0; white-space:nowrap; }

/* ── script conversion bar ────────────────────── */
.script-bar{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top:5px; }
.script-bar button{ padding:4px 10px; font-size:12px; }

/* ── clear format button ───────────────────── */
.clear-btn{ font-size:11px; padding:4px 7px; color:#666; }

/* ── format bar ─────────────────────────────────────────────── */
.fmt-bar{ display:flex; gap:3px; margin:7px 0 4px; flex-wrap:wrap; align-items:center; }
.fmt-bar button{ min-width:26px; padding:4px 7px; }
.fmt-bar .fmt-b{ font-weight:bold; }
.fmt-bar .fmt-i{ font-style:italic; }
.fmt-bar .fmt-u{ text-decoration:underline; }
.fmt-bar .fmt-s{ text-decoration:line-through; }
.fmt-sep{ width:1px; height:20px; background:#aaa; margin:0 2px; }

/* ── colour bar ─────────────────────────────────────────────── */
.color-bar{ display:flex; gap:5px; flex-wrap:wrap; margin:4px 0; }
.color-group{ display:flex; align-items:center; gap:3px; }
.apply-btn{ font-size:11px; padding:3px 7px; }

/* ── richbar (font-selection row) ──────────────────────────── */
.richbar{ display:flex; gap:4px; margin-bottom:4px; flex-wrap:wrap; align-items:center; }
.richbar select{ flex:1; min-width:0; font-size:11px; }

/* ── case bar ───────────────────────────────────────────────── */
.case-bar{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.case-bar button{ min-width:38px; padding:4px 8px; }

/* ── editor (all three tools, same style) ───────────────────── */
[contenteditable]{
  min-height:70px;
  border:2px inset #fff;
  padding:6px;
  font-size:14px;
  outline:none;
  background:#fff;
  /* subtle shadow → white text stays visible on white bg */
  text-shadow:0 0 3px rgba(0,0,0,0.20);
  word-break:break-word;
}
.tool-input [contenteditable]{ min-height:80px; }

/* ── misc ────────────────────────────────────────────────────── */
.hr{ border-top:1px dashed #999; margin:9px 0; }
.sec-label{ font-size:10px; font-weight:bold; color:#555; text-transform:uppercase; letter-spacing:.5px; margin:7px 0 3px; }
#exportBtn{ width:100%; background:#2255cc; color:#fff; font-weight:bold; font-size:14px; padding:11px; border:2px outset #6f95ee; margin-top:10px; letter-spacing:1px; }
#exportBtn:hover{ background:#2a5fdb; }
#exportBtn:active{ border-style:inset; }
#paperWrap{ background:#fff; box-shadow:3px 3px 0 #000; border:2px solid #000; display:inline-block; line-height:0; transition:border-color .15s,box-shadow .15s; }
#paperWrap.overflow{ border-color:#cc0000; box-shadow:3px 3px 0 #000,0 0 0 2px #cc0000; }
.page-nav{ margin-bottom:10px; display:flex; align-items:center; gap:10px; background:#e8e8e8; border:2px outset #fff; padding:6px 10px; }
.page-nav button{ padding:4px 14px; }

/* ════ MOBILE ══════════════════════════════════════════════════ */
@media (max-width:820px){
  .layout{ flex-direction:column-reverse; } /* preview on top, sidebar below */
  .sidebar{ width:100% !important; max-width:100% !important; min-width:0 !important; height:auto; border-right:none; border-top:3px solid #808080; }
  .preview-area{ min-height:0; padding:10px; width:100%; }
  header{ font-size:16px; padding:8px 12px; }
  #exportBtn{ font-size:13px; }
}
@media (max-width:480px){
  .fmt-bar button{ min-width:22px; padding:3px 5px; font-size:11px; }
  .case-bar button{ min-width:30px; font-size:11px; }
  .switchrow .switch-btn{ padding:4px 7px; font-size:11px; }
  .paper-dims input{ width:46px; }
}