.qf { --qf-ink:#21392f; --qf-muted:#66746b; --qf-line:#dce4dc; color:var(--qf-ink); background:#f5f7f3; min-height:100vh; padding:40px clamp(18px,4vw,64px) 70px; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.qf * { box-sizing:border-box; }
.qf h1 { font-size:32px; line-height:1.2; margin:10px 0; font-weight:650; }
.qf p { margin:8px 0; }
.qf a { color:#1e6049; text-decoration:underline; text-underline-offset:3px; }
.qf-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px; }
.qf-header p,.qf small,.qf-preview-caption { color:var(--qf-muted); }
.qf-eyebrow { font-size:11px; letter-spacing:1.8px; font-weight:650; }
.qf-layout { display:grid; grid-template-columns:minmax(300px,650px) minmax(260px,380px); gap:32px; align-items:start; }
.qf-fields { border:0; padding:0; margin:0; min-width:0; }
.qf-card { background:#fff; border:1px solid var(--qf-line); border-radius:16px; padding:26px; margin-bottom:18px; }
.qf label { display:block; font-weight:600; margin-bottom:20px; }
.qf label span { color:#8a4936; }
.qf input,.qf textarea { display:block; width:100%; min-width:0; margin-top:8px; padding:12px 14px; border:1px solid #c7d2c9; border-radius:9px; font:inherit; font-weight:400; color:var(--qf-ink); background:#fff; }
.qf input[type=number] { max-width:180px; }
.qf textarea { resize:vertical; }
.qf input:focus,.qf textarea:focus,.qf button:focus-visible,.qf summary:focus-visible { outline:3px solid #a5cebb; outline-offset:2px; }
.qf small { display:block; font-size:12px; margin-top:7px; font-weight:400; }
.qf button { cursor:pointer; border:1px solid #c7d2c9; border-radius:9px; padding:11px 16px; background:#fff; color:var(--qf-ink); font:inherit; font-weight:550; }
.qf button:hover { border-color:#2e6950; background:#edf4ee; }
.qf button:disabled { opacity:.45; cursor:default; }
.qf button.qf-primary { background:#21583f; border-color:#21583f; color:#fff; }
.qf button.qf-primary:hover { background:#17402d; }
.qf-taste-heading { display:flex; justify-content:space-between; gap:12px; }
.qf-taste-heading label { margin:0; }
.qf-taste-heading span { font-size:12px; color:var(--qf-muted); }
.qf-chips,.qf-selected,.qf-tags { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 22px; }
.qf-chips button,.qf-selected button { border-radius:30px; padding:7px 13px; font-size:13px; }
.qf-chips button[aria-pressed=true],.qf-selected button { background:#e4eee5; border-color:#598269; }
.qf-selected { margin-bottom:8px; }
.qf .qf-inline { margin:0 0 18px; }
.qf summary { cursor:pointer; font-weight:600; padding:4px 0; }
.qf-additional summary span { display:block; font-weight:400; color:var(--qf-muted); font-size:12px; margin-top:3px; }
.qf-additional[open] summary { margin-bottom:22px; }
.qf-palette { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.qf-palette button { width:38px; height:38px; border-radius:50%; border:3px solid transparent; padding:0; color:white; }
.qf-palette button[aria-pressed=true] { outline:2px solid #284c39; outline-offset:2px; }
.qf-custom-color { font-size:13px; margin-top:18px; }
.qf input[type=color] { width:75px; height:44px; padding:4px; }
.qf-shortcuts { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.qf-shortcuts>details { flex:1 1 210px; background:#edf1e9; border:1px solid var(--qf-line); border-radius:12px; padding:14px 18px; min-width:0; }
.qf-shortcuts details[open] { flex-basis:100%; }
.qf-shortcuts label { margin-top:16px; }
.qf-copy-list { max-height:250px; overflow:auto; display:grid; gap:6px; }
.qf-copy-list button { text-align:left; font-size:14px; }
.qf-copy-list span { display:block; color:var(--qf-muted); font-size:11px; }
.qf-actions { display:flex; flex-wrap:wrap; gap:10px; background:#f5f7f3; position:sticky; bottom:0; padding:16px 0; z-index:2; }
.qf-actions small { flex-basis:100%; }
.qf-preview-pane { position:sticky; top:30px; min-width:0; }
.qf-preview { background:#fff; border:1px solid var(--qf-line); border-top:5px solid var(--qf-accent); border-radius:14px; padding:24px; margin-top:14px; overflow-wrap:anywhere; }
.qf-preview-top { display:flex; justify-content:space-between; color:#566251; }
.qf-preview h2 { font:600 25px/1.25 Georgia,serif; margin:24px 0 16px; }
.qf-preview h3 { font-size:11px; text-transform:uppercase; letter-spacing:1px; margin:24px 0 8px; color:var(--qf-muted); }
.qf-preview p { white-space:pre-line; font-size:14px; }
.qf-tags span { padding:5px 10px; background:#f0f3ec; border-radius:20px; font-size:12px; }
.qf-preview-caption { font-size:12px; }
.qf-alert { padding:16px 20px; background:#e8f1e4; border:1px solid #b7cbb0; border-radius:12px; margin-bottom:20px; }
.qf-alert button { margin:8px 8px 0 0; }
.qf-error { background:#fff0ec; border-color:#ddafa0; color:#8f392b; }
.qf-warning { color:#915029; font-size:13px; margin-bottom:18px!important; }
.qf-mobile-preview { display:none; }
@media(max-width:1050px) { .qf-layout { grid-template-columns:minmax(0,1fr); } .qf-preview-pane { display:none; position:static; } .qf-preview-pane.is-open { display:block; } .qf-mobile-preview { display:block; } .qf-header { align-items:flex-start; } }
@media(max-width:600px) { .qf { padding:24px 14px 30px; } .qf h1 { font-size:26px; } .qf-header { flex-direction:column; gap:12px; } .qf-card { padding:18px; } .qf-actions button { flex:1 1 140px; } .qf-actions .qf-mobile-preview { flex-basis:100%; } }
body.qf { margin:0; }
[hidden] { display:none!important; }
.qf nav { display:flex; gap:18px; align-items:center; }
.qf .login-card { max-width:440px; margin:8vh auto; }
.qf .login-card form { margin-top:24px; }
.qf-library { margin-top:30px; max-width:1062px; }
.library-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.library-row { display:flex; align-items:center; gap:10px; border-top:1px solid var(--qf-line); padding:12px 0; }
.library-row span { flex:1; min-width:0; overflow-wrap:anywhere; }
.library-row button { font-size:12px; padding:8px 12px; }
.qf-library h2 { font-size:24px; font-weight:600; }
.qf-library h3 { margin:20px 0 10px; font-size:16px; }
@media(max-width:600px) { .library-row { flex-wrap:wrap; } .library-row span { flex-basis:100%; } .library-header { flex-wrap:wrap; } .qf nav { flex-wrap:wrap; } }