/* Ronin: crimson cut-metal frames and original cyberpunk anime artwork. */
:root[data-skin="ronin"] {
    --metal-accent: #ff526f; --metal-muted: #a3a9ba; --metal-shadow: #42222d;
    --metal-edge: #9f394c; --metal-highlight: #ffe6eb; --metal-glow: #ff284e40;
    --metal-tint: #ee385112; --metal-radius: 2px; --metal-room: url('/assets/skins/ronin/city.webp');
    --shell-frame: url('/assets/skins/ronin/frame.svg');
    --shell-surface: linear-gradient(125deg, #191921a8, #06090eb8 55%, #1010189c);
    --panel: #0b0d14; --panel-raised: #1c1823; --panel-soft: #14111a;
}
:root[data-skin="ronin"] .terminal-panel { background: linear-gradient(#05081220, #05081220), var(--metal-room) center / cover no-repeat, #06080d; border: 0; padding: 12px; }
:root[data-skin="ronin"] .brand-lockup { grid-template-columns: 140px minmax(0, 1fr); border-image-width: 3px; }
:root[data-skin="ronin"] .skin-wordmark { font: italic 48px/1 Arial, sans-serif; font-weight: 700; letter-spacing: -5px; color: #e7e9ed; background: none; text-shadow: none; }
:root[data-skin="ronin"] .brand-lockup > strong { font-size: 9px; letter-spacing: .02em; }
:root[data-skin="ronin"] .brand-subline { color: #adb5c5; font-size: 8px; }
:root[data-skin="ronin"] .resource-strip { border-image-width: 3px; }
:root[data-skin="ronin"] .resource-strip .skin-icon { color: #dce6ed; width: 28px; height: 28px; }
:root[data-skin="ronin"] .resource-strip > div + div { border-left-color: #4a39434d; }
:root[data-skin="ronin"] .alarm-readout:not(.triggered) { border-image-width: 3px; }
:root[data-skin="ronin"] .header-utilities { padding: 5px; border: 1px solid #3b2934; border-bottom-color: #963348; background: #06090eb8; }
:root[data-skin="ronin"] .view-button { border-image-width: 3px; background: linear-gradient(125deg, #1c1c24b0, #080b10ba 65%); color: #d4dce5; }
:root[data-skin="ronin"] .view-rail { gap: 4px; }
:root[data-skin="ronin"] .view-rail .view-button { min-height: 62px; border-image-width: 2px; }
:root[data-skin="ronin"] .view-rail .skin-icon { width: 28px; height: 28px; flex-basis: 28px; }
:root[data-skin="ronin"] .view-rail .view-button.active, :root[data-skin="ronin"] .header-utilities .view-button.active { color: #ff6682; background: linear-gradient(120deg, #c4193b32, #080a10 70%); box-shadow: inset 2px 0 #ff355a, inset 0 -1px #ee294a, 0 0 10px #ff234d45; }
:root[data-skin="ronin"] .application-body .primary-column { border-width: 6px; background: linear-gradient(100deg, #05090eb8, #05090e92 65%, #05090e80); box-shadow: 0 0 0 1px #552532, inset 2px 0 #ed345480; }
:root[data-skin="ronin"] .primary-column::after { background: none; box-shadow: inset 0 1px #dc2b4c90; }
:root[data-skin="ronin"] .skin-console-heading { background: linear-gradient(100deg, #301822b8, #070b10ad 65%); color: #ff6580; border-bottom-color: #632637; }
:root[data-skin="ronin"] .skin-console-heading small::after { content: 'RONIN  //  STAY CONNECTED'; font-size: 8px; color: #9e9caf; }
:root[data-skin="ronin"] .terminal-output { color: #c9e5f3; background: none; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
:root[data-skin="ronin"] .command-line { color: #ff6985; border-top-color: #882d42; background: #070b11c9; box-shadow: inset 2px 0 #ff365c; }
:root[data-skin="ronin"] .operations-sidebar .topology-section { border-image-width: 3px; padding: 10px 8px; background: #080b109e; }
:root[data-skin="ronin"] .topology-layer { border-color: #53303e; border-radius: 1px; background: linear-gradient(100deg, #281923b3, #090d149c 50%); box-shadow: inset 0 1px #b750641a; }
:root[data-skin="ronin"] .topology-layer-number { color: #ff5474; border-right-color: #5b2d3d; }
:root[data-skin="ronin"] .topology-layer.current { background: #3e321b; box-shadow: inset 3px 0 var(--amber); }
:root[data-skin="ronin"] .sidebar-heading > strong { color: #ff6480; }
:root[data-skin="ronin"] .skin-motto { min-height: 100px; font-size: .6rem; padding: 17px 6px; border-top: 2px solid #d62b4a; border-bottom: 0; background: repeating-linear-gradient(135deg, #e8234910 0 5px, transparent 5px 12px); }
:root[data-skin="ronin"] .operations-sidebar .skin-network-art { display: block; flex: 1 0 200px; min-height: 200px; border: 0; background: none; box-shadow: none; }
:root[data-skin="ronin"] .skin-network-art::after { content: 'THE FUTURE CAN STILL BE REWRITTEN.'; left: 0; right: 0; bottom: 0; padding: 8px 10px; color: #e2d8e4; background: linear-gradient(transparent, #05070ee8); font-size: 8px; letter-spacing: .06em; }
:root[data-skin="ronin"] :is(.palette-control select, .terminal-zoom button) { background: #0a0c12; color: #ecdee5; border-color: #803448; }
@media (max-width: 1279px) {
    :root[data-skin="ronin"] .brand-lockup { grid-template-columns: 90px minmax(0, 1fr); }
    :root[data-skin="ronin"] .skin-wordmark { font-size: 34px; }
    :root[data-skin="ronin"] .brand-lockup > strong { font-size: 7px; }
    :root[data-skin="ronin"] .view-rail .view-button { min-height: 56px; }
    :root[data-skin="ronin"] .skin-motto { font-size: .45rem; }
}
@media (max-width: 980px), (max-height: 760px) {
    :root[data-skin="ronin"] .operations-sidebar .skin-network-art { display: none; }
}
@media (max-width: 640px) {
    :root[data-skin="ronin"] .terminal-panel { padding: 4px; }
    :root[data-skin="ronin"] .application-body .primary-column { border-width: 4px; }
    :root[data-skin="ronin"] .view-rail .view-button { min-height: 50px; }
}

/* Split by glyph so each slash keeps one solid color at every size. */
:root[data-skin="ronin"] .brand-lockup .skin-wordmark > .skin-wordmark-left { color: #e7e9ed; }
:root[data-skin="ronin"] .brand-lockup .skin-wordmark > .skin-wordmark-right { color: #eb2349; }