:root{
  color-scheme:light;
  font-family:"Aptos","Segoe UI",Arial,sans-serif;
  --bg:#f3f5f6;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --surface-muted:#e9eef0;
  --surface-quiet:#f8f9fa;
  --text:#182229;
  --muted:#66737c;
  --faint:#8c979e;
  --line:#d5dde1;
  --line-strong:#aebbc2;
  --accent:#315f75;
  --accent-hover:#264d60;
  --accent-soft:#e4edf1;
  --success:#277052;
  --warning:#8b651e;
  --danger:#a64141;
  --shadow:0 16px 46px rgb(26 42 50 / .10);
  --radius:7px;
  --panel:var(--surface);
  --orange:var(--accent);
  background:var(--bg);
  color:var(--text);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101517;
  --surface:#171d20;
  --surface-raised:#1b2226;
  --surface-muted:#222b30;
  --surface-quiet:#13191c;
  --text:#edf1f2;
  --muted:#a2aeb4;
  --faint:#7f8b91;
  --line:#303a3f;
  --line-strong:#526168;
  --accent:#74a4b9;
  --accent-hover:#91bacb;
  --accent-soft:#21343d;
  --success:#66b993;
  --warning:#d1ad62;
  --danger:#e17c7c;
  --shadow:0 18px 50px rgb(0 0 0 / .28);
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text)}
header{
  height:68px;
  padding:0 clamp(18px,3vw,38px);
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border-color:var(--line);
  box-shadow:0 1px 0 rgb(19 36 44 / .03);
}
header>div:first-child{gap:12px;font-size:1.05rem;letter-spacing:.01em}
.studio-brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}
.studio-brand>span:last-child{display:grid;line-height:1.05}
.studio-brand strong{font-size:.95rem}
.studio-brand small{margin-top:4px;color:var(--muted);font-size:.67rem;font-weight:650;letter-spacing:.04em}
body[data-mode="customer"] .admin-mode-switch{display:none}
body[data-mode="customer"][data-owner-access="true"] .admin-mode-switch{display:flex}
body[data-mode="customer"] .mode-badge{display:none!important}
.mark{
  width:34px;height:34px;border-radius:5px;background:#1b252d;color:#fff;
  box-shadow:inset 0 -3px #d97841;font-size:1rem;
}
.sub,.muted,.hint{color:var(--muted);font-size:.82rem}
.header-actions{display:flex;align-items:center;gap:9px}
.theme-toggle{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;margin:0;padding:8px 11px}

/* Plaque Studio appearance control */
.studio-theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:7px;background:var(--surface-muted);margin:0}
.studio-theme-switch button{display:grid;place-items:center;width:34px;height:32px;min-height:32px;padding:0;margin:0;border:0;border-radius:5px;background:transparent;color:var(--muted);box-shadow:none}
.studio-theme-switch button:hover:not(:disabled){background:var(--surface);color:var(--text);border-color:transparent}
.studio-theme-switch button.is-active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgb(18 39 50 / .12)}
.studio-theme-switch button:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}
.studio-theme-switch svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:680px){.studio-theme-switch{order:3}.studio-theme-switch button{width:32px;height:30px;min-height:30px}}
.mode-switch{padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--surface-muted)}
.mode-switch button{padding:7px 10px;color:var(--muted);border-radius:4px;font-size:.78rem}
.mode-switch button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgb(18 39 50 / .10)}
.mode-badge{margin-right:8px;padding:3px 6px;border:0;border-radius:3px;background:var(--accent-soft);color:var(--accent);font-size:.67rem;letter-spacing:.08em}
body[data-mode="admin"] .mode-badge{background:#f0e7df;color:#865126;border:0}
:root[data-theme="dark"] body[data-mode="admin"] .mode-badge{background:#3b2c22;color:#dda674}

button,input,select,textarea{font:inherit}
button{
  min-height:38px;padding:9px 12px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface-raised);color:var(--text);font-weight:600;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
button:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-muted)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:1px}
.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
.danger{color:var(--danger)}
label{gap:6px;margin-bottom:12px;color:var(--muted);font-size:.78rem;font-weight:600}
input[type=number],input[type=text],input[type=url],input[type=email],select,textarea{
  width:100%;min-height:40px;padding:9px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);color:var(--text);font-weight:400;
}
input[type=color]{height:40px;border-color:var(--line);border-radius:6px;background:var(--surface)}
h2{color:var(--muted);font-size:.72rem}
.eyebrow{margin-bottom:8px;color:var(--accent);font-size:.69rem;letter-spacing:.14em}

