:root { --paper:#f4f0e3; --ink:#111; --muted:#68776f; --line:#d7ddd4; --green:#466151; --orange:#d28b22; --gold:#f0c957; --navy:#355972; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:"Space Grotesk",sans-serif; }
button,input,textarea,select { font:inherit; }
.request-shell { width:min(1180px,calc(100% - 2rem)); margin:0 auto; padding:1rem 0 2rem; }
.request-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.back-link { color:var(--green); font:600 .63rem "DM Mono",monospace; text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }
.back-link:hover { color:var(--orange); }
.header-actions { position:relative; display:flex; align-items:center; gap:.45rem; }
.share-button { display:grid; place-items:center; width:1.8rem; height:1.8rem; border:0; border-radius:50%; padding:0; background:linear-gradient(135deg,#f7df7c,#e8ab37); color:#503b0b; cursor:pointer; box-shadow:0 2px 0 rgba(169,116,26,.28); transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; }
.share-button:hover,.share-button[aria-expanded="true"] { color:#fffdf4; background:linear-gradient(135deg,#e09a27,#c96c1b); transform:translateY(-1px); box-shadow:0 4px 10px rgba(190,111,24,.28); }
.share-button:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }
.share-button > span:first-child { font:700 1.2rem/1 "Space Grotesk",sans-serif; }
.share-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.share-menu { position:absolute; z-index:20; top:calc(100% + .5rem); right:0; display:grid; min-width:185px; gap:.28rem; padding:.55rem; border:1px solid var(--line); background:#fffdf7; box-shadow:0 12px 28px rgba(53,73,59,.16); }
.share-menu[hidden] { display:none; }
.share-menu p { margin:0 0 .2rem; color:var(--muted); font:500 .5rem "DM Mono",monospace; text-transform:uppercase; }
.share-menu a,.share-menu button { display:block; width:100%; border:1px solid #cbd9cf; padding:.38rem .45rem; background:#fff; color:var(--green); text-align:left; text-decoration:none; cursor:pointer; font:600 .58rem "Space Grotesk",sans-serif; }
.share-menu a:hover,.share-menu button:hover { border-color:var(--orange); color:var(--orange); }
.public-badge,.card-heading > span { padding:.3rem .42rem; background:#edf3ee; color:var(--green); font:600 .5rem "DM Mono",monospace; letter-spacing:.08em; }
.request-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:1.2rem 0 1.2rem; }
.eyebrow { margin:0 0 .35rem; color:var(--orange); font:600 .55rem "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { max-width:740px; margin-bottom:.65rem; font-size:clamp(2.6rem,5.5vw,5.2rem); line-height:.92; letter-spacing:-.08em; }
h1 em { color:var(--orange); font-style:normal; }
.lede { max-width:590px; margin:0; color:var(--muted); font-size:clamp(.9rem,1.5vw,1.1rem); line-height:1.55; }
.hero-mark { display:grid; place-items:center; width:125px; height:125px; border:1px solid var(--gold); background:#fff8d9; color:var(--orange); font-size:2rem; font-weight:700; transform:rotate(5deg); }
.request-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.8rem; align-items:start; }
.request-card,.proof-card { min-width:0; padding:1rem; border:1px solid var(--line); background:rgba(255,255,255,.72); box-shadow:0 14px 35px rgba(53,73,59,.07); }
.proof-card { background:#f1f8f2; }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding-bottom:.65rem; border-bottom:1px solid var(--line); }
.card-heading p { margin:0 0 .2rem; color:var(--muted); font:500 .5rem "DM Mono",monospace; letter-spacing:.1em; }
.card-heading h2 { margin:0; font-size:1.2rem; letter-spacing:-.03em; }
.field-label { display:block; margin-top:.7rem; color:var(--green); font:600 .55rem "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }
.field-label input,.field-label textarea,.field-label select { display:block; width:100%; margin-top:.28rem; border:1px solid #cbd9cf; border-radius:0; padding:.58rem .62rem; background:#fff; color:var(--ink); font:500 .78rem "Space Grotesk",sans-serif; outline:0; }
.field-label input::placeholder,.field-label textarea::placeholder { color:#b5bdb7; opacity:1; }
.field-label textarea { min-height:7.3rem; resize:vertical; line-height:1.4; }
.field-label input:focus,.field-label textarea:focus,.field-label select:focus { border-color:var(--orange); box-shadow:0 0 0 2px rgba(210,139,34,.13); }
.field-label input:disabled { background:#f1f4f0; color:var(--muted); cursor:not-allowed; }
.field-label small,.optional-details > small { display:block; margin-top:.25rem; color:var(--muted); font:400 .5rem/1.35 "DM Mono",monospace; text-transform:none; letter-spacing:0; }
.field-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
.optional-details { margin-top:.8rem; padding-top:.55rem; border-top:1px solid var(--line); }
.optional-details summary { cursor:pointer; color:var(--green); font:600 .55rem "DM Mono",monospace; text-transform:uppercase; }
.optional-details .field-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.submit-button,.secondary-button { display:flex; align-items:center; justify-content:space-between; gap:.8rem; width:100%; margin-top:1rem; border:1px solid var(--orange); padding:.7rem .75rem; background:var(--gold); color:#392a09; cursor:pointer; font-weight:800; }
.submit-button:hover { background:#e8bd43; }
.submit-button:disabled { cursor:wait; opacity:.65; }
.submit-button b { font-size:1.1rem; }
.request-status { min-height:1.1rem; margin:.65rem 0 0; color:var(--green); font:600 .55rem "DM Mono",monospace; }
.request-status.is-error { color:#a84437; }
.privacy-note { margin:.5rem 0 0; color:var(--muted); font-size:.55rem; line-height:1.4; }
.hidden { display:none !important; }
.proof-image-wrap { display:grid; place-items:center; min-height:235px; padding:.7rem; border:1px solid var(--line); background:#e9eee9; }
.proof-image-wrap img { display:block; width:100%; max-height:360px; object-fit:contain; }
.proof-meta { display:grid; gap:.5rem; margin-top:.8rem; }
.proof-meta div { display:grid; grid-template-columns:110px 1fr; gap:.55rem; padding:.42rem .5rem; background:#fff; }
.proof-meta span { color:var(--muted); font:500 .48rem "DM Mono",monospace; }
.proof-meta strong { min-width:0; overflow-wrap:anywhere; font-size:.68rem; }
.proof-note { margin:.8rem 0 0; color:var(--muted); font-size:.64rem; line-height:1.45; }
.secondary-button { justify-content:center; background:#fff; color:var(--green); border-color:#cbd9cf; font-size:.68rem; }
.secondary-button:hover { border-color:var(--orange); color:var(--orange); }
.request-footer { display:flex; justify-content:space-between; gap:1rem; margin-top:2.4rem; padding-top:.8rem; border-top:1px solid var(--line); color:var(--muted); font:500 .5rem "DM Mono",monospace; text-transform:uppercase; }
.request-footer p { margin:0; text-transform:none; }
@media (max-width:760px) { .request-shell { width:min(100% - 1rem,620px); }.request-hero { align-items:flex-start; padding:1rem 0 .9rem; }.hero-mark { width:80px; height:80px; font-size:1.3rem; }.request-grid { grid-template-columns:1fr; }.field-row { grid-template-columns:1fr 1fr; }.field-row .field-label:last-child { grid-column:1 / -1; }.request-footer { display:block; }.request-footer p { margin-top:.35rem; } }
.proof-review { margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--line); }
.proof-review .field-label { margin-top:0; }
.proof-review textarea { min-height:6rem; background:#fff; }
.translation-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; }
.translation-actions span { margin-right:auto; color:var(--muted); font:500 .48rem "DM Mono",monospace; letter-spacing:.04em; }
.translation-actions button,.final-actions button { border:1px solid #cbd9cf; padding:.42rem .5rem; background:#fff; color:var(--green); cursor:pointer; font:600 .55rem "Space Grotesk",sans-serif; }
.translation-actions button:hover,.final-actions button:hover { border-color:var(--orange); color:var(--orange); }
.translation-actions button:disabled { cursor:wait; opacity:.5; }
.translation-status { min-height:1rem; margin:.45rem 0 0; color:var(--green); font:500 .52rem/1.35 "DM Mono",monospace; }
.translation-status.is-error { color:#a84437; }
.final-button { display:flex; align-items:center; justify-content:space-between; gap:.8rem; width:100%; margin-top:.75rem; border:1px solid var(--navy); padding:.72rem .75rem; background:var(--navy); color:#fff; cursor:pointer; font-weight:800; }
.final-button:hover { background:#2b4c61; }
.final-button:disabled { cursor:wait; opacity:.65; }
.final-button b { color:var(--gold); font-size:1.1rem; }
.final-actions { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.6rem; padding:.55rem; border:1px solid #cbd9cf; background:#fff; }
.final-actions strong { color:var(--green); font:600 .52rem "DM Mono",monospace; letter-spacing:.06em; }
.final-actions > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.3rem; }
.proof-card.is-waiting > :not(.card-heading):not(#proof-skeleton) { display:none; }
#proof-skeleton { display:block; }
#proof-skeleton .proof-image-wrap { display:none; }
#proof-skeleton.has-result .skeleton-preview,
#proof-skeleton.has-result .skeleton-meta,
#proof-skeleton.has-result > p { display:none; }
#proof-skeleton.has-result .proof-image-wrap { display:grid; }
.skeleton-preview { display:grid; place-items:center; min-height:235px; padding:.7rem; border:1px solid var(--line); background:#e9eee9; }
.skeleton-stamp { position:relative; display:grid; place-items:center; width:78%; min-height:145px; border:2px dashed #c2cec5; background:rgba(255,255,255,.62); color:#9aa79e; text-align:center; font:600 .58rem/1.5 "DM Mono",monospace; letter-spacing:.08em; }
.skeleton-stamp::before { position:absolute; inset:12px; border:1px dashed #d2dcd3; content:""; }
.skeleton-stamp i { position:absolute; left:18%; right:18%; height:5px; border-radius:4px; background:#dbe3dc; opacity:.7; }
.skeleton-stamp i:nth-of-type(1) { bottom:27%; }
.skeleton-stamp i:nth-of-type(2) { bottom:20%; left:27%; right:27%; }
.skeleton-stamp i:nth-of-type(3) { bottom:13%; left:35%; right:35%; }
.skeleton-meta { display:grid; gap:.5rem; margin-top:.8rem; }
.skeleton-meta div { display:grid; grid-template-columns:110px 1fr; gap:.55rem; padding:.42rem .5rem; background:rgba(255,255,255,.72); }
.skeleton-meta span { color:var(--muted); font:500 .48rem "DM Mono",monospace; }
.skeleton-meta strong { color:#aeb9b1; font-size:.68rem; font-weight:500; }
#proof-skeleton > p { margin:.8rem 0 .1rem; color:var(--muted); font-size:.64rem; line-height:1.45; }
@media print { @page { size:A4; margin:12mm; } body { background:#fff; } .request-shell { width:auto; margin:0; padding:0; } .request-header,.request-hero,.request-card,.request-footer,.proof-review,.proof-meta,.proof-note,.final-button,.final-actions,.secondary-button,#proof-skeleton:not(.has-result) { display:none !important; } .request-grid { display:block; } .proof-card { display:block !important; border:0; padding:0; background:#fff; box-shadow:none; } .proof-card .card-heading { display:none; } .proof-image-wrap { min-height:0; padding:0; border:0; background:#fff; } .proof-image-wrap img { width:100%; max-height:none; } }