/* ============================================================
   LF Poster Maker — Brand Tokens & Editor Chrome
   Leadership Factory brand system: cream editorial + dark luxury
   ============================================================ */

/* ---------- LF brand color system (from LF-brand-design) ---------- */
:root{
  /* light / cream editorial (default) */
  --lf-cream:#F4EFE6; --lf-cream-deep:#ECE5D7; --lf-paper:#FAF7F1;
  --lf-espresso:#2A1E17; --lf-walnut:#5C4433; --lf-ink:#1A1410;
  --lf-brick:#A43A2A; --lf-brick-soft:#C85842;
  --lf-ochre:#C69A52; --lf-sand:#D9CDB6; --lf-rule:#C9BEA7; --lf-muted:#7A6A58;

  --font-serif:"Instrument Serif",Georgia,"Noto Serif SC",serif;
  --font-sans:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ---------- Poster theme tokens: scoped to .poster ---------- */
/* Light theme (cream editorial) */
.poster[data-theme="light"]{
  --bg:var(--lf-cream);
  --bg-soft:var(--lf-cream-deep);
  --bg-card:rgba(255,255,255,.42);
  --paper:var(--lf-paper);
  --fg-strong:var(--lf-ink);
  --fg:var(--lf-espresso);
  --fg-muted:var(--lf-walnut);
  --fg-faint:var(--lf-muted);
  --rule:var(--lf-rule);
  --rule-strong:rgba(92,68,51,.42);
  --accent:var(--lf-brick);
  --accent-soft:var(--lf-brick-soft);
  --gold:var(--lf-ochre);
  --grid:rgba(92,68,51,.10);
}
/* Blue theme (商务蓝 — navy professional) */
.poster[data-theme="blue"]{
  --bg:#EDF3FA;
  --bg-soft:#E2EDF6;
  --bg-card:rgba(255,255,255,.6);
  --paper:#F5F9FE;
  --fg-strong:#0D2040;
  --fg:#1B3660;
  --fg-muted:#4A6890;
  --fg-faint:#7A9ABF;
  --rule:#B5CADE;
  --rule-strong:rgba(27,90,174,.38);
  --accent:#1B5AAE;
  --accent-soft:#2B78D0;
  --gold:#2B78D0;
  --grid:rgba(27,90,174,.07);
}
/* Dark theme (luxury) */
.poster[data-theme="dark"]{
  --bg:#1A1410;
  --bg-soft:#221912;
  --bg-card:rgba(255,255,255,.04);
  --paper:#2A1E17;
  --fg-strong:#F4EFE6;
  --fg:#E8DFD0;
  --fg-muted:#B6A78F;
  --fg-faint:#8B7A62;
  --rule:#3A2C20;
  --rule-strong:rgba(198,154,82,.45);
  --accent:#C85842;
  --accent-soft:#D97757;
  --gold:#C69A52;
  --grid:rgba(198,154,82,.07);
}

/* ============================================================
   Editor chrome (the surrounding tool UI — not exported)
   ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font-sans);
  background:#0f0b08;
  color:#E8DFD0;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.app{display:grid;grid-template-columns:380px 1fr;height:100vh;}

/* --- left: control panel --- */
.panel{
  background:#171009;
  border-right:1px solid #2a1f15;
  overflow-y:auto;
  padding:0 0 60px;
}
.panel-head{
  position:sticky;top:0;z-index:5;
  background:#171009;
  border-bottom:1px solid #2a1f15;
  padding:18px 20px 14px;
}
.panel-head .brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#C69A52;
}
.panel-head .brand .mk{
  width:26px;height:26px;border:1.5px solid #C69A52;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-style:italic;color:#F4EFE6;font-size:13px;
}
.panel-head-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.panel-head .sub{margin-top:6px;color:#8B7A62;font-size:11px;letter-spacing:.04em;}
/* back to home link */
.home-link{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:#5C4433;text-decoration:none;white-space:nowrap;flex-shrink:0;
  padding:3px 7px;border:1px solid #2a1f15;border-radius:6px;
  transition:color .15s,border-color .15s;
}
.home-link:hover{color:#C69A52;border-color:#5C4433;}

.seg{padding:16px 20px;border-bottom:1px solid #221811;}
.seg > .seg-title{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#7A6A58;margin-bottom:12px;display:flex;
  align-items:center;justify-content:space-between;
}

/* mode tabs (Input / Import) */
.tabs{display:flex;gap:6px;background:#0f0b08;padding:4px;border-radius:8px;}
.tabs button{
  flex:1;border:0;background:transparent;color:#8B7A62;
  padding:8px 10px;border-radius:6px;cursor:pointer;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.tabs button.active{background:#2a1f15;color:#F4EFE6;}

/* choice chips (template / theme / ratio) */
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chips button{
  border:1px solid #2f2418;background:#120d08;color:#B6A78F;
  padding:7px 11px;border-radius:7px;cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;transition:all .15s;
}
.chips button:hover{border-color:#5C4433;color:#E8DFD0;}
.chips button.active{
  border-color:#C69A52;background:rgba(198,154,82,.12);color:#F4EFE6;
}

/* form fields */
.field{margin-bottom:12px;}
.field > label{
  display:block;font-size:11px;color:#8B7A62;margin-bottom:5px;
  font-weight:600;letter-spacing:.02em;
}
.field input[type=text],
.field input[type=url],
.field textarea{
  width:100%;background:#0f0b08;border:1px solid #2f2418;color:#ECE5D7;
  border-radius:7px;padding:9px 11px;font-family:var(--font-sans);font-size:13px;
  resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:#C69A52;}
.field textarea{min-height:64px;line-height:1.5;}
.field .hint{font-size:10.5px;color:#6b5d4c;margin-top:4px;}

/* repeatable rows (features / pricing) */
.rows{display:flex;flex-direction:column;gap:10px;}
.row-card{
  border:1px solid #2a1f15;border-radius:9px;padding:11px;background:#120d08;
  position:relative;
}
.row-card .row-head{
  display:flex;align-items:center;gap:4px;margin-bottom:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:#7A6A58;
  text-transform:uppercase;
}
.row-card .row-head > span:first-child{flex:1;}
.btn-move{padding:3px 7px !important;font-size:13px !important;opacity:.7;}
.btn-move:hover{opacity:1;}
/* collapsible section header */
.seg-title--toggle{cursor:default;display:flex;justify-content:space-between;align-items:center;}
.btn-collapse{
  border:none;background:transparent;color:#7A6A58;
  font-size:13px;padding:2px 6px;cursor:pointer;line-height:1;
}
.btn-collapse:hover{color:#C69A52;}
/* danger/reset button */
.btn-danger{color:#C85842 !important;border-color:#3a1a14 !important;}
.btn-danger:hover{background:#1a0a08 !important;border-color:#C85842 !important;}
.row-card .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn-mini{
  border:1px solid #2f2418;background:#0f0b08;color:#B6A78F;
  border-radius:6px;padding:4px 9px;cursor:pointer;font-size:11px;
}
.btn-mini:hover{border-color:#C85842;color:#F4EFE6;}
.btn-add{
  width:100%;border:1px dashed #3a2c1d;background:transparent;color:#8B7A62;
  border-radius:8px;padding:9px;cursor:pointer;font-size:12px;margin-top:4px;
}
.btn-add:hover{border-color:#C69A52;color:#E8DFD0;}

/* toggle switch */
.switch-row{display:flex;align-items:center;justify-content:space-between;}
.switch{
  position:relative;width:42px;height:24px;flex-shrink:0;cursor:pointer;
}
.switch input{opacity:0;width:0;height:0;}
.switch .track{
  position:absolute;inset:0;background:#2f2418;border-radius:24px;transition:.2s;
}
.switch .track:before{
  content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
  background:#8B7A62;border-radius:50%;transition:.2s;
}
.switch input:checked + .track{background:rgba(198,154,82,.4);}
.switch input:checked + .track:before{transform:translateX(18px);background:#F4EFE6;}

/* import textarea */
.import-area textarea{min-height:220px;font-family:var(--font-mono);font-size:12px;}
.import-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.import-skeletons{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.import-skeletons .btn{font-size:11.5px;padding:4px 10px;}

/* file import row */
.import-file-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;margin-bottom:10px;
  background:#0f0b08;border:1px solid #2f2418;border-radius:10px;
}
.btn-file-import{
  border:1px solid #C69A52 !important;background:rgba(198,154,82,.08) !important;
  color:#F4EFE6 !important;white-space:nowrap;font-size:13px !important;
  padding:9px 16px !important;border-radius:8px !important;
  transition:background .15s,border-color .15s;
}
.btn-file-import:hover{background:rgba(198,154,82,.18) !important;}
.import-file-hint{font-size:11px;color:#5C4433;line-height:1.4;}
/* or divider */
.import-or-row{
  display:flex;align-items:center;gap:8px;margin:4px 0 10px;
}
.import-or-line{flex:1;height:1px;background:#1e1610;}
.import-or-text{font-size:11px;color:#4a3a2c;white-space:nowrap;font-family:var(--font-mono);letter-spacing:.05em;}

/* --- right: stage --- */
.stage{
  position:relative;overflow:auto;
  background:#0f0b08;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;
  display:flex;align-items:flex-start;justify-content:center;
  padding:48px;
}
.stage-inner{margin:auto;transform-origin:top center;}

/* export toolbar (top-right, not captured) */
.toolbar{
  position:fixed;top:16px;right:20px;z-index:20;
  display:flex;gap:8px;align-items:center;
  background:rgba(23,16,9,.92);border:1px solid #2a1f15;
  border-radius:10px;padding:8px 10px;backdrop-filter:blur(6px);
}
.toolbar .zoom{display:flex;align-items:center;gap:4px;color:#8B7A62;font-size:11px;
  font-family:var(--font-mono);margin-right:4px;}
.toolbar .zoom button{
  border:1px solid #2f2418;background:#120d08;color:#B6A78F;width:24px;height:24px;
  border-radius:6px;cursor:pointer;font-size:13px;line-height:1;
}
.btn{
  border:1px solid #2f2418;background:#120d08;color:#E8DFD0;
  border-radius:8px;padding:8px 13px;cursor:pointer;font-size:12.5px;font-weight:600;
}
.btn:hover{border-color:#C69A52;}
.btn-primary{background:#A43A2A;border-color:#A43A2A;color:#fff;}
.btn-primary:hover{background:#C85842;border-color:#C85842;}

/* scrollbars */
.panel::-webkit-scrollbar,.stage::-webkit-scrollbar{width:10px;height:10px;}
.panel::-webkit-scrollbar-thumb,.stage::-webkit-scrollbar-thumb{
  background:#2a1f15;border-radius:6px;}