.roll-meter {
    gap: 12px;
    padding: 14px;
    border: 1px solid #56605e;
    border-radius: 8px;
    color: #f2f4ef;
    background: linear-gradient(155deg, #202a2d, #131a1d 70%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.roll-meter-head strong { color: #f3f4f0; font-size: 13px; }
.roll-meter-head small { color: #aebcbb; }
.roll-meter-head > b { color: #e8c283; font-variant-numeric: tabular-nums; }

.plotter-stage {
    position: relative;
    height: 206px;
    overflow: hidden;
    border: 1px solid #3b494c;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 70%, #2b3b3b 0, #182225 58%, #101719 100%);
    isolation: isolate;
}
.plotter-stage::after {
    content: "";
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    height: 15px;
    background: linear-gradient(transparent, rgba(7, 12, 13, .8));
    pointer-events: none;
}
.plotter-machine { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.plotter-machine { z-index: 3; top: 12px; left: -1%; width: 102%; height: auto; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .6)); }
.plotter-brand {
    position: absolute;
    z-index: 4;
    top: 25px;
    left: 73%;
    width: 66px;
    padding: 2px 4px;
    transform: translateX(-50%);
    border: 1px solid rgba(168, 164, 154, .36);
    border-radius: 2px;
    background: linear-gradient(180deg, #25292a, #111516);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8), inset 0 1px rgba(255, 255, 255, .12);
    pointer-events: none;
}
.plotter-brand img { display: block; width: 100%; height: auto; }
.plotter-roll-sheen {
    position: absolute;
    z-index: 2;
    top: 21px;
    right: 19%;
    left: 21%;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(100deg, transparent 30%, rgba(237, 255, 241, .45) 49%, transparent 65%);
    background-size: 230% 100%;
    opacity: .4;
    pointer-events: none;
}
.plotter-roll-bracket {
    position: absolute;
    z-index: 2;
    top: 47px;
    width: 5px;
    height: 24px;
    border: 1px solid #71807c;
    border-radius: 2px;
    background: linear-gradient(90deg, #2b3436, #8e9b99, #232d2e);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .65);
}
.plotter-roll-bracket-left { left: 19%; }
.plotter-roll-bracket-right { right: 19%; }
.plotter-spool-end {
    position: absolute;
    z-index: 2;
    top: 23px;
    left: 19%;
    width: 18px;
    height: 18px;
    border: 3px solid #7ca99a;
    border-radius: 50%;
    background: conic-gradient(#233b35 0 25%, #b0d2c2 25% 32%, #2e4b40 32% 62%, #b0d2c2 62% 69%, #233b35 69%);
    box-shadow: inset 0 0 0 3px #374c43, 0 0 6px rgba(137, 205, 174, .36);
}
.plotter-feed {
    position: absolute;
    z-index: 2;
    top: 38px;
    left: 24%;
    width: 52%;
    height: 77px;
    border: 1px solid rgba(196, 242, 218, .34);
    background: linear-gradient(90deg, rgba(70, 146, 113, .7), rgba(197, 244, 216, .88) 35%, rgba(113, 192, 151, .76) 75%, rgba(50, 128, 97, .7));
    clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
    box-shadow: inset 0 0 12px rgba(18, 76, 51, .55);
    pointer-events: none;
}
.plotter-feed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0 24px, rgba(247, 255, 250, .24) 25px, transparent 27px 49px);
}
.plotter-sheet {
    position: absolute;
    z-index: 2;
    top: 79px;
    right: 13%;
    left: 13%;
    height: 105px;
    overflow: hidden;
    border: 1px solid rgba(191, 239, 219, .62);
    border-radius: 1px 1px 4px 4px;
    background: linear-gradient(90deg, rgba(100, 180, 143, .65), rgba(191, 244, 218, .88) 40%, rgba(115, 196, 155, .74) 75%, rgba(80, 151, 122, .72));
    box-shadow: inset 0 0 12px rgba(18, 76, 51, .5), 0 8px 16px rgba(0, 0, 0, .35);
    transform: perspective(300px) rotateX(12deg);
    transform-origin: top;
}
.plotter-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(255, 255, 255, .28) 28px, transparent 30px 65px);
    opacity: .6;
}
.plotter-cut-lines { position: absolute; inset: 5px 0 0; width: 100%; height: 100%; opacity: .77; }
.plotter-cut-lines path { fill: none; stroke: rgba(16, 81, 58, .82); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 3 1.5; }
.plotter-carriage {
    position: absolute;
    z-index: 4;
    top: 31px;
    left: 40%;
    width: 20%;
    aspect-ratio: 1406 / 1119;
    pointer-events: none;
}
.plotter-carriage img { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.plotter-laser {
    position: absolute;
    top: 84%;
    left: 76%;
    width: 2px;
    height: 34px;
    background: linear-gradient(rgba(149, 255, 177, .8), rgba(87, 255, 139, .22) 72%, transparent);
    box-shadow: 0 0 5px 1px #79ffab, 0 0 12px rgba(71, 255, 146, .6);
    opacity: 0;
}
.plotter-laser::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -3px;
    width: 8px;
    height: 5px;
    border-radius: 50%;
    background: #d9ffdf;
    box-shadow: 0 0 7px 3px #8bffc0, 0 0 16px 5px rgba(108, 234, 168, .7);
}
.roll-meter.is-cutting .plotter-spool-end { animation: plotter-spool-turn .68s linear infinite; }
.roll-meter.is-cutting .plotter-roll-sheen { opacity: .65; animation: plotter-roll-turn .9s linear infinite; }
.roll-meter.is-cutting .plotter-feed::after { animation: plotter-film-feed .7s linear infinite; }
.roll-meter.is-cutting .plotter-sheet::before { animation: plotter-film-feed .6s linear infinite; }
.roll-meter.is-cutting .plotter-cut-lines { animation: plotter-film-feed 2.4s linear infinite; }
.roll-meter.is-cutting .plotter-carriage { animation: plotter-head-scan 2.6s ease-in-out infinite; }
.roll-meter.is-cutting .plotter-laser { opacity: 1; }

.roll-film-bed { padding: 0; }
.roll-tape-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #b9c5c2; font-size: 10px; }
.roll-tape-caption strong { color: #e8c283; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roll-track { height: 7px; overflow: visible; border: 0; border-radius: 999px; background: #3d494a; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.roll-track > span { min-height: 7px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #79b996, #d2ddb2, #e1bc78); box-shadow: 0 0 9px rgba(192, 220, 165, .35); animation: none; }
.roll-ticks { margin-top: 5px; color: #a8b8b4; }
.roll-readout { padding: 11px 0 10px; border-top: 1px solid #425052; border-bottom: 1px solid #425052; }
.roll-readout > div + div { border-color: #556467; }
.roll-readout span { color: #abbab6; }
.roll-readout strong { color: #f4f1e9; font-size: 17px; }
.roll-meter-foot { padding: 0; border: 0; }
.roll-meter-foot span { color: #d7ded9; }
.roll-meter > small { color: #9facaa; }
.roll-meter.is-overflow { border-color: #b28b57; background: #251f1a; }
.roll-meter.is-overflow .roll-meter-head > b,
.roll-meter.is-overflow .roll-meter-foot span { color: #f2cd8e; }
.roll-meter.is-overflow .roll-track > span { background: linear-gradient(90deg, #d19d63, #f2cd8e); }

@keyframes plotter-spool-turn { to { transform: rotate(360deg); } }
@keyframes plotter-roll-turn { to { background-position: -130% 0; } }
@keyframes plotter-film-feed { to { transform: translateY(28px); } }
@keyframes plotter-head-scan {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(150%); }
    75% { transform: translateX(-150%); }
}
@media (prefers-reduced-motion: reduce) {
    .roll-meter.is-cutting .plotter-spool-end,
    .roll-meter.is-cutting .plotter-roll-sheen,
    .roll-meter.is-cutting .plotter-feed::after,
    .roll-meter.is-cutting .plotter-sheet::before,
    .roll-meter.is-cutting .plotter-cut-lines,
    .roll-meter.is-cutting .plotter-carriage { animation: none; }
    .roll-meter.is-cutting .plotter-laser { opacity: 0; }
    .roll-track > span { transition: none; }
}

.selection-panel {
    position: static;
    max-height: none;
    overflow: visible;
}
.selection-panel > .selection-footer { flex: none; }
.selection-footer { padding: 12px; }
.roll-meter { gap: 8px; padding: 10px; margin-bottom: 8px; }
.plotter-stage { height: 154px; }
.roll-readout { padding: 8px 0; }
.selection-panel .roll-meter-foot { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
.live-estimate { padding: 11px; gap: 5px; }
.estimate-price-breakdown { margin-top: 2px; }
.estimate-price-breakdown > .estimate-price-total { padding: 9px 11px; }
.estimate-method { border-top: 1px solid #425052; padding-top: 7px; }
.estimate-method summary { color: #d6c596; font-size: 11px; font-weight: 650; cursor: pointer; }
.estimate-method summary:hover { color: #ffe0a0; }
.estimate-method-body { display: grid; gap: 5px; padding-top: 8px; color: #c8d6d1; font-size: 10px; line-height: 1.45; }
.estimate-method-body small { line-height: 1.45; }
.estimate-method-body b { color: #e8c283; }
@media (max-width: 860px) {
    .selection-panel { overflow: visible; }
}