:root {
    color-scheme: light;
    --page: #b9c6c8;
    --chrome: #e8edee;
    --chrome-dark: #cbd5d7;
    --ink: #102b32;
    --muted: #60757a;
    --line: #8fa4a8;
    --nav: #123c45;
    --nav-deep: #082a33;
    --canvas: #4d9092;
    --canvas-deep: #397779;
    --blue: #075dd7;
    --cyan: #00d6ff;
    --green: #28c96d;
    --orange: #ff9f32;
    --yellow: #fff7bd;
    --wafer-size: 86px;
    --shadow: 0 8px 22px rgba(21, 52, 58, .15);
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
    margin: 0;
    min-width: 320px;
    background:
        linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px),
        var(--page);
    background-size: 22px 22px;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, select { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }

.app-shell { width: min(1640px, 100%); margin: 0 auto; padding: 12px; }

.topbar {
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    border: 1px solid #061f25;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #1a515b, var(--nav));
    color: #fff;
    box-shadow: var(--shadow);
}

.product-title { display: flex; align-items: center; gap: 12px; }
.product-badge {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid #a6f3ff;
    border-radius: 50%;
    background: radial-gradient(circle, #14728a, #082d38);
    color: #aef5ff;
    font-size: 11px;
    font-weight: 900;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.08), 0 0 15px rgba(0,214,255,.2);
}

