.workspace-page { min-height: 100vh; color: var(--ink); background: #f7f2e9; }
.workspace-topbar, .policy-topbar { min-height: 82px; padding: 12px clamp(20px,5vw,74px); display:flex; align-items:center; justify-content:space-between; gap:24px; background:#32133f; color:#fff; }
.workspace-brand, .policy-brand { width:178px; display:block; line-height:0; }
.workspace-brand img, .policy-brand img { display:block; width:100%; height:auto; }
.workspace-topbar nav, .policy-topbar nav { display:flex; gap:26px; align-items:center; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.86); }
.workspace-topbar nav a:hover, .policy-topbar nav a:hover { color:#e9cf92; }
.workspace-demo-pill { padding:8px 13px; border:1px solid rgba(233,207,146,.4); border-radius:999px; color:#f4dfaa; font-size:.69rem; font-weight:700; white-space:nowrap; }
.workspace-main { width:min(1280px,calc(100% - 48px)); margin:0 auto; padding:33px 0 70px; }
.workspace-back, .policy-back { display:inline-flex; margin-bottom:22px; color:#745c79; font-size:.78rem; font-weight:600; }
.workspace-back:hover, .policy-back:hover { color:#32133f; }
.workspace-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:22px; }
.workspace-heading .eyebrow { margin:0 0 11px; }
.workspace-heading h1 { max-width:850px; margin:0; color:#281d2b; font-family:var(--serif); font-size:clamp(2.4rem,4.3vw,4rem); font-weight:400; line-height:1.06; letter-spacing:-.04em; }
.workspace-intro { max-width:740px; margin:14px 0 0; color:#746b73; font-size:.94rem; line-height:1.65; }
.draft-state { flex:0 0 auto; margin-bottom:5px; padding:10px 13px; display:flex; align-items:center; gap:8px; border:1px solid rgba(170,132,67,.25); border-radius:999px; color:#705a36; background:#fffaf0; font-size:.7rem; font-weight:700; }
.draft-state span { width:8px; height:8px; border-radius:50%; background:#d4a84e; }
.workspace-notice { margin:24px 0 25px; padding:15px 18px; display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; border:1px solid rgba(164,119,57,.24); border-radius:12px; color:#645a61; background:#fffaf0; font-size:.78rem; line-height:1.55; }
.workspace-notice strong { color:#4e3257; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(315px,.78fr); gap:26px; align-items:start; }
.profile-form { min-width:0; border:1px solid rgba(50,19,63,.09); border-radius:18px; background:#fffdfa; box-shadow:0 10px 32px rgba(49,25,51,.045); }
.form-section { padding:25px 28px 27px; border-bottom:1px solid rgba(50,19,63,.09); }
.form-section--last { border-bottom:0; }
.form-section__heading { margin-bottom:21px; display:flex; align-items:flex-start; gap:13px; }
.form-section__heading > span { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:50%; color:#735534; background:#f6eddb; font-size:.66rem; font-weight:700; }
.form-section__heading h2 { margin:0; color:#392044; font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:-.02em; }
.form-section__heading p { margin:5px 0 0; color:#817780; font-size:.74rem; line-height:1.45; }
.field-label { margin:16px 0 7px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:#493a4c; font-size:.76rem; font-weight:700; }
.field-label > span:first-child:not(.field-hint) { color:#a27130; font-size:.61rem; }
.field-hint { color:#928791; font-size:.64rem; font-weight:500; text-align:right; }
.text-field { width:100%; min-height:46px; padding:11px 13px; border:1px solid rgba(56,35,59,.16); border-radius:9px; outline:none; color:#34263a; background:#fff; font:500 .8rem/1.5 var(--sans); transition:border-color .18s,box-shadow .18s; }
.text-field:focus { border-color:#98789e; box-shadow:0 0 0 3px rgba(110,75,119,.12); }
.text-field--area { min-height:108px; resize:vertical; }
.text-field[readonly] { color:#777078; background:#f5f2ee; }
.character-count { margin-top:5px; color:#999099; font-size:.62rem; text-align:right; }
.choice-fieldset { min-width:0; margin:16px 0 0; padding:0; border:0; }
.choice-fieldset .field-label { margin:0 0 8px; }
.choice-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.choice-card { min-height:59px; padding:10px 11px; display:flex; align-items:flex-start; gap:9px; border:1px solid rgba(56,35,59,.12); border-radius:10px; background:#fff; cursor:pointer; }
.choice-card:has(input:checked) { border-color:#b59a60; background:#fffaf0; }
.choice-card input, .inline-choices input { accent-color:#56345f; }
.choice-card input { margin:3px 0 0; }
.choice-card span { min-width:0; display:grid; gap:3px; }
.choice-card strong { color:#443249; font-size:.74rem; }
.choice-card small { color:#8a8189; font-size:.61rem; line-height:1.35; }
.inline-choices { display:flex; flex-wrap:wrap; gap:9px; }
.inline-choices label { min-height:37px; padding:0 12px; display:flex; align-items:center; gap:7px; border:1px solid rgba(56,35,59,.12); border-radius:999px; color:#56485a; background:white; font-size:.73rem; cursor:pointer; }
.privacy-callout { margin:2px 0 15px; padding:12px; display:flex; gap:10px; border-radius:10px; background:#f5f0e7; }
.privacy-lock { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:50%; color:#56345f; background:#e8deeb; }
.privacy-callout p { margin:0; color:#786e77; font-size:.69rem; line-height:1.5; }
.privacy-callout strong { color:#46324d; }
.field-footnote { margin:6px 0 0; color:#89818a; font-size:.63rem; line-height:1.5; }
.price-policy { margin-top:17px; padding:13px 14px; border-left:3px solid #d6aa57; border-radius:0 9px 9px 0; background:#fbf5e9; }
.price-policy strong { color:#573f29; font-size:.75rem; }
.price-policy p { margin:5px 0 0; color:#706671; font-size:.68rem; line-height:1.5; }
.upload-control { padding:13px; display:flex; align-items:center; gap:11px; border:1px dashed rgba(56,35,59,.25); border-radius:10px; background:#fcfaf6; cursor:pointer; }
.upload-control:hover { border-color:#9b7ca1; }
.upload-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#55375d; background:#eee6ef; font-size:1.1rem; }
.upload-control span:last-child { display:grid; gap:3px; }
.upload-control strong { color:#493950; font-size:.74rem; }
.upload-control small { color:#89818a; font-size:.62rem; }
.editor-actions { padding:18px 28px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid rgba(50,19,63,.09); }
.text-action { color:#71597a; font-size:.69rem; font-weight:700; }
.text-action:hover { text-decoration:underline; }
.editor-actions .button { min-height:43px; padding:0 21px; font-size:.75rem; }
.profile-preview { position:sticky; top:18px; padding:17px; border:1px solid rgba(50,19,63,.1); border-radius:17px; background:#f1e9dc; }
.preview-topline { margin:0 2px 11px; display:flex; justify-content:space-between; gap:8px; color:#756572; font-size:.58rem; font-weight:700; letter-spacing:.1em; }
.preview-status { color:#8c6b36; }
.preview-card { padding:24px 20px 18px; border:1px solid rgba(50,19,63,.08); border-radius:14px; background:#fffdfa; text-align:center; box-shadow:0 6px 19px rgba(50,19,63,.045); }
.preview-avatar { width:70px; height:70px; margin:0 auto 13px; display:grid; place-items:center; overflow:hidden; border:3px solid #f2e9d8; border-radius:50%; color:#f5e3b4; background:linear-gradient(145deg,#56375f,#32133f); font-family:var(--serif); font-size:1.7rem; }
.preview-avatar img { width:100%; height:100%; object-fit:cover; }
.preview-label { margin:0 0 7px; color:#a38756; font-size:.54rem; font-weight:700; letter-spacing:.12em; }
.preview-card h2 { margin:0; color:#351d3e; font-family:var(--serif); font-size:1.45rem; font-weight:500; line-height:1.18; }
.preview-headline { margin:6px 0 0; color:#776b78; font-size:.75rem; font-weight:600; }
.preview-about { margin:14px 0; color:#776f76; font-size:.7rem; line-height:1.6; text-align:left; }
.preview-tags { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }
.preview-tags span { padding:6px 10px; border:1px solid rgba(71,51,67,.12); border-radius:999px; color:#5e4565; background:#fbf8f0; font-size:.65rem; font-weight:600; }
.preview-details { margin-top:16px; padding:13px 0; display:grid; gap:10px; border-top:1px solid rgba(50,19,63,.09); border-bottom:1px solid rgba(50,19,63,.09); text-align:left; }
.preview-details p { margin:0; display:grid; grid-template-columns:18px 84px minmax(0,1fr); gap:5px; color:#786e77; font-size:.65rem; }
.preview-details p > span:first-child { color:#937247; }
.preview-details strong { color:#594c5b; font-weight:700; }
.preview-connection { margin-top:14px; padding:12px; display:grid; gap:5px; border-radius:9px; color:#fff; background:#3b1d45; }
.preview-connection strong { font-size:.74rem; }
.preview-connection span { color:rgba(255,255,255,.74); font-size:.6rem; }
.preview-price-note { margin-top:12px; color:#786a55; font-size:.59rem; font-weight:600; }
.preview-safety { margin:13px 2px 0; display:flex; gap:9px; color:#766b73; }
.preview-safety > span { color:#a88343; }
.preview-safety p { margin:0; font-size:.63rem; line-height:1.5; }
.preview-safety strong { color:#4f3b55; }
.preview-caption { margin:12px 2px 0; color:#8c818a; font-size:.59rem; line-height:1.5; }
.workspace-footer { min-height:69px; padding:16px clamp(20px,5vw,74px); display:flex; align-items:center; justify-content:space-between; gap:18px; color:#726873; background:#efe7db; font-size:.69rem; }
.workspace-footer a:first-child { color:#50315a; font-weight:700; letter-spacing:.08em; }
.workspace-footer a:last-child { color:#62496b; font-weight:600; }
.editor-toast { position:fixed; z-index:20; right:22px; bottom:22px; max-width:min(420px,calc(100% - 44px)); padding:13px 17px; border-radius:10px; color:white; background:#32133f; box-shadow:0 9px 28px rgba(32,18,37,.2); font-size:.75rem; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s,transform .2s; }
.editor-toast.is-visible { opacity:1; transform:translateY(0); }
@media(max-width:900px) { .editor-layout { grid-template-columns:minmax(0,1fr) minmax(275px,.75fr); gap:16px; } .form-section { padding-inline:20px; } .editor-actions { padding-inline:20px; } }
@media(max-width:700px) { .workspace-topbar { min-height:70px; flex-wrap:wrap; gap:12px; } .workspace-brand { width:145px; } .workspace-topbar nav { order:3; width:100%; justify-content:center; gap:20px; padding:8px 0 2px; border-top:1px solid rgba(255,255,255,.12); font-size:.74rem; } .workspace-demo-pill { margin-left:auto; font-size:.61rem; } .workspace-main { width:min(100% - 30px,600px); padding-top:24px; } .workspace-heading { display:block; } .draft-state { width:max-content; margin-top:15px; } .editor-layout { grid-template-columns:1fr; } .profile-preview { position:static; grid-row:2; } .workspace-footer { flex-wrap:wrap; justify-content:center; text-align:center; } }
@media(max-width:440px) { .workspace-main { width:calc(100% - 22px); } .workspace-heading h1 { font-size:2.25rem; } .workspace-intro { font-size:.84rem; } .form-section { padding:20px 15px; } .choice-list { grid-template-columns:1fr; } .editor-actions { padding:15px; flex-direction:column-reverse; align-items:stretch; } .editor-actions .button { width:100%; } .text-action { text-align:center; } .workspace-footer { font-size:.62rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

#profile-photo:not(:focus-visible) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#profile-photo:focus-visible { position:static; width:auto; height:auto; margin:9px 0 0; clip:auto; overflow:visible; white-space:normal; }