/* ==========================================================================
   UniVersa MES product page, home spotlight & mock screens
   ========================================================================== */
.nav-new { display: inline-block; font-family: var(--ig-mono); font-size: .6rem; font-weight: 700; letter-spacing: .08em; line-height: 1; padding: .22rem .38rem; border-radius: 5px; color: #071006; background: var(--ig-neon); box-shadow: 0 0 12px rgba(196,245,106,.6); vertical-align: 2px; animation: blink 2.4s ease-in-out infinite; }
.mes-hero { min-height: auto; padding: 140px 0 90px; }
.mes-hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.mes-hero .crumb { margin-bottom: 2rem; }

.mes-win { border: 1px solid var(--ig-line-2); border-radius: 18px; background: linear-gradient(180deg, rgba(10,22,13,.96), rgba(5,11,7,.96)); box-shadow: 0 30px 80px -30px rgba(141,198,63,.4), inset 0 1px 0 rgba(255,255,255,.04); overflow: hidden; }
.mes-win-bar { display: flex; align-items: center; gap: 6px; padding: .6rem .9rem; border-bottom: 1px solid var(--ig-line); background: rgba(141,198,63,.05); }
.mes-win-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--ig-line-2); flex: none; }
.mes-win-bar > i:nth-child(1) { background: #e8645a; } .mes-win-bar > i:nth-child(2) { background: #e6c14d; } .mes-win-bar > i:nth-child(3) { background: var(--ig-apple); }
.mes-win-bar span { margin-left: .6rem; font-family: var(--ig-mono); font-size: .7rem; letter-spacing: .12em; color: var(--ig-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mes-win-bar .live { margin-left: auto; font-family: var(--ig-mono); font-size: .65rem; color: var(--ig-neon); display: inline-flex; align-items: center; gap: .35rem; flex: none; }
.mes-win-bar .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ig-neon); box-shadow: 0 0 8px var(--ig-neon); animation: blink 1.2s infinite; }
.mes-win-body { padding: 1rem; }
.mes-sub { font-family: var(--ig-mono); font-size: .66rem; letter-spacing: .14em; color: var(--ig-dim); margin: .4rem 0 .5rem; }

.mes-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .6rem; }
.mes-gauge { position: relative; text-align: center; border: 1px solid var(--ig-line); border-radius: 14px; padding: .6rem .3rem .5rem; background: var(--ig-panel); }
.mes-gauge svg { width: 100%; max-width: 110px; transform: rotate(-90deg); }
.mes-gauge .g-bg { fill: none; stroke: rgba(141,198,63,.12); stroke-width: 7; }
.mes-gauge .g-val { fill: none; stroke: var(--ig-apple); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(141,198,63,.6)); animation: gaugeIn 1.8s cubic-bezier(.2,.7,.2,1) both; }
.mes-gauge.mint .g-val { stroke: var(--ig-mint); filter: drop-shadow(0 0 6px rgba(61,220,151,.6)); }
@keyframes gaugeIn { from { stroke-dashoffset: var(--c); } }
.mes-gauge .g-num { position: absolute; left: 0; right: 0; top: 30%; font-family: "Exo 2", sans-serif; font-weight: 800; font-size: clamp(1rem, 2vw, 1.35rem); color: #fff; }
.mes-gauge .g-num small { font-size: .6em; color: var(--ig-apple); }
.mes-gauge .g-lbl { font-family: var(--ig-mono); font-size: .66rem; letter-spacing: .14em; color: var(--ig-muted); }

.lamp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6d8169; flex: none; }
.lamp.g, .wb-g .lamp, .oee-run .state::before { background: #8dc63f; box-shadow: 0 0 8px #8dc63f; }
.lamp.y, .wb-y .lamp, .oee-idle .state::before { background: #e6c14d; box-shadow: 0 0 8px #e6c14d; }
.lamp.r, .wb-r .lamp, .oee-alarm .state::before { background: #e8645a; box-shadow: 0 0 8px #e8645a; animation: blink 1s infinite; }
.wb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.wb { display: flex; align-items: center; gap: .35rem; font-size: .74rem; padding: .45rem .5rem; border-radius: 10px; border: 1px solid var(--ig-line); background: var(--ig-panel); color: #d3e2cc; }
.wb b { font-family: var(--ig-mono); font-weight: 600; font-size: .66rem; color: var(--ig-muted); }
.wb span { margin-left: auto; font-weight: 700; color: #fff; }
.wb-y { border-color: rgba(230,193,77,.35); } .wb-r { border-color: rgba(232,100,90,.45); }
.mes-ticker { display: flex; gap: .8rem; align-items: center; margin-top: .7rem; padding: .5rem .7rem; border-radius: 10px; border: 1px dashed var(--ig-line-2); font-size: .74rem; color: #d3e2cc; }
.mes-ticker .ok { color: #071006; background: var(--ig-apple); border-radius: 5px; padding: 0 .4rem; font-family: var(--ig-mono); font-weight: 700; font-size: .66rem; }
.mes-ticker .mono:last-child { margin-left: auto; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .8rem; }
.kpi { border: 1px solid var(--ig-line); border-radius: 12px; padding: .55rem .65rem; background: var(--ig-panel); }
.kpi .k { font-family: var(--ig-mono); font-size: .6rem; letter-spacing: .1em; color: var(--ig-dim); }
.kpi .v { font-family: "Exo 2", sans-serif; font-weight: 800; font-size: 1.2rem; color: #fff; }
.kpi .v small.up { font-size: .6rem; color: #e6c14d; }
.prog { display: grid; grid-template-columns: 78px 1fr 40px 74px; gap: .6rem; align-items: center; font-size: .72rem; margin-bottom: .4rem; }
.prog .mono { color: var(--ig-muted); font-size: .66rem; }
.prog b { color: #fff; } .prog small { color: var(--ig-dim); font-family: var(--ig-mono); font-size: .6rem; }
.bar { height: 7px; border-radius: 4px; background: rgba(141,198,63,.12); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--ig-deep), var(--ig-neon)); animation: grow 1.6s cubic-bezier(.2,.7,.2,1) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.mes-table { width: 100%; font-size: .72rem; margin-top: .7rem; border-collapse: collapse; }
.mes-table th { font-family: var(--ig-mono); font-weight: 600; font-size: .6rem; letter-spacing: .08em; color: var(--ig-dim); padding: .35rem .3rem; border-bottom: 1px solid var(--ig-line); }
.mes-table td { padding: .42rem .3rem; border-bottom: 1px dashed var(--ig-line); color: #d3e2cc; }
.st { font-family: var(--ig-mono); font-size: .58rem; font-weight: 700; padding: .12rem .4rem; border-radius: 5px; white-space: nowrap; }
.st-done { color: #071006; background: var(--ig-apple); } .st-run { color: #e6c14d; border: 1px solid rgba(230,193,77,.5); }
.st-idle { color: #e8a65a; border: 1px solid rgba(232,166,90,.5); } .st-plan { color: var(--ig-muted); border: 1px solid var(--ig-line-2); }

.eff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.eff { border: 1px solid var(--ig-line); border-radius: 12px; padding: .6rem .7rem; background: var(--ig-panel); }
.eff .mono { font-size: .68rem; color: var(--ig-muted); }
.eff-num { font-family: "Exo 2", sans-serif; font-weight: 800; font-size: 1.5rem; color: #fff; line-height: 1.2; }
.eff-meta { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ig-apple-2); }
.uph { display: flex; align-items: flex-end; gap: 3px; height: 80px; padding: 0 2px; border-bottom: 1px solid var(--ig-line); }
.uph i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--ig-neon), rgba(141,198,63,.25)); animation: growY 1.2s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d); transform-origin: bottom; }
.uph i.low { background: linear-gradient(180deg, #e6c14d, rgba(230,193,77,.2)); }
@keyframes growY { from { transform: scaleY(0); } }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; font-size: .68rem; color: var(--ig-muted); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }

.oee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.oee { border: 1px solid var(--ig-line); border-radius: 12px; padding: .6rem .7rem; background: var(--ig-panel); }
.oee .mono { font-size: .7rem; color: var(--ig-muted); }
.oee .state { font-family: var(--ig-mono); font-size: .6rem; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; color: #d3e2cc; }
.oee .state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.oee-alarm { border-color: rgba(232,100,90,.5); box-shadow: inset 0 0 18px rgba(232,100,90,.12); }
.oee-idle { border-color: rgba(230,193,77,.35); }
.oee-num { font-family: "Exo 2", sans-serif; font-weight: 800; font-size: 1.45rem; color: #fff; }
.oee-num small { font-size: .55em; color: var(--ig-apple); }
.apq { display: grid; grid-template-columns: 12px 1fr 22px; gap: .4rem; align-items: center; font-size: .6rem; color: var(--ig-dim); font-family: var(--ig-mono); margin-top: .2rem; }
.apq .bar { height: 4px; } .apq em { font-style: normal; color: #d3e2cc; text-align: right; }
.timeline { display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px; }
.timeline i { display: block; } .tl-run { background: rgba(141,198,63,.8); } .tl-idle { background: rgba(230,193,77,.8); } .tl-alarm { background: rgba(232,100,90,.9); }

.spc { width: 100%; height: auto; display: block; overflow: visible; }
.spc .lim { stroke: #e8645a; stroke-dasharray: 4 4; stroke-width: 1.4; }
.spc .lim-t { fill: var(--ig-muted); font-family: var(--ig-mono); font-size: 9px; }
.spc .axis { stroke: var(--ig-line-2); }
.spc .hb { fill: rgba(141,198,63,.45); stroke: var(--ig-apple); stroke-width: .8; transform-box: fill-box; transform-origin: bottom; animation: growY 1.2s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d); }
.spc .curve { fill: none; stroke: var(--ig-neon); stroke-width: 2.2; stroke-dasharray: 400; animation: drawIn 2.4s ease-out both .6s; filter: drop-shadow(0 0 4px rgba(196,245,106,.7)); }
@keyframes drawIn { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.spc .ucl { stroke: #e8645a; stroke-dasharray: 5 4; } .spc .cl { stroke: var(--ig-apple); stroke-dasharray: 2 3; }
.spc .xl { fill: none; stroke: var(--ig-mint); stroke-width: 1.6; stroke-dasharray: 600; animation: drawIn 2.6s ease-out both; }
.spc .xp { fill: var(--ig-bg); stroke: var(--ig-mint); stroke-width: 1.6; }
.cpk { border: 1px solid var(--ig-line-2); border-radius: 14px; padding: .8rem; text-align: center; background: radial-gradient(circle at 50% 0, rgba(196,245,106,.15), transparent 70%); }
.cpk .k { font-family: var(--ig-mono); color: var(--ig-muted); font-size: .7rem; }
.cpk .v { font-family: "Exo 2", sans-serif; font-weight: 800; font-size: 2.2rem; color: #fff; line-height: 1.1; }
.cpk .grade { display: inline-block; margin-top: .2rem; font-family: var(--ig-mono); font-weight: 700; color: #071006; background: var(--ig-neon); border-radius: 6px; padding: .05rem .5rem; box-shadow: 0 0 14px rgba(196,245,106,.5); }
.spc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .5rem; }
.spc-stats div { border: 1px solid var(--ig-line); border-radius: 10px; padding: .35rem .5rem; font-size: .72rem; display: flex; justify-content: space-between; }
.spc-stats span { color: var(--ig-dim); font-family: var(--ig-mono); } .spc-stats b { color: #fff; }

.mes-tabs { gap: .5rem; flex-wrap: wrap; }
.mes-tabs .nav-link { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; border: 1px solid var(--ig-line); color: var(--ig-muted); padding: .55rem 1.1rem; background: transparent; }
.mes-tabs .nav-link .ai { width: 22px; height: 22px; }
.mes-tabs .nav-link:hover { color: #fff; border-color: var(--ig-line-2); }
.mes-tabs .nav-link.active { color: #071006; background: var(--ig-apple); border-color: var(--ig-apple); font-weight: 600; box-shadow: 0 0 22px rgba(141,198,63,.4); }
.mes-tabs .nav-link.active .ai { color: #071006; }
.mes-tabs .nav-link.active .ai .st-neon { stroke: #071006; }
.mes-tabs .nav-link.active .ai .fl-neon, .mes-tabs .nav-link.active .ai .fl-soft { fill: rgba(7,16,6,.35); }

.mes-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; position: relative; }
.flow-line { position: absolute; top: 38px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--ig-line), var(--ig-apple), var(--ig-line)); }
.flow-line i { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ig-neon); box-shadow: 0 0 12px var(--ig-neon); animation: flowdot 6s linear infinite; }
.flow-line i:nth-child(2) { animation-delay: 2s; } .flow-line i:nth-child(3) { animation-delay: 4s; }
@keyframes flowdot { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.flow-step { text-align: center; position: relative; z-index: 1; }
.flow-step .icon-wrap { background-color: var(--ig-bg-2); }
.flow-step h4 { font-size: 1rem; font-weight: 700; color: #fff; margin: .3rem 0; }
.flow-step p { font-size: .82rem; color: var(--ig-muted); margin: 0; }
@media (max-width: 991.98px) {
  .mes-flow { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .flow-line { display: none; }
}

.mod-card { display: block; height: 100%; border: 1px solid var(--ig-line); border-radius: 16px; padding: 1.1rem 1.2rem; background: var(--ig-panel); color: inherit; transition: all .3s; }
.mod-card:hover { border-color: var(--ig-apple); background: var(--ig-panel-2); transform: translateY(-4px); color: inherit; }
.mod-card .ai { width: 40px; height: 40px; }
.mod-card .mod-code { font-size: .78rem; color: var(--ig-neon); border: 1px solid var(--ig-line-2); border-radius: 6px; padding: .05rem .4rem; }
.mod-card h4 { font-size: 1rem; font-weight: 700; color: #fff; margin: .8rem 0 .3rem; }
.mod-card p { font-size: .84rem; color: var(--ig-muted); margin: 0; }
.mod-cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: linear-gradient(135deg, rgba(141,198,63,.18), rgba(141,198,63,.04)); border-color: var(--ig-line-2); }

.mes-arch { border: 1px solid var(--ig-line); border-radius: 22px; padding: 1.4rem; background: radial-gradient(circle at 50% 30%, rgba(141,198,63,.1), transparent 70%); }
.ma-row { display: flex; justify-content: center; align-items: center; }
.ma-box { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; min-width: 120px; padding: .7rem .8rem; border: 1px solid var(--ig-line-2); border-radius: 14px; background: rgba(8,18,11,.9); font-size: .82rem; color: #e3eedc; font-weight: 600; line-height: 1.35; }
.ma-box .ai { width: 36px; height: 36px; }
.ma-box small { font-size: .58rem; color: var(--ig-dim); letter-spacing: .08em; font-weight: 400; }
.ma-core { border-color: var(--ig-apple); box-shadow: 0 0 26px rgba(141,198,63,.3); }
.ma-link { width: 2px; height: 26px; margin: 0 auto; background: var(--ig-line-2); position: relative; }
.ma-link i, .ma-hlink i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ig-neon); box-shadow: 0 0 8px var(--ig-neon); }
.ma-link i { left: -2px; animation: vdot 1.6s linear infinite; }
.ma-hlink { flex: 1; min-width: 14px; max-width: 46px; height: 2px; background: var(--ig-line-2); position: relative; }
.ma-hlink i { top: -2px; animation: hdot 1.6s linear infinite; }
@keyframes vdot { from { top: 0; } to { top: 100%; } }
@keyframes hdot { from { left: 0; } to { left: 100%; } }
.ma-zone { text-align: center; font-size: .66rem; color: var(--ig-dim); letter-spacing: .2em; margin: .5rem 0 0; }
@media (max-width: 575.98px) { .ma-box { min-width: 0; flex: 1; font-size: .72rem; padding: .5rem .3rem; } .ma-box small { display: none; } .mes-arch { padding: 1rem .6rem; } }

.phase-bar { margin-top: 1.2rem; height: 6px; border-radius: 3px; background: rgba(141,198,63,.12); overflow: hidden; }
.phase-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--ig-deep), var(--ig-neon)); }

/* home: MES spotlight */
.mes-spot { position: relative; border: 1px solid var(--ig-line-2); border-radius: 28px; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden;
  background: radial-gradient(700px 360px at 90% 10%, rgba(196,245,106,.16), transparent 60%), linear-gradient(135deg, #0d1f10, #060d08 65%); }
.mes-spot .bg-grid { position: absolute; inset: 0; opacity: .45; }
.mes-spot > .row { position: relative; }
.mes-spot h2 { color: #fff; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.spot-badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ig-neon); margin-bottom: .8rem; }

/* solution page banner */
.mes-banner { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--ig-apple); border-radius: 16px; padding: 1rem 1.2rem; background: linear-gradient(90deg, rgba(141,198,63,.16), rgba(141,198,63,.03)); color: #fff; margin-bottom: 1.5rem; }
.mes-banner:hover { color: #fff; box-shadow: 0 0 30px rgba(141,198,63,.3); }
.mes-banner .ai { width: 46px; height: 46px; flex: none; }

/* icon: barcode scan line */
.ai .scan { animation: scanline 2.2s ease-in-out infinite alternate; }
@keyframes scanline { from { transform: translateY(0); } to { transform: translateY(20px); } }

@media (max-width: 575.98px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .wb-grid { grid-template-columns: repeat(2, 1fr); }
  .eff-grid, .oee-grid { grid-template-columns: repeat(2, 1fr); }
  .prog { grid-template-columns: 64px 1fr 34px; } .prog small { display: none; }
  .mes-table th:nth-child(2), .mes-table td:nth-child(2) { display: none; }
  .mes-ticker .mono:last-child { display: none; }
}