:root { --ink:#18241f; --soft:#65736b; --paper:#f7f5ed; --white:#fffefa; --accent:#237a59; --line:#d8ddd4; --shadow:0 18px 50px rgba(21,38,29,.09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#eaf0e6,#f7f5ed 44%,#e6eee9); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:42px 0 34px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:0 0 28px; }
.eyebrow,.step { margin:0 0 8px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
h1,h2 { margin:0; letter-spacing:-.035em; } h1 { max-width:700px; font-size:clamp(2rem,4vw,3.65rem); line-height:1.02; } h2 { font-size:1.25rem; }
.privacy-badge { margin:0; padding:12px 15px; border:1px solid #bad5c7; border-radius:14px; background:#eef8f1; color:#1d6549; font-size:.82rem; font-weight:800; line-height:1.35; white-space:nowrap; } .privacy-badge span { color:#477664; font-weight:600; }
.workspace { display:grid; grid-template-columns:330px minmax(0,1fr); gap:20px; }
.panel { border:1px solid rgba(101,115,107,.22); border-radius:22px; background:rgba(255,254,250,.88); box-shadow:var(--shadow); }
.controls-panel { padding:24px; }.panel-heading { margin-bottom:19px; }.control-heading { margin:31px 0 16px; }
.dropzone { display:flex; min-height:175px; padding:22px; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1.5px dashed #83ae99; border-radius:17px; background:#f3faf4; color:var(--soft); text-align:center; cursor:pointer; transition:.16s ease; }.dropzone:hover,.dropzone.is-dragging { background:#e5f4e8; border-color:var(--accent); }.dropzone strong { color:var(--ink); }.upload-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:white; font-size:1.45rem; line-height:1; }
.controls.is-disabled,.exports.is-disabled { opacity:.48; pointer-events:none; }.range-row,.toggle-row,.paper-row { display:block; margin:0 0 20px; font-size:.9rem; font-weight:700; }.range-row span,.toggle-row,.paper-row span { display:flex; justify-content:space-between; align-items:center; gap:8px; }.range-row output { color:var(--accent); } input[type="range"] { width:100%; margin-top:10px; accent-color:var(--accent); } input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); }.paper-row select { width:100%; margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); font:inherit; font-size:.8rem; }
.preview-panel { padding:24px; }.preview-header { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }.status { padding:7px 10px; border-radius:999px; background:#edf0ea; color:var(--soft); font-size:.78rem; font-weight:700; }.status.ready { background:#e3f3e7; color:#176345; }
.canvases { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin:20px 0; } figure { margin:0; } figcaption { margin:0 0 8px; color:var(--soft); font-size:.81rem; font-weight:800; }.canvas-frame { position:relative; display:grid; min-height:270px; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:repeating-conic-gradient(#f5f5f1 0 25%,#fffefa 0 50%) 50%/18px 18px; }.canvas-frame canvas { display:block; width:100%; height:auto; max-height:420px; object-fit:contain; background:white; }.canvas-frame span { position:absolute; color:#839087; font-size:.84rem; text-align:center; }.canvas-frame canvas:not([width="0"]) + span { display:none; }
.exports { display:flex; flex-wrap:wrap; gap:10px; }.button { min-height:43px; padding:0 16px; border:1px solid transparent; border-radius:11px; cursor:pointer; font:700 .9rem/1 Inter,ui-sans-serif,system-ui,sans-serif; }.button.primary { background:var(--accent); color:white; }.button.primary:hover { background:#145d42; }.button.secondary { border-color:#b8c7bc; background:white; color:var(--ink); }.export-note { margin:15px 0 0; color:var(--soft); font-size:.81rem; }
.trust-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 25px; margin:23px 0 0; color:#3b5e4e; font-size:.84rem; font-weight:650; }.trust-strip span::before { content:"✓"; margin-right:7px; color:var(--accent); font-weight:900; }
@media (max-width:760px) { .app-shell { width:min(100% - 22px,620px); padding-top:25px; }.topbar,.workspace { display:block; }.privacy-badge { display:inline-block; margin-top:17px; }.controls-panel { margin-bottom:16px; }.canvases { grid-template-columns:1fr; }.canvas-frame { min-height:220px; }.preview-header { align-items:flex-end; }.status { max-width:150px; text-align:right; }.exports .button { width:100%; }.trust-strip { justify-content:flex-start; } }