/* Sakura: crimson cut-metal frames and original cyberpunk anime artwork. */
:root[data-skin="sakura"] {
    --metal-accent: #ffa0dc; --metal-muted: #bfa9c3; --metal-shadow: #51304d;
    --metal-edge: #ca81b3; --metal-highlight: #ffe4f8; --metal-glow: #ff84d95c;
    --metal-tint: #f286d81a; --metal-radius: 2px; --metal-room: url('/assets/skins/sakura/city.webp');
    --shell-frame: url('/assets/skins/sakura/frame.svg');
    --shell-surface: linear-gradient(125deg, #35243ca8, #160e20b8 55%, #2112279c);
    --panel: #160e1d; --panel-raised: #302039; --panel-soft: #21172a;
}
:root[data-skin="sakura"] .terminal-panel { background: linear-gradient(#05081220, #05081220), var(--metal-room) center / cover no-repeat, #06080d; border: 0; padding: 12px; }
:root[data-skin="sakura"] .brand-lockup { grid-template-columns: 140px minmax(0, 1fr); border-image-width: 3px; }
:root[data-skin="sakura"] .skin-wordmark { font: italic 48px/1 Arial, sans-serif; font-weight: 700; letter-spacing: -5px; color: #ffe4f7; background: none; text-shadow: none; }
:root[data-skin="sakura"] .brand-lockup > strong { font-size: 9px; letter-spacing: .02em; }
:root[data-skin="sakura"] .brand-subline { color: #adb5c5; font-size: 8px; }
:root[data-skin="sakura"] .resource-strip { border-image-width: 3px; }
:root[data-skin="sakura"] .resource-strip .skin-icon { color: #dce6ed; width: 28px; height: 28px; }
:root[data-skin="sakura"] .resource-strip > div + div { border-left-color: #4a39434d; }
:root[data-skin="sakura"] .alarm-readout:not(.triggered) { border-image-width: 3px; }
:root[data-skin="sakura"] .header-utilities { padding: 5px; border: 1px solid #775169; border-bottom-color: #d77fb9; background: #160e20b8; }
:root[data-skin="sakura"] .view-button { border-image-width: 3px; background: linear-gradient(125deg, #40263cb0, #170e20ba 65%); color: #f2dff0; }
:root[data-skin="sakura"] .view-rail { gap: 4px; }
:root[data-skin="sakura"] .view-rail .view-button { min-height: 62px; border-image-width: 2px; }
:root[data-skin="sakura"] .view-rail .skin-icon { width: 28px; height: 28px; flex-basis: 28px; }
:root[data-skin="sakura"] .view-rail .view-button.active, :root[data-skin="sakura"] .header-utilities .view-button.active { color: #ffd2f2; background: linear-gradient(120deg, #e86abb40, #1c1125 70%); box-shadow: inset 2px 0 #ffa2e0, inset 0 -1px #ffa2e0, 0 0 10px #ff8fdb80; }
:root[data-skin="sakura"] .application-body .primary-column { border-width: 6px; background: linear-gradient(100deg, #130c1db0, #130c1d8c 65%, #130c1d66); box-shadow: 0 0 0 1px #b9679a, inset 2px 0 #ffb7e3a0; }
:root[data-skin="sakura"] .primary-column::after { background: none; box-shadow: inset 0 1px #ffc8eacc; }
:root[data-skin="sakura"] .skin-console-heading { background: linear-gradient(100deg, #553046b8, #170d21ad 65%); color: #ffc1eb; border-bottom-color: #bd72a3; }
:root[data-skin="sakura"] .skin-console-heading small::after { content: 'SAKURA  //  STAY CURIOUS ♡'; font-size: 8px; color: #d1a9c7; }
:root[data-skin="sakura"] .terminal-output { color: #c9e5f3; background: none; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
:root[data-skin="sakura"] .command-line { color: #ffb5e2; border-top-color: #bd72a3; background: #1c1026c9; box-shadow: inset 2px 0 #ffa2da; }
:root[data-skin="sakura"] .operations-sidebar .topology-section { border-image-width: 3px; padding: 10px 8px; background: #160c208f; }
:root[data-skin="sakura"] .topology-layer { border-color: #b16a97; border-radius: 1px; background: linear-gradient(100deg, #4e284ab3, #1c0d289c 50%); box-shadow: inset 0 1px #ee9dd82d; }
:root[data-skin="sakura"] .topology-layer-number { color: #ffaee0; border-right-color: #8e577b; }
:root[data-skin="sakura"] .topology-layer.current { background: #3e321b; box-shadow: inset 3px 0 var(--amber); }
:root[data-skin="sakura"] .sidebar-heading > strong { color: #ffaee0; }
:root[data-skin="sakura"] .skin-motto { min-height: 100px; font-size: .6rem; padding: 17px 6px; border-top: 2px solid #ef99cb; border-bottom: 0; background: repeating-linear-gradient(135deg, #f697d018 0 5px, transparent 5px 12px); }
:root[data-skin="sakura"] .operations-sidebar .skin-network-art { display: block; flex: 1 0 200px; min-height: 200px; border: 0; background: none; box-shadow: none; }
:root[data-skin="sakura"] .skin-network-art::after { content: 'GOOD HACKERS BUILD BETTER TOMORROWS. ♡'; left: 0; right: 0; bottom: 0; padding: 8px 10px; color: #e2d8e4; background: linear-gradient(transparent, #210e2bd9); font-size: 8px; letter-spacing: .06em; }
:root[data-skin="sakura"] :is(.palette-control select, .terminal-zoom button) { background: #21132c; color: #ffe3f6; border-color: #b86b99; }
@media (max-width: 1279px) {
    :root[data-skin="sakura"] .brand-lockup { grid-template-columns: 90px minmax(0, 1fr); }
    :root[data-skin="sakura"] .skin-wordmark { font-size: 34px; }
    :root[data-skin="sakura"] .brand-lockup > strong { font-size: 7px; }
    :root[data-skin="sakura"] .view-rail .view-button { min-height: 56px; }
    :root[data-skin="sakura"] .skin-motto { font-size: .45rem; }
}
@media (max-width: 980px), (max-height: 760px) {
    :root[data-skin="sakura"] .operations-sidebar .skin-network-art { display: none; }
}
@media (max-width: 640px) {
    :root[data-skin="sakura"] .terminal-panel { padding: 4px; }
    :root[data-skin="sakura"] .application-body .primary-column { border-width: 4px; }
    :root[data-skin="sakura"] .view-rail .view-button { min-height: 50px; }
}

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

:root[data-skin="sakura"] .view-rail .view-button.active, :root[data-skin="sakura"] .header-utilities .view-button.active { box-shadow: inset 0 0 0 1px #ffc6ee, inset 0 0 14px #fc85cb33, 0 0 14px #ff8bdd70; }
:root[data-skin="sakura"] .skin-motto { font: italic 16px/1.5 'Segoe Print', 'Bradley Hand', cursive; text-align: center; color: #ffd0ed; background: #32142b88; }
:root[data-skin="sakura"] .skin-wordmark { font-weight: 400; letter-spacing: -4px; }
:root[data-skin="sakura"] .skin-console-heading { box-shadow: inset 0 1px #ffb9e744; }
@media (max-width: 1279px) { :root[data-skin="sakura"] .skin-motto { font-size: 12px; } }