:root { --cream:#f3f2ed; --charcoal:#171717; --orange:#c76315; --olive:#6a802e; --border:rgba(23,23,23,.16); --surface:rgba(255,255,255,.42); }
* { box-sizing:border-box; }
html { background:var(--cream); }
body { min-width:320px; margin:0; background:var(--cream); color:var(--charcoal); font-family:Arial,Helvetica,sans-serif; }
button,input,select { font:inherit; }
.topbar { min-height:72px; padding:18px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.topbar strong,.back-link { font-size:14px; font-weight:400; }
.back-link { color:inherit; text-decoration:none; }
.builder { min-height:calc(100vh - 72px); display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:clamp(32px,6vw,80px); padding:40px 28px 56px; }
.controls { align-self:start; padding:24px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.2); display:flex; flex-direction:column; gap:23px; }
.control-group { display:grid; gap:9px; }
.control-group label,.control-label { color:rgba(23,23,23,.72); font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
input,select,button { appearance:none; border:1px solid rgba(23,23,23,.24); border-radius:10px; color:inherit; }
input:not([type=checkbox]):not([type=range]),select { width:100%; padding:12px 14px; background:var(--surface); transition:border-color .16s,box-shadow .16s,background-color .16s; }
input:not([type=checkbox]):not([type=range]):hover,select:hover { border-color:rgba(23,23,23,.32); background:#fff; }
input:not([type=checkbox]):not([type=range]):focus,select:focus { outline:none; border-color:var(--charcoal); box-shadow:0 0 0 3px rgba(199,99,21,.2); background:#fff; }
select { padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:right 15px center; background-repeat:no-repeat; }
.segmented-control,.monogram-choices,.position-grid { display:grid; gap:6px; }
.segmented-control { grid-template-columns:repeat(5,minmax(0,1fr)); padding:4px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.24); }
.segmented-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.segmented-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.segmented-control button,.position-grid button,.monogram-choices button { padding:9px 7px; border-color:transparent; background:transparent; font-size:12px; }
.segmented-control button[aria-pressed=true],.position-grid button[aria-pressed=true],.monogram-choices button[aria-pressed=true] { border-color:rgba(23,23,23,.2); background:var(--charcoal); color:var(--cream); }
.monogram-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
.monogram-choices button { display:flex; align-items:center; justify-content:center; gap:8px; }
.monogram-choices span { width:12px; height:12px; display:block; border-radius:50%; }
.dot-orange { background:var(--orange); }.dot-charcoal { background:var(--charcoal); }
.layout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.layout-card { padding:0; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:#fff; text-align:left; }
.layout-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.layout-card span { display:block; padding:9px 10px; font-size:11px; }
.layout-card[aria-pressed=true] { border-color:var(--charcoal); box-shadow:0 0 0 2px rgba(199,99,21,.28); }
.slot-controls { display:grid; gap:10px; }
.slot-heading { color:rgba(23,23,23,.72); font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.slot-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
.slot-row label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.slot-row input[type=file] { width:110px; padding:7px; font-size:11px; }
.slot-media { display:flex; align-items:center; gap:6px; }
.slot-media button { padding:6px 8px; font-size:11px; }
.slot-media button[hidden] { display:none; }
.toggle-control { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; cursor:pointer; }
.toggle-switch { position:relative; width:42px; height:24px; flex:0 0 auto; }.toggle-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.toggle-track { width:100%; height:100%; display:block; border:1px solid rgba(23,23,23,.26); border-radius:999px; background:rgba(23,23,23,.12); }.toggle-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--cream); transition:transform .16s; }.toggle-switch input:checked + .toggle-track { border-color:var(--charcoal); background:var(--charcoal); }.toggle-switch input:checked + .toggle-track .toggle-thumb { transform:translateX(18px); }.toggle-switch input:focus-visible + .toggle-track { outline:2px solid var(--orange); outline-offset:3px; }
.range-group label { display:flex; justify-content:space-between; gap:12px; }.range-group output { color:rgba(23,23,23,.58); font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; }
input[type=range] { width:100%; height:20px; padding:0; border:0; background:transparent; cursor:pointer; }input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:rgba(23,23,23,.18); }input[type=range]::-webkit-slider-thumb { width:14px; height:14px; margin-top:-5px; appearance:none; border:2px solid var(--cream); border-radius:50%; background:var(--charcoal); box-shadow:0 0 0 1px var(--charcoal); }input[type=range]:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
button { padding:12px 15px; background:transparent; font-size:13px; cursor:pointer; transition:background-color .16s,border-color .16s,transform .16s; }button:hover { border-color:var(--charcoal); transform:translateY(-1px); }button:active { transform:translateY(0); }button:focus-visible { outline:none; border-color:var(--charcoal); box-shadow:0 0 0 3px rgba(199,99,21,.2); }
.actions { display:flex; gap:12px; padding-top:2px; }.primary-button { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }.primary-button:hover { background:rgba(23,23,23,.88); }
.preview-panel { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }.canvas-wrap { width:min(100%,780px); padding:18px; background:rgba(23,23,23,.07); }canvas { display:block; width:100%; height:auto; background:var(--cream); }.canvas-tip,.canvas-size { width:min(100%,780px); color:rgba(23,23,23,.58); font-size:12px; }.canvas-tip { margin:12px 0 0; }.canvas-size { margin:6px 0 0; }
@media (max-width:800px) { .topbar { padding:16px 20px; }.builder { min-height:0; grid-template-columns:1fr; gap:32px; padding:28px 20px 40px; }.controls { padding:20px; }.preview-panel { order:-1; }.canvas-wrap,.canvas-tip,.canvas-size { width:100%; } }