:root { color-scheme: dark; --mint:#88e7b9; --ink:#e8f4ec; --muted:#a5bdb0; --border:#294638; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.35; cursor:not-allowed; }
a { color:var(--mint); }
:focus-visible { outline:2px solid #a6f9d1; outline-offset:4px; }
.preview-notice { padding:9px 18px; background:#1e332b; color:#b9ccbe; text-align:center; font:11px/1.6 Arial,sans-serif; }
.preview-notice a { color:#a5f1c9; font-weight:700; text-underline-offset:3px; }
.brand,.admin-brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; }
.store-brand-logo { display:block; width:52px; height:52px; flex:none; object-fit:contain; border-radius:50%; box-shadow:0 0 0 1px #79dab34d; }
.store-brand-wordmark { display:inline-flex; white-space:nowrap; font-size:22px; font-weight:700; letter-spacing:-.8px; line-height:1; }
.store-brand-name { color:#ffffff; }.store-brand-suffix { color:#6ee7b7; }
.card.buy-mascot { isolation:isolate; min-height:244px; padding:22px; overflow:hidden; border-color:#2d604b; background:radial-gradient(ellipse at 88% 35%,#24583e88,transparent 66%),linear-gradient(125deg,#142e23,#0b2118); }
.buy-mascot__copy { position:relative; z-index:2; width:55%; }
.card.buy-mascot .icon { width:34px; height:34px; font-size:25px; margin-bottom:16px; background:#194a35; color:#87edc1; border-radius:11px; }
.card.buy-mascot h2 { margin:0 0 10px; color:#fff; font-size:21px; font-weight:700; line-height:1.2; letter-spacing:-.65px; }
.card.buy-mascot p { max-width:190px; padding:0; color:#bfd5c9; font-size:12px; line-height:1.65; }
.buy-mascot__arrow { display:flex; align-items:center; justify-content:center; margin-top:19px; width:35px; height:35px; border:1px solid #77dcb2; border-radius:50%; color:#e6fff1; font-size:25px; line-height:1; }
.buy-mascot__art { position:absolute; z-index:1; right:0; bottom:0; width:60%; height:calc(100% - 12px); object-fit:contain; object-position:right bottom; pointer-events:none; }
.buy-mascot__spark { position:absolute; z-index:0; color:#76ddab; pointer-events:none; line-height:1; }
.buy-mascot__spark--first { top:32px; right:39%; font-size:18px; }
.buy-mascot__spark--second { top:52%; right:6%; font-size:13px; }
@media(max-width:400px){.card.buy-mascot{padding:20px;min-height:238px}.card.buy-mascot h2{font-size:18px;letter-spacing:-.5px}.card.buy-mascot p{font-size:11.5px}.card.buy-mascot .icon{margin-bottom:15px}.buy-mascot__copy{width:55%}}
.page>header,.admin-header { flex-wrap:wrap; row-gap:12px; }
.page>header>nav { margin-left:auto; }
@media(max-width:600px){.store-brand-logo{width:44px;height:44px}.brand,.admin-brand{gap:8px}.store-brand-wordmark{font-size:20px}}
body.mobile-preview .store-brand-logo { width:44px; height:44px; }
body.mobile-preview .store-brand-wordmark { font-size:20px; }
@media(max-width:380px){.store-brand-wordmark,body.mobile-preview .store-brand-wordmark{font-size:18px}.store-brand-logo,body.mobile-preview .store-brand-logo{width:38px;height:38px}.brand,.admin-brand{gap:7px}}
.banner-carousel { --slide-height:260px; }
.carousel-stage { position:relative; height:var(--slide-height); border-radius:24px; overflow:hidden; touch-action:pan-y; }
.carousel-slide { position:absolute; inset:0; width:100%; height:var(--slide-height); min-height:var(--slide-height); }
.carousel-stage.is-image { height:auto; aspect-ratio:var(--banner-aspect,16 / 9); }
.carousel-stage.is-image .carousel-slide { height:100%; min-height:0; }
.carousel-slide .home-banner__description { max-width:320px; }
.banner-destination { position:absolute; inset:0; z-index:3; border-radius:inherit; cursor:pointer; }
.banner-destination:hover { box-shadow:inset 0 0 0 2px #8eeec05c; }
.banner-destination:focus-visible { outline:3px solid #a6f9d1; outline-offset:-5px; }
.template-buy { background:radial-gradient(ellipse at 95% 35%,#2b585e,transparent 57%),linear-gradient(115deg,#142b28,#193e3b); }
.template-sell { --banner-mint:#edcf83; background:radial-gradient(ellipse at 95% 35%,#5e5934,transparent 57%),linear-gradient(115deg,#202c22,#2f3e2e); }
.image-slide { display:grid; place-items:center; background:#10271e; border:0; border-radius:24px; overflow:hidden; }
.image-slide img { display:block; width:100%; height:100%; min-height:0; object-fit:cover; }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; }
.carousel-controls>button { width:30px; height:30px; padding:0; border:1px solid #2a4b3b; border-radius:50%; background:#10271e; color:#9deac0; }
.slide-dots { display:flex; gap:2px; flex-wrap:wrap; justify-content:center; max-width:65%; }
.slide-dots button { border:0; padding:8px 5px; background:transparent; }
.slide-dots button::after { content:''; display:block; width:6px; height:6px; border-radius:9px; background:#3f5f4e; transition:width .2s; }
.slide-dots button[aria-current=true]::after { width:21px; background:#80e5b1; }
.slide-count { font-size:11px; color:#a4bdae; white-space:nowrap; }
.inline-status:empty { display:none; }
.inline-status { color:#e7c886; font-size:12px; line-height:1.5; }
@media(prefers-reduced-motion:reduce){.slide-dots button::after{transition:none}}
@media(max-width:600px){.banner-carousel{--slide-height:228px}.carousel-stage,.image-slide{border-radius:20px}.carousel-controls{gap:8px}}
body.mobile-preview .banner-carousel { --slide-height:228px; }
body.mobile-preview .carousel-stage,body.mobile-preview .image-slide { border-radius:20px; }
body.admin-page { margin:0; background:radial-gradient(ellipse at 90% 0,#113225 0,transparent 40%),#0b1611; color:var(--ink); font:14px/1.5 Arial,Helvetica,sans-serif; }
.admin-shell { max-width:1160px; margin:auto; padding:28px 32px 40px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--border); padding-bottom:26px; }
.admin-brand { text-decoration:none; color:#ecf5ef; font-size:22px; font-weight:700; letter-spacing:-1px; }
.admin-brand>span { color:var(--mint); }.admin-brand small { font-size:9px; letter-spacing:1px; color:var(--muted); margin-left:12px; vertical-align:middle; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; border-radius:10px; padding:11px 17px; font-size:12px; font-weight:700; border:1px solid transparent; text-decoration:none; }
.primary { color:#0d281c; background:#85e6b7; box-shadow:0 1px 0 #c4fddd inset; }
.primary:hover { background:#a1f2cc; }.secondary { color:#b8dcc7; background:#142b20; border-color:#355441; }
.admin-intro { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:34px 0 25px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; color:#8cdbb0; margin:0 0 10px; }
.admin-intro h1 { font-size:34px; font-weight:600; letter-spacing:-1px; margin:0 0 8px; line-height:1.15; }
.admin-intro p:not(.eyebrow) { color:var(--muted); margin:0; font-size:13px; }
.count-pill { background:#1c3628; border:1px solid #345a42; padding:8px 12px; border-radius:30px; color:#b3e6c9; font-size:11px; white-space:nowrap; }
.admin-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:20px; align-items:start; }
.admin-panel { border:1px solid var(--border); border-radius:20px; padding:24px; background:#111f18; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.admin-panel h2 { font-size:18px; margin:0 0 4px; letter-spacing:-.4px; }.panel-heading p { color:var(--muted); font-size:12px; margin:0; }
.small-label { font-size:9px; letter-spacing:1px; color:#8fa899; white-space:nowrap; }
.upload-zone { border:1px dashed #4d745a; border-radius:14px; padding:22px 15px; background:#172b20; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.upload-zone.dragging { background:#284734; border-color:#a4edbf; }.upload-zone p { color:#abc4b3; font-size:12px; margin:0; }.upload-zone small { color:#829e8c; font-size:10px; line-height:1.7; }
.upload-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#2b4d36; font-size:24px; color:#b2edc3; }.upload-zone strong { font-size:14px; }
.banner-list { display:grid; gap:10px; margin-top:20px; }.banner-item { display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; border:1px solid #2b4433; background:#14251b; padding:12px; border-radius:13px; }
.banner-item.is-hidden { opacity:.65; }.banner-thumb { width:100px; height:90px; object-fit:contain; background:#0c1d14; border-radius:9px; border:1px solid #32533e; }
.template-thumb { display:flex; flex-direction:column; justify-content:center; padding:12px; font-size:11px; font-weight:700; color:#acf0c9; background:radial-gradient(ellipse at right top,#316e4c,transparent 70%),#173b29; }
.template-thumb small { color:#9bb8a5; font-size:8px; font-weight:400; margin-top:6px; }.template-thumb.template-sell { color:#ead79b; }
.banner-fields { min-width:0; }.banner-name-label { display:flex; align-items:center; gap:6px; color:#96b6a2; font-size:10px; margin-bottom:5px; }.order-number { display:grid; place-items:center; width:18px; height:18px; background:#2a4533; border-radius:5px; font-size:10px; }
.banner-name,.banner-url { color:#edf5ef; width:100%; font-size:12px; border:1px solid #36513e; border-radius:7px; padding:8px; background:#0c1b12; }
.banner-link-label { display:block; margin:12px 0 5px; color:#b8d4c2; font-size:10px; }
.banner-link-hint { display:block; margin:5px 0 10px; color:#8faa98; font-size:10px; line-height:1.5; }
.banner-link-shortcuts { display:flex; flex-wrap:wrap; gap:7px; }
.banner-internal-link { min-height:36px; padding:7px 10px; border:1px solid #3d624a; border-radius:7px; background:#203b2b; color:#c4ebd3; font:inherit; font-size:10px; line-height:1.5; text-align:left; cursor:pointer; }
.banner-internal-link:focus-visible { outline:2px solid #88e7b9; outline-offset:3px; }
.banner-internal-link:disabled { cursor:wait; opacity:.6; }
.banner-url[aria-invalid=true] { border-color:#f3a18b; }
.banner-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:9px; }.banner-actions>button { width:30px; height:27px; background:#213c2b; border:1px solid #355540; color:#c7e8d0; border-radius:6px; }
.banner-actions>button.remove { width:auto; padding:0 8px; color:#e2b7a8; background:transparent; border-color:#624436; font-size:10px; }.visibility-label { display:inline-flex; align-items:center; gap:5px; color:#c0dec9; font-size:11px; margin-right:auto; }
input[type=checkbox] { accent-color:#88e7b9; }.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0; padding-bottom:24px; border-bottom:1px solid var(--border); }.toggle-row strong{font-size:13px}.toggle-row small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.toggle-row input { appearance:none; flex:none; width:38px; height:22px; padding:2px; border:1px solid #56705d; border-radius:25px; background:#263e2c; cursor:pointer; }.toggle-row input::before { content:''; display:block; width:16px; height:16px; background:#c4ddcb; border-radius:50%; transition:transform .15s; }.toggle-row input:checked { background:#6dd39d; border-color:#8fefb9; }.toggle-row input:checked::before { transform:translateX(16px); background:#10291b; }
.field-label { display:block; color:#c5daca; font-size:12px; margin:0 0 9px; }.settings-panel select { width:100%; border:1px solid #38573f; background:#172c1f; color:#e8f4ed; padding:12px; border-radius:9px; }
.settings-note { display:flex; align-items:flex-start; gap:10px; margin:20px 0; color:#a6c2ad; }.settings-note>span { color:#b9d6a9; font-size:20px; }.settings-note p { font-size:12px; line-height:1.7; margin:0; }
.preview-summary { display:flex; align-items:center; gap:7px; background:#1c3525; padding:12px; border-radius:9px; font-size:11px; }.status-dot { width:6px; height:6px; border-radius:50%; background:#8cdaa6; }.muted { color:#88a491; font-size:11px; margin:15px 0 0; line-height:1.7; }
.save-bar { position:sticky; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:22px; padding:16px 20px; background:#1a3022f5; border:1px solid #3b5c44; border-radius:15px; box-shadow:0 12px 30px #0004; }.save-bar strong { display:block; font-size:12px; }.save-bar span { display:block; color:#a3bba9; font-size:11px; margin-top:4px; }.save-bar .button { flex:none; }
.empty-list { color:#a7bfaf; font-size:13px; text-align:center; padding:20px 0; }.text-button { margin-top:13px; padding:8px 0; border:0; background:transparent; color:#b2dec1; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:760px){.admin-shell{padding:20px 16px 30px}.admin-header{padding-bottom:20px}.admin-brand{font-size:19px}.admin-brand small{display:none}.admin-header .button{padding:9px 11px;font-size:11px}.admin-intro{margin:26px 0 20px;align-items:flex-start}.admin-intro h1{font-size:30px}.admin-layout{grid-template-columns:1fr;gap:16px}.admin-panel{padding:19px}.count-pill{font-size:10px;padding:6px 9px}.save-bar{padding:14px;align-items:stretch;flex-direction:column;bottom:8px}.banner-item{grid-template-columns:80px minmax(0,1fr);gap:10px}.banner-thumb{width:80px;height:100px}.template-thumb{font-size:10px;padding:8px}.save-bar .button{width:100%}}