/* CSS khusus robot-lab.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
/* Robot Lab — semua class diberi prefix rl- supaya tidak bentrok dengan Bootstrap / style.css */
.rl {
    /* panel & teks mengikuti tema situs; warna panggung blueprint tetap gelap (lihat --rl-bp-*) */
    --rl-bg:var(--ugs-page); --rl-panel:var(--ugs-card); --rl-panel-2:var(--ugs-surface); --rl-line:var(--ugs-hairline);
    --rl-fg:var(--ugs-fg); --rl-muted:var(--ugs-fg-2); --rl-accent:var(--ugs-accent); --rl-arc:#ffb347;
    --rl-good:#16a34a; --rl-warn:#d97706; --rl-bad:#dc2626;
    --rl-blueprint:#0a1730; --rl-bp-grid:#15284a; --rl-bp-ink:#9cbcff;
    --rl-display:var(--font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
    --rl-mono-font:var(--ugs-font-mono);
    --rl-nav:var(--ugs-nav-h);
    --rl-stage-fg:#e9eef6; --rl-stage-bg:#070b14;
    background:var(--rl-bg); color:var(--rl-fg); font-size:15px; line-height:1.55;
}
.rl *, .rl *::before, .rl *::after { box-sizing:border-box; }
.rl-mono { font-family:var(--rl-mono-font); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.rl-kicker { color:var(--rl-accent); }
.rl-intro { padding:calc(var(--rl-nav) + 36px) clamp(16px,3vw,40px) 22px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 40px; border-bottom:1px solid var(--rl-line); }
.rl-intro h1 { font-family:var(--rl-display); font-weight:800; text-transform:uppercase; font-size:var(--ugs-fs-h2); line-height:.95; margin:8px 0 0; color:var(--rl-fg); text-wrap:balance; }
.rl-intro h1 em { font-family:inherit; font-style:normal; font-weight:300; color:var(--ugs-fg-3); }
.rl-intro p { color:var(--rl-muted); max-width:52ch; margin:0; }

.rl-app { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,430px); min-height:calc(100vh - var(--rl-nav)); }
.rl-stage { position:sticky; top:var(--rl-nav); height:calc(100vh - var(--rl-nav)); min-height:440px; overflow:hidden; user-select:none; -webkit-user-select:none; background:var(--rl-blueprint); border-right:1px solid var(--rl-line); }
.rl-stage::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(3,6,14,.55)); }
#rlScene { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#rlScene.rl-picking { cursor:crosshair; }
.rl-frame { position:absolute; inset:12px; border:1px solid rgba(156,188,255,.5); pointer-events:none; z-index:2; }
.rl-hud { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; pointer-events:none; font-family:var(--rl-mono-font); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rl-bp-ink); }
.rl-tl { left:24px; top:22px; flex-direction:column; align-items:flex-start; gap:2px; max-width:calc(100% - 150px); line-height:1.4; }
.rl-tl span:last-child { opacity:.75; }
.rl-tr { right:24px; top:22px; background:var(--rl-blueprint); border:1px solid var(--rl-bp-grid); padding:4px 8px; color:var(--rl-stage-fg); }
.rl-tr i { width:8px; height:8px; border-radius:50%; background:var(--rl-muted); }
.rl-tr.on i { background:var(--rl-arc); box-shadow:0 0 10px var(--rl-arc); }
.rl-bl { left:24px; bottom:22px; display:grid; grid-template-columns:auto auto; gap:1px 12px; background:var(--rl-blueprint); border:1px solid var(--rl-bp-grid); padding:8px 10px; text-transform:none; }
.rl-bl b { color:var(--rl-stage-fg); font-weight:500; text-align:right; min-width:7ch; font-variant-numeric:tabular-nums; }
.rl-fx { position:absolute; z-index:2; right:24px; top:56px; font-family:var(--rl-mono-font); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rl-bp-ink); background:var(--rl-blueprint); border:1px solid var(--rl-bp-grid); padding:4px 8px; border-radius:4px; cursor:pointer; }
.rl-fx:hover { color:var(--rl-stage-fg); border-color:var(--rl-bp-ink); }
.rl-fx[aria-pressed="false"] { opacity:.7; }
.rl-toast { position:absolute; z-index:2; left:50%; bottom:22px; transform:translateX(-50%); background:#101a2b; border:1px solid #1b2536; color:var(--rl-stage-fg); padding:8px 14px; border-radius:8px; font-size:.85rem; pointer-events:none; opacity:0; transition:opacity .25s; max-width:calc(100% - 48px); text-align:center; }
.rl-toast.show { opacity:1; }
.rl-loading { position:absolute; inset:0; z-index:2; display:grid; place-items:center; color:var(--rl-bp-ink); pointer-events:none; text-align:center; padding:24px; }

.rl-console { background:var(--rl-panel); display:flex; flex-direction:column; min-width:0; }
.rl-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--rl-line); position:sticky; top:var(--rl-nav); background:var(--rl-panel); z-index:5; }
.rl-tab { appearance:none; background:none; border:0; border-bottom:2px solid transparent; color:var(--rl-muted); padding:14px 6px 12px; cursor:pointer; font:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; }
.rl-tab b { font-family:var(--ugs-font-body); font-weight:600; font-size:.95rem; color:inherit; }
.rl-tab small { font-size:.72rem; }
.rl-tab:hover { color:var(--rl-fg); }
.rl-tab[aria-selected="true"] { color:var(--rl-fg); border-bottom-color:var(--rl-accent); }
.rl-pane { padding:22px clamp(16px,3vw,40px) 32px; display:flex; flex-direction:column; gap:18px; }
.rl-pane[hidden] { display:none; }
.rl-pane h2 { font-family:var(--ugs-font-body); font-weight:600; letter-spacing:-.01em; font-size:1.4rem; line-height:1.2; margin:0; color:var(--rl-fg); }
.rl-pane > p { color:var(--rl-muted); margin:0; }
.rl-group { border:1px solid var(--rl-line); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:12px; background:var(--rl-panel-2); }
.rl-group-head { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--rl-muted); }
.rl-row { display:flex; gap:8px; flex-wrap:wrap; }
.rl-btn { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 14px; border-radius:999px; font:inherit; font-weight:500; font-size:.85rem; border:1px solid var(--rl-line); background:transparent; color:var(--rl-fg); cursor:pointer; transition:background .2s, border-color .2s; }
.rl-btn:hover { border-color:var(--rl-muted); }
.rl-btn-primary { background:var(--rl-accent); border-color:var(--rl-accent); color:#fff; }
.rl-btn-primary:hover { background:var(--ugs-accent-dark); border-color:var(--ugs-accent-dark); }
.rl-btn:disabled { opacity:.45; cursor:not-allowed; }
.rl-slider { display:grid; grid-template-columns:44px minmax(0,1fr) 72px; align-items:center; gap:10px; }
.rl-slider label, .rl-field label { font-family:var(--rl-mono-font); font-size:.72rem; color:var(--rl-muted); margin:0; }
.rl-slider output, #rlJog output { font-family:var(--rl-mono-font); font-size:.8rem; text-align:right; font-variant-numeric:tabular-nums; }
.rl input[type="range"] { width:100%; accent-color:var(--rl-accent); }
.rl-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.rl-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.rl-field input { width:100%; background:var(--rl-panel); border:1px solid var(--rl-line); color:var(--rl-fg); border-radius:8px; padding:8px 10px; font-family:var(--rl-mono-font); font-size:.9rem; font-variant-numeric:tabular-nums; }
.rl-field input:focus { border-color:var(--rl-accent); outline:none; }
.rl-field small { color:var(--rl-muted); font-size:.72rem; }
.rl-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; counter-reset:pt; }
.rl-points li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:8px; font-family:var(--rl-mono-font); font-size:.78rem; padding:6px 8px; border-radius:6px; background:var(--rl-panel); font-variant-numeric:tabular-nums; }
.rl-points li::before { counter-increment:pt; content:"P" counter(pt); color:var(--rl-accent); }
.rl-points li.off { color:var(--rl-bad); }
.rl-points li.rl-empty { display:block; background:none; padding-left:0; color:var(--rl-muted); font-family:inherit; font-size:.85rem; }
.rl-points li.rl-empty::before { content:none; }
.rl-points button { appearance:none; background:none; border:0; color:var(--rl-muted); cursor:pointer; font-size:1rem; line-height:1; padding:2px 6px; }
.rl-points button:hover { color:var(--rl-bad); }
.rl-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rl-line); border:1px solid var(--rl-line); border-radius:16px; overflow:hidden; }
.rl-stat { background:var(--rl-panel-2); padding:12px 14px; min-width:0; }
.rl-stat span { display:block; color:var(--rl-muted); font-size:.75rem; }
.rl-stat b { display:block; font-family:var(--rl-display); font-weight:800; font-size:1.45rem; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; color:var(--rl-fg); }
.rl-stat.rl-hl { grid-column:span 2; }
.rl-stat.rl-hl b { color:var(--rl-good); font-size:1.8rem; }
.rl-bars { display:flex; flex-direction:column; gap:8px; }
.rl-bar { display:grid; grid-template-columns:70px minmax(0,1fr) 70px; gap:10px; align-items:center; font-size:.8rem; }
.rl-bar i { height:10px; border-radius:5px; background:var(--rl-muted); display:block; transition:width .4s; }
.rl-bar.rl-robot i { background:var(--rl-accent); }
.rl-bar span:last-child { font-family:var(--rl-mono-font); text-align:right; font-variant-numeric:tabular-nums; }
.rl-note { color:var(--rl-muted); font-size:.78rem; margin:0; }
.rl-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:600; font-size:.8rem; border:1px solid currentColor; }
.rl-pill.rl-good { color:var(--rl-good); } .rl-pill.rl-warn { color:var(--rl-warn); } .rl-pill.rl-bad { color:var(--rl-bad); }
#rlSection { width:100%; height:auto; aspect-ratio:16/10; max-width:100%; background:var(--rl-stage-bg); border-radius:8px; border:1px solid var(--rl-line); display:block; }
.rl-summary { width:100%; min-height:150px; resize:vertical; background:var(--rl-panel); border:1px solid var(--rl-line); color:var(--rl-fg); border-radius:8px; padding:10px; font-family:var(--rl-mono-font); font-size:.78rem; line-height:1.5; }

.rl-contact { background:var(--ugs-surface); color:var(--rl-fg); border-top:1px solid var(--rl-line); padding:72px clamp(16px,3vw,40px); scroll-margin-top:var(--rl-nav); }
.rl-contact-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:48px; align-items:start; }
.rl-contact h2 { font-family:var(--rl-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem,3.4vw,2.6rem); margin:8px 0 12px; color:var(--rl-fg); }
.rl-contact p { color:var(--rl-muted); max-width:44ch; }
.rl-contact-form { background:var(--ugs-card); border:1px solid var(--rl-line); border-radius:22px; padding:clamp(16px,3vw,32px); }

@media (max-width:900px) {
    .rl-app { grid-template-columns:1fr; }
    .rl-stage { position:relative; top:0; height:56vh; min-height:340px; border-right:0; border-bottom:1px solid var(--rl-line); }
    .rl-bl { display:none; }
    .rl-contact-inner { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:420px) { .rl-fields { grid-template-columns:1fr; } .rl-tab small { display:none; } }
@media (prefers-reduced-motion:reduce) { .rl-toast, .rl-bar i { transition:none; } }