/* SnailBox storefront: dark surfaces; uploaded product colors remain unchanged. */
:root{color-scheme:dark;--ink:#f1f2f4;--muted:#a1a5af;--line:#30333c;--accent:#a8b9ff;--paper:#191b22;--soft:#242731;background:#101116;color:var(--ink)}
body{background:#101116;color:var(--ink)}
button,input,select,textarea{color:var(--ink)}
button:hover{background:#242731;border-color:#565d70}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#a8b9ff}
input,select,textarea,.search input{background:#191b22;border-color:var(--line);color:var(--ink)}
input::placeholder,textarea::placeholder{color:#858b99;opacity:1}
select option{background:#191b22;color:#f1f2f4}
.primary{background:#afbeff;border-color:#afbeff;color:#141b35}
.primary:hover{background:#c4cfff;border-color:#c4cfff;color:#141b35}
.top{background:#14151b;border-color:var(--line)}
.brand>svg,.top-actions button,.top-actions a{border-color:#363a45}
.brand small,.top nav button,.collection-index,.product-card>p,.source-link{color:var(--muted)}
.top nav button.selected{color:#e0e6ff;border-color:#afbeff}
.top-actions .cart-link b{background:#afbeff;color:#141b35}
.store-intro h1{color:#f5f5f7}
.catalog-layout aside button{color:var(--muted);background:transparent}
.catalog-layout aside button:hover{color:#edf0ff;background:#1c1f28}
.catalog-layout aside button.active{color:#c7d1ff;background:transparent}
.catalog-layout aside button span{color:#a1a5af}
.commerce-tile,.commerce-tile:hover,.product-image{background:#1b1d25;border-color:#363a45}
.commerce-tile:hover{border-color:#afbeff}
.commerce-label{background:#1b1d25f5;border-color:#4a4e5c;color:#f1f2f4}
.commerce-label strong{background:#afbeff;color:#141b35}
.stock-label,.soldout{background:#30343f;color:#f1f2f4}
.badge{background:#30343f;color:#e3e9ff}
.image-arrow{background:#282c37;color:#edf0ff}
.empty{background:#191b22;border-color:var(--line)}
.empty-mark{background:#242731;border-color:#393d49;color:#b7c6ff}
.announcement{background:#20283e;color:#d5dfff}
.modal{background:#191b22;border-color:#424754;color:#f1f2f4;box-shadow:0 24px 90px #0009}
.modal::backdrop{background:#05060bb3}
.modal>header{background:#191b22;border-color:var(--line)}
.product-detail .detail-price{background:#afbeff;color:#141b35}
.detail-price del{color:#3f4b70}
.hero-image{background:#15171e;border-color:#363a45}
.thumbs button{background:#20232c;border-color:#454a57}
.thumbs button.active{border-color:#afbeff}
.gallery-navigation{background:#1b1d25f5;border-color:#4a4e5c;color:#f1f2f4}
.gallery-navigation span{color:#c1c5cf}
.gallery-navigation button:hover{background:#303540}
.dot{color:#afbeff}
.summary-card,.order-card,.category-list>div,.settings-form{background:#191b22;border-color:var(--line)}
.manage-tabs button.active{background:#afbeff;color:#141b35;border-color:#afbeff}
.upload-button{background:#20232c;border-color:#555c6d}
.upload-grid>div>span{background:#191b22ee;color:#f1f2f4}
.editor-save{background:#191b22}
th{background:#20232c;color:#b9bfcb}
.status{background:#253c35;color:#b5e3ce}
.status.pending{background:#403620;color:#f0d29b}
.form-error{color:#ffaaa6}
#toast,.dialog-toast{background:#e4e9ff;color:#17213d;box-shadow:0 8px 28px #0005}
.check input{accent-color:#afbeff}
.mobile-nav{background:#14151bf5;border-color:#363a45}
.mobile-nav button{color:#a9aeba}
.mobile-nav button.selected,.mobile-nav button:hover{color:#c7d1ff;background:#242a3b}
footer{border-color:var(--line)}
.store-controls{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:12px 0 22px}
.store-controls select{width:170px;margin-left:0;margin-right:auto}
.store-controls button{white-space:nowrap}
@media(max-width:700px){
 .store-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .store-controls select{width:100%;margin:0}
 .store-controls button{font-size:12px;min-height:42px;padding:8px}
 .catalog-layout aside{border-color:var(--line)}
 .catalog-layout aside button{background:#21242e;color:#b9bfcb}
 .catalog-layout aside button.active{background:#afbeff;color:#141b35}
 .catalog-layout aside button.active span{color:#35426a}
}
/* Compact storefront: controls begin directly below the app header. */
.top{height:64px;gap:20px}
.brand>span{font-size:18px;letter-spacing:0}
.brand>svg{width:34px;height:34px;padding:8px;border-radius:9px}
.top nav{gap:20px}
.top nav button{padding:11px 2px}
.top-actions button,.top-actions a{height:36px;min-width:36px;padding:8px;border-radius:9px}
.store-controls{padding:12px 0;margin-bottom:16px}
.store-controls select,.store-controls button{min-height:38px;font-size:13px;padding:8px 12px}
.collection-heading{margin-bottom:12px}
.collection-heading h2{font-size:16px}
.announcement{margin-top:12px}
.mobile-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){
 .top{height:58px;padding:0 14px;gap:10px}
 .brand{gap:8px}
 .brand>span{font-size:16px}
 .top-actions{gap:6px}
 .top-actions button,.top-actions a{width:34px;min-width:34px;height:34px}
 .store-controls{padding:10px 0;margin-bottom:12px;gap:7px}
 .store-controls button,.store-controls select{min-height:38px;font-size:12px}
 .catalog-layout aside{margin-bottom:14px;padding-bottom:10px}
 .mobile-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Dedicated store identity and slim header. */
.top{height:48px;padding:0 max(16px,calc((100vw - 1504px)/2));gap:16px}
.brand{gap:8px}
.brand .store-logo{width:32px;height:32px;flex:none;object-fit:contain}
.brand>span{font-size:16px;font-weight:650}
.top nav{gap:18px;margin-left:20px}
.top nav button{padding:6px 2px;font-size:13px}
.top-actions button,.top-actions a{height:32px;min-width:32px;padding:6px;border-radius:7px}
.top-actions svg{width:18px;height:18px}
@media(max-width:700px){
 .top{height:46px;padding:0 12px;gap:8px}
 .brand{gap:6px}
 .brand .store-logo{width:30px;height:30px}
 .brand>span{font-size:15px}
 .top-actions{gap:5px}
 .top-actions button,.top-actions a{width:32px;min-width:32px;height:32px;padding:6px}
}
