/* Street Kid — painted concrete, salvaged displays, phosphor and marker ink. */
:root[data-skin="street-kid"] {
    --green: #00ffc0; --green-bright: #c4f5ee; --green-muted: #73a9a4; --green-dark: #155844;
    --background: #050807; --panel: #07100e; --panel-raised: #111815; --panel-soft: #0a1612;
    --line: #215c4a; --line-strong: #21a883;
    --shell-accent: #00ffc0; --shell-text: #b8e4e5; --shell-muted: #79a6a1; --shell-edge: #568075;
    --shell-frame: url('/assets/skins/beta/frame.svg');
    --shell-wear: url('/assets/skins/street/wall.svg');
    --shell-surface: linear-gradient(115deg, #111613, #020806 70%);
}
:root[data-skin="street-kid"] .terminal-panel {
    background: var(--shell-wear) repeat, repeating-linear-gradient(112deg, #ffffff02 0 1px, transparent 1px 9px), #0a0c0b;
    padding: 12px; box-shadow: inset 0 0 0 2px #757364, inset 0 0 35px #000;
}
:root[data-skin="street-kid"] .app-topbar { border-bottom: 3px double #585b50; row-gap: 10px; padding-bottom: 10px; }
:root[data-skin="street-kid"] .brand-lockup { min-height: 95px; padding: 0; }
:root[data-skin="street-kid"] .skin-wordmark { width: 275px; max-width: 100%; height: 104px; font-size: 0; background: url('/assets/skins/street/logo.svg') left center / contain no-repeat; mask-image: none; }
:root[data-skin="street-kid"] .brand-lockup > strong { display: none; }
:root[data-skin="street-kid"] .brand-lockup::after { content: none; }
:root[data-skin="street-kid"] .resource-strip { border: 0; background: none; gap: 5px; padding: 0; }
:root[data-skin="street-kid"] .resource-strip > div {
    --resource-ink: #00ffc0; border: 1px solid color-mix(in srgb, var(--resource-ink) 45%, #101411);
    background: linear-gradient(125deg, #0a1410, #010504); padding: 12px 9px;
    box-shadow: inset 0 1px #eeeeee12, inset 0 -2px #000, 0 0 0 2px #171b17;
}
:root[data-skin="street-kid"] .resource-strip > div:nth-child(2) { --resource-ink: #00ddfa; }
:root[data-skin="street-kid"] .resource-strip > div:nth-child(3) { --resource-ink: #f4b72d; }
:root[data-skin="street-kid"] .resource-strip > div:nth-child(4) { --resource-ink: #da7bdf; }
:root[data-skin="street-kid"] .resource-strip :is(.skin-icon, div > span:not(.skin-icon)) { color: var(--resource-ink); }
:root[data-skin="street-kid"] .resource-strip strong { color: #e5eeea; }
:root[data-skin="street-kid"] .alarm-readout:not(.triggered) { border: 1px solid #555c4c; background: #060b09; }
:root[data-skin="street-kid"] .header-utilities { padding: 5px; border: 1px solid #3d5146; background: #030907d9; }
:root[data-skin="street-kid"] .view-button { border: 1px solid #43685a; background: #030907; }
:root[data-skin="street-kid"] .view-button.active { color: #00ffc0; background: linear-gradient(90deg, #04ffbd24, #010805); box-shadow: inset 4px 0 #00ffc0, inset 0 0 0 1px #00cb9c, 0 0 9px #00ffb72b; }
:root[data-skin="street-kid"] .view-button:hover { color: #bdfff2; background: #10251c; box-shadow: inset 0 0 0 1px #00ffc0; }
:root[data-skin="street-kid"] .view-rail { background: #030806a8; border: 1px solid #424a3e; padding: 4px; gap: 3px; overflow-x: hidden; }
:root[data-skin="street-kid"] .view-rail .view-button { min-height: 48px; padding: 9px 7px; gap: 12px; border-color: transparent; background: none; }
:root[data-skin="street-kid"] .view-rail .view-button.active { border-color: #569482; }
:root[data-skin="street-kid"] .view-rail .skin-icon { width: 22px; height: 22px; flex-basis: 22px; }
:root[data-skin="street-kid"] .primary-column { border-width: 6px; background: #010a07; box-shadow: inset 0 0 0 1px #00b98c, 0 0 0 1px #565f51, 0 0 12px #000; }
:root[data-skin="street-kid"] .primary-column::after { opacity: .12; }
:root[data-skin="street-kid"] .skin-console-heading { background: #010805; border-bottom-color: #087e5f; font-size: .72rem; padding: 8px 12px; }
:root[data-skin="street-kid"] .skin-console-heading small { font-size: 0; }
:root[data-skin="street-kid"] .skin-console-heading small::after { content: 'ACCESS / EXPLOIT / PERSIST'; font-size: 9px; color: #64938b; }
:root[data-skin="street-kid"] .terminal-output { background: linear-gradient(#010a0788, #010a0788), url('/assets/skins/street/skull.svg') right 28px top 20px / 185px 240px no-repeat; color: #b8e4e5; }
:root[data-skin="street-kid"] .command-line { background: #010805; border-top-color: #00a37d; color: #00ffc0; }
:root[data-skin="street-kid"] .operations-sidebar .topology-section { border-width: 6px; padding: 12px 8px; background: #020907; box-shadow: inset 0 0 0 1px #388273; }
:root[data-skin="street-kid"] .sidebar-heading { color: #00ffc0; }
:root[data-skin="street-kid"] .topology-layer { min-height: 35px; border: 0; border-bottom: 1px solid #166c51; background: linear-gradient(90deg, #091610, #020806); box-shadow: none; }
:root[data-skin="street-kid"] .topology-layer-number { color: #00ffc0; font-size: .95rem; border-right: 1px solid #166c51; }
:root[data-skin="street-kid"] .topology-layer.current { background: #342b18; }
:root[data-skin="street-kid"] .skin-note, :root[data-skin="street-kid"] .operations-sidebar::after { display: none; }
:root[data-skin="street-kid"] .skin-motto { position: relative; margin-top: auto; padding: 60px 7px 25px; color: #adada1; background: none; border: 0; font: italic 900 21px/1.35 'Courier New', monospace; transform: rotate(-8deg); }
:root[data-skin="street-kid"] .skin-motto::before { content: 'NO MASTERS'; position: absolute; top: 10px; left: 9px; padding: 6px; background: #b3933e; color: #151a13; font: 900 12px monospace; transform: rotate(5deg); box-shadow: 2px 3px #000; }
:root[data-skin="street-kid"] .skin-motto::after { content: '♛'; display: block; position: static; background: none; width: auto; height: auto; color: #b7aa65; font-size: 40px; text-align: right; }
:root[data-skin="street-kid"] .skin-network-art { display: block; position: relative; flex: 0 0 245px; min-height: 245px; border: 5px solid transparent; border-image: var(--shell-frame) 12 / 5px; background: url('/assets/skins/street/map.svg') center 12px / 95% 185px no-repeat, #020907; }
:root[data-skin="street-kid"] .skin-network-art::after { content: 'ALL SIGNALS. NO BORDERS.'; position: absolute; bottom: 15px; right: 12px; color: #a9b4a6; font: italic 900 14px monospace; transform: rotate(-5deg); border-bottom: 2px solid #b763c7; }
:root[data-skin="street-kid"] :is(.terminal-zoom button, .palette-control select, .skin-store-open) { border-color: #26745c; background-color: #020907; }
@media (min-width: 1280px) {
    :root[data-skin="street-kid"] .application-body { grid-template-columns: 136px minmax(0, 1fr) minmax(290px, 24vw); gap: 12px; }
}
@media (max-width: 1279px) {
    :root[data-skin="street-kid"] .skin-wordmark { width: 190px; height: 78px; }
    :root[data-skin="street-kid"] .brand-lockup { min-height: 78px; }
    :root[data-skin="street-kid"] .view-rail .view-button { padding: 8px 3px; gap: 4px; }
    :root[data-skin="street-kid"] .skin-motto { font-size: 12px; }
    :root[data-skin="street-kid"] .skin-motto::before { font-size: 8px; }
}
@media (max-width: 980px), (max-height: 760px) {
    :root[data-skin="street-kid"] :is(.skin-network-art, .skin-motto) { display: none; }
    :root[data-skin="street-kid"] .terminal-output { background: none; }
}
@media (max-width: 640px) {
    :root[data-skin="street-kid"] .terminal-panel { padding: 4px; }
    :root[data-skin="street-kid"] .skin-console-heading small { display: none; }
}