main{height:calc(100vh - 68px);grid-template-columns:340px minmax(480px,1fr) 330px}
body[data-mode="customer"] main,body[data-mode="admin"] main{grid-template-columns:340px minmax(480px,1fr) 330px}
.panel{padding:24px;background:var(--surface);border-color:var(--line);scrollbar-color:var(--line-strong) var(--surface)}
.customer-panel h1,.customer-summary-panel h1{font-size:1.55rem;color:var(--text)}
.customer-intro{color:var(--muted);font-size:.86rem}
.template-card{background:var(--surface-quiet);border-color:var(--line);border-radius:7px;color:var(--text)}
.template-card:hover{border-color:var(--accent)}.template-card strong{color:var(--text)}
.template-card small,.template-dimensions{color:var(--muted)}.template-code{color:var(--accent)}
.text-button{color:var(--muted)}.text-button:hover{color:var(--text)}
.stage{background:var(--bg);border-color:var(--line)}
.canvas-wrap{padding:20px;border:1px solid var(--line);border-radius:9px;background:#dfe5e7;box-shadow:var(--shadow)}
:root[data-theme="dark"] .canvas-wrap{background:#0b1012}
.stage-topbar{padding-top:9px}
.layer{border-radius:5px}.layer.active{background:var(--accent-soft)}
.calculation-card,.design-summary,.customer-section-card,.empty-card,.customer-permissions{
  border-color:var(--line);border-radius:7px;background:var(--surface-quiet);color:var(--muted);
}
.customer-section-card{padding:15px;margin-bottom:12px}
.customer-section-card h3{color:var(--text);font-size:.9rem;letter-spacing:.01em}
.customer-selected-control,.customer-field-card.customer-selected-control{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)!important}
.customer-decoration-control{padding:7px 0 0}
.customer-decoration-control+.customer-decoration-control{border-top:1px solid var(--line);padding-top:12px}
.color-picker-button{background:var(--surface);border-color:var(--line);color:var(--text)}
.color-picker-button:hover,.color-picker-button[aria-expanded="true"]{border-color:var(--accent);background:var(--surface)}
.color-picker-menu{background:var(--surface-raised);border-color:var(--line);box-shadow:var(--shadow)}
.color-picker-option{color:var(--text)}.color-picker-option:hover,.color-picker-option.selected{background:var(--accent-soft)}
.logo-bucket-swatch.selected{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 0 0 1px rgb(0 0 0 / .35)}
.customer-section-card input[type=url]:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.customer-text-position{
  border-color:var(--line);
  background:var(--surface-quiet);
}
.customer-mini-label{color:var(--muted)}

/* Shape tool picker popover */
.shape-picker-popover{position:fixed;z-index:1200;width:264px;max-width:calc(100vw - 16px);background:var(--surface-raised);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);padding:10px}
.shape-picker-heading{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:2px 4px 8px}
.shape-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.shape-picker-option{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);cursor:pointer;font-size:.68rem;line-height:1.15;text-align:center}
.shape-picker-option:hover,.shape-picker-option:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}
.shape-picker-option svg{color:var(--muted)}
.shape-picker-option:hover svg,.shape-picker-option:focus-visible svg{color:var(--accent)}
.customer-mini-button,.customer-align-button{
  border-color:var(--line);
  background:var(--surface);
  color:var(--text);
  font-weight:600;
}
.customer-mini-button{color:var(--accent);font-size:1rem;font-weight:750}
.customer-mini-button:hover,.customer-align-button:hover{
  border-color:var(--line-strong);
  background:var(--surface-muted);
  color:var(--accent-hover);
}

