:root{--paper: #EEEDE0;--ink: #16222E;--ink-2: #47535D;--ink-3: #6E7880;--teal: #2F7D93;--teal-deep: #235F70;--line: #DAD7C8;--card: #FBFAF3;--stage: #E7E5DA;--sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--sans);color:var(--ink);background:var(--paper);overflow:hidden}button{font-family:var(--sans);cursor:pointer}.app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:18px;padding:0 16px;height:52px;background:var(--card);border-bottom:1px solid var(--line);flex:none}.brand{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}.brand .mid{color:var(--teal)}.presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.plabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}.presets button{font-size:.82rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:.34em .7em}.presets button:hover{border-color:var(--teal);color:var(--teal-deep)}.topright{margin-left:auto;display:flex;align-items:center;gap:12px}.topright .ab{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}.dl{font-size:.82rem;font-weight:600;color:#fff;background:var(--teal);border:0;border-radius:7px;padding:.45em .9em}.dl:hover{background:var(--teal-deep)}.editor{flex:1 1 auto;min-height:0;display:flex}.side{width:306px;flex:none;background:var(--card);border-right:1px solid var(--line);overflow-y:auto;padding:16px}.stagewrap{flex:1 1 auto;position:relative;background:var(--stage);overflow:hidden}.rp-h2{font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:18px 0 8px}.rp-h2:first-child{margin-top:0}.add-row{display:flex;gap:6px}.add-row button,.add-img{flex:1;font-size:.8rem;text-align:center;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.6em .3em}.add-row button:hover,.add-img:hover{border-color:var(--teal);color:var(--teal-deep)}.add-img{cursor:pointer}.add-img input{display:none}.pp{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px;background:var(--paper)}.pp .rp-h2{margin-top:0}.pp-text{width:100%;font-family:var(--sans);font-size:.85rem;border:1px solid var(--line);border-radius:6px;padding:6px;resize:vertical;color:var(--ink)}.pp-row{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}.pp-row button{min-width:30px;font-size:.8rem;padding:.35em .5em;border:1px solid var(--line);background:var(--card);border-radius:6px;color:var(--ink)}.pp-row button.on{background:var(--teal);color:#fff;border-color:var(--teal)}.pp-row button.danger{color:#b23;margin-left:auto}.pp-row button.danger:hover{background:#b23;color:#fff;border-color:#b23}.pp-sep{width:1px;height:20px;background:var(--line)}.pp-num,.pp-col{display:flex;flex-direction:column;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);gap:3px}.pp-num input{width:64px;font-family:var(--mono);font-size:.82rem;padding:.3em .4em;border:1px solid var(--line);border-radius:6px}.pp-col input{width:44px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff}.rp-note{font-size:.8rem;color:var(--ink-2);margin:0 0 12px;line-height:1.5}.rp-drop{display:flex;flex-direction:column;gap:3px;cursor:pointer;text-align:center;border:1.5px dashed var(--teal);border-radius:10px;padding:14px;color:var(--teal-deep);background:color-mix(in srgb,var(--teal) 7%,transparent)}.rp-drop input{display:none}.rp-drop b{font-size:.88rem}.rp-drop span{font-family:var(--mono);font-size:.62rem;color:var(--ink-3)}.rp-stat{margin:12px 0 8px;font-size:.84rem;color:var(--ink-2)}.rp-stat b{color:var(--ink)}.rp-seg{display:flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px}.rp-seg button{flex:1;font-size:.74rem;padding:.45em .2em;border:0;background:transparent;border-radius:6px;color:var(--ink-2)}.rp-seg button.on{background:var(--teal);color:#fff;font-weight:600}.rp-field{display:flex;flex-direction:column;gap:4px;font-size:.64rem;color:var(--ink-3);margin-top:12px;text-transform:uppercase;letter-spacing:.05em}.rp-field input{font-family:var(--sans);font-size:.88rem;padding:.45em .6em;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#fff;text-transform:none;letter-spacing:0}.rp-preview{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.rp-preview span{font-size:.7rem;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:.2em .5em;color:var(--ink-2)}.rp-preview .more{color:var(--teal-deep);border-color:var(--teal)}.rp-chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:.74rem;padding:.35em .55em;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}.chip:hover{border-color:var(--teal);color:var(--teal-deep)}.rp-generate{width:100%;margin-top:16px;padding:.8em;font-weight:700;font-size:.92rem;color:#fff;background:var(--teal);border:0;border-radius:9px}.rp-generate:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}.rp-generate:not(:disabled):hover{background:var(--teal-deep)}.rp-back{width:100%;margin-top:8px;padding:.55em;font-size:.78rem;color:var(--teal-deep);background:transparent;border:1px solid var(--line);border-radius:8px}.rp-msg{margin-top:12px;font-size:.78rem;color:var(--teal-deep);line-height:1.5;background:color-mix(in srgb,var(--teal) 8%,transparent);border-radius:8px;padding:10px}.own{margin-top:20px;font-size:.7rem;color:var(--ink-3);line-height:1.5;border-top:1px solid var(--line);padding-top:12px}.edit-ta{position:absolute;margin:0;padding:0;border:1px solid var(--teal);outline:none;background:#fffffff5;font-family:var(--sans);line-height:1.25;resize:none;overflow:hidden;z-index:10}.zoombar{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:0 6px 18px -10px #16222e66}.zoombar button{border:0;background:transparent;color:var(--ink);font-size:1rem;width:24px;height:24px;border-radius:50%}.zoombar button:hover{background:var(--paper)}.zoombar span{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);min-width:42px;text-align:center}