/* Original syrup brand, shared warm surfaces, device theme. */
html[data-theme=light]{color-scheme:light}
html[data-theme=dark]{color-scheme:dark;--ghost:#211e24;--white:#2c272f;--ink:#f8f0eb;--muted:#c2b3be;--line:#49404b;--soft:#41302e;--accent:#ffb195}
.topbar:has(.auth-controls){display:flex;flex-wrap:nowrap;gap:20px}
.header-controls{flex:1;min-width:120px;margin-left:0}
.search-box{width:100%;border-color:var(--line)}
.topbar>.auth-controls{margin-left:0;flex-shrink:0}
.zone-link{text-decoration:none}
.syrup-add{width:100%;display:flex;justify-content:center;align-items:center;gap:13px;min-height:78px;margin:0 0 28px;border:1px solid #efd2bb;border-radius:14px;background:#fff0e8;color:#583e38;box-shadow:0 3px 0 #eddfd3;font-weight:750;font-size:17px;letter-spacing:-.5px}
.syrup-add>.icon{width:42px;height:42px;transition:transform .18s}
.syrup-add:hover{border-color:#d9916e;background:#ffe7da}
.syrup-add:hover>.icon{transform:rotate(-8deg) translateY(-2px)}
.my-page{margin-bottom:25px}
.my-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.my-heading h1{font-size:22px;letter-spacing:-.8px;margin:0}
.my-heading #my-nickname{font-size:13px;color:var(--muted)}
.my-heading #open-profile{margin-left:auto}
.my-tabs{display:flex;gap:7px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px}
.my-tabs button{background:none;border:0;border-radius:8px;padding:9px 13px;color:var(--muted);font-weight:600}
.my-tabs button[aria-pressed=true]{background:var(--soft);color:var(--accent)}
.my-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.my-metrics>div{padding:20px;border:1px solid var(--line);background:var(--white);border-radius:12px}
.my-metrics span{display:block;font-size:13px;color:var(--muted)}
.my-metrics strong{font-size:27px;font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.my-syrup{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:20px;margin:16px 0}
.my-syrup>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;flex:1}
.my-syrup strong{font-size:29px}.my-syrup span{font-size:13px;color:var(--muted)}
.my-settings{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:12px 0 20px;font-size:14px}
.my-settings input{width:22px;height:22px;accent-color:var(--tomato)}
.my-settings span{font-size:12px;color:var(--muted)}
.my-settings #my-territory{margin-left:auto}
.syrup-rules{font-size:13px;color:var(--muted);margin:20px 0}.syrup-rules summary{cursor:pointer}.syrup-rules p{max-width:80ch;line-height:1.9}
.my-leaders h2,.zone-leaders h2{font-size:17px}
.my-leaders ol,.zone-leaders ol{list-style:none;margin:0;padding:0}
.leader-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:12px 0;font-size:14px}
.leader-row .avatar{width:40px;height:42px;border-radius:8px}
.rank-number{width:36px;flex-shrink:0;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.leader-name{min-width:0;overflow-wrap:anywhere}.leader-score{margin-left:auto;white-space:nowrap;font-size:13px;color:var(--muted)}
.zone-main{padding-top:30px;padding-bottom:60px}
.zone-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.zone-heading h1{margin:0;font-size:24px;letter-spacing:-.7px}.zone-heading h1 img{vertical-align:middle;margin-right:7px}
.zone-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}.zone-toolbar select{padding:7px;border:1px solid var(--line);background:var(--white);border-radius:7px}
.zone-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:start}
.zone-stage{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--white);padding:12px}
#syrup-board{display:block;width:100%;min-width:0;height:auto;touch-action:none;cursor:crosshair}
.zone-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}.zone-controls .text-button{padding:6px}.zone-cost{font-size:13px;color:var(--muted)}
.zone-keyboard{font-size:12px;color:var(--muted)}.zone-keyboard input{width:60px;padding:4px;border:1px solid var(--line);background:var(--white);border-radius:5px}.zone-keyboard label{margin-right:8px}
.zone-note{font-size:13px;color:var(--muted);line-height:1.8}.zone-note a{color:var(--accent)}
.swatch{display:inline-block;width:12px;height:12px;border-radius:4px;flex-shrink:0}.swatch-0{background:#ee7652}.swatch-1{background:#dc9b48}.swatch-2{background:#bb7f64}.swatch-3{background:#ca697d}.swatch-4{background:#af8450}.swatch-5{background:#9f726e}.swatch-6{background:#dc8f77}.swatch-7{background:#c4a15e}
html[data-theme=dark] .syrup-add{color:#ffdec9;background:#48302b;border-color:#795442;box-shadow:0 3px 0 #352a26}
html[data-theme=dark] :is(.empty,dialog,.field input,.field select,.field textarea,.asset-slot,.character-option,.account-panel input,.background-option){background:var(--white);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.warning,.private-panel){background:var(--soft);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.author,.category-label,.featured-author,.row-meta .category-label,.section-heading>span,.library-heading>span){color:var(--muted)}
@media(max-width:960px){.topbar:has(.auth-controls){flex-wrap:wrap;padding-block:13px;gap:12px 18px}.header-controls{order:4;flex-basis:100%}.topbar>.auth-controls{margin-left:auto}.modes{align-self:auto;height:48px}}
@media(max-width:760px){.topbar:has(.auth-controls){display:flex}.modes{gap:0}.zone-layout{grid-template-columns:1fr}.zone-leaders{max-width:none}.my-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.syrup-add{min-height:70px;margin-bottom:22px}.my-settings #my-territory{margin-left:0;width:100%}}
@media(max-width:480px){.topbar:has(.auth-controls){gap:10px}.brand{font-size:17px;gap:6px}.brand-mark,.brand-mark img{width:36px;height:36px}.mode{min-width:40px;padding:0 8px}.topbar>.auth-controls{width:auto;flex-basis:auto;margin-top:0}.my-metrics>div{padding:15px}.my-heading #open-profile{margin-left:0}.my-syrup{gap:12px;padding:16px}.syrup-add{font-size:16px}.my-syrup>div{min-width:150px}}
@media(prefers-reduced-motion:reduce){.syrup-add>.icon{transition:none}}

#syrup-board{border-radius:7px;outline-offset:4px}#syrup-board[data-locked=true]{cursor:default}.zone-cost strong{color:var(--accent)}
html[data-theme=dark] .syrup-add:hover{background:#56372e}