/* 04 · See it transform — a legacy screen becomes AI-native under a beam of light */
.rmg{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 50% 110%,#1d2270 0%,rgba(29,34,112,0) 60%),#0c0e2c}
.rmg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(140,150,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,150,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 60%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 60% 70% at 50% 60%,#000 30%,transparent 80%);pointer-events:none}
.rmg>.wrap{position:relative}
.rmg .rmg-accent{color:#8f96ff}
.rmg .section-heading{margin-bottom:48px}

.rmg-frame{border-radius:18px;background:linear-gradient(#20235a,#171a48);padding:0 10px 10px;box-shadow:0 0 0 1px rgba(160,168,255,.18),0 50px 120px -40px rgba(0,0,0,.8),0 0 120px -30px rgba(91,99,255,.45)}
.rmg-chrome{height:44px;display:flex;align-items:center;gap:7px;padding:0 8px;color:#9aa0d8}
.rmg-chrome i{width:10px;height:10px;border-radius:50%;background:#3b3f80}
.rmg-url{margin:0 auto;font:500 11px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.04em;background:rgba(255,255,255,.06);padding:7px 16px;border-radius:999px;color:#b9bef0}
.rmg-hint{font:500 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8f96ff}

.rmg-stage{--s:1;position:relative;height:calc(560px * var(--s));border-radius:10px;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#d4d0c8}
.rmg-fit{position:absolute;left:0;top:0;width:1100px;height:560px;transform:scale(var(--s));transform-origin:0 0}
.rmg-old,.rmg-new{position:absolute;inset:0}
.rmg-new{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.rmg-old{clip-path:inset(0 0 0 calc(var(--p) * 100%))}

/* ---------- legacy ---------- */
.rmg-old{background:#d4d0c8;font:11px/1.25 Tahoma,Verdana,'Segoe UI',sans-serif;color:#000;display:flex;flex-direction:column}
.lo-title{height:26px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;background:linear-gradient(90deg,#0a246a,#a6caf0);color:#fff}
.lo-title b{font-size:12px}.lo-title span{letter-spacing:6px}
.lo-menu{display:flex;gap:16px;padding:4px 10px;border-bottom:1px solid #808080}
.lo-menu span::first-letter{text-decoration:underline}
.lo-tools{display:flex;gap:4px;align-items:center;padding:5px 8px;border-bottom:1px solid #808080;box-shadow:inset 0 1px #fff}
.rmg-old button,.rmg-old select{font:11px Tahoma,Verdana,sans-serif;background:#d4d0c8;border:1px solid;border-color:#fff #404040 #404040 #fff;padding:2px 9px;color:#000;cursor:inherit}
.rmg-old input{font:11px Tahoma,Verdana,sans-serif;width:110px;border:1px solid;border-color:#404040 #fff #fff #404040;background:#fff;padding:2px 4px}
.lo-sep{width:1px;height:18px;background:#808080;box-shadow:1px 0 #fff;margin:0 6px}
.lo-tools label{margin-left:auto}
.lo-body{flex:1;display:flex;gap:6px;padding:6px;min-height:0}
.lo-tree{width:170px;background:#fff;border:1px solid;border-color:#404040 #fff #fff #404040;padding:6px;display:flex;flex-direction:column;gap:5px}
.lo-tree b{background:#0a246a;color:#fff;padding:2px 4px;margin:-6px -6px 4px}
.lo-tree .on{background:#316ac5;color:#fff}
.lo-main{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.lo-filter{display:flex;gap:5px;align-items:center}
.lo-filter input{width:80px}
.lo-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #404040}
.lo-table th{background:#d4d0c8;border:1px solid;border-color:#fff #808080 #808080 #fff;padding:4px 6px;text-align:left;font-weight:normal}
.lo-table td{padding:5px 6px;border-bottom:1px solid #e5e5e5;border-right:1px solid #e5e5e5;white-space:nowrap}
.lo-table tbody tr:nth-child(2n){background:#f3f3f3}
.lo-table tbody tr:first-child{background:#316ac5;color:#fff}
.lo-table td:last-child{text-align:right}
.lo-pager{text-align:center;color:#333;margin-top:auto;padding:4px}
.lo-status{display:flex;border-top:1px solid #808080}
.lo-status span{padding:3px 10px;border-right:1px solid #808080;box-shadow:1px 0 #fff}
.lo-status span:last-child{margin-left:auto;border:0;box-shadow:none}

/* ---------- AI-native ---------- */
.rmg-new{display:flex;background:linear-gradient(160deg,#f7f8ff,#eef0ff);font-family:Poppins,Arial,sans-serif;color:#141743}
.ln-side{width:68px;background:#fff;border-right:1px solid #e6e8f5;display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:22px}
.ln-logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#2a2d9f,#5b62ff);color:#fff;display:grid;place-items:center;font-weight:600}
.ln-side i{width:20px;height:20px;border-radius:7px;border:1.6px solid #c3c7e6}
.ln-side i.on{border-color:#2a2d9f;background:#e7e9ff}
.ln-main{flex:1;padding:24px 30px;display:flex;flex-direction:column;gap:16px;min-width:0}
.ln-top{display:flex;justify-content:space-between;align-items:center}
.ln-top small{display:block;font-size:12px;color:#7a7ea8}
.ln-top b{font-size:24px;font-weight:500;letter-spacing:-.03em}
.ln-av{width:38px;height:38px;border-radius:50%;background:#e2e5ff;color:#2a2d9f;display:grid;place-items:center;font-size:12px;font-weight:600}
.ln-ask{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #dde0f7;border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px -18px rgba(42,45,159,.5)}
.ln-ai{flex:none;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#2a2d9f,#6a70ff);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.02em}
.ln-ai.sm{width:24px;height:24px;font-size:10px;border-radius:8px}
.ln-q{flex:1;font-size:14px;color:#2b2f66}
.ln-ask kbd{font:500 11px/1 'JetBrains Mono',monospace;color:#7a7ea8;border:1px solid #dde0f7;border-radius:6px;padding:5px 7px}
.ln-answer{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;background:linear-gradient(135deg,#2a2d9f,#3d43c9);color:#fff;border-radius:14px;padding:14px 16px}
.ln-answer p{flex:1;margin:0;font-size:13px;line-height:1.6;min-height:42px;min-width:0}
.ln-acts{display:flex;gap:8px;width:100%;padding-left:36px}
.ln-acts span{font-size:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 12px}
.ln-acts span:first-child{background:#fff;color:#2a2d9f}
.ln-grid{flex:1;display:grid;grid-template-columns:1fr 1.35fr .8fr;gap:14px;min-height:0}
.ln-card{background:#fff;border:1px solid #e3e6f7;border-radius:14px;padding:14px 16px;position:relative;overflow:hidden}
.ln-card small{display:block;font-size:11px;color:#7a7ea8;margin-bottom:6px}
.ln-kpi b{font-size:28px;font-weight:500;letter-spacing:-.03em}
.ln-kpi em{display:block;font-style:normal;font-size:11px;color:#1c9b62}
.ln-kpi svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:56px}
.ln-area{fill:rgba(91,98,255,.12)}
.ln-line{fill:none;stroke:#4f56ff;stroke-width:2;vector-effect:non-scaling-stroke}
.ln-o{display:grid;grid-template-columns:10px 1fr auto;column-gap:10px;align-items:center;padding:6px 0;border-top:1px solid #f0f1fa}
.ln-o:first-of-type{border-top:0}
.ln-o .d{width:8px;height:8px;border-radius:50%;grid-row:span 2}
.ln-o .d.r{background:#ef5b6b;box-shadow:0 0 0 4px rgba(239,91,107,.15)}
.ln-o .d.a{background:#f2a93b;box-shadow:0 0 0 4px rgba(242,169,59,.15)}
.ln-o b{font-size:12px;font-weight:500}
.ln-o i{grid-column:2;font-style:normal;font-size:10px;color:#8a8db3}
.ln-o em{grid-row:1 / 3;grid-column:3;font-style:normal;font-size:12px;color:#2b2f66}
.ln-ring{display:flex;flex-direction:column;align-items:center}
.ln-ring small{align-self:flex-start}
.ln-ring svg{width:92px;height:92px;transform:rotate(-90deg)}
.ln-ring circle{fill:none;stroke:#e6e8fb;stroke-width:8}
.ln-ring circle.v{stroke:#4f56ff;stroke-linecap:round;stroke-dasharray:94 100}
.ln-ring b{position:absolute;top:50%;left:50%;transform:translate(-50%,-10%);font-size:18px;font-weight:500}

/* ---------- tags ---------- */
.rmg-tag{position:absolute;bottom:34px;font:600 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.14em;padding:7px 11px;border-radius:999px;pointer-events:none;transition:opacity .4s}
.rmg-tag-new{left:14px;background:#2a2d9f;color:#fff;box-shadow:0 6px 20px -6px rgba(42,45,159,.7);opacity:calc(var(--p) * 4 - .4)}
.rmg-tag-old{right:14px;background:#fff;color:#333;border:1px solid #808080;opacity:calc((1 - var(--p)) * 4 - .4)}

/* ---------- beam ---------- */
.rmg-beam{position:absolute;top:0;bottom:0;left:calc(var(--p) * 100%);width:0;outline:none;z-index:3}
.rmg-beam::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(transparent,#fff 12%,#fff 88%,transparent);box-shadow:0 0 12px 2px #8f96ff,0 0 40px 8px rgba(91,99,255,.55)}
.rmg-glow{position:absolute;top:0;bottom:0;left:-90px;width:90px;background:linear-gradient(90deg,rgba(111,118,255,0),rgba(111,118,255,.16));pointer-events:none;mix-blend-mode:screen}
.rmg-dots i{position:absolute;left:-2px;bottom:-6px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #8f96ff;opacity:0;animation:rmg-rise 3.2s linear infinite}
.rmg-dots i:nth-child(1){animation-delay:0s;--x:-14px}.rmg-dots i:nth-child(2){animation-delay:.4s;--x:-30px}.rmg-dots i:nth-child(3){animation-delay:.8s;--x:-8px}.rmg-dots i:nth-child(4){animation-delay:1.2s;--x:-22px}
.rmg-dots i:nth-child(5){animation-delay:1.6s;--x:-36px}.rmg-dots i:nth-child(6){animation-delay:2s;--x:-12px}.rmg-dots i:nth-child(7){animation-delay:2.4s;--x:-26px}.rmg-dots i:nth-child(8){animation-delay:2.8s;--x:-18px}
@keyframes rmg-rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(var(--x),calc(-560px * var(--s,1)));opacity:0}}
.rmg-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 Poppins,Arial,sans-serif;color:#fff;background:radial-gradient(circle at 35% 30%,#7a80ff,#2a2d9f 70%);box-shadow:0 0 0 6px rgba(143,150,255,.22),0 0 0 1px rgba(255,255,255,.5) inset,0 10px 30px rgba(20,22,80,.6);transition:transform .25s}
.rmg-stage:hover .rmg-knob,.rmg-beam:focus-visible .rmg-knob{transform:translate(-50%,-50%) scale(1.08)}
.rmg-knob::before,.rmg-knob::after{content:"";position:absolute;top:50%;width:0;height:0;border:5px solid transparent;margin-top:-5px}
.rmg-knob::before{left:-14px;border-right-color:#c6caff}
.rmg-knob::after{right:-14px;border-left-color:#c6caff}

/* ---------- metrics ---------- */
.rmg-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.rmg-metrics>div{border:1px solid rgba(160,168,255,.18);background:rgba(255,255,255,.03);border-radius:14px;padding:18px 20px}
.rmg-metrics span{display:block;font:500 10px/1.4 'JetBrains Mono',Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#9aa0d8;margin-bottom:10px}
.rmg-metrics b{font-size:clamp(28px,2.8vw,40px);font-weight:400;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.rmg-note{margin:16px 0 0;font-size:11px;color:#7d83bd}

@media(max-width:900px){.rmg-metrics{grid-template-columns:1fr 1fr}.rmg-hint{display:none}}
@media(prefers-reduced-motion:reduce){.rmg-dots{display:none}}

/* v2: the demo cursor holding the OS handle (hidden while a person drags) */
.rmg-cur{position:absolute;left:calc(var(--p) * 100%);top:50%;width:26px;height:26px;z-index:6;pointer-events:none;opacity:0;transform:translate(6px,10px);transition:opacity .3s}
.rmg-cur svg{width:26px;height:26px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.rmg-stage.demo .rmg-cur{opacity:1}