.eyebrow, .section-kicker { color: #73eaff; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
h1 { margin: 2px 0 0; font-size: clamp(20px, 2.4vw, 29px); letter-spacing: -.035em; }
.product-title p { margin: 2px 0 0; color: #9ec0c6; font-size: 9px; }

.mode-tabs { display: flex; align-items: center; gap: 3px; }
.mode-tabs span {
    padding: 9px 16px;
    border: 1px solid rgba(203, 239, 244, .25);
    background: rgba(2, 28, 35, .38);
    color: #8fb4bb;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}
.mode-tabs span:first-child { border-radius: 5px 0 0 5px; }
.mode-tabs span:last-child { border-radius: 0 5px 5px 0; }
.mode-tabs .active { border-color: #4cc9ff; background: linear-gradient(#1673dc, #0754bb); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

.system-status { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.status-clock { display: grid; justify-items: end; }
.status-clock span { color: #7fa7ad; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.status-clock strong { margin-top: 2px; color: #eafcff; font-size: 11px; }
.live-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(77, 255, 153, .35);
    border-radius: 4px;
    background: #0b3536;
    color: #67f39c;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}
.live-pill span { width: 8px; height: 8px; border-radius: 50%; background: #39e77d; box-shadow: 0 0 10px #39e77d; }

.panel { border: 1px solid #758e93; border-radius: 6px; background: var(--chrome); box-shadow: var(--shadow); }

.filter-panel { display: flex; justify-content: flex-end; margin-top: 0; padding: 8px 12px; }
.filter-panel form { display: grid; grid-template-columns: repeat(3, minmax(170px, 220px)) auto auto; justify-content: end; gap: 9px; align-items: end; }
.filter-panel label, .speed-control { display: grid; gap: 5px; }
.datetime-filter > div { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 5px; }
.filter-panel label > span, .speed-control > span { color: #4d666c; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

select {
    width: 100%;
    min-height: 39px;
    padding: 0 35px 0 11px;
    border: 1px solid #82999e;
    border-radius: 3px;
    outline: none;
    background: linear-gradient(#fff, #dce4e6);
    color: #153139;
    box-shadow: inset 0 1px #fff;
}
input[type="date"] {
    width: 100%;
    min-height: 39px;
    border: 1px solid #82999e;
    border-radius: 3px;
    outline: none;
    background: linear-gradient(#fff, #dce4e6);
    color: #000000;
    box-shadow: inset 0 1px #fff;
    font: inherit;
    font-size: 16px;
}
input[type="date"]:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(7,93,215,.15); }
select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(7,93,215,.15); }

.load-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 0 17px;
    border: 1px solid #003d97;
    border-radius: 3px;
    background: linear-gradient(#1878ee, #0755bd);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.35), 0 3px 8px rgba(0,61,151,.18);
}
.load-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.analysis-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid #176747;
    border-radius: 3px;
    background: linear-gradient(#36a874, #258058);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: inset 0 1px rgba(255,255,255,.3), 0 3px 8px rgba(23,103,71,.16);
}
.analysis-link svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.error-banner { margin-top: 7px; padding: 11px 14px; border: 1px solid #b94545; border-radius: 4px; background: #ffe1e1; color: #9a2020; }

.run-strip {
    display: grid;
    grid-template-columns: auto 1fr auto minmax(220px, 1fr) auto 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 45px;
    margin: 7px 0;
    padding: 6px 15px;
    border: 1px solid #003886;
    background: linear-gradient(180deg, #0b66db, #084ca9);
    color: #fff;
    box-shadow: inset 0 1px rgba(255,255,255,.27);
}
.run-strip > div { display: grid; gap: 1px; }
.run-strip span { color: #98cbff; font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.run-strip strong { font-size: 11px; white-space: nowrap; }
.run-strip > i { height: 1px; background: rgba(255,255,255,.28); }
.run-strip .material-status { justify-items: center; }
.run-strip .material-status strong { font-size: 14px; }
.run-state { justify-items: end; }
.run-state strong { display: flex; align-items: center; gap: 6px; color: #c7ffda; }
.run-state b { width: 7px; height: 7px; border-radius: 50%; background: #4df08a; box-shadow: 0 0 7px #4df08a; }

.workspace { display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(230px, .46fr); gap: 7px; align-items: stretch; height: calc(100vh - 43px); min-height: 0; margin-top: 7px; }
.equipment-panel, .timeline-panel { min-width: 0; padding: 6px; }
.equipment-panel { display: flex; flex-direction: column; }

.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 34px; margin-bottom: 4px; padding: 0 2px; }
.panel-heading h2 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.02em; }
.panel-heading.compact { margin-bottom: 6px; }
.section-kicker { color: #08739d; }
.panel-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.legend { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 8px; font-weight: 800; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; }
.legend .get { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.legend .put { background: var(--orange); box-shadow: 0 0 7px var(--orange); }
.legend .visited { background: var(--green); }

.equipment-frame {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px;
    border: 2px inset #dce7e8;
    background: #a8b7b9;
    overflow: hidden;
    height: 60px;;
}

.equipment-stage {
    position: relative;
    width: min(100%, 1240px);
    height: auto;
    max-height: 100%;
    aspect-ratio: 1.19 / 1;
    border: 2px solid #1c5e61;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 47%, #5ba2a3, var(--canvas) 45%, var(--canvas-deep));
    background-size: 24px 24px, 24px 24px, auto;
    box-shadow: inset 0 0 0 3px rgba(125,255,212,.22), inset 0 0 70px rgba(0,45,48,.2), 0 8px 18px rgba(33,71,75,.25);
    isolation: isolate;
}

.equipment-stage::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 0;
    border: 1px solid rgba(102, 255, 173, .48);
    pointer-events: none;
}

.model-plate { position: absolute; top: 10px; left: 12px; z-index: 8; padding: 4px 7px; border: 1px solid #02377b; background: #0b5fcc; color: #cfe9ff; font-size: 7px; letter-spacing: .12em; box-shadow: inset 0 1px rgba(255,255,255,.3); }
.model-plate strong { color: #fff; }

.module { position: absolute; z-index: 5; transition: filter .25s ease, box-shadow .25s ease, transform .25s ease; }
.module::after { content: ""; position: absolute; inset: -5px; border: 3px solid transparent; border-radius: inherit; pointer-events: none; transition: .22s ease; }
.module.visited::after { border-color: rgba(45, 239, 116, .65); box-shadow: 0 0 7px rgba(45,239,116,.55); }
.module.target::after { border-color: #fff; border-style: dashed; box-shadow: 0 0 12px 2px rgba(255,255,255,.8); }
.module.active { transform: none; filter: brightness(1.08); }
.module.active::after { border-color: var(--cyan); box-shadow: 0 0 18px 3px var(--cyan), inset 0 0 12px rgba(0,214,255,.35); }
.equipment-stage[data-mode="put"] .module.active::after { border-color: var(--orange); box-shadow: 0 0 18px 3px var(--orange), inset 0 0 12px rgba(255,159,50,.35); }

.module-slot {
    position: relative;
    z-index: 3;
    display: grid;
    flex: 0 0 var(--wafer-size);
    place-items: center;
    width: var(--wafer-size);
    height: var(--wafer-size);
    border: 2px solid rgba(75, 111, 118, .72);
    border-radius: 50%;
    background: rgba(236, 242, 243, .3);
    color: #27474e;
    box-shadow: 0 2px 5px rgba(25,59,65,.22);
}
.module-slot::before { content: none; }
.module-slot i { display: none; }
.module-slot b { z-index: 1; display: grid; place-items: center; min-width: 20px; min-height: 16px; padding: 1px 4px; border: 1px solid rgba(77,107,113,.62); border-radius: 3px; background: rgba(245,248,248,.9); color: #28484f; font-size: 8px; line-height: 1; }
.module-slot.slot-source { border-color: #009dc1; box-shadow: 0 0 0 3px rgba(0,214,255,.18), inset 0 0 0 2px rgba(255,255,255,.25); }
.module-slot.slot-target { border-color: #f4ffff; border-style: dashed; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.module-slot.occupied { border-color: #159955; box-shadow: 0 0 0 3px rgba(40,201,109,.16); }

.process {
    top: 0;
    width: 20%;
    height: 33.1875%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #28484f;
    border-radius: 0;
    background: linear-gradient(145deg, #f4f7f7, #bec9cb 56%, #91a3a6);
    color: #17343b;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.38), 0 4px 10px rgba(18,55,62,.35);
}
.process::before { content: none; }
.process strong { position: absolute; top: calc(100% + 4px); left: 50%; z-index: 6; padding: 2px 6px; border: 1px solid #789398; border-radius: 2px; background: rgba(245,248,248,.94); color: #17343b; font-size: clamp(13px, 1.8vw, 19px); letter-spacing: .03em; line-height: 1; white-space: nowrap; transform: translateX(-50%); }
.process .module-slot { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); }
.module-cha { left: 9.5%; right: auto; }
.module-chb { right: 9.5%; left: auto; }

.utility {
    left: 41.5%;
    width: 17%;
    height: 13.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #2c5158;
    border-radius: 2px;
    background: linear-gradient(145deg, #f3f5f5, #a8b7ba);
    color: #17353c;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 3px 7px rgba(26,62,67,.28);
}
.utility::before { content: none; }
.utility-copy { position: absolute; top: 5px; left: 7px; z-index: 4; display: grid; gap: 1px; padding: 2px 4px;  background: rgba(238,243,243,.82); }
.utility-copy strong { font-size: clamp(12px, 1.5vw, 17px); }
.utility-copy small { color: #567177; font-size: 5px; letter-spacing: .08em; }
.utility .module-slot { flex-basis: var(--wafer-size); }
.module-che { top: 85%; }
.module-chf { top: 70%; }

.aligner {
    top: 55%;
    right: auto;
    left: 41.5%;
    width: 17%;
    height: 13.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid #2c5158;
    border-radius: 2px;
    background: linear-gradient(145deg, #f5f6f6, #aab9bc);
    color: #17343b;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 3px 7px rgba(26,62,67,.28);
}
.aligner strong { font-size: clamp(12px, 1.5vw, 17px); }

.robot-zone {
    top: 24%;
    left: 28%;
    width: 44%;
    height: 25%;
    overflow: visible;
    border: 0;
    --upper-length: 62px;
    --forearm-length: 78px;
    --fork-reach: 16px;
    --shoulder-angle: -55deg;
    --elbow-angle: 135deg;
    --end-angle: -80deg;
    --blade-slot-size: calc(var(--wafer-size) + 22px);
    --blade-carriage-width: 112px;
    --blade-scale: 1.6;
}
.robot-zone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 56%;
    z-index: 2;
    width: clamp(94px, 31%, 138px);
    height: clamp(62px, 67%, 102px);
    border: 2px solid #090b0c;
    border-radius: 7px;
    background:
        radial-gradient(circle at 9px 9px, #d4d7d3 0 2px, #596063 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at calc(100% - 9px) 9px, #d4d7d3 0 2px, #596063 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 9px calc(100% - 9px), #d4d7d3 0 2px, #596063 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #d4d7d3 0 2px, #596063 2.5px 4px, transparent 4.5px),
        linear-gradient(145deg, #343a3c 0 20%, #1b2022 52%, #090b0c 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.05),
        inset 0 -15px 22px rgba(0,0,0,.35),
        0 8px 13px rgba(8,22,25,.42);
    transform: translate(-50%, -50%);
}
.robot-label {
    position: absolute;
    top: 6%;
    left: 38%;
    z-index: 14;
    padding: 3px 8px;
    border: 1px solid #737d7f;
    border-radius: 2px;
    background: linear-gradient(#313739, #15191a);
    color: #dfe5e3;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    white-space: nowrap;
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.3);
    transform: translateX(-50%);
}
.robot-hub {
    position: absolute;
    left: 50%;
    top: 56%;
    z-index: 12;
    width: clamp(45px, 16%, 62px);
    aspect-ratio: 1.04 / 1;
    border: 2px solid #080a0b;
    border-radius: 48% 48% 15% 15%;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(145deg, #34393b, #181c1e 57%, #080a0b);
    box-shadow:
        inset 0 0 0 2px rgba(151,160,161,.18),
        inset 0 -9px 12px rgba(0,0,0,.42),
        0 6px 9px rgba(4,14,17,.54);
    transform: translate(-50%, -50%);
}
.robot-hub::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: 45%;
    aspect-ratio: 1;
    border: 2px solid #a5acad;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 34%, #e6e8e5 0 9%, #8f9696 11% 22%, #272c2e 25% 51%, #070809 54% 68%, #7c8585 71%);
    box-shadow: 0 2px 4px rgba(0,0,0,.58);
    transform: translate(-50%, -50%);
}
.robot-hub::after {
    content: "!";
    position: absolute;
    right: 3%;
    top: 3%;
    display: grid;
    place-items: center;
    width: 24%;
    aspect-ratio: 1;
    clip-path: polygon(50% 3%, 98% 94%, 2% 94%);
    background: #f5d21e;
    color: #171700;
    font-size: clamp(5px, .7vw, 8px);
    font-weight: 950;
    line-height: 1.3;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.robot-hub > i {
    position: absolute;
    left: 50%;
    bottom: -21%;
    width: 72%;
    height: 24%;
    border: 2px solid #111516;
    border-top-color: #697174;
    border-radius: 2px;
    background:
        radial-gradient(circle at 10% 50%, #cbd0cf 0 1px, #4e5657 1.5px 2.5px, transparent 3px),
        radial-gradient(circle at 90% 50%, #cbd0cf 0 1px, #4e5657 1.5px 2.5px, transparent 3px),
        linear-gradient(#3b4244, #111415);
    box-shadow: 0 3px 4px rgba(0,0,0,.35);
    transform: translateX(-50%);
}
.fic-arm { position: absolute; left: 50%; top: 56%; z-index: 8; width: 0; height: 0; transform: rotate(var(--shoulder-angle)); transform-origin: 0 0; will-change: transform; }
.robot-upper-link {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--upper-length);
    height: clamp(25px, 2.8vw, 38px);
    border: 0;
    background: transparent;
    transform: translateY(-50%);
}
.robot-upper-link::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 5%, 76% 12%, 100% 50%, 76% 88%, 0 95%);
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(145deg, #3f4749, #252b2d 48%, #101314 100%);
    box-shadow: inset 0 0 0 2px rgba(5,7,8,.72);
    filter: drop-shadow(0 5px 4px rgba(4,14,17,.46));
}
.robot-upper-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 13% 28%, #d8dcda 0 1.4px, #5f6667 1.8px 2.8px, transparent 3.2px),
        radial-gradient(circle at 13% 72%, #d8dcda 0 1.4px, #5f6667 1.8px 2.8px, transparent 3.2px),
        radial-gradient(circle at 72% 35%, #d8dcda 0 1.3px, #5f6667 1.7px 2.6px, transparent 3px),
        radial-gradient(circle at 72% 65%, #d8dcda 0 1.3px, #5f6667 1.7px 2.6px, transparent 3px);
    pointer-events: none;
}
.robot-elbow {
    position: absolute;
    right: -15px;
    top: 50%;
    z-index: 4;
    width: clamp(27px, 3.25vw, 38px);
    aspect-ratio: 1;
    border: 2px solid #a9b0b0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 39% 34%, #eceeeb 0 8%, #949b9b 10% 20%, #303638 23% 48%, #08090a 52% 68%, #727b7b 71%);
    box-shadow: 0 4px 6px rgba(4,14,17,.55);
    transform: translateY(-50%);
}
.robot-forearm {
    position: absolute;
    left: calc(100% - 6px);
    top: 50%;
    width: calc(var(--forearm-length) - var(--fork-reach));
    height: clamp(27px, 3vw, 40px);
    border: 0;
    background: transparent;
    transform: translateY(-50%) rotate(var(--elbow-angle));
    transform-origin: 0 50%;
    will-change: transform;
}
.robot-forearm::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 15%, 82% 4%, 100% 31%, 100% 69%, 82% 96%, 0 85%);
    background:
        linear-gradient(180deg, rgba(255,255,255,.11), transparent 23%),
        linear-gradient(145deg, #444c4e, #293032 48%, #111415 100%);
    box-shadow: inset 0 0 0 2px rgba(5,7,8,.74);
    filter: drop-shadow(0 5px 4px rgba(4,14,17,.46));
}
.robot-forearm::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 14% 34%, #d9dcda 0 1.3px, #606768 1.7px 2.7px, transparent 3px),
        radial-gradient(circle at 14% 66%, #d9dcda 0 1.3px, #606768 1.7px 2.7px, transparent 3px),
        radial-gradient(circle at 77% 30%, #d9dcda 0 1.3px, #606768 1.7px 2.7px, transparent 3px),
        radial-gradient(circle at 77% 70%, #d9dcda 0 1.3px, #606768 1.7px 2.7px, transparent 3px);
    pointer-events: none;
}
.robot-wrist {
    position: absolute;
    right: -11px;
    top: 50%;
    z-index: 2;
    width: clamp(23px, 2.65vw, 31px);
    aspect-ratio: 1;
    border: 2px solid #9fa7a7;
    border-radius: 50%;
    background:
        radial-gradient(circle at 39% 34%, #edf0ed 0 9%, #9ba2a2 11% 23%, #313739 26% 52%, #08090a 56% 68%, #6d7676 72%);
    box-shadow: 0 3px 5px rgba(7,22,26,.5);
    transform: translateY(-50%);
}
.blade-carriage {
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    z-index: 2;
    width: var(--blade-carriage-width);
    height: 15px;
    border: 2px solid #090b0c;
    border-radius: 5px;
    background:
        radial-gradient(circle at 7px 50%, #dfe2df 0 1.4px, #565e5f 1.8px 3px, transparent 3.4px),
        radial-gradient(circle at calc(100% - 7px) 50%, #dfe2df 0 1.4px, #565e5f 1.8px 3px, transparent 3.4px),
        linear-gradient(#444c4e, #22282a 50%, #0e1112);
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 3px 5px rgba(6,18,21,.46);
    transform: translate(-50%, -50%) rotate(var(--end-angle));
    transform-origin: 50% 50%;
}
.blade-carriage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25px;
    height: 23px;
    border: 2px solid #777f80;
    border-radius: 50%;
    background: radial-gradient(circle, #dce0dd 0 12%, #6e7676 15% 28%, #202527 31% 60%, #08090a 64%);
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
    transform: translate(-50%, -50%);
}
.blade-carriage::after {
    content: "";
    position: absolute;
    inset: 3px 17px;
    border-top: 1px solid rgba(255,255,255,.12);
    pointer-events: none;
}
.fic-blade { position: absolute; left: calc(100% - 3px); top: 50%; z-index: 3; width: calc(var(--fork-reach) + 6px); height: 5px; transform: translateY(calc(-50% + var(--blade-offset))) rotate(calc(var(--end-angle) - 90deg)) translateY(var(--blade-side-shift, 0)); transform-origin: 0 50%; }
.fic-blade-1 { --blade-offset: -25px; }
.fic-blade-2 { --blade-offset: 25px; z-index: 4; }
.robot-fork {
    position: absolute;
    left: -5px;
    top: 50%;
    width: calc(100% + 20px);
    height: 42px;
    border: 0;
    background: transparent;
    transform: translateY(-50%) scale(var(--blade-scale));
    transform-origin: 0 50%;
}
.robot-fork::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(
        0 32%,
        38% 32%,
        49% 8%,
        100% 0,
        100% 26%,
        62% 44%,
        56% 50%,
        62% 56%,
        100% 74%,
        100% 100%,
        49% 92%,
        38% 68%,
        0 68%
    );
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), transparent 18%),
        linear-gradient(145deg, #4b5355, #292f31 50%, #111415);
    box-shadow: inset 0 0 0 2px rgba(5,7,8,.74);
    filter: drop-shadow(0 3px 3px rgba(7,18,21,.48));
}
.robot-fork::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 40%, #dfe2df 0 1.1px, #090b0c 1.5px 2.5px, transparent 2.9px),
        radial-gradient(circle at 15% 60%, #dfe2df 0 1.1px, #090b0c 1.5px 2.5px, transparent 2.9px),
        radial-gradient(circle at 58% 22%, #dfe2df 0 1px, #090b0c 1.4px 2.3px, transparent 2.7px),
        radial-gradient(circle at 58% 78%, #dfe2df 0 1px, #090b0c 1.4px 2.3px, transparent 2.7px),
        radial-gradient(circle at 91% 10%, #dfe2df 0 1px, #090b0c 1.4px 2.3px, transparent 2.7px),
        radial-gradient(circle at 91% 90%, #dfe2df 0 1px, #090b0c 1.4px 2.3px, transparent 2.7px);
    pointer-events: none;
}
.fic-slot { position: absolute; left: 100%; top: 50%; width: var(--wafer-size); height: var(--wafer-size); border-color: #64767c; background: rgba(226,235,237,.14); box-shadow: 0 0 0 2px rgba(255,255,255,.14); transform: translate(-50%, -50%); }
.fic-slot b { min-width: 25px; min-height: 19px; background: #fff; font-size: 11px; font-weight: 950; transform: rotate(90deg); }
.fic-blade-2 .fic-slot { border-color: #087fa3; box-shadow: 0 0 0 3px rgba(0,188,232,.15); }
.fic-blade-2 .fic-slot b { color: #066d89; }
.fic-blade-1 .fic-slot b { color: #30464d; }
.robot-zone.robot-moving .robot-hub { box-shadow: inset 0 0 0 2px rgba(151,160,161,.18), 0 0 0 4px rgba(0,214,255,.2), 0 0 18px rgba(0,214,255,.62), 0 6px 9px rgba(4,14,17,.54); }
.robot-zone.robot-cassette-target .robot-label { border-color: #d68b18; color: #654000; background: #fff3d7; }
.cassette {
    top: 55%;
    bottom: 0;
    width: 28%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
    padding: 5px 4px 6px;
    border: 2px solid #2b5057;
    border-radius: 2px;
    background: linear-gradient(145deg, #fffbdc, #e6dfa5);
    color: #14323a;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 4px 8px rgba(20,54,60,.3);
}
.cassette::before { content: none; }
.cassette-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 15px; }
.cassette-head strong { font-size: clamp(9px, 1.2vw, 13px); white-space: nowrap; }
.cassette-head small { color: #766f3d; font-size: 4px; font-weight: 900; letter-spacing: .04em; }
.cassette-slot-grid { flex: 1; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(25, minmax(0, 1fr)); gap: 1px; min-height: 0; }
.cassette-slot-grid span { display: grid; place-items: center; min-width: 0; min-height: 0; border: 1px solid #778889; background: linear-gradient(#dce2e1, #aab5b4); color: #344c50; font-size: clamp(5px, .7vw, 8px); font-weight: 800; line-height: 1; box-shadow: inset 0 1px rgba(255,255,255,.75); }
.cassette-slot-grid span.selected { border-color: #0049a7; background: linear-gradient(#25a8ff, #075dc8); color: #fff; box-shadow: 0 0 6px rgba(0,83,193,.7), inset 0 1px rgba(255,255,255,.35); }
.cassette-slot-grid span.slot-source { border-color: #009dc1; background: #d8f8ff; box-shadow: 0 0 0 2px rgba(0,214,255,.28), inset 0 1px rgba(255,255,255,.75); }
.cassette-slot-grid span.slot-target { border-color: #f4ffff; border-style: dashed; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.36); }
.cassette-slot-grid span.occupied { border-color: #159955; background: #d9f6e5; box-shadow: 0 0 0 2px rgba(40,201,109,.24); }

.cassette-slot-grid span.has-data { visibility: hidden; }
.cassette-slot-grid span.has-data.cass-idle,
.cassette-slot-grid span.has-data.occupied { visibility: visible; }
.cassette-slot-grid span.cass-idle { border-color: #8c9897; background: #ffffff; box-shadow: inset 0 1px rgba(255,255,255,.9); }

.module-cass-a { left: 5.5%; }
.module-cass-b { left: auto; right: 5.5%; }

.stage-readout { position: absolute; left: 12px; bottom: 10px; z-index: 14; display: grid; min-width: 108px; padding: 5px 8px; border: 1px solid #063d89; background: #0a5bc3; color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.28); }
.stage-readout span { color: #a8d6ff; font-size: 5px; font-weight: 900; letter-spacing: .1em; }
.stage-readout strong { margin-top: 1px; font-size: 10px; }

.route-layer { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.route-layer polyline, .route-layer line { fill: none; vector-effect: non-scaling-stroke; }
.route-track { stroke: rgba(14, 62, 68, .42); stroke-width: 1.5; stroke-dasharray: 4 6; }
.route-progress { stroke: #45d982; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(68,255,139,.55)); }
.active-transfer { stroke: rgba(242,255,255,.86); stroke-width: 3; stroke-dasharray: 8 6; filter: drop-shadow(0 0 4px rgba(0,214,255,.65)); }
.route-node { display: none; }
@keyframes transfer-flow { to { stroke-dashoffset: -13; } }

.robot-zone::after { display: none; }
.robot-zone.active .robot-hub { box-shadow: 0 0 0 4px rgba(0,214,255,.22), 0 0 18px rgba(0,214,255,.7), 0 5px 10px rgba(24,54,59,.4); }
.robot-zone.visited .robot-hub { border-color: #5a8b72; }
.equipment-stage[data-mode="put"] .robot-zone.active .robot-hub { box-shadow: 0 0 0 4px rgba(255,159,50,.2), 0 0 18px rgba(255,159,50,.68), 0 5px 10px rgba(24,54,59,.4); }

.wafer-layer { position: absolute; inset: 0; z-index: 16; pointer-events: none; }
.wafer {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: var(--wafer-size);
    height: var(--wafer-size);
    border: 2px solid #102f39;
    border-radius: 50%;
    background:
        linear-gradient(rgba(8, 84, 113, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 84, 113, .5) 1px, transparent 1px),
        linear-gradient(112deg, rgba(255, 129, 22, .85), rgba(255, 220, 43, .78) 31%, rgba(63, 210, 219, .72) 61%, rgba(5, 111, 181, .9)),
        #22a9cc;
    background-size: 5px 5px, 5px 5px, 100% 100%, 100% 100%;
    box-shadow:
        0 0 0 1px rgba(232, 255, 255, .78),
        0 3px 8px rgba(7, 32, 39, .48),
        inset 0 0 8px rgba(255, 255, 255, .65);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: border-color .2s ease, box-shadow .2s ease;
    will-change: left, top;
}
.wafer.visible { opacity: 1; }
.wafer.current {
    z-index: 3;
    box-shadow:
        0 0 0 2px rgba(225, 255, 255, .88),
        0 0 13px 4px rgba(0, 214, 255, .62),
        inset 0 0 8px rgba(255, 255, 255, .7);
}
.wafer::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(216, 253, 255, .42);
    border-radius: 50%;
    opacity: .42;
}
.wafer.moving { animation: wafer-transfer-blink .75s steps(2, jump-none) infinite; }
.wafer.moving::before { animation: wafer-ring 1s ease-out infinite; }
.wafer-disc {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
}
.wafer-disc::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: conic-gradient(
        from 18deg,
        rgba(255,255,255,.34),
        transparent 13% 42%,
        rgba(76,236,255,.25) 50%,
        transparent 58% 84%,
        rgba(255,194,51,.26)
    );
    opacity: .58;
    pointer-events: none;
}
.wafer.aligner-spinning {
    border-color: #08a9c9;
    box-shadow:
        0 0 0 2px rgba(211, 253, 255, .9),
        0 0 16px 5px rgba(0, 214, 255, .72),
        inset 0 0 8px rgba(255, 255, 255, .7);
}
.wafer.aligner-spinning .wafer-disc {
    animation: aligner-wafer-ccw 1.35s linear infinite;
}
.equipment-stage:not(.simulation-playing) .wafer.aligner-spinning .wafer-disc {
    animation-play-state: paused;
}
.wafer-disc > i {
    position: absolute;
    inset: 2px;
    display: block;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .82), transparent 20%),
        linear-gradient(145deg, rgba(255,255,255,.28), transparent 44%);
    pointer-events: none;
}
.wafer-notch {
    position: absolute;
    bottom: -2px;
    left: 50%;
    z-index: 4;
    display: block;
    width: 8px;
    height: 5px;
    border: 2px solid #102f39;
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    background: #4b8d8e;
    box-shadow: 0 -1px rgba(239, 255, 255, .45);
    transform: translateX(-50%);
}
.wafer.notch-at-12 .wafer-notch {
    top: -2px;
    bottom: auto;
    border-top: 0;
    border-bottom: 2px solid #102f39;
    border-radius: 0 0 50% 50%;
    box-shadow: 0 1px rgba(239, 255, 255, .45);
}
.wafer small { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: max-content; max-width: 116px; min-width: 68%; min-height: 34%; padding: 4px 7px; border: 2px solid rgba(255,255,255,.96); border-radius: 5px; background: rgba(8,29,36,.96); color: #fff; line-height: 1; white-space: nowrap; box-shadow: 0 2px 7px rgba(0,0,0,.64), 0 0 0 1px rgba(0,78,102,.55); transform: translate(-50%, -50%); }
.wafer small em { display: block; max-width: 102px; overflow: hidden; color: #fff; font-size: clamp(8px, .95vw, 11px); font-style: normal; font-weight: 950; letter-spacing: .02em; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.wafer small b { margin-top: 3px; color: #7feaff; font-size: clamp(7px, .78vw, 9px); font-weight: 950; letter-spacing: .05em; text-shadow: 0 1px 2px #000; }
.equipment-stage[data-mode="put"] .wafer.current {
    border-color: #ffad3e;
    box-shadow:
        0 0 0 2px rgba(255, 239, 205, .9),
        0 0 13px 4px rgba(255, 159, 50, .68),
        inset 0 0 8px rgba(255, 255, 255, .7);
}
@keyframes wafer-transfer-blink { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }
@keyframes wafer-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
@keyframes aligner-wafer-ccw { to { transform: rotate(-360deg); } }
.wafer.transfer-flash { animation: wafer-transfer-flash .72s ease-out both; }
.equipment-stage.transfer-flash .active-transfer { animation: route-transfer-flash .72s ease-out both; }
@keyframes wafer-transfer-flash {
    0% { filter: brightness(3.8); opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    22% { filter: brightness(2.8); opacity: 1; transform: translate(-50%, -50%) scale(1.28); }
    46% { filter: brightness(1.7); transform: translate(-50%, -50%) scale(.94); }
    70% { filter: brightness(2.1); transform: translate(-50%, -50%) scale(1.08); }
    100% { filter: brightness(1); opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes route-transfer-flash {
    0% { stroke: #fff; stroke-width: 11; opacity: 1; filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 24px var(--cyan)); }
    45% { stroke: var(--cyan); stroke-width: 7; opacity: 1; filter: drop-shadow(0 0 11px var(--cyan)); }
    100% { stroke: rgba(242,255,255,.86); stroke-width: 3; opacity: .82; filter: drop-shadow(0 0 4px rgba(0,214,255,.65)); }
}

.playback { display: grid; grid-template-columns: auto 1fr 190px; align-items: center; gap: 10px; margin-top: 4px; padding: 6px 8px; border: 1px solid #083b74; background: linear-gradient(#164b7c, #0c3159); color: #fff; }
.transport-controls { display: flex; align-items: center; gap: 5px; }
.transport-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #6391b6; border-radius: 3px; background: linear-gradient(#eaf2f4, #9eb0b4); color: #193b45; cursor: pointer; box-shadow: inset 0 1px #fff; }
.transport-controls button:hover { border-color: #fff; filter: brightness(1.08); }
.transport-controls button.play { width: 40px; border-color: #002f73; background: linear-gradient(#22dcff, #06a5da); color: #002737; }
.transport-controls svg { width: 17px; fill: currentColor; }
.pause-icon { display: none; }
.playback.playing .play-icon { display: none; }
.playback.playing .pause-icon { display: block; }
.playback[data-empty="true"] button { opacity: .4; pointer-events: none; }
.scrubber-wrap { min-width: 0; }
.scrubber-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0px; color: #a9cae4; font-size: 8px; letter-spacing: .07em; }
.scrubber-meta strong { color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.scrubber-track { position: relative; min-width: 0; padding-top: 36px; }
.slot-start-markers { position: absolute; top: 0; right: 7px; left: 7px; height: 36px; pointer-events: none; }
.slot-start-marker { position: absolute; z-index: 2; max-width: 72px; padding: 2px 5px; border: 1px solid #65b9d2; border-radius: 3px; background: #e7fbff; color: #075979; cursor: help; font-size: 10px; font-weight: 950; line-height: 1.1; overflow: hidden; pointer-events: auto; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); }
.slot-start-marker[data-cassette="CASS_A"] { top: 0; }
.slot-start-marker[data-cassette="CASS_B"] { top: 18px; border-color: #e2a04b; background: #fff1d9; color: #8b4b00; }
input[type="range"] { width: 100%; height: 5px; margin: 0; accent-color: #29e7ff; cursor: pointer; }
.speed-control { display: grid; min-width: 0; gap: 0px; }
.speed-control > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #a9cae4; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.speed-control > span strong { color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.speed-control input[type="range"] { min-width: 0; }
.speed-fields { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; gap: 7px; }
.speed-number { display: flex; align-items: center; min-width: 0; height: 27px; border: 1px solid #668aa7; border-radius: 3px; background: #f5f9fa; overflow: hidden; }
.speed-number input { width: 100%; min-width: 0; height: 100%; padding: 0 2px 0 7px; border: 0; outline: 0; background: transparent; color: #153139; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.speed-number span { padding-right: 6px; color: #35576a; font-size: 10px; font-weight: 900; }
.speed-number:focus-within { border-color: #29e7ff; box-shadow: 0 0 0 2px rgba(41,231,255,.2); }

.timeline-panel { display: flex; flex-direction: column; }
.timeline-filter { margin: -2px 0 4px; padding: 0 0 4px; border-bottom: 1px solid #b7c5c7; }
.timeline-filter form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.timeline-filter label { display: grid; min-width: 0; gap: 4px; }
.timeline-filter label > span { overflow: hidden; color: #4d666c; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.timeline-filter input[type="date"], .timeline-filter select { height: 32px; min-height: 32px; padding-left: 7px; padding-right: 7px; font-size: 12px; font-weight: 900; }
.timeline-filter .load-button, .timeline-filter .analysis-link { min-height: 32px; min-width: 0; padding: 0 6px; font-size: 9px; }
.timeline-filter .load-button { height: 32px; align-self: end; }
.timeline-filter .load-button span, .timeline-filter .analysis-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-count { padding: 5px 7px; border: 1px solid #07509d; border-radius: 2px; background: #0c68ca; color: #fff; font-size: 8px; font-weight: 900; }

.carrier-map { margin-bottom: 7px; padding: 8px; border: 1px solid #b5a750; background: var(--yellow); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.carrier-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.carrier-heading > div:first-child { display: grid; gap: 1px; }
.carrier-heading span { color: #7d7335; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.carrier-heading strong { font-size: 10px; }
.slot-readout { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid #b8aa51; background: #fffce2; }
.slot-readout strong { color: #075bcc; font-size: 14px; }
.slot-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.slot-grid > span { position: relative; display: grid; place-items: center; min-height: 18px; border: 1px solid #8c9897; background: linear-gradient(#dce1df, #aab5b4); color: #47595b; font-size: 6px; box-shadow: inset 0 1px rgba(255,255,255,.7); }
.slot-grid i { position: absolute; left: 2px; width: 3px; height: 65%; background: #798b89; }
.slot-grid b { font-weight: 800; }
.slot-grid .occupied { border-color: #0074e9; background: linear-gradient(#4bb8ff, #0870db); color: #fff; box-shadow: 0 0 8px rgba(0,116,233,.55); }
.slot-grid .occupied i { background: #fff; }

.now-card { display: none; }
.now-head, .now-detail { display: flex; align-items: center; justify-content: space-between; color: #567176; font-size: 8px; }
.state-chip { padding: 3px 6px; border: 1px solid #007493; background: var(--cyan); color: #00303d; font-size: 8px; font-weight: 900; }
.state-chip.put { border-color: #ba6510; background: var(--orange); color: #421b00; }
.now-module { margin: 4px 0; font-size: 16px; font-weight: 850; letter-spacing: -.03em; }
.now-detail strong { margin-left: 2px; color: #12373f; font-variant-numeric: tabular-nums; }

.event-list { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; padding: 0; border: 1px solid #a0b0b2; background: #f7f9f9; list-style: none; overflow: auto; scrollbar-color: #789194 #d9e1e2; }
.flow-date-nav { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 6px; margin-bottom: 5px; }
.flow-date-nav button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 1px solid #66858a; border-radius: 3px; background: linear-gradient(#f7fbfb, #c6d4d6); color: #173c44; font-size: 20px; line-height: 1; cursor: pointer; }
.flow-date-nav button:disabled { opacity: .4; cursor: default; }
.flow-date-nav strong { overflow: hidden; color: #234b53; font-size: 11px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.event-list li button { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.event-list li button:hover .event-copy { background: #e8f4f5; }
.event-rail { position: relative; align-self: stretch; }
.event-rail::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #a4b6b8; }
.event-rail i { position: absolute; top: 24px; left: 50%; z-index: 1; width: 9px; height: 9px; border: 2px solid #70888c; border-radius: 50%; background: #edf2f2; transform: translate(-50%,-50%); transition: .2s; }
.event-copy { min-width: 0; padding: 4px 3px; border-bottom: 1px solid #c2cdcf; }
.event-copy > span:last-child { color: #6a8085; font-size: 9px; font-variant-numeric: tabular-nums; }
.event-topline { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 3px; }
.event-topline strong { overflow: hidden; color: #1b3b42; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.event-topline strong b { color: #0a77a4; font-size: 9px; }
.event-topline em { padding: 2px 4px; border: 1px solid #0082a6; background: #24d9ff; color: #003643; font-size: 7px; font-style: normal; font-weight: 900; }
.event-topline em.put { border-color: #bd6d17; background: #ffb157; color: #4e2500; }
.lot-id-list { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 3px; margin: 0; overflow: hidden; }
.lot-id-list b { padding: 2px 5px; border: 1px solid #8ab6d6; border-radius: 3px; background: #e2f2ff; color: #075a9f; font-size: 9px; font-weight: 900; }
.event-duration { padding: 0 7px; color: #61777b; font-size: 9px; font-variant-numeric: tabular-nums; }
.event-list li.completed .event-rail i { border-color: #12974c; background: #35d878; box-shadow: 0 0 6px rgba(39,201,105,.55); }
.event-list li.active .event-rail i { width: 12px; height: 12px; border-color: #006cd2; background: #19d8ff; box-shadow: 0 0 9px #00aee8; }
.event-list li.active .event-copy { background: linear-gradient(90deg, #cdeff2, #f6fafa); }
.event-list li.active .event-topline strong { color: #0062b8; }
.no-events { padding: 35px 10px; color: var(--muted); text-align: center; font-size: 11px; }

@media (max-width: 920px) {
    .topbar { grid-template-columns: 1fr auto; }
    .mode-tabs { display: none; }
    .workspace { grid-template-columns: minmax(0, 1.7fr) minmax(230px, .62fr); }
    .carrier-heading > div:first-child strong { font-size: 8px; }
    .slot-grid { gap: 2px; }
    .slot-grid > span { min-height: 15px; }
    .filter-panel form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .app-shell { padding: 6px; }
    .topbar { min-height: 58px; padding: 8px 10px; }
    .product-badge { width: 35px; height: 35px; }
    .status-clock { display: none; }
    .live-pill { padding: 6px; font-size: 7px; }
    .filter-panel { justify-content: stretch; padding: 7px; }
    .filter-panel form { width: 100%; grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 4px; }
    .filter-panel label { min-width: 0; }
    .filter-panel label > span { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
    .filter-panel select { min-width: 0; min-height: 36px; padding: 0 5px; font-size: 9px; }
    .load-button { min-height: 36px; padding: 0; }
    .load-button span, .analysis-link span { display: none; }
    .analysis-link { min-height: 36px; padding: 0; }
    .run-strip { grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 6px 8px; }
    .run-strip > i, .run-strip .run-state { display: none; }
    .run-strip .material-status { justify-items: start; }
    .run-strip strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
    .equipment-panel, .timeline-panel { padding: 6px; }
    .equipment-frame { padding: 5px; }
    .legend { display: none; }
    .panel-tools { gap: 0; }
    .equipment-stage { width: 100%; }
    .equipment-stage { --wafer-size: 40px; }
    .robot-zone { --blade-slot-size: calc(var(--wafer-size) + 18px); --blade-carriage-width: 58px; --blade-scale: 1.15; }
    .robot-hub { border-width: 2px; }
    .stage-readout { display: none; }
    .playback { grid-template-columns: auto 1fr; gap: 8px; padding: 7px; }
    .speed-control { grid-column: 1 / -1; grid-template-columns: auto minmax(100px, 1fr); align-items: center; }
    .slot-grid { grid-template-columns: repeat(10, 1fr); gap: 2px; }
    .slot-grid > span { min-height: 16px; }
}

@media (max-width: 680px) {
    .workspace { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .equipment-panel { height: auto; }
    .equipment-frame { flex: 0 0 auto; height: auto; }
    .equipment-stage { width: 100%; max-height: none; }
    .timeline-panel { min-height: 470px; }
    .event-list { max-height: 330px; }
}

/* Embedded single-slot simulator used by the analysis comparison modal */
body.embedded-simulator {
    min-width: 0;
    height: 100vh;
    overflow: hidden;
}
.embedded-simulator .app-shell {
    width: 100%;
    height: 100vh;
    padding: 0;
}
.embedded-simulator .filter-panel,
.embedded-simulator .timeline-panel {
    display: none;
}
.embedded-simulator .workspace {
    display: block;
    height: 100%;
    margin: 0;
}
.embedded-simulator .equipment-panel {
    display: flex;
    flex-direction: column;
    height: 100vh !important;
    padding: 5px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.embedded-simulator .equipment-panel > .panel-heading {
    display: none;
}
.embedded-simulator .equipment-frame {
    flex: 1 1 auto;
    padding: 4px;
}
.embedded-simulator .equipment-stage {
    width: min(100%, calc((100vh - 72px) * 1.19));
}
.embedded-simulator .playback {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 4px;
    padding: 6px;
}
.embedded-simulator .transport-controls {
    display: none;
}
.embedded-simulator .scrubber-wrap input {
    pointer-events: none;
}
.embedded-simulator .scrubber-track {
    padding-top: 0;
}
.embedded-simulator .slot-start-markers {
    display: none;
}
.embedded-simulator .speed-control {
    display: none;
}

/* Vertical FIC enclosure with two fixed, upward-facing blades. */
.robot-zone {
    top: 14%;
    left: 37.5%;
    width: 25%;
    height: 38%;
    overflow: hidden;
    border: 2px solid #28484f;
    border-radius: 2px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.52), transparent 32%),
        linear-gradient(145deg, #eef2f2, #aebcbe 58%, #899da0);
    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,.34),
        0 4px 10px rgba(18,55,62,.34);
}
.robot-zone::before,
.robot-hub,
.robot-upper-link::before,
.robot-upper-link::after,
.robot-elbow,
.robot-forearm::before,
.robot-forearm::after,
.robot-wrist,
.blade-carriage {
    display: none !important;
}
.robot-zone::after {
    display: block;
}
.robot-label {
    display: block !important;
    top: 5%;
    left: 50%;
    z-index: 14;
    padding: 3px 8px;
    border: 1px solid #6d8185;
    border-radius: 2px;
    background: rgba(239,244,244,.9);
    color: #18383f;
    font-size: clamp(7px, .72vw, 10px);
    letter-spacing: .1em;
    box-shadow: inset 0 1px rgba(255,255,255,.78);
}
.robot-zone .fic-arm {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
    transition: none !important;
}
.robot-zone .robot-upper-link {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
}
.robot-zone .robot-forearm {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
}
.robot-zone .fic-blade {
    left: 50%;
    width: 0;
    height: 0;
    transform: none !important;
    transition: none !important;
}
.robot-zone .fic-blade-2 {
    left: 26%;
    top: 58%;
    --blade-offset: 0px;
}
.robot-zone .fic-blade-1 {
    left: 74%;
    top: 58%;
    --blade-offset: 0px;
}
.robot-zone .robot-fork {
    left: 0;
    top: 0;
    width: calc(var(--blade-slot-size) + 8px);
    height: calc(var(--blade-slot-size) + 8px);
    border-radius: 36px 36px 18px 18px;
    background: transparent;
    filter: drop-shadow(0 7px 7px rgba(5,18,21,.34));
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
}
.robot-zone .robot-fork::before {
    inset: 4px;
    clip-path: polygon(
        41% 100%,
        41% 68%,
        32% 60%,
        8% 43%,
        3% 11%,
        17% 5%,
        25% 35%,
        43% 50%,
        50% 55%,
        57% 50%,
        75% 35%,
        83% 5%,
        97% 11%,
        92% 43%,
        68% 60%,
        59% 68%,
        59% 100%
    );
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.18),
            transparent 16% 43%,
            rgba(255,255,255,.12) 51%,
            transparent 58% 84%,
            rgba(0,0,0,.24)
        ),
        linear-gradient(180deg, #536166 0%, #293338 38%, #11191d 100%);
    box-shadow: none;
    filter:
        drop-shadow(0 0 0 #091013)
        drop-shadow(0 2px 1px rgba(255,255,255,.16));
}
.robot-zone .robot-fork::after {
    inset: 4px;
    clip-path: polygon(
        41% 100%,
        41% 68%,
        32% 60%,
        8% 43%,
        3% 11%,
        17% 5%,
        25% 35%,
        43% 50%,
        50% 55%,
        57% 50%,
        75% 35%,
        83% 5%,
        97% 11%,
        92% 43%,
        68% 60%,
        59% 68%,
        59% 100%
    );
    background:
        radial-gradient(circle at 13% 18%, #dce4e4 0 1.4px, #121b1f 1.8px 3.2px, transparent 3.6px),
        radial-gradient(circle at 87% 18%, #dce4e4 0 1.4px, #121b1f 1.8px 3.2px, transparent 3.6px),
        radial-gradient(circle at 50% 88%, #dce4e4 0 1.4px, #121b1f 1.8px 3.2px, transparent 3.6px),
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,.12) 49% 50%, transparent 51%);
    pointer-events: none;
}
.robot-zone .fic-slot {
    left: 0;
    top: 0;
    width: var(--blade-slot-size);
    height: var(--blade-slot-size);
    border: 2px solid #64777d;
    background:
        radial-gradient(
            circle,
            rgba(219,239,241,.08) 0 57%,
            rgba(168,192,196,.16) 58% 64%,
            rgba(10,24,28,.3) 65% 68%,
            transparent 69%
        );
    box-shadow:
        0 0 0 1px rgba(225,241,242,.34),
        0 4px 8px rgba(4,18,22,.28),
        inset 0 0 0 1px rgba(255,255,255,.08);
}
.robot-zone .fic-blade-2 .fic-slot {
    border-color: #1688a4;
    box-shadow:
        0 0 0 1px rgba(87,220,241,.38),
        0 4px 8px rgba(4,18,22,.28),
        inset 0 0 0 1px rgba(124,230,244,.12);
}
.robot-zone .fic-slot b {
    min-width: 0;
    min-height: 0;
    padding: 5px 8px 4px;
    border: 1px solid #687b80;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(28,42,47,.96), rgba(9,18,22,.98));
    color: #e9f1f2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 2px 4px rgba(0,0,0,.38);
    transform: none;
}
.robot-zone .fic-slot b::before {
    content: "BLADE ";
    color: #9eb1b6;
    font-size: .72em;
    letter-spacing: .1em;
}
.robot-zone .fic-blade-2 .fic-slot b {
    border-color: #187f98;
    color: #76e4f7;
}
.robot-zone .fic-blade-2 .fic-slot b::after,
.robot-zone .fic-blade-1 .fic-slot b::after {
    content: none;
}

@media (max-width: 760px) {
    .robot-zone {
        left: 35%;
        width: 30%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}