.rucksack-simulation {
    --rp-ink: #173f3a;
    --rp-dark: #154f46;
    --rp-red: #ad3d35;
    max-width: 920px;
    margin: 1.5rem auto 2.25rem;
    overflow: hidden;
    border: 1px solid #bfd7d1;
    border-radius: 16px;
    background: #f8fcfa;
    box-shadow: 0 9px 25px rgba(24, 66, 59, .12);
    color: var(--rp-ink);
}
.rucksack-simulation *, .rucksack-simulation *::before, .rucksack-simulation *::after { box-sizing: border-box; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; background: #174d46; color: white; }
.rp-head-text { display: flex; align-items: center; gap: .65rem; }
.rp-head strong { display: block; font-size: 1.02rem; }
.rp-head small { display: block; margin-top: .08rem; color: #cfe5df; }
.rp-head-actions { display: flex; align-items: center; gap: .5rem; }
.rp-limit { padding: .36rem .62rem; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; font-weight: bold; white-space: nowrap; }
.rucksack-simulation .rp-config-toggle { border: 1px solid rgba(255,255,255,.42); border-radius: 7px; padding: .38rem .6rem; background: rgba(255,255,255,.08) !important; color: white !important; cursor: pointer; font: inherit; font-size: .79rem; }
.rp-config { padding: .85rem 1rem 1rem; border-bottom: 1px solid #c9ddd8; background: #edf7f4; }
.rp-config[hidden] { display: none; }
.rp-config-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.rp-config-head strong { color: #174d46; }
.rp-capacity-label { display: flex; align-items: center; gap: .35rem; font-size: .84rem; }
.rp-config input { width: 74px; padding: .27rem .36rem; border: 1px solid #98b8b0; border-radius: 5px; background: white; color: var(--rp-ink); font: inherit; }
.rp-config-list { display: grid; grid-template-columns: repeat(2, minmax(245px, 1fr)); gap: .35rem .75rem; max-height: 250px; overflow-y: auto; padding-right: .25rem; }
.rp-config-row { display: grid; grid-template-columns: 2rem 1fr 1fr 1.8rem; align-items: center; gap: .32rem; padding: .33rem .4rem; border: 1px solid #c7ddd7; border-radius: 7px; background: rgba(255,255,255,.82); font-size: .76rem; }
.rp-config-row label { display: flex; align-items: center; gap: .22rem; color: #5d7771; }
.rp-config-row input { width: 100%; min-width: 0; }
.rucksack-simulation .rp-remove-data { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 0; border-radius: 50%; padding: 0; background: #f5dfdc !important; color: #8a332d !important; cursor: pointer; font: bold 1rem/1 sans-serif; }
.rp-config-actions { display: flex; gap: .55rem; margin-top: .6rem; }
.rucksack-simulation .rp-add-data, .rucksack-simulation .rp-defaults { border: 1px solid #91b3ab; border-radius: 6px; padding: .36rem .58rem; background: white !important; color: #174d46 !important; cursor: pointer; font: inherit; font-size: .77rem; }
.rucksack-simulation .rp-defaults { border-color: transparent; background: transparent !important; text-decoration: underline; text-underline-offset: 2px; }
.rp-scene { display: grid; grid-template-columns: minmax(145px, 1fr) 344px minmax(145px, 1fr); grid-template-areas: "title title title" "left stage right"; gap: .45rem 1rem; padding: .95rem 1.05rem 1.15rem; background: radial-gradient(circle at 50% 42%, #fff 0, #f0f9f6 62%, #e5f2ee 100%); }
.rp-scene-title { grid-area: title; display: flex; align-items: baseline; gap: .55rem; margin: 0; padding-bottom: .32rem; border-bottom: 1px solid #c8dcd7; color: #174d46; font-size: .98rem; }
.rp-scene-title small { margin-left: auto; color: #69827c; font-weight: normal; }
.rp-rail { display: grid; grid-auto-rows: 78px; align-content: center; justify-items: center; gap: .55rem; min-height: 490px; padding: .4rem 0; border: 2px dashed transparent; border-radius: 10px; }
.rp-rail-left { grid-area: left; }
.rp-rail-right { grid-area: right; }
.rp-rail.is-over { border-color: #57aa97; background: rgba(91,184,162,.1); }
.rp-item { width: 126px; height: 78px; margin: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--rp-ink) !important; cursor: grab; filter: drop-shadow(0 3px 2px rgba(23,63,58,.16)); transition: opacity .15s, transform .15s; }
.rp-item::before, .rp-item::after { content: none !important; }
.rp-item:hover { transform: translateY(-2px) scale(1.03); }
.rp-item.is-used { opacity: .16; filter: grayscale(1); }
.rp-box-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rp-box-svg polygon { stroke: #254f4a; stroke-width: 1.4; stroke-linejoin: round; }
.rp-box-top { fill: var(--rp-top); }
.rp-box-front { fill: var(--rp-front); }
.rp-box-side { fill: var(--rp-side); }
.rp-box-svg text { fill: #173f3a; font-family: Arial, sans-serif; font-weight: bold; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.rp-box-value, .rp-box-weight { font-size: 10px; }
.rp-box-index { font-size: 12px; }
.rp-stage { grid-area: stage; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: .5rem; }
.rp-bag-zone { position: relative; z-index: 2; width: 286px; height: 310px; min-height: 310px; max-height: 310px; margin: 5px auto 7px; transition: transform .15s; }
.rp-bag-zone.is-over { transform: translateY(-2px); }
.rp-backpack-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.rp-bag-zone.is-invalid { filter: drop-shadow(0 0 5px rgba(173,61,53,.75)); }
.rp-packed-items { position: absolute; z-index: 6; left: 25px; top: 124px; display: grid; grid-template-columns: repeat(4, 57px); grid-auto-rows: 40px; align-content: start; justify-content: center; gap: 3px; width: 236px; height: 126px; overflow-y: auto; overflow-x: hidden; padding: 2px; }
.rp-packed-item { width: 57px; height: 39px; margin: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(23,63,58,.25)); }
.rp-packed-item::before, .rp-packed-item::after { content: none !important; }
.rp-packed-item .rp-box-svg text { display: none; }
.rp-packed-item .rp-box-index { display: block !important; font-size: 18px; }
.rp-scale { position: relative; z-index: 1; width: min(314px, 96%); height: 66px; border: 3px solid #667c78; border-radius: 8px 8px 15px 15px; background: linear-gradient(#eef3f2, #b6c5c2); box-shadow: 0 6px 0 #71837f, 0 11px 15px rgba(23,63,58,.15); }
.rp-scale::before { content: ''; position: absolute; left: -14px; right: -14px; top: -9px; height: 13px; border: 3px solid #667c78; border-radius: 7px; background: #dde7e5; }
.rp-scale-display { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); min-width: 108px; padding: .35rem .55rem; border: 2px inset #72847f; border-radius: 5px; background: #daf0c8; color: #263e2b; font: bold 1rem monospace; text-align: center; }
.rp-results { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: 100%; margin-top: .95rem; }
.rp-result { padding: .52rem .62rem; border: 1px solid #cee0dc; border-radius: 9px; background: rgba(255,255,255,.92); text-align: center; }
.rp-result > span { display: block; color: #6a817c; font-size: .69rem; text-transform: uppercase; letter-spacing: .04em; }
.rp-result strong { display: block; color: #174d46; font-size: 1.18rem; font-variant-numeric: tabular-nums; }
.rp-result.rp-overload { border-color: #d28c86; background: #fff0ee; }
.rp-result.rp-overload strong { color: var(--rp-red); }
.rp-progress { width: 100%; height: 8px; margin-top: .58rem; overflow: hidden; border-radius: 999px; background: #d6e4e0; }
.rp-progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: #55ad71; transition: width .2s, background .2s; }
.rp-progress-bar.is-invalid { background: var(--rp-red); }
.rp-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 38px; margin-top: .42rem; }
.rp-hint { margin: 0; color: #586f69; font-size: .75rem; }
.rp-hint.is-invalid { color: var(--rp-red); font-weight: bold; }
.rucksack-simulation .rp-reset { flex: 0 0 auto; border: 1px solid #9ebbb4; border-radius: 6px; padding: .36rem .53rem; background: rgba(255,255,255,.8) !important; color: #174d46 !important; cursor: pointer; font: inherit; font-size: .75rem; }
@media (max-width: 760px) {
    .rp-scene { grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "stage stage" "left right"; }
    .rp-rail { grid-auto-rows: 76px; align-content: start; min-height: 0; }
    .rp-config-list { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
    .rp-head { align-items: flex-start; }
    .rp-head-icon { display: none; }
    .rp-head-actions { align-items: flex-end; flex-direction: column; }
    .rp-limit, .rucksack-simulation .rp-config-toggle { font-size: .71rem; }
    .rp-scene { padding-inline: .4rem; gap: .3rem; }
    .rp-stage { transform: scale(.94); transform-origin: top center; margin-bottom: -25px; }
    .rp-item { width: 118px; }
    .rp-config-head { align-items: flex-start; flex-direction: column; }
}