.customer-flow{min-height:calc(100vh - 68px);background:var(--surface);color:var(--text)}
.customer-screen{max-width:1280px;padding:48px clamp(22px,6vw,80px) 76px}
.flow-landing{max-width:none;padding:0}
.flow-hero{
  min-height:590px;padding:74px clamp(24px,7vw,106px);grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);
  gap:80px;background:var(--surface);border-color:var(--line);
}
.flow-hero-copy{max-width:650px}
.flow-hero h1,.flow-page-heading h1,.render-copy h1,.payment-layout h1{
  max-width:720px;margin:13px 0 22px;color:var(--text);font-size:clamp(2.65rem,5.4vw,5.1rem);
  line-height:.96;letter-spacing:-.052em;font-weight:650;
}
.flow-hero p,.flow-page-heading p,.render-copy>p,.payment-layout>div>p{color:var(--muted);font-size:1.05rem;line-height:1.65}
.flow-actions{gap:10px}.flow-secondary{background:var(--surface);border-color:var(--line);color:var(--text)}
.hero-product{margin:0;border-left:1px solid var(--line);padding-left:48px}
.hero-product img{display:block;width:100%;height:370px;object-fit:contain;background:var(--surface-quiet)}
.hero-product figcaption{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:17px 0;border-bottom:1px solid var(--line)}
.hero-product figcaption span{grid-row:1/3;color:var(--accent);font:700 .74rem/1.2 ui-monospace,monospace}
.hero-product figcaption strong{font-size:.98rem}.hero-product figcaption small{color:var(--muted);font-size:.78rem}
.flow-section{padding:78px clamp(24px,7vw,106px);border-color:var(--line);background:var(--surface)}
.section-heading h2,.split-section h2,.local-banner h2{color:var(--text);font-size:clamp(2rem,4vw,3.5rem);font-weight:650}
.section-heading p,.split-section p,.local-banner p{color:var(--muted);font-size:.96rem}
.process-grid,.partner-grid{gap:0;background:transparent;border:1px solid var(--line)}
.process-grid article,.partner-grid article{background:var(--surface);border-right:1px solid var(--line);padding:29px}
.process-grid article:last-child,.partner-grid article:last-child{border-right:0}
.process-grid span{color:var(--accent)}.process-grid h3{color:var(--text);font-size:1.25rem}.process-grid p,.partner-grid small{color:var(--muted)}
.benefit-list{border-color:var(--line)}.benefit-list div{border-color:var(--line)}
.partner-placeholder{background:var(--surface-quiet);border-color:var(--line-strong);color:var(--faint)}
.local-banner{background:var(--surface-muted)}
.flow-back{color:var(--muted)}
.creation-path-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line)}
.creation-path{min-height:380px;padding:30px;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--surface)}
.creation-path:last-child{border-right:0}.creation-path.featured{border-color:var(--line);box-shadow:inset 0 3px var(--accent)}
.creation-path h2{color:var(--text)}.creation-path p{color:var(--muted)}.path-number{color:var(--accent)}
.soon-badge{border-radius:3px;border-color:var(--line-strong);color:var(--muted)}
.public-template-collection,.public-template-grid.public-template-collection{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;width:100%}
.public-template-section{display:grid;gap:18px}
.public-template-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.public-template-section-heading .eyebrow{margin:0 0 7px;font-size:.76rem}
.public-template-section-heading p{margin:0;color:var(--muted);font-size:.9rem}
.public-section-pricing{display:flex;gap:24px;flex:none}
.public-section-pricing>span{display:grid;gap:3px;min-width:82px}
.public-section-pricing strong{color:var(--accent);font-size:1.65rem;line-height:1;font-weight:800;letter-spacing:-.035em}
.public-section-pricing small{color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.public-template-section>.public-template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
.public-template-card{grid-template-rows:300px 1fr;border-color:var(--line);border-radius:8px;background:var(--surface);box-shadow:0 5px 18px rgb(27 45 54 / .05)}
.public-template-card:hover{border-color:var(--line-strong);transform:translateY(-2px);transition:.18s ease}
.public-template-image{height:300px;padding:24px;background:var(--surface-quiet);border-bottom:1px solid var(--line)}
.public-template-kicker{color:var(--accent)}.public-template-body h2{color:var(--text)}.public-template-body p{color:var(--muted)}
.public-template-meta{display:grid;gap:11px;margin:18px 0 20px;color:var(--text)}
.public-template-specs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.76rem;font-weight:650}
.public-template-size,.public-template-type{padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface-quiet)}
.owner-template-grid{margin-top:-20px}
.custom-plaque-tools{border-color:var(--line);background:var(--surface-quiet)}

@media(max-width:680px){.public-template-section-heading{align-items:flex-start;flex-direction:column}.public-section-pricing{width:100%}.public-section-pricing>span{flex:1}.public-template-collection{gap:38px}}

.standalone-template-preview{height:auto;min-height:100vh;overflow:auto;background:var(--bg);color:var(--text)}
.preview-page-header{position:static;height:68px;padding:0 clamp(20px,5vw,64px);border-bottom:1px solid var(--line);background:var(--surface)}
.preview-page-header .button{width:auto;margin:0;text-decoration:none}
.preview-page-main{width:min(1100px,calc(100% - 36px));margin:0 auto;padding:48px 0 64px}
.preview-page-heading h1{margin:7px 0 8px;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em}.preview-page-heading p{margin:0 0 24px;color:var(--muted)}
.preview-page-canvas-wrap{position:relative;height:min(70vh,680px);min-height:460px;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:linear-gradient(var(--surface-quiet) 0 76%,var(--surface-muted) 76%);box-shadow:var(--shadow);cursor:grab}
.preview-page-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.preview-page-canvas-wrap canvas.is-dragging{cursor:grabbing}
.preview-page-canvas-wrap p{position:absolute;inset:0;display:grid;place-items:center;margin:0;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted);font-weight:700}.preview-page-canvas-wrap p[hidden]{display:none}
@media(max-width:680px){.preview-page-main{padding-top:30px}.preview-page-canvas-wrap{height:66vh;min-height:400px}.preview-page-header{padding:0 14px}.preview-page-header .button{min-width:0;padding:9px 11px}}

