:root { --ink:#17221e; --muted:#6c746e; --line:#d9ddd7; --canvas:#f7f7f3; --paper:#fffefa; --moss:#2f6248; --leaf:#daea63; --cream:#f1eadb; --red:#df4f3f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.45; }
button, input, select, textarea { font:inherit; } button { cursor:pointer; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(32px, calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:rgba(255,254,250,.86); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:760; letter-spacing:-.035em; text-decoration:none; font-size:18px; }.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--red); color:white; font:800 23px/1 Georgia,serif; transform:rotate(-9deg); }.header-actions { display:flex; align-items:center; gap:13px; }.status { font-size:13px; color:var(--muted); }.status i { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:100%; background:#61a67a; }.logout-button { border:1px solid #d1d7d1; border-radius:6px; background:transparent; color:#5d6a61; padding:6px 9px; font-size:12px; font-weight:700; }.logout-button:hover { border-color:var(--moss); color:var(--moss); }
.page-shell { max-width:1240px; margin:auto; padding:74px 32px 44px; }.intro { max-width:695px; margin-bottom:46px; }.eyebrow { margin:0 0 9px; color:var(--moss); font-size:11px; font-weight:800; letter-spacing:.13em; }.intro h1 { margin:0; font:500 clamp(40px,5vw,66px)/1.03 Georgia, "Times New Roman", serif; letter-spacing:-.055em; }.intro h1 em { color:var(--moss); }.intro > p:last-child { max-width:570px; margin:22px 0 0; color:#53605a; font-size:16px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(26,49,37,.08); }.editor-panel { padding:37px; background:var(--paper); }.output-panel { display:flex; flex-direction:column; padding:31px; background:var(--cream); min-width:0; }.section-heading { display:flex; align-items:center; gap:10px; margin-bottom:17px; }.section-heading span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--moss); color:white; font-size:10px; font-weight:800; }.section-heading h2, .output-head h2 { margin:0; font:600 20px/1.1 Georgia,serif; letter-spacing:-.025em; }.section-heading small { color:var(--muted); font-size:11px; margin-left:auto; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.field { display:block; }.field.full { grid-column:1/-1; }.field > span { display:block; margin-bottom:7px; color:#48534d; font-size:12px; font-weight:700; }.field b { color:var(--red); } input, select, textarea { width:100%; border:1px solid #cfd5cf; border-radius:7px; background:#fff; color:var(--ink); outline:0; padding:10px 12px; font-size:14px; transition:border .15s, box-shadow .15s; } input::placeholder, textarea::placeholder { color:#a2aaa4; } input:focus, select:focus, textarea:focus { border-color:var(--moss); box-shadow:0 0 0 3px rgba(47,98,72,.11); } select { appearance:auto; } textarea { resize:vertical; }.money-input { position:relative; }.money-input span { position:absolute; top:10px; left:12px; color:#7c847e; font-size:14px; }.money-input input { padding-left:42px; }.photos-heading { margin-top:33px; }.drop-zone { display:flex; min-height:121px; flex-direction:column; align-items:center; justify-content:center; border:1.5px dashed #aabbb0; border-radius:9px; color:#65736a; background:#fbfcf8; text-align:center; font-size:13px; transition:.15s; }.drop-zone:hover, .drop-zone.dragging { border-color:var(--moss); background:#f0f7ee; }.drop-zone strong { margin:3px 0; color:#3e5046; font-size:13px; }.drop-zone u { color:var(--moss); font-weight:700; }.upload-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#dcebd9; color:var(--moss); font-weight:800; }.upload-message { min-height:18px; margin-top:7px; color:var(--red); font-size:12px; }.photo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:5px; }.photo-card { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid #d7ddd6; border-radius:7px; background:#edf0ec; }.photo-card img { width:100%; height:100%; object-fit:cover; }.photo-card button { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:22px; height:22px; border:0; border-radius:50%; background:rgba(20,30,24,.7); color:#fff; font-size:18px; line-height:1; }.specs-heading { margin-top:33px; }.text-button { margin-left:auto; border:0; background:transparent; color:var(--moss); font-size:12px; font-weight:800; }.spec-row { display:grid; grid-template-columns:1fr 1.5fr 25px; gap:8px; margin-bottom:8px; }.spec-row input { padding:8px 10px; font-size:13px; }.remove-spec { width:25px; border:0; border-radius:6px; background:#f3f0ea; color:#68716b; font-size:20px; line-height:1; }.description-field { margin-top:23px; }.form-actions { display:flex; gap:11px; margin-top:25px; }.primary-button, .secondary-button, .copy-button, .download-button { border-radius:7px; padding:10px 14px; font-size:13px; font-weight:800; }.primary-button { border:1px solid var(--moss); background:var(--moss); color:white; }.primary-button span { margin-left:6px; font-size:17px; }.secondary-button { border:1px solid #cdd3cd; background:#fff; color:#566159; }.output-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.preview-state { border-radius:99px; padding:5px 8px; background:#e2e7d7; color:#657151; font-size:10px; font-weight:800; }.preview { flex:1; min-height:480px; overflow:hidden; border:1px solid #d8d6ca; background:white; }.empty-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px; color:#68736a; text-align:center; }.empty-preview strong { color:#3c4941; font:600 18px Georgia,serif; }.empty-preview p { margin:8px 0; font-size:13px; }.empty-icon { display:grid; place-items:center; width:45px; height:45px; margin-bottom:12px; border-radius:50%; background:#f1f1e9; color:#93a17b; font-size:22px; }.export-box { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:16px; }.export-box strong { font-size:13px; }.export-box p { margin:2px 0 0; color:#757a73; font-size:11px; }.export-actions { display:flex; gap:7px; }.copy-button, .download-button { border:1px solid var(--moss); background:white; color:var(--moss); white-space:nowrap; }.download-button { background:var(--moss); color:white; }.copy-button:disabled, .download-button:disabled { cursor:not-allowed; opacity:.45; }.note { display:flex; align-items:flex-start; gap:11px; max-width:810px; margin:26px auto 0; color:#636b65; font-size:12px; }.note span { display:grid; flex:0 0 auto; place-items:center; width:17px; height:17px; border:1px solid #9aa49c; border-radius:50%; font:700 11px Georgia,serif; }.note p { margin:0; }.note strong { color:#475249; }
 .login-page { display:grid; min-height:100vh; place-items:center; padding:24px; background:linear-gradient(135deg, #e7ebdc 0%, #f7f7f3 52%, #eee4d4 100%); }.login-card { width:min(100%, 420px); padding:42px; border:1px solid rgba(207,213,207,.9); border-radius:18px; background:rgba(255,254,250,.96); box-shadow:0 24px 70px rgba(26,49,37,.13); }.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:45px; color:var(--ink); font-size:18px; font-weight:760; letter-spacing:-.035em; }.login-card h1 { margin:0; font:500 38px/1 Georgia,serif; letter-spacing:-.04em; }.login-copy { margin:11px 0 28px; color:#66716b; font-size:14px; }.login-card .field { margin-bottom:16px; }.login-error { min-height:19px; margin:2px 0 11px; color:#bd3f34; font-size:12px; }.login-button { width:100%; margin-top:2px; }.login-button:disabled { opacity:.65; cursor:wait; }
@media (max-width:850px) { .workspace { grid-template-columns:1fr; }.output-panel { min-height:650px; }.page-shell { padding-top:50px; } }.@media (max-width:560px) { .topbar { height:62px; padding:0 18px; }.brand { font-size:15px; }.status { display:none; }.page-shell { padding:42px 16px 30px; }.intro { margin-bottom:32px; }.editor-panel, .output-panel { padding:23px 18px; }.field-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.photo-grid { grid-template-columns:repeat(3,1fr); }.export-box { align-items:flex-start; flex-direction:column; }.preview { min-height:400px; }.login-card { padding:31px 24px; } }