:root{--content-bg:#fff;--header-bg:#fff;--header-text:#141D31;--button-bg:#141D31;--button-text:#fff;--primary-contrast:#fff;--login-bg:#141D31;--login-text:#fff;--login-overlay:.45}
body{background:var(--paper);color:var(--ink)}
input::placeholder{color:var(--muted);opacity:1}dialog,.dialog-top{background:var(--content-bg)}
.topbar{background:var(--header-bg);color:var(--header-text)}.topbar .brand,.topbar .quiet{color:var(--header-text)}.topbar .secondary{background:transparent;color:var(--header-text);border-color:currentColor}
.primary{background:var(--button-bg);color:var(--button-text);border-color:var(--button-bg)}.primary:hover{background:var(--button-bg);filter:brightness(.9)}.secondary{background:var(--content-bg);border-color:var(--button-bg);color:var(--button-bg)}.secondary:hover{background:var(--content-bg);filter:brightness(.95)}
.brand-mark,.product-list-head{background:var(--primary);color:var(--primary-contrast)}.site-name{display:block;flex:1 0 220px;min-width:min(100%,220px);max-width:100%;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:break-word;word-break:normal;line-height:1.2}.site-name small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5}.site-logo{display:block;width:auto;height:auto;max-width:180px;max-height:52px;object-fit:contain;flex-shrink:0}
.login-story{background:var(--login-bg);color:var(--login-text)}.login-story .brand,.login-story .eyebrow,.login-story h1 span,.login-story p,.login-story .story-footer,.login-story .story-caption{color:var(--login-text)}.login-story p,.login-story .eyebrow,.login-story .story-footer,.login-story .story-caption{opacity:.8}.login-story .story-rule{background:var(--login-text)}
.login-panel{background:var(--content-bg)}.login-story .login-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.login-story.has-login-image:before{content:"";position:absolute;inset:0;background:var(--login-bg);opacity:var(--login-overlay);z-index:1;pointer-events:none}.login-story>.brand,.login-story>.story-copy,.login-story>.story-footer{position:relative;z-index:2}.login-story:after{z-index:1;pointer-events:none}
.product-row:hover{background:var(--content-bg);box-shadow:inset 3px 0 var(--primary)}.admin-form input:not([type=checkbox]),.admin-form select,.login-form input{background:var(--content-bg);color:var(--ink)}
.appearance-assets,.appearance-colors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px}.asset-upload{min-width:0;display:flex;flex-direction:column;gap:10px}.asset-preview{height:130px;display:flex;justify-content:center;align-items:center;padding:14px;border:1px solid var(--line);border-radius:5px;background-color:#fff;background-image:conic-gradient(#e0e4ec 25%,transparent 0 50%,#e0e4ec 0 75%,transparent 0);background-size:18px 18px}.asset-preview img{max-width:100%;max-height:100%;object-fit:contain}.asset-preview span{font-size:11px;padding:5px 9px;background:#fff;color:#596379;border-radius:3px}.asset-preview [hidden]{display:none}
.appearance-form .asset-upload input[type=file]{height:auto;padding:10px;font-size:10px}.asset-upload input[type=file]::file-selector-button{font:inherit;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:3px;padding:7px;margin-right:7px;cursor:pointer}.appearance-form .asset-upload .checkbox-label{font-size:11px;margin-top:0}
.color-setting{min-width:0}.color-setting>div{display:flex;align-items:center;gap:8px;margin-top:8px}.appearance-form .color-setting input[type=color]{width:44px;min-width:44px;height:40px;padding:3px;cursor:pointer}.appearance-form .color-setting input[data-color-hex]{min-width:0;height:40px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.appearance-form label{justify-content:flex-start}.appearance-form input#login-overlay{max-width:140px}.appearance-section .section-intro{align-self:start}.admin-nav{flex-wrap:wrap}

@media(max-width:500px){.appearance-assets,.appearance-colors{grid-template-columns:1fr;gap:14px}}

/* Give the full name its own line before allowing the logo to crowd it. */
.topbar{flex-wrap:wrap;gap:18px 28px}.topbar .brand{flex:1 1 360px;display:flex;flex-wrap:wrap;align-items:center;max-width:100%;min-width:0;gap:14px}.topbar .site-name{flex:1 0 220px}.topbar .header-right{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 22px;max-width:100%;margin-left:auto}.topbar .header-right>form{flex-shrink:0}.login-story .brand{min-width:0;max-width:100%;gap:16px;flex-shrink:0;flex-wrap:wrap;align-items:center}
@media(max-width:900px){.topbar .brand{flex-basis:100%}.topbar .header-right{flex-direction:row;justify-content:flex-start;width:100%;margin-left:0}.topbar .site-logo{max-width:180px;max-height:48px}}
@media(max-width:500px){.topbar{padding:18px 5%;gap:14px}.topbar .brand{gap:12px;font-size:21px}.topbar .site-logo{max-width:120px;max-height:44px}.topbar .brand small{font-size:6.5px;letter-spacing:1px}.topbar .header-right{gap:10px 18px}.topbar .header-right .secondary{font-size:11px;padding:9px 12px}.login-story .site-logo{max-width:120px;max-height:48px}.login-story .site-name{font-size:21px}.login-story .brand{gap:12px}}