/* Ramster's existing metallic identity, with a readable view of the engine. */
.r-loop {margin:18px 0; padding:22px; border:1px solid var(--border,#334155); border-radius:18px; background:var(--panel, #111827); color:var(--text,#e5e7eb); overflow:hidden; text-align:left;}
.r-loop-head {display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap;}
.r-loop-kicker {font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan,#21b7ff);}
.r-loop h2 {margin:4px 0 6px; font-size:clamp(1.35rem,2.5vw,1.85rem); line-height:1.2;}
.r-loop p {font-size:.84rem; line-height:1.55; color:var(--muted,#94a3b8); margin:0; max-width:70ch;}
.r-loop-badge {border:1px solid var(--border,#334155); border-radius:20px; padding:5px 10px; color:var(--muted,#94a3b8); font-size:.7rem;}
.r-loop-map {display:grid; grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr); gap:14px; align-items:center; margin:20px 0;}
.r-loop-node {padding:15px 18px; border-radius:12px; border:1px solid var(--border,#334155); background:var(--panel2,#182131); min-width:0;}
.r-loop-node-head {display:flex; gap:12px; align-items:center; margin-bottom:7px;}
.r-loop-node svg {width:34px;height:30px; flex-shrink:0; color:var(--cyan,#21b7ff);}
.r-loop-name {font-weight:650; font-size:.9rem; overflow-wrap:anywhere;}
.r-loop-small {font-size:.72rem; color:var(--muted,#94a3b8); line-height:1.5;}
.r-loop-link {height:2px; background:var(--border,#334155);position:relative;}
.r-loop-link::after {content:'↔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 9px;background:var(--panel,#111827);color:var(--muted,#94a3b8);}
.r-loop[data-working="true"] .r-loop-link {background:var(--cyan,#21b7ff);}
.r-loop[data-working="true"] .r-loop-link::after {color:var(--cyan,#21b7ff);}
.r-loop-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 12px;}
.r-loop-step {font:inherit;text-align:left;padding:12px;border-radius:10px;background:transparent;color:inherit;border:1px solid var(--border,#334155);min-width:0;}
button.r-loop-step {cursor:pointer;}
.r-loop-step b {display:block;font-size:.78rem;margin:5px 0 3px;}
.r-loop-step em {font-size:.63rem; font-style:normal; color:var(--muted,#94a3b8);}
.r-loop-step span {font-size:.7rem;display:block;color:var(--muted,#94a3b8);line-height:1.4;}
.r-loop-step[data-current="true"] {border-color:var(--cyan,#21b7ff);background:rgba(33,183,255,.06);}
.r-loop-step[data-current="true"] em {color:var(--cyan,#21b7ff);}
.r-loop-explain {min-height:42px;padding:12px 0;border-top:1px solid var(--border,#334155);}
.r-loop-actions {display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center;}
.r-loop-actions button,.r-loop-actions a {font:inherit;font-size:.76rem;padding:9px 13px;border:1px solid var(--border,#334155);border-radius:9px;background:var(--panel2,#182131);color:var(--text,#e5e7eb);cursor:pointer;text-decoration:none;}
.r-loop-actions .r-loop-primary {background:var(--cyan,#21b7ff);color:#06131d;border-color:transparent;font-weight:650;}
.r-loop-details {font-size:.75rem;margin-top:12px;color:var(--muted,#94a3b8);}
.r-loop-details summary {cursor:pointer;}
.r-loop-details p {font-size:.76rem;margin-top:8px;}
@media(max-width:700px){.r-loop{padding:16px}.r-loop-map{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:6px}.r-loop-node{padding:10px}.r-loop-node svg{display:none}.r-loop-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.r-loop-step{padding:10px}}