:root{--demo-navy:#07111f;--demo-panel:#fff;--demo-bg:#f3f7fb;--demo-blue:#1976d2;--demo-cyan:#53b7e8;--demo-border:#dbe5ef;--demo-text:#172033;--demo-muted:#65758b;--demo-green:#20a66a;--demo-amber:#e4a11b;--demo-red:#d94b53}.demo-page{background:var(--demo-bg);color:var(--demo-text)}.demo-intro{background:linear-gradient(135deg,#07111f 0%,#102b4a 100%);color:#fff;padding:84px 0 132px}.demo-intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center}.demo-intro h1{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.02;max-width:850px;margin:.3rem 0 1.2rem}.demo-intro p{max-width:720px;color:#c9d8e8;font-size:1.08rem}.demo-actions{display:flex;gap:14px;margin:28px 0 16px}.demo-note{font-size:.88rem!important}.intro-card{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);backdrop-filter:blur(18px);padding:30px;border-radius:22px;box-shadow:0 28px 70px rgba(0,0,0,.25)}.status-dot,.live-dot{width:9px;height:9px;background:#2ed47a;display:inline-block;border-radius:50%;box-shadow:0 0 0 6px rgba(46,212,122,.12);margin-right:10px}.intro-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}.intro-stats div{background:rgba(255,255,255,.08);padding:16px;border-radius:14px}.intro-stats b{display:block;font-size:1.25rem}.intro-stats span{font-size:.76rem;color:#b9c9da}.demo-workspace{max-width:1500px;margin:-78px auto 80px;padding:0 24px;scroll-margin-top:90px}.demo-shell{min-height:790px;display:grid;grid-template-columns:250px 1fr;background:#fff;border:1px solid rgba(14,38,66,.12);border-radius:22px;overflow:hidden;box-shadow:0 35px 90px rgba(16,39,67,.16)}.demo-sidebar{background:var(--demo-navy);color:#fff;padding:24px 18px;display:flex;flex-direction:column}.demo-brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.1)}.demo-brand img{width:36px}.demo-brand strong,.demo-brand span{display:block}.demo-brand strong{font-size:.88rem}.demo-brand span{font-size:.72rem;color:#8ca4bd}.demo-sidebar nav{padding:22px 0;display:grid;gap:6px}.demo-sidebar nav button{border:0;background:transparent;color:#91a6bb;text-align:left;padding:12px;border-radius:10px;cursor:pointer;font:inherit;display:flex;gap:12px;align-items:center;transition:.2s}.demo-sidebar nav button span{font-size:.68rem;opacity:.7}.demo-sidebar nav button:hover,.demo-sidebar nav button.active{color:#fff;background:rgba(83,183,232,.14)}.demo-sidebar nav button.active{box-shadow:inset 3px 0 0 var(--demo-cyan)}.demo-progress{margin-top:auto}.demo-progress>div{height:4px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}.demo-progress>div span{display:block;height:100%;width:12.5%;background:var(--demo-cyan);transition:.35s}.demo-progress small{display:block;color:#7890aa;margin-top:10px}.demo-content{min-width:0;display:flex;flex-direction:column}.demo-topbar{height:74px;border-bottom:1px solid var(--demo-border);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.demo-topbar>div{display:flex;align-items:center;gap:12px}.plant-pill{font-size:.66rem;letter-spacing:.1em;color:var(--demo-blue);background:#eaf4ff;padding:6px 9px;border-radius:7px}.shift-clock{color:var(--demo-muted);font-size:.83rem}.screen{display:none;padding:30px;animation:fadeSlide .3s ease}.screen.active{display:block}.screen-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}.screen-heading h2{margin:.25rem 0 .25rem;font-size:1.75rem}.screen-heading p{margin:0;color:var(--demo-muted)}.eyebrow{font-size:.68rem!important;font-weight:800;letter-spacing:.14em;color:var(--demo-blue)!important}.outline-action{background:#fff;border:1px solid var(--demo-border);padding:11px 16px;border-radius:9px;font-weight:700;cursor:pointer}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.kpi-grid article,.production-summary div{border:1px solid var(--demo-border);border-radius:14px;padding:18px;background:linear-gradient(180deg,#fff,#fbfdff)}.kpi-grid span,.production-summary span{display:block;color:var(--demo-muted);font-size:.78rem}.kpi-grid strong{display:block;font-size:1.75rem;margin:7px 0}.kpi-grid small{color:var(--demo-muted)}.up{color:var(--demo-green)!important}.dashboard-grid,.two-column{display:grid;grid-template-columns:1.6fr .9fr;gap:18px}.panel{border:1px solid var(--demo-border);border-radius:14px;background:#fff;padding:20px}.panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel header span,.panel header div span{color:var(--demo-muted);font-size:.76rem}.chart-panel svg{width:100%;height:260px}.grid-lines line{stroke:#e8eef5}.actual-line{fill:none;stroke:#1976d2;stroke-width:4;stroke-linecap:round}.target-line{fill:none;stroke:#9aabba;stroke-width:2;stroke-dasharray:7 7}.axis-labels text{font-size:12px;fill:#7890a5}.machine-row{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #edf2f7}.machine-row i{width:10px;height:10px;border-radius:50%}.machine-row i.running{background:var(--demo-green)}.machine-row i.changeover{background:var(--demo-amber)}.machine-row i.attention{background:var(--demo-red)}.machine-row b,.machine-row span{display:block}.machine-row span{color:var(--demo-muted);font-size:.75rem}.login-layout{min-height:600px;display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--demo-border);border-radius:18px;overflow:hidden}.login-panel{padding:44px}.login-logo{width:235px;margin-bottom:25px}.login-panel h2{font-size:2rem;margin-bottom:4px}.login-panel>p{color:var(--demo-muted);margin-bottom:22px}.login-benefits{padding:50px;background:linear-gradient(145deg,#0d2845,#134a72);color:#fff;display:flex;flex-direction:column;justify-content:center}.login-benefits h3{font-size:2.3rem;line-height:1.15}.login-benefits ul{display:grid;gap:15px;padding-left:20px;color:#c9d9e8}.login-benefits .eyebrow{color:#73c7f0!important}label{font-size:.76rem;font-weight:700;display:block;margin-bottom:13px}input,select,textarea{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid #cdd9e5;border-radius:9px;padding:11px 12px;background:#fff;font:inherit;color:var(--demo-text)}textarea{resize:vertical}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field-grid.three{grid-template-columns:repeat(3,1fr)}.demo-primary{width:100%;border:0;cursor:pointer}.job-status,.hour-badge,.quality-score{background:#eaf7f0;color:#167a4e;padding:9px 12px;border-radius:9px;font-size:.72rem;font-weight:800;letter-spacing:.05em}.job-status.warning{background:#fff5dc;color:#9a6500}.instruction-panel .spec{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid #edf2f7}.instruction-callout,.insight{margin-top:18px;padding:15px;background:#edf7ff;border-radius:10px}.instruction-callout p,.insight p{margin:6px 0 0;color:var(--demo-muted);font-size:.85rem}.production-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}.production-summary b{display:block;font-size:1.45rem;margin-top:7px}.confirmation{display:none;margin-top:12px;background:#eaf7f0;color:#167a4e;padding:10px;border-radius:8px;font-size:.85rem}.confirmation.show{display:block}.hour-table table,.operator-table table{width:100%;border-collapse:collapse;font-size:.8rem}.hour-table th,.hour-table td,.operator-table th,.operator-table td{text-align:left;padding:12px 8px;border-bottom:1px solid #edf2f7}.status{padding:5px 8px;border-radius:8px;font-size:.7rem}.status.ok{background:#eef5ff;color:#1762a5}.status.great{background:#eaf7f0;color:#167a4e}.status.current{background:#fff4d8;color:#9a6500}.bar-row,.reason-row{display:grid;grid-template-columns:100px 1fr 30px;gap:10px;align-items:center;margin:14px 0;font-size:.78rem}.bar-row div,.reason-row div{height:8px;background:#edf2f7;border-radius:10px;overflow:hidden}.bar-row i,.reason-row i{display:block;height:100%;background:var(--demo-blue);border-radius:10px}.quality-grid{display:grid;grid-template-columns:.7fr 1.1fr 1fr;gap:18px}.gauge{width:190px;height:95px;margin:20px auto;overflow:hidden;position:relative}.gauge:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;border:18px solid #e7eef5;border-bottom-color:var(--demo-green);border-right-color:var(--demo-green);transform:rotate(45deg);top:0;left:5px}.gauge div{position:absolute;inset:45px 0 0;text-align:center}.gauge b,.gauge span{display:block}.alerts-panel>div,.activity-panel>div{display:flex;gap:12px;padding:12px 0;border-top:1px solid #edf2f7}.alerts-panel i{width:26px;height:26px;background:#fff0d8;color:#a66a00;border-radius:50%;display:grid;place-items:center;font-style:normal}.alerts-panel .resolved i{background:#eaf7f0;color:#167a4e}.alerts-panel p,.activity-panel p{margin:0}.alerts-panel span,.activity-panel span{display:block;color:var(--demo-muted);font-size:.75rem}.quality-score b{font-size:1.1rem}.activity-panel time{color:var(--demo-blue);font-size:.73rem;font-weight:700}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.report-card{background:#fff;border:1px solid var(--demo-border);padding:20px;border-radius:13px;display:grid;grid-template-columns:35px 1fr auto;text-align:left;align-items:center;gap:12px;cursor:pointer}.report-card>span{color:var(--demo-blue);font-weight:800}.report-card b,.report-card small{display:block}.report-card small{color:var(--demo-muted);margin-top:5px}.completion-panel{margin-top:20px;background:linear-gradient(120deg,#f4fbff,#eef8f4);display:flex;justify-content:space-between;gap:30px;align-items:center}.completion-panel>div:first-child{display:flex;gap:16px;align-items:center}.completion-check{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--demo-green);color:#fff;font-size:1.4rem}.completion-panel h3,.completion-panel p{margin:.2rem 0}.completion-actions{display:flex;gap:10px}.demo-controls{margin-top:auto;border-top:1px solid var(--demo-border);height:62px;padding:0 28px;display:flex;justify-content:space-between;align-items:center}.demo-controls button{border:0;background:transparent;color:var(--demo-blue);font-weight:700;cursor:pointer}.demo-controls button:disabled{color:#aab7c3;cursor:not-allowed}.demo-controls span{font-size:.75rem;color:var(--demo-muted)}@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:1050px){.demo-shell{grid-template-columns:190px 1fr}.demo-sidebar{padding:18px 10px}.demo-brand div{display:none}.kpi-grid{grid-template-columns:1fr 1fr}.dashboard-grid,.two-column,.quality-grid{grid-template-columns:1fr}.demo-intro-grid{grid-template-columns:1fr}.intro-card{max-width:520px}.production-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.demo-intro{padding:60px 0 110px}.demo-actions,.completion-actions{flex-direction:column}.demo-shell{display:block}.demo-sidebar{padding:12px}.demo-sidebar nav{display:flex;overflow-x:auto;padding:12px 0}.demo-sidebar nav button{min-width:110px}.demo-progress,.demo-brand{display:none}.demo-topbar{padding:0 15px}.shift-clock b,.shift-clock .live-dot{display:none}.screen{padding:18px}.login-layout{grid-template-columns:1fr}.login-benefits{display:none}.login-panel{padding:25px}.kpi-grid,.production-summary,.report-grid,.field-grid,.field-grid.three{grid-template-columns:1fr}.screen-heading,.completion-panel{flex-direction:column}.demo-controls{padding:0 16px}.intro-stats{grid-template-columns:1fr}}