/* Hike gear studio (static/js/ai/hike-gear-studio.js): interactive "Что взять с собой".
   Scoped to .tp-gearpanel.gs-on:not(#gs-x), which outranks hike-planner-calm.css
   (.is-hike-mode:not(#hc-unused) ...), so the calm skin stays untouched elsewhere. */

.gs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.tp-gearpanel.gs-on:not(#gs-x) {
    --gs-ease: cubic-bezier(.22, 1, .36, 1);
    --gs-spring: cubic-bezier(.34, 1.56, .64, 1);
    --gs-ink: #13201a;
    --gs-muted: #627067;
    --gs-line: rgba(19, 32, 26, .09);
    --gs-card: #fff;
    --gs-soft: #f3f7f4;
    --gs-tile: #f4f7f5;
    --gs-accent: #ff6a1a;
}

/* ---------- Header card ---------- */
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(20px, 3vw, 30px); margin: 0 0 22px;
    border: 1px solid var(--gs-line); border-radius: 28px;
    background:
        radial-gradient(520px 260px at 12% 10%, rgba(255, 106, 26, .10), transparent 70%),
        radial-gradient(520px 300px at 100% 100%, rgba(44, 138, 90, .12), transparent 70%),
        var(--gs-card);
    box-shadow: 0 2px 6px rgba(19, 32, 26, .04), 0 24px 54px rgba(19, 32, 26, .09);
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__art,
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__stats,
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__status:empty { display: none; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__copy h3 { margin: 4px 0 6px; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__copy > p { margin: 0; font-size: 14px; color: var(--gs-muted); max-width: 52ch; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__actions button {
    min-height: 42px; padding: 8px 16px; font-size: 13px; font-weight: 700; border-radius: 12px;
    transition: transform .3s var(--gs-spring), box-shadow .25s, background .2s;
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__actions button:hover { transform: translateY(-2px); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__actions button:active { transform: scale(.96); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__actions [data-hike-gear-bulk="all"] {
    background: linear-gradient(135deg, #2c8a5a, #1d4a37); color: #fff; border-color: transparent; box-shadow: 0 10px 22px rgba(29, 74, 55, .28);
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-pack__actions [data-hike-gear-bulk="all"] .tp-ico { color: #fff; }

/* ---------- Stage: backpack + dashboard ---------- */
.gs-stage { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; margin-top: 22px; }

.gs-pack3d { position: relative; aspect-ratio: 220 / 280; width: 100%; perspective: 900px; cursor: grab; touch-action: pan-y; }
.gs-pack3d__rig {
    --rx: 0deg; --ry: 0deg;
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .6s var(--gs-ease);
    animation: gs-sway 7s ease-in-out infinite;
}
.gs-pack3d.is-tilting .gs-pack3d__rig { animation: none; transition: transform .12s linear; }
.gs-pack3d__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(var(--z, 0px)); filter: drop-shadow(0 6px 10px rgba(12, 36, 25, .16)); }
.gs-pack3d__shadow {
    position: absolute; left: 14%; right: 14%; bottom: -4%; height: 9%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(19, 32, 26, .32), transparent); filter: blur(4px); z-index: -1;
    animation: gs-shadow 7s ease-in-out infinite;
}
.gs-pack3d__liquid { transform: translateY(calc(238px - var(--p, 0) * 182px)); transition: transform 1s var(--gs-ease); }
.gs-pack3d__wave { animation: gs-wave 3.2s linear infinite; }
.gs-stage.is-ready .gs-pack3d__wave { opacity: .75; }

/* items that appear on the backpack once packed */
.gs-slot { opacity: 0; transform: scale(.4) translateY(-30px); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .35s, transform .7s var(--gs-spring); }
.gs-slot.is-packed { opacity: 1; transform: none; }

.gs-pack3d.is-gulp .gs-pack3d__rig { animation: gs-gulp .6s var(--gs-spring); }
.gs-pack3d.is-unpack .gs-pack3d__rig { animation: gs-unpack .45s var(--gs-ease); }

.gs-pack3d__count {
    position: absolute; right: -6px; top: 6%; z-index: 3;
    display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--gs-ink); box-shadow: 0 10px 24px rgba(19, 32, 26, .16); font-variant-numeric: tabular-nums;
}
.gs-pack3d__count b { font-size: 18px; font-weight: 800; }
.gs-pack3d__count small { font-size: 12px; color: var(--gs-muted); font-weight: 700; }
.gs-stage.is-ready .gs-pack3d__count { background: linear-gradient(135deg, #2c8a5a, #1d4a37); color: #fff; }
.gs-stage.is-ready .gs-pack3d__count small { color: #d6f0e0; }

.gs-float {
    position: absolute; left: 50%; top: 30%; z-index: 4; pointer-events: none;
    padding: 4px 10px; border-radius: 999px; background: var(--gs-accent); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 8px 18px rgba(255, 106, 26, .4); animation: gs-float 1.1s var(--gs-ease) forwards;
}
.gs-ghost { position: fixed; z-index: 2000; pointer-events: none; will-change: transform; filter: drop-shadow(0 12px 18px rgba(19, 32, 26, .3)); }
.gs-ghost svg { width: 100%; height: 100%; display: block; }
.gs-confetti { position: absolute; left: 50%; top: 45%; z-index: 5; width: 9px; height: 13px; border-radius: 2px; pointer-events: none; }

/* dashboard */
.gs-dash { display: grid; gap: 18px; min-width: 0; }
.gs-dash__top { display: flex; align-items: center; gap: 18px; }
.gs-ring { position: relative; flex: none; width: 104px; height: 104px; }
.gs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gs-ring circle { fill: none; stroke-width: 11; }
.gs-ring__track { stroke: rgba(19, 32, 26, .08); }
.gs-ring__bar { stroke: #ff6a1a; stroke-linecap: round; transition: stroke-dashoffset 1s var(--gs-ease), stroke .4s; }
.gs-stage.is-ready .gs-ring__bar { stroke: #2c8a5a; }
.gs-ring > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.gs-ring > span b { font-size: 28px; letter-spacing: -.04em; }
.gs-ring > span { grid-auto-flow: column; align-content: center; justify-content: center; align-items: baseline; }
.gs-status { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--gs-ink); }
.gs-status.is-new { animation: gs-status .55s var(--gs-spring); }
.gs-stage.is-ready .gs-status { color: #1d6b47; }
.gs-hint { margin: 4px 0 0; font-size: 13px; color: var(--gs-muted); line-height: 1.5; }

.gs-weight__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--gs-muted); font-weight: 700; margin-bottom: 8px; }
.gs-weight__head b { color: var(--gs-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.gs-weight__head small { color: var(--gs-muted); font-weight: 600; font-size: 12px; }
.gs-weight__bar { position: relative; height: 12px; border-radius: 999px; background: rgba(19, 32, 26, .07); overflow: hidden; }
.gs-weight__bar i {
    position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, #2c8a5a, #ffb347, #ff6a1a); background-size: 200% 100%;
    transition: width .9s var(--gs-ease); animation: gs-shimmer 3s linear infinite;
}

.gs-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-cat {
    --g: 0;
    position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 12px 5px 5px;
    border: 1px solid var(--gs-line); border-radius: 999px; background: #fff; color: var(--gs-ink);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; overflow: hidden; isolation: isolate;
    transition: transform .3s var(--gs-spring), box-shadow .25s, border-color .25s;
}
.gs-cat::before { content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: left; transform: scaleX(var(--g)); background: color-mix(in srgb, var(--gs-c) 14%, #fff); transition: transform .8s var(--gs-ease); }
.gs-cat:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(19, 32, 26, .1); border-color: color-mix(in srgb, var(--gs-c) 40%, transparent); }
.gs-cat:active { transform: scale(.96); }
.gs-cat__art { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--gs-c) 14%, #fff); }
.gs-cat__art svg { width: 24px; height: 24px; }
.gs-cat b { font-size: 12px; color: var(--gs-muted); font-variant-numeric: tabular-nums; }
.gs-cat.is-done { border-color: color-mix(in srgb, var(--gs-c) 45%, transparent); }
.gs-cat.is-done b { color: var(--gs-c); }
.gs-cat:focus-visible { outline: 3px solid rgba(255, 106, 26, .55); outline-offset: 2px; }

.gs-stage.is-celebrating .gs-pack3d::after {
    content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 179, 71, .55), transparent); animation: gs-glow 1.6s var(--gs-ease) forwards;
}

/* ---------- Category groups ---------- */
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearsets { gap: 16px; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset {
    border: 1px solid var(--gs-line); border-radius: 22px; background: #fff; overflow: hidden; scroll-margin-top: 110px;
    box-shadow: 0 1px 2px rgba(19, 32, 26, .04), 0 10px 26px rgba(19, 32, 26, .05);
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset.gs-flash { animation: gs-flash 1.2s var(--gs-ease); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset > header {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gs-c, #2c8a5a) 10%, #fff), #fff 70%);
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset > header::before { content: ""; width: 6px; align-self: stretch; border-radius: 3px; background: var(--gs-c, #2c8a5a); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset > header > div { flex: 1; min-width: 0; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset h4 { margin: 0; font-size: 16px !important; font-weight: 800 !important; }
.tp-gearpanel.gs-on:not(#gs-x) .hc-gear-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.tp-gearpanel.gs-on:not(#gs-x) .hc-gear-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--gs-ease); opacity: .55; }
.tp-gearpanel.gs-on:not(#gs-x) .hc-gear-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); }
.tp-gearpanel.gs-on:not(#gs-x) .hc-gear-toggle:focus-visible { outline: 3px solid rgba(255, 106, 26, .55); outline-offset: 3px; border-radius: 6px; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset__bar { display: block; height: 5px; margin-top: 8px; max-width: 220px; border-radius: 999px; background: rgba(19, 32, 26, .07); overflow: hidden; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset__bar i { display: block; height: 100%; width: calc(var(--tp-g, 0) * 100%); border-radius: inherit; background: var(--gs-c, #2c8a5a); transition: width .8s var(--gs-ease); }
.tp-gearpanel.gs-on:not(#gs-x) [data-gear-group-count] { font-size: 13px; color: var(--gs-muted); font-variant-numeric: tabular-nums; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset.is-done [data-gear-group-count] { color: var(--gs-c); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gearset > header .tp-link { min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--gs-c, #1d4a37); background: #fff; border: 1px solid var(--gs-line); }

/* ---------- Item cards ---------- */
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 14px; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear {
    position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; grid-template-rows: auto auto; align-items: center; column-gap: 12px;
    min-height: 0; padding: 12px; border: 1.5px solid var(--gs-line); border-radius: 18px; background: #fff;
    transition: transform .35s var(--gs-ease), box-shadow .35s var(--gs-ease), border-color .25s, background .3s;
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(19, 32, 26, .1); border-color: color-mix(in srgb, var(--gs-c, #2c8a5a) 35%, transparent); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:active { transform: scale(.98); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear__icon { display: none; }
.tp-gearpanel.gs-on:not(#gs-x) .gs-art {
    grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
    background: radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--gs-c, #2c8a5a) 14%, #fff));
    perspective: 400px;
}
.tp-gearpanel.gs-on:not(#gs-x) .gs-art svg { width: 48px; height: 48px; overflow: visible; filter: drop-shadow(0 4px 6px rgba(19, 32, 26, .18)); transition: transform .5s var(--gs-spring); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:hover .gs-art svg { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
.tp-gearpanel.gs-on:not(#gs-x) .hike-gear-item__copy { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.tp-gearpanel.gs-on:not(#gs-x) .hike-gear-item__copy b { display: block; font-size: 14.5px !important; font-weight: 750 !important; line-height: 1.3; color: var(--gs-ink); transition: color .3s; }
.tp-gearpanel.gs-on:not(#gs-x) .hike-gear-item__copy small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--gs-muted); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear__weight {
    grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; padding: 3px 9px; border-radius: 999px;
    background: var(--gs-soft); color: var(--gs-muted); font-size: 11.5px; font-weight: 750;
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear__check {
    grid-column: 3; grid-row: 1; align-self: start; display: grid; place-items: center; width: 28px; height: 28px;
    border: 2px solid rgba(19, 32, 26, .18); border-radius: 50%; background: #fff; color: transparent;
    transition: background .3s, border-color .3s, color .3s, transform .45s var(--gs-spring);
}
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear__check .tp-ico { width: 15px; height: 15px; stroke-width: 3; }
.tp-gearpanel.gs-on:not(#gs-x) .gs-badge {
    position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: #2c8a5a; color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .02em; opacity: 0; transform: translateY(6px) scale(.8); transition: opacity .3s, transform .45s var(--gs-spring); pointer-events: none;
}
/* packed */
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:checked) { border-color: rgba(44, 138, 90, .35); background: linear-gradient(135deg, #f1faf4, #fff 70%); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:checked) .tp-gear__check { border-color: #2c8a5a; background: #2c8a5a; color: #fff; transform: scale(1.12); animation: gs-pop .5s var(--gs-spring); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:checked) .gs-art svg { transform: scale(.82) translateY(3px); opacity: .55; filter: grayscale(.4) drop-shadow(0 2px 3px rgba(19, 32, 26, .12)); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:checked) .hike-gear-item__copy b { color: var(--gs-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(44, 138, 90, .55); }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:checked) .gs-badge { opacity: 1; transform: none; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:checked) .tp-gear__weight { opacity: 0; }
.tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:focus-visible) { outline: 3px solid rgba(255, 106, 26, .55); outline-offset: 2px; }

/* ---------- Keyframes ---------- */
@keyframes gs-sway { 0%, 100% { transform: rotateX(2deg) rotateY(-10deg) translateY(0); } 50% { transform: rotateX(-2deg) rotateY(10deg) translateY(-6px); } }
@keyframes gs-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.88); opacity: .75; } }
@keyframes gs-wave { to { transform: translateX(-164px); } }
@keyframes gs-gulp { 0% { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1); } 30% { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.08, .92); } 60% { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(.96, 1.06) translateY(-8px); } 100% { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1); } }
@keyframes gs-unpack { 0%, 100% { transform: rotateX(var(--rx)) rotateY(var(--ry)); } 30% { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg); } 70% { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(3deg); } }
@keyframes gs-float { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 25% { opacity: 1; transform: translate(-50%, -6px) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
@keyframes gs-status { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes gs-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.35); } 100% { transform: scale(1.12); } }
@keyframes gs-shimmer { to { background-position: -200% 0; } }
@keyframes gs-glow { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes gs-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gs-c, #2c8a5a) 50%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .gs-stage { grid-template-columns: 1fr; justify-items: center; }
    .gs-pack3d { max-width: 210px; }
    .gs-dash { width: 100%; }
    .tp-gearpanel.gs-on:not(#gs-x) .tp-gear-list { grid-template-columns: 1fr; padding: 10px; }
    .tp-gearpanel.gs-on:not(#gs-x) .tp-pack { border-radius: 22px; }
}
@media (max-width: 420px) {
    .gs-dash__top { gap: 12px; }
    .gs-ring { width: 84px; height: 84px; }
    .gs-ring > span b { font-size: 22px; }
    .tp-gearpanel.gs-on:not(#gs-x) .tp-gear { grid-template-columns: 56px minmax(0, 1fr) 28px; }
    .tp-gearpanel.gs-on:not(#gs-x) .gs-art { width: 56px; height: 56px; }
    .tp-gearpanel.gs-on:not(#gs-x) .gs-art svg { width: 42px; height: 42px; }
}

/* ---------- Dark theme ---------- */
:is(html[data-theme=dark], html.dark, body.dark) .tp-gearpanel.gs-on:not(#gs-x) {
    --gs-ink: #e7eee8; --gs-muted: #a6b6ab; --gs-line: rgba(231, 238, 232, .1); --gs-card: #18241d; --gs-soft: #22322a; --gs-tile: #22322a;
}
:is(html[data-theme=dark], html.dark, body.dark) .tp-gearpanel.gs-on:not(#gs-x) :is(.tp-gearset, .tp-gear, .gs-cat, .tp-gearset > header .tp-link) { background: #1b2a21; }
:is(html[data-theme=dark], html.dark, body.dark) .tp-gearpanel.gs-on:not(#gs-x) .tp-gearset > header { background: linear-gradient(90deg, color-mix(in srgb, var(--gs-c, #2c8a5a) 22%, #1b2a21), #1b2a21 70%); }
:is(html[data-theme=dark], html.dark, body.dark) .tp-gearpanel.gs-on:not(#gs-x) .gs-art { background: radial-gradient(circle at 30% 25%, #2a3b31, color-mix(in srgb, var(--gs-c, #2c8a5a) 22%, #1b2a21)); }
:is(html[data-theme=dark], html.dark, body.dark) .tp-gearpanel.gs-on:not(#gs-x) .tp-gear:has(input:checked) { background: linear-gradient(135deg, #1d3326, #1b2a21 70%); }
:is(html[data-theme=dark], html.dark, body.dark) .tp-gearpanel.gs-on:not(#gs-x) .tp-gear__check { background: #1b2a21; border-color: rgba(231, 238, 232, .25); }
:is(html[data-theme=dark], html.dark, body.dark) .gs-pack3d__count { background: #22322a; color: #e7eee8; }
:is(html[data-theme=dark], html.dark, body.dark) .gs-cat::before, :is(html[data-theme=dark], html.dark, body.dark) .gs-cat__art { background: color-mix(in srgb, var(--gs-c) 24%, #1b2a21); }
:is(html[data-theme=dark], html.dark, body.dark) :is(.gs-ring__track, .gs-weight__bar) { stroke: rgba(231, 238, 232, .1); background: rgba(231, 238, 232, .08); }

@media (prefers-reduced-motion: reduce) {
    .gs-pack3d__rig, .gs-pack3d__shadow, .gs-pack3d__wave, .gs-weight__bar i { animation: none !important; }
    .gs-pack3d__liquid, .gs-slot, .gs-ring__bar, .tp-gearpanel.gs-on:not(#gs-x) .tp-gear { transition-duration: .01ms !important; }
    .tp-gearpanel.gs-on:not(#gs-x) .tp-gear:hover { transform: none; }
}

/* ---------- Floating mini backpack (while the stage is scrolled away) ---------- */
.gs-dock {
    --p: 0;
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
    display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%;
    background: #fff; color: #13201a; cursor: pointer; box-shadow: 0 16px 36px rgba(19, 32, 26, .24);
    opacity: 0; pointer-events: none; transform: translateY(24px) scale(.7);
    transition: opacity .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.gs-dock.is-shown { opacity: 1; pointer-events: auto; transform: none; }
.gs-dock:hover { transform: translateY(-3px) scale(1.04); }
.gs-dock:focus-visible { outline: 3px solid rgba(255, 106, 26, .6); outline-offset: 3px; }
.gs-dock__ring { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); }
.gs-dock__ring circle { fill: none; stroke: rgba(19, 32, 26, .08); stroke-width: 5; }
.gs-dock__ring .gs-dock__bar { stroke: #ff6a1a; stroke-linecap: round; stroke-dashoffset: calc(var(--len) * (1 - var(--p))); transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1), stroke .3s; }
.gs-dock.is-ready .gs-dock__bar { stroke: #2c8a5a; }
.gs-dock__art svg { width: 34px; height: 34px; margin-top: -8px; }
.gs-dock b { position: absolute; bottom: 9px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gs-dock.is-gulp { animation: gs-dock-gulp .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gs-dock-gulp { 30% { transform: scale(1.18, .88); } 60% { transform: scale(.94, 1.08) translateY(-4px); } 100% { transform: none; } }
:is(html[data-theme=dark], html.dark, body.dark) .gs-dock { background: #22322a; color: #e7eee8; }
@media (prefers-reduced-motion: reduce) { .gs-dock, .gs-dock__bar { transition: opacity .2s; } .gs-dock.is-gulp { animation: none; } }

/* ---------- Sticky backpack: the scene stays in view while the list scrolls (desktop) ---------- */
@media (min-width: 1000px) {
    .tp-gearpanel.gs-on:not(#gs-x) { display: block; }
    .tp-gearpanel.gs-on:not(#gs-x) > :not(.hc-gear-main) { margin-top: 24px; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > * { grid-column: 2; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack {
        grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 84px; margin: 0;
        max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; padding: 20px;
    }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack .tp-pack__copy > p:not(.tp-pack__status) { display: none; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack .tp-pack__actions { margin-top: 12px; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack .gs-stage { grid-template-columns: 1fr; justify-items: center; gap: 14px; margin-top: 14px; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack .gs-pack3d { max-width: 190px; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack .gs-dash { width: 100%; gap: 14px; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack .gs-ring { width: 84px; height: 84px; }
    .tp-gearpanel.gs-on:not(#gs-x) .hc-gear-main > .tp-pack .gs-ring > span b { font-size: 22px; }
    .tp-gearpanel.gs-on:not(#gs-x) .tp-gear-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
    .gs-dock { display: none; }
}