.render-layout,.payment-layout{grid-template-columns:minmax(310px,.75fr) minmax(500px,1.25fr)}
.render-viewport{height:590px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(var(--surface-quiet) 0 76%,var(--surface-muted) 76% 100%);box-shadow:var(--shadow)}
#geometryRenderCanvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;cursor:grab;touch-action:none}
#geometryRenderCanvas.is-dragging{cursor:grabbing}
.render-status{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted);font-weight:700;z-index:4}
.render-status[hidden]{display:none}
.render-toolbar{position:absolute;left:14px;top:14px;display:flex;gap:5px;z-index:3}
.render-toolbar{right:14px;flex-wrap:wrap}
.render-toolbar button{width:auto;min-height:32px;margin:0;padding:6px 9px;background:color-mix(in srgb,var(--surface) 90%,transparent);font-size:.72rem}
.render-toolbar button.active{border-color:var(--accent);background:var(--accent);color:#fff}
body[data-template-browsing-preview="true"] .render-toolbar,
body[data-template-browsing-preview="true"] .render-copy .flow-actions,
body[data-template-browsing-preview="true"] #renderValidationSummary,
body[data-template-browsing-preview="true"] #renderDimensions{display:none}
#geometryRenderCanvas{cursor:grab;touch-action:none}
#geometryRenderCanvas.is-dragging{cursor:grabbing}
.customer-edit-logo{width:100%;margin:9px 0 0;background:var(--surface);color:var(--accent)}
.render-dimensions{position:absolute;left:18px;right:18px;bottom:39px;color:var(--muted);font-size:.72rem;text-align:center;pointer-events:none}
.render-hint{bottom:17px;color:var(--faint)}
.payment-design-card,.payment-card{border-color:var(--line);border-radius:8px;background:var(--surface)}
.payment-option{border-color:var(--line);border-radius:6px;background:var(--surface-quiet)}
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.checkout-grid label{display:grid;gap:6px;color:var(--muted);font-size:.82rem}.checkout-grid input,.checkout-grid select{width:100%}
.payment-design-card strong{color:var(--text)}
.validation-item{border-radius:5px}.validation-item.ok{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.validation-item.warning{background:color-mix(in srgb,var(--warning) 11%,transparent);color:var(--warning)}
.validation-item.error{background:color-mix(in srgb,var(--danger) 11%,transparent);color:var(--danger)}

.editor-dialog,.save-dialog{border-color:var(--line);border-radius:9px;background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow)}
.editor-dialog::backdrop,.save-dialog::backdrop{background:rgb(16 25 30 / .58)}
.background-tools,.admin-template-preview{border-color:var(--line);border-radius:7px;background:var(--surface-quiet)}
.tool-state{background:var(--surface-muted);color:var(--muted)}
.filament-row{border-color:var(--line);border-radius:6px;background:var(--surface-quiet)}

@media(max-width:1050px){
  .flow-hero,.render-layout,.payment-layout{grid-template-columns:1fr}
  .hero-product{padding:30px 0 0;border-left:0;border-top:1px solid var(--line)}
  .hero-product img{height:330px}
  .creation-path-grid{grid-template-columns:1fr;border-bottom:0}
  .creation-path{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .public-template-section>.public-template-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  header{padding:10px 16px}.header-actions{margin-left:auto}.sub{order:3}
  body[data-mode="customer"] main,body[data-mode="admin"] main{display:flex;height:auto}
  .flow-hero{padding-top:56px}.process-grid,.partner-grid{grid-template-columns:1fr}
  .process-grid article,.partner-grid article{border-right:0;border-bottom:1px solid var(--line)}
  .public-template-grid,.public-template-section>.public-template-grid{grid-template-columns:1fr 1fr}.render-viewport{height:520px}
}
@media(max-width:620px){
  header>div:first-child strong{display:none}.theme-toggle #themeToggleLabel{display:none}.mode-switch button{padding:7px}
  .flow-hero h1,.flow-page-heading h1,.render-copy h1,.payment-layout h1{font-size:2.55rem}
  .flow-hero{grid-template-columns:1fr;gap:45px;padding-inline:20px}.flow-section{padding-inline:20px}
  .hero-product img{height:260px}.public-template-grid,.public-template-section>.public-template-grid{grid-template-columns:1fr}
  .render-toolbar{right:10px;left:10px;justify-content:center}.render-viewport{height:450px}
  .render-dimensions{font-size:.66rem}.customer-screen{padding-inline:18px}.checkout-grid{grid-template-columns:1fr}
}