/* Cannery theme: navy sea, tin rims, label red/cream */
:root{--deep:#12395a;--green:#1f7ea8;--lime:#f3dc8a;--label:#d6212a;--label-dark:#b81a22;--cream:#fbf3dc;--tin:#c5d1d8;--tin-dark:#8fa1ac;--sea:#0e2f4a;--sea-dark:#0a2236;--soft:#eaf1f4}
body{background:linear-gradient(180deg,#eaf1f4,#f3f6f6 320px);color:#1d2f3d}
.task-table-wrap{position:relative}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:5px;z-index:30;background:linear-gradient(90deg,var(--label) 0 34%,var(--cream) 34% 66%,var(--deep) 66%)}

.sidebar{background:linear-gradient(180deg,var(--sea),var(--sea-dark));border-right:0;padding-top:34px;box-shadow:inset -6px 0 0 #6f8795,inset -7px 0 0 #dfe8ec}
.sidebar::after{content:"";position:absolute;inset:auto 0 0 0;height:150px;pointer-events:none;opacity:.5;background:radial-gradient(circle at 20px 8px,transparent 13px,#16506f 14px 15px,transparent 16px) 0 0/40px 20px,radial-gradient(circle at 0 18px,transparent 13px,#16506f 14px 15px,transparent 16px) 0 0/40px 20px;mask-image:linear-gradient(0deg,#000,transparent)}
.sidebar>*{position:relative;z-index:1}
.brand-logo{background-color:#fff;border-radius:10px;box-shadow:0 0 0 2px #dfe8ec,0 3px 8px #0006}
.brand-copy strong{color:#fff;font-size:14px}.brand-copy small{color:#f3dc8a;font-size:8px}
.nav-label{color:#6f93aa}.nav-item{color:#b9d0de}.nav-item:hover{background:#ffffff14;color:#fff}.nav-item.active{background:#ffffff1f;color:#fff;box-shadow:inset 3px 0 0 var(--label)}
.nav-icon{color:#7fa4ba}.nav-item.active .nav-icon,.nav-arrow{color:#f3dc8a}.nav-count{background:#ffffff1f;color:#dbe8ef}.nav-new{color:#f3dc8a}.nav-divider{background:#ffffff1f}
.shift-card{background:#ffffff0f;border-color:#ffffff1f}.shift-card strong,.profile strong{color:#fff}.shift-card small,.profile small{color:#8fb0c4}.profile{border-top-color:#ffffff1f}.avatar{background:var(--cream);color:var(--label)}

.topbar{border-bottom:1px solid #d3dee3}.breadcrumb strong{color:var(--deep)}
.page-heading h1{color:var(--sea)}.eyebrow-line{background:var(--label)}
.button-primary{background:var(--label);box-shadow:0 3px 0 var(--label-dark)}.button-primary:hover{background:#e22b35}
.button-dark{background:var(--sea)}.button-dark:hover{background:#1a4a6b}.text-button{color:var(--green)}

.line-banner{position:relative;height:112px;margin-bottom:17px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#14486b,var(--sea));box-shadow:0 8px 20px #0e2f4a2e}
.line-banner::before{content:"";position:absolute;inset:0;opacity:.35;background:radial-gradient(circle at 20px 8px,transparent 13px,#3d7f9f 14px 15px,transparent 16px) 0 0/40px 20px,radial-gradient(circle at 0 18px,transparent 13px,#3d7f9f 14px 15px,transparent 16px) 0 0/40px 20px}
.banner-text{position:absolute;left:22px;top:17px;z-index:2;color:#fff;display:grid;gap:4px}.banner-text strong{font-size:15px;font-weight:600}.banner-text small{color:#f3dc8a;font:700 9px Manrope,sans-serif;letter-spacing:.4px}
.banner-badge{position:absolute;right:20px;top:17px;z-index:2;background:var(--cream);color:var(--label);border:2px solid var(--label);border-radius:4px;padding:5px 10px;font:800 10px Manrope,sans-serif;transform:rotate(-2deg)}
.belt-cans{position:absolute;left:0;right:0;bottom:19px;height:46px;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='46'%3E%3Crect x='15' y='8' width='40' height='33' rx='4' fill='%23cfd9df' stroke='%238fa1ac'/%3E%3Crect x='15' y='18' width='40' height='14' fill='%23d6212a'/%3E%3Ccircle cx='35' cy='25' r='4' fill='%23fbf3dc'/%3E%3Cellipse cx='35' cy='8' rx='20' ry='3' fill='%23eef3f5' stroke='%238fa1ac'/%3E%3C/svg%3E") 0 0 repeat-x;animation:belt 5s linear infinite}
.belt{position:absolute;left:0;right:0;bottom:0;height:20px;z-index:1;background:repeating-linear-gradient(90deg,#51606b 0 10px,#6b7b86 10px 12px);border-top:3px solid #aab7c0}
@keyframes belt{to{background-position-x:70px}}

.metric,.panel{border-radius:6px;border-color:#d3dee3}
.metric{position:relative;padding-top:24px;overflow:hidden}
.metric::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:repeating-linear-gradient(90deg,var(--tin) 0 6px,#eef3f5 6px 8px);border-bottom:1px solid var(--tin-dark)}
.panel{border-top:4px solid var(--tin)}.insight-panel{border-top-color:var(--label)}
.metric-main strong{color:var(--sea)}.panel-heading h2,.table-heading h2,.recipe-heading h2{color:var(--sea)}
.section-kicker{color:var(--label)}
.insight-panel{background:var(--cream);border-color:#eadfba}.insight-mark{background:var(--label);color:#fff}.insight-copy .section-kicker{color:var(--label)}.insight-copy h2{color:var(--sea)}.insight-copy p{color:#7a6e4c}.insight-copy p strong{color:var(--label)}.insight-chart span{background:#e0bf5a}
.donut:before{background:#fff}.count-chip{background:#e0eef4;color:var(--deep)}
.task-table th{background:#eaf1f4;color:#5d7b8f}
.compact-task,.schedule-row,.plan-row{border-top-color:#e3ebef}
.task-symbol,.task-mini-icon,.plan-icon{background:#e0eef4;color:var(--green)}
.nav-item:focus-visible,.button:focus-visible,.row-action:focus-visible{outline:2px solid var(--label);outline-offset:2px}

.recipe-card{border-left:5px solid var(--label);background:linear-gradient(90deg,var(--cream),#fff 40%)}
.recipe-mark{background:#fff;border:1px solid #eadfba;font-size:16px}
.recipe-meta strong,.result-total strong{color:var(--label)}
.result-batch{background:var(--cream);color:var(--label)}.planner-icon{background:#e0eef4;color:var(--green)}
.recipe-note{background:var(--cream);color:#7a6e4c}.recipe-note>span{border-color:#d9c88f}

.game-board{background:linear-gradient(180deg,#14486b,var(--sea));border-color:var(--sea)}
.game-instructions{color:#fff}.game-spark{color:#f3dc8a}.game-bottom{border-top-color:#ffffff24}.game-bottom>span,.game-disclaimer p{color:#9fbfd1}
.game-bottom .button{background:var(--label)}
.game-score strong{color:#a77f12}
.game-scores{display:flex;gap:8px}.game-score.bank strong{color:#1f7ea8}
.game-buttons{display:flex;gap:8px}.game-bottom{gap:10px;flex-wrap:wrap}
.can-result{flex-direction:column;gap:0;line-height:1.1}.can-result b{font:800 9px Manrope,sans-serif;color:#5a4208}
.fish-can.winner .can-result span{font-size:24px}.fish-can.prize-big .can-body{background:linear-gradient(110deg,#ffe58a,#f2b705,#ffd84d);box-shadow:0 0 14px #f2b705aa,inset 0 2px 4px #fff9}
.fish-can.bomb .can-body{background:linear-gradient(110deg,#f4b7b0,#d6212a,#b81a22);border-color:#8f1219}.fish-can.bomb .can-fish,.fish-can.bomb .can-label,.fish-can.bomb .can-sub{opacity:.12}.fish-can.bomb .can-result{display:flex}.fish-can.bomb .can-result span{font-size:26px}.fish-can.bomb .can-result b{color:#fff}
.fish-can.bomb:not(.dimmed){animation:shake .4s}.fish-can.dimmed{opacity:.55}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fish-can:disabled{cursor:default}
.game-bottom .button-primary{background:var(--label)}.game-bottom .button:disabled{opacity:.45;cursor:not-allowed;transform:none}

.form-dialog::backdrop,.confirm-dialog::backdrop{background:#0a2236b3}
.form-dialog,.confirm-dialog{border-top:5px solid var(--label)}
.field input:focus,.field select:focus{border-color:var(--green)}
.toast{background:var(--sea);border-left:4px solid var(--label)}

@media(max-width:760px){.sidebar{background:var(--sea);padding-top:0;box-shadow:0 -4px 0 #6f8795;border-top:0}.sidebar::after{display:none}.line-banner{height:128px}.banner-badge{display:none}.banner-text{left:16px;top:14px;right:16px}.banner-text strong{font-size:13px}.nav-item.active{box-shadow:inset 0 3px 0 var(--label)}.nav-count{background:var(--label);color:#fff}}
@media(prefers-reduced-motion:reduce){.belt-cans{animation:none}}