:root {
    --navy: #0f172a;
    --navy-soft: #17233a;
    --ink: #17233b;
    --muted: #64748b;
    --line: #dbe5f1;
    --bg: #f4f7fb;
    --panel: #ffffff;
    --blue: #1473e6;
    --cyan: #0ea5e9;
    --green: #20ad69;
    --orange: #f59e0b;
    --red: #dc4050;
    --shadow: 0 14px 36px rgba(20, 42, 74, .07);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { background: var(--bg); scroll-behavior: smooth; }
body { color: var(--ink); background: var(--bg); font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.drawer-open, body.menu-open { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.demo-app { display: flex; min-height: 100vh; }
.arms-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; display: flex; width: 270px; min-width: 270px; flex-direction: column; overflow: hidden; color: #fff; background: var(--navy); }
.sidebar-header { padding: .85rem .8rem .7rem; }
.arms-logo { display: flex; min-width: 0; align-items: center; gap: .72rem; padding: .72rem; border: 1px solid rgba(147,197,253,.16); border-radius: 16px; background: radial-gradient(circle at 12% 12%,rgba(59,130,246,.18),transparent 38%),rgba(15,23,42,.28); }
.brand-mark { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid rgba(147,197,253,.28); border-radius: 13px; background: linear-gradient(145deg,#eff6ff,#bfdbfe); box-shadow: 0 8px 20px rgba(37,99,235,.22); }
.brand-mark img { width: 30px; height: 30px; }
.brand-copy { display: grid; min-width: 0; gap: .18rem; }
.brand-copy strong { color: #fff; font-size: 1rem; font-weight: 950; letter-spacing: .12em; line-height: 1; }
.brand-copy small { color: #93c5fd; font-size: .57rem; font-weight: 650; line-height: 1.3; }
.arms-navigation { flex: 1; min-height: 0; padding: .3rem .7rem 1rem; overflow-y: auto; }
.nav-section { display: grid; gap: .24rem; margin-bottom: 1rem; }
.nav-section-title { padding: .35rem .65rem; color: #6f88a9; font-size: .56rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.nav-link { display: flex; width: 100%; align-items: center; gap: .8rem; padding: .72rem .75rem; border: 0; border-radius: 11px; background: transparent; color: #c7d5e7; text-align: left; font-size: .76rem; font-weight: 760; transition: .18s ease; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-link.is-active { color: #fff; background: linear-gradient(135deg,rgba(37,99,235,.46),rgba(14,165,233,.22)); box-shadow: inset 3px 0 #55a8ff; }
.nav-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid rgba(147,197,253,.16); border-radius: 9px; background: rgba(255,255,255,.04); color: #9fc8f4; font-size: .8rem; }
.sidebar-foot { display: grid; gap: .28rem; margin: .75rem; padding: .85rem; border: 1px solid rgba(147,197,253,.13); border-radius: 14px; background: rgba(255,255,255,.035); }
.sidebar-foot span { display: flex; align-items: center; gap: .45rem; color: #c9d7e7; font-size: .61rem; }
.sidebar-foot i { width: 7px; height: 7px; border-radius: 50%; background: #2dd47b; box-shadow: 0 0 0 4px rgba(45,212,123,.1); }
.sidebar-foot small { padding-left: 1.02rem; color: #748ba5; font-size: .52rem; }
.sidebar-foot a { margin-top: .35rem; padding-top: .55rem; border-top: 1px solid rgba(147,197,253,.1); color: #75b7f8; font-size: .59rem; font-weight: 800; }
.sidebar-close { display: none; }

.arms-main { min-width: 0; flex: 1; margin-left: 270px; }
.arms-topbar { position: sticky; top: 0; z-index: 50; display: flex; min-height: 76px; align-items: center; gap: 1.2rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 4px 18px rgba(20,42,74,.035); backdrop-filter: blur(16px); }
.header-context { display: flex; min-width: 220px; align-items: center; gap: .65rem; }
.header-context img { width: 32px; height: 32px; }
.header-context div { display: grid; gap: .12rem; }
.header-context span { color: #8a9bae; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.header-context strong { max-width: 340px; overflow: hidden; color: #29415f; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.header-search { display: flex; min-width: 180px; max-width: 420px; flex: 1; align-items: center; gap: .5rem; margin-left: auto; padding: 0 .7rem; border: 1px solid #d8e3ee; border-radius: 11px; background: #f8fbfe; }
.header-search span { color: #7d91a8; font-size: 1rem; }
.header-search input { width: 100%; height: 40px; border: 0; outline: 0; background: transparent; color: #29415f; font-size: .66rem; }
.header-right { display: flex; align-items: center; gap: .62rem; }
.readonly-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border: 1px solid #cfe3f7; border-radius: 999px; background: #edf7ff; color: #1765ae; font-size: .52rem; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.readonly-badge i { width: 7px; height: 7px; border-radius: 50%; background: #2dd47b; box-shadow: 0 0 0 4px rgba(45,212,123,.1); }
.demo-language { display: flex; padding: .17rem; border: 1px solid #d9e4ef; border-radius: 9px; background: #f8fbfe; }
.demo-language button { width: 31px; height: 27px; border: 0; border-radius: 6px; background: transparent; color: #8496aa; font-size: .56rem; font-weight: 900; }
.demo-language button.is-active { color: #0d62bb; background: #e3f0ff; }
.notification-bell { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d9e4ef; border-radius: 11px; background: #fff; }
.notification-bell span { color: #2dd47b; font-size: .65rem; text-shadow: 0 0 8px rgba(45,212,123,.55); }
.demo-user { display: flex; align-items: center; gap: .55rem; }
.demo-user > b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: linear-gradient(145deg,#1d7be7,#0e5cae); color: #fff; font-size: .63rem; }
.demo-user span { display: grid; gap: .08rem; white-space: nowrap; }
.demo-user strong { font-size: .62rem; }
.demo-user small { color: #7b8ea4; font-size: .51rem; }
.mobile-menu { display: none; }
.sidebar-overlay { display: none; }

.arms-content { min-width: 0; padding: clamp(1rem,2.2vw,1.65rem); }
.demo-view { display: none; animation: view-in .2s ease; }
.demo-view.is-active { display: grid; gap: 1rem; }
@keyframes view-in { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.oc-header { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px,1fr) auto; min-height: 118px; align-items: center; gap: 1.2rem; padding: 1.2rem 1.35rem; overflow: hidden; border: 1px solid rgba(95,142,192,.24); border-radius: 24px; color: #fff; background: radial-gradient(circle at 82% -10%,rgba(42,132,255,.34),transparent 34%),linear-gradient(128deg,#06111f 0%,#0b1c31 56%,#102b4d 100%); box-shadow: 0 18px 44px rgba(7,21,36,.2); }
.oc-header::before, .oc-header::after { position: absolute; z-index: -1; border: 1px solid rgba(147,197,253,.12); border-radius: 50%; content: ""; }
.oc-header::before { right: -72px; bottom: -150px; width: 320px; height: 320px; }
.oc-header::after { right: 165px; bottom: -115px; width: 230px; height: 230px; }
.oc-watermark { position: absolute; top: 50%; left: 2%; z-index: -1; width: 96%; overflow: hidden; transform: translateY(-50%); color: rgba(191,219,254,.06); font-size: clamp(1.6rem,3.1vw,3.35rem); font-weight: 950; letter-spacing: .035em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.oc-brand { display: flex; min-width: 0; align-items: center; gap: 1rem; }
.oc-logo { display: grid; width: 60px; height: 60px; flex: 0 0 60px; place-items: center; border: 1px solid rgba(191,219,254,.28); border-radius: 18px; background: linear-gradient(145deg,rgba(239,246,255,.98),rgba(191,219,254,.92)); box-shadow: 0 14px 32px rgba(0,0,0,.24); }
.oc-logo img { width: 43px; height: 43px; }
.oc-brand > div { min-width: 0; }
.oc-brand > div > span { color: #79b7ff; font-size: .61rem; font-weight: 900; letter-spacing: .2em; }
.oc-brand h1 { margin: .12rem 0 .16rem; font-size: clamp(1.3rem,2vw,1.62rem); font-weight: 900; letter-spacing: -.04em; }
.oc-brand p { margin: 0; overflow: hidden; color: #a8bad0; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.oc-status { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.availability-pulse { display: grid; width: 160px; gap: .4rem; padding: .58rem .7rem; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(4,14,27,.42); }
.availability-pulse > span { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.availability-pulse small { color: #a8bad0; font-size: .55rem; font-weight: 750; }
.availability-pulse strong { font-size: .79rem; }
.availability-pulse > b { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.availability-pulse > b i { display: block; width: 96.8%; height: 100%; border-radius: inherit; background: #2dd47b; box-shadow: 0 0 12px #2dd47b; }
.live-clock { display: inline-flex; min-height: 44px; align-items: center; gap: .52rem; padding: .48rem .7rem; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(4,14,27,.42); }
.live-clock > i { width: 9px; height: 9px; border-radius: 50%; background: #2dd47b; box-shadow: 0 0 0 5px rgba(45,212,123,.12); }
.live-clock span { display: grid; gap: .08rem; }
.live-clock b { font-size: .6rem; }
.live-clock small { color: #8fa7c0; font-size: .55rem; font-variant-numeric: tabular-nums; }
.readonly-action { min-height: 43px; padding: .82rem .75rem; border: 1px solid rgba(126,181,255,.36); border-radius: 13px; background: rgba(30,100,190,.22); font-size: .62rem; font-weight: 850; white-space: nowrap; }

.dashboard-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .75rem; }
.dashboard-kpi { display: grid; min-width: 0; min-height: 112px; grid-template-columns: auto 1fr auto; align-items: start; gap: .6rem; padding: .85rem; border: 1px solid var(--line); border-top: 3px solid #7f92aa; border-radius: 15px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 8px 24px rgba(20,42,74,.055); transition: .18s ease; }
.dashboard-kpi:hover { transform: translateY(-2px); border-color: #a8c9ec; box-shadow: var(--shadow); }
.dashboard-kpi > span { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #dbe8f5; border-radius: 9px; color: #1473e6; background: #f4f9ff; }
.dashboard-kpi > div { display: grid; min-width: 0; gap: .18rem; }
.dashboard-kpi small { overflow: hidden; color: #667a91; font-size: .55rem; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.dashboard-kpi strong { font-size: 1.35rem; line-height: 1.15; }
.dashboard-kpi em { color: #8292a5; font-size: .5rem; font-style: normal; line-height: 1.3; }
.dashboard-kpi > b { align-self: end; color: #1473e6; font-size: .8rem; }
.dashboard-kpi.open { border-top-color: #1473e6; }.dashboard-kpi.progress { border-top-color: #f59e0b; }.dashboard-kpi.approval { border-top-color: #0ea5e9; }.dashboard-kpi.stop { border-top-color: #dc4050; }.dashboard-kpi.closed { border-top-color: #20ad69; }.dashboard-kpi.assets { border-top-color: #64748b; }

.arms-panel, .filter-card { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.arms-panel { padding: 1rem; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.panel-heading > div:first-child { min-width: 0; }
.panel-heading > div:first-child > span { color: #1268d7; font-size: .6rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.panel-heading h2 { margin: .2rem 0 .2rem; color: #17263e; font-size: 1.02rem; }
.panel-heading p { margin: 0; color: #718198; font-size: .65rem; line-height: 1.45; }
.status-legend, .chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.status-legend span, .chart-legend span { display: inline-flex; align-items: center; gap: .3rem; color: #687b90; font-size: .55rem; }
.status-legend i { width: 8px; height: 8px; border-radius: 50%; }.status-legend i.running { background: var(--green); }.status-legend i.repair { background: var(--red); }.status-legend i.waiting { background: var(--orange); }
.machine-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.machine-mini { display: grid; gap: .55rem; padding: .75rem; border: 1px solid #e0e9f2; border-radius: 13px; background: #fbfdff; }
.machine-mini > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.machine-mini h3 { margin: 0; overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.machine-mini p { margin: .15rem 0 0; color: #8494a7; font-size: .51rem; }
.machine-mini > div:last-child { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.machine-mini strong { font-size: 1.05rem; }
.machine-mini small { color: #7a8ba0; font-size: .5rem; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-header > div > span { color: #1268d7; font-size: .61rem; font-weight: 900; letter-spacing: .1em; }
.page-header h1 { margin: .28rem 0 .25rem; font-size: clamp(1.65rem,2.6vw,2.35rem); letter-spacing: -.045em; }
.page-header p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.readonly-page-badge { padding: .48rem .65rem; border: 1px solid #d5e5f4; border-radius: 999px; background: #f2f8fe; color: #2870b5; font-size: .52rem; font-weight: 900; white-space: nowrap; }
.filter-card { padding: .9rem; }
.compact-filters { display: grid; grid-template-columns: minmax(240px,1.4fr) repeat(2,minmax(160px,.6fr)); gap: .7rem; }
.filter-card label { display: grid; min-width: 0; gap: .32rem; color: #66758a; font-size: .56rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.filter-card input, .filter-card select { width: 100%; height: 42px; padding: 0 .7rem; border: 1px solid #d7e3ee; border-radius: 10px; outline: 0; background: #fbfdff; color: #29435e; font-size: .66rem; text-transform: none; }
.filter-card input:focus, .filter-card select:focus { border-color: #5aa9f1; box-shadow: 0 0 0 4px rgba(22,135,255,.08); }
.machine-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.no-results { grid-column: 1 / -1; margin: 0; padding: 1rem; border: 1px dashed #ccdbea; border-radius: 12px; background: #f8fbfe; color: #6f8298; font-size: .65rem; text-align: center; }
.machine-card { display: grid; min-width: 0; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(20,42,74,.055); }
.machine-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.machine-card h2 { margin: 0; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.machine-card-head small { display: block; margin-top: .2rem; color: #7b8da1; font-size: .52rem; }
.machine-card-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: .45rem; }
.machine-card-metrics div { padding: .55rem; border-radius: 9px; background: #f6f9fc; }
.machine-card-metrics span { display: block; color: #8393a7; font-size: .49rem; }
.machine-card-metrics strong { display: block; margin-top: .14rem; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.machine-card button { justify-self: start; padding: .45rem 0; border: 0; background: transparent; color: #1268d7; font-size: .58rem; font-weight: 850; }
.status-pill, .priority-pill { display: inline-flex; align-items: center; justify-content: center; padding: .28rem .42rem; border-radius: 999px; font-size: .49rem; font-weight: 900; white-space: nowrap; }
.status-running { color: #16774c; background: #dff7ea; }.status-repair { color: #a42d39; background: #ffe4e7; }.status-waiting { color: #98620a; background: #fff1d6; }.status-open { color: #185c9d; background: #e3f0ff; }.status-progress { color: #895709; background: #fff1d6; }.status-approval { color: #1b6c93; background: #def5ff; }.status-closed { color: #16774c; background: #dff7ea; }
.priority-high { color: #a42d39; background: #ffe4e7; }.priority-medium { color: #98620a; background: #fff1d6; }.priority-low { color: #246792; background: #e6f4fd; }

.ticket-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.data-table { width: 100%; min-width: 840px; border-collapse: collapse; }
.data-table th { padding: .72rem .78rem; border-bottom: 1px solid var(--line); background: #f7faff; color: #66788d; font-size: .52rem; font-weight: 900; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
.data-table td { padding: .74rem .78rem; border-bottom: 1px solid #edf2f7; color: #334a65; font-size: .61rem; }
.data-table tbody tr { cursor: pointer; transition: background .15s; }
.data-table tbody tr:hover { background: #f4f9ff; }.data-table tbody tr:last-child td { border-bottom: 0; }

.report-filter-card { display: grid; gap: .8rem; }
.period-switch { display: flex; width: fit-content; padding: .2rem; border: 1px solid #d9e4ef; border-radius: 11px; background: #f6f9fc; }
.period-switch button { min-width: 72px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #697d93; font-size: .61rem; font-weight: 900; }
.period-switch button.is-active { color: #0d62bb; background: #fff; box-shadow: 0 4px 14px rgba(20,42,74,.09); }
.report-filter-grid { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: .65rem; }
.filter-summary { display: flex; align-items: center; gap: .75rem; padding-top: .7rem; border-top: 1px solid #e7edf4; color: #6d7f93; font-size: .58rem; }
.filter-summary > span::before { display: inline-block; width: 7px; height: 7px; margin-right: .38rem; border-radius: 50%; background: #20ad69; content: ""; }
.filter-summary strong { color: #264665; }
.filter-summary button { margin-left: auto; padding: .4rem .55rem; border: 1px solid #d5e2ef; border-radius: 8px; background: #fff; color: #336b9e; font-size: .55rem; font-weight: 800; }
.report-kpis { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: .7rem; }
.report-kpis article { display: grid; min-height: 118px; align-content: start; padding: .85rem; border: 1px solid var(--line); border-top: 3px solid #7f92aa; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(20,42,74,.05); }
.report-kpis article.danger { border-top-color: var(--red); }.report-kpis article.success { border-top-color: var(--green); }
.report-kpis span { color: #66788d; font-size: .55rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.report-kpis strong { margin: .32rem 0; font-size: 1.42rem; }
.report-kpis small { margin-top: auto; color: #8494a6; font-size: .52rem; }
.availability-average { display: grid; min-width: 90px; justify-items: end; gap: .1rem; padding: .45rem .6rem; border: 1px solid #dbe7f1; border-radius: 10px; background: #f8fbfe; }
.availability-average small { color: #75879b; font-size: .5rem; }.availability-average strong { color: #1473e6; font-size: .85rem; }
.availability-axis { display: grid; grid-template-columns: 120px repeat(4,1fr) 48px; margin: 0 0 .3rem; color: #8b9aad; font-size: .48rem; }
.availability-axis span:first-child { grid-column: 2; }.availability-axis span { text-align: right; }
.availability-list { display: grid; gap: .48rem; }
.availability-row { display: grid; grid-template-columns: 120px minmax(220px,1fr) 48px; align-items: center; gap: .55rem; cursor: pointer; }
.availability-row > span { overflow: hidden; color: #3b516c; font-size: .58rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.availability-track { position: relative; height: 20px; overflow: hidden; border-radius: 6px; background: repeating-linear-gradient(to right,#f1f5f9 0,#f1f5f9 calc(33.333% - 1px),#dce6ef 33.333%); }
.availability-track i { display: block; width: var(--availability-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1473e6,#23a5f3); box-shadow: 0 4px 12px rgba(20,115,230,.18); }
.availability-row.warning .availability-track i { background: linear-gradient(90deg,#ec8c19,#f6b644); }.availability-row.critical .availability-track i { background: linear-gradient(90deg,#c93546,#ef5b69); }
.availability-row > strong { color: #253d59; font-size: .61rem; text-align: right; }
.report-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr); gap: .8rem; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }.chart-legend i.ticket { background: #1473e6; }.chart-legend i.downtime { height: 3px; border-radius: 999px; background: #ef8b3b; }
.trend-navigator { display: grid; grid-template-columns: auto minmax(160px,1fr); align-items: center; gap: .8rem; margin-bottom: .55rem; padding: .55rem .65rem; border: 1px solid #dce7f2; border-radius: 10px; background: #f7faff; }
.trend-navigator > span { display: grid; gap: .1rem; }.trend-navigator small { color: #7a8c9f; font-size: .47rem; text-transform: uppercase; }.trend-navigator strong { color: #1d5fa5; font-size: .57rem; }.trend-navigator input { width: 100%; accent-color: #1473e6; }
.trend-scroll { max-width: 100%; overflow-x: auto; padding-bottom: .35rem; scrollbar-color: #78ade8 #e8eef6; }
.report-trend-chart { display: flex; min-width: 700px; height: 265px; align-items: flex-end; gap: 7px; padding: 1rem .7rem 1.6rem; border-radius: 12px; background: repeating-linear-gradient(to bottom,#fff 0,#fff calc(25% - 1px),#e7eef5 25%); }
.trend-column { position: relative; display: flex; min-width: 28px; flex: 1; height: 100%; align-items: flex-end; justify-content: center; }
.trend-column button { width: 52%; min-width: 14px; height: var(--ticket-height); border: 0; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,#2a91ed,#1266ba); box-shadow: 0 8px 16px rgba(20,115,230,.14); }
.trend-column i { position: absolute; bottom: var(--downtime-height); left: 50%; width: 8px; height: 8px; transform: translate(-50%,50%); border: 2px solid #fff; border-radius: 50%; background: #ef8b3b; box-shadow: 0 0 0 2px rgba(239,139,59,.24); }
.trend-column small { position: absolute; bottom: -1.05rem; left: 50%; transform: translateX(-50%); color: #77899d; font-size: .45rem; white-space: nowrap; }
.trend-column b { position: absolute; bottom: calc(var(--ticket-height) + .24rem); color: #25415f; font-size: .47rem; }
.pareto-list { display: grid; gap: .65rem; }
.pareto-row { display: grid; grid-template-columns: minmax(90px,.7fr) minmax(120px,1fr) 28px; align-items: center; gap: .5rem; }
.pareto-row > span { overflow: hidden; color: #4c6179; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.pareto-track { height: 12px; overflow: hidden; border-radius: 999px; background: #edf2f7; }.pareto-track i { display: block; width: var(--pareto-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1677dd,#29a4ef); }
.pareto-row > b { color: #344c67; font-size: .58rem; text-align: right; }
.reliability-table-panel .ticket-table-wrap { border-radius: 12px; box-shadow: none; }

.detail-drawer { position: fixed; z-index: 200; inset: 0; }.drawer-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(4,13,24,.56); backdrop-filter: blur(4px); }.detail-drawer > aside { position: absolute; top: 0; right: 0; width: min(470px,92vw); height: 100%; padding: 1.4rem; overflow-y: auto; background: #fff; box-shadow: -24px 0 70px rgba(4,13,24,.25); animation: drawer-in .2s ease; }.drawer-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #dbe5ef; border-radius: 10px; background: #fff; color: #50647b; font-size: 1.1rem; }.drawer-eyebrow { color: #1473e6; font-size: .57rem; font-weight: 950; letter-spacing: .13em; }.detail-drawer h2 { margin: .45rem 2.5rem 1.2rem 0; font-size: 1.45rem; }.drawer-details { display: grid; border: 1px solid #dfe8f1; border-radius: 13px; overflow: hidden; }.drawer-details div { display: grid; grid-template-columns: 1fr 1.35fr; gap: .7rem; padding: .72rem; border-bottom: 1px solid #edf2f6; }.drawer-details div:last-child { border-bottom: 0; }.drawer-details span { color: #74869a; font-size: .59rem; }.drawer-details strong { font-size: .63rem; }.timeline { display: grid; margin-top: 1rem; padding-left: .85rem; border-left: 2px solid #dbe8f4; }.timeline article { position: relative; display: grid; gap: .15rem; padding: .2rem 0 .85rem .8rem; }.timeline article::before { position: absolute; top: .35rem; left: -1.18rem; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #1473e6; box-shadow: 0 0 0 2px #a8cef4; content: ""; }.timeline strong { font-size: .62rem; }.timeline span { color: #7b8da1; font-size: .55rem; }.readonly-notice { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1rem; padding: .75rem; border: 1px solid #cfe3f5; border-radius: 11px; background: #eff8ff; color: #326992; font-size: .58rem; line-height: 1.5; }.readonly-notice i { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; background: #d8f5e7; color: #158052; font-style: normal; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }

@media (max-width: 1180px) {
    .readonly-badge, .demo-user span { display: none; }
    .dashboard-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .machine-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .machine-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .report-filter-grid { grid-template-columns: repeat(2,minmax(150px,1fr)); }
}

@media (max-width: 900px) {
    .arms-sidebar { width: 250px; min-width: 250px; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(4,13,24,.3); }
    body.menu-open .arms-sidebar { transform: none; }
    .sidebar-close { position: absolute; top: .4rem; right: .4rem; z-index: 3; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; }
    .sidebar-overlay { position: fixed; z-index: 70; inset: 0; display: none; border: 0; background: rgba(4,13,24,.48); }
    body.menu-open .sidebar-overlay { display: block; }
    .arms-main { margin-left: 0; }
    .mobile-menu { display: grid; width: 38px; height: 38px; place-content: center; gap: 4px; border: 1px solid #d8e3ee; border-radius: 10px; background: #fff; }
    .mobile-menu span { width: 17px; height: 2px; border-radius: 99px; background: #37516d; }
    .header-search { display: none; }
    .header-context { min-width: 0; flex: 1; }
    .header-context strong { max-width: 300px; }
    .oc-header { grid-template-columns: 1fr; }
    .oc-status { justify-content: flex-start; }
    .report-grid { grid-template-columns: 1fr; }
    .report-kpis { grid-template-columns: repeat(2,minmax(140px,1fr)); }
}

@media (max-width: 650px) {
    .arms-topbar { min-height: 68px; padding: .65rem .75rem; }
    .header-context img { display: none; }.header-context span { font-size: .46rem; }.header-context strong { max-width: 170px; font-size: .56rem; }
    .notification-bell { display: none; }.demo-language button { width: 29px; }
    .arms-content { padding: .75rem; }
    .oc-header { min-height: auto; padding: 1rem; border-radius: 18px; }
    .oc-logo { width: 50px; height: 50px; flex-basis: 50px; border-radius: 15px; }.oc-logo img { width: 35px; height: 35px; }
    .oc-brand h1 { font-size: 1.2rem; }.oc-brand p { font-size: .56rem; }
    .oc-status { display: grid; grid-template-columns: 1fr auto; }.availability-pulse { width: auto; }.readonly-action { display: none; }
    .dashboard-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-kpi { min-height: 104px; grid-template-columns: 1fr; }.dashboard-kpi > span, .dashboard-kpi > b { display: none; }
    .machine-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }.machine-strip .machine-mini:nth-child(n+7) { display: none; }
    .page-header { align-items: flex-start; }.readonly-page-badge { display: none; }
    .compact-filters, .report-filter-grid { grid-template-columns: 1fr; }
    .machine-grid { grid-template-columns: 1fr; }
    .period-switch { width: 100%; }.period-switch button { min-width: 0; flex: 1; }
    .filter-summary { align-items: flex-start; flex-wrap: wrap; }.filter-summary button { margin-left: 0; }
    .report-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }.report-kpis article { min-height: 105px; }
    .panel-heading { flex-direction: column; }.status-legend, .chart-legend { justify-content: flex-start; }
    .availability-axis { grid-template-columns: 90px repeat(4,1fr) 44px; }.availability-row { grid-template-columns: 90px minmax(160px,1fr) 44px; }.availability-list { overflow-x: auto; }.availability-row { min-width: 430px; }
    .trend-navigator { grid-template-columns: 1fr; }
}

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