/* Shared visual language for the sorting and searching laboratories. */
body.tool-array-visualizer {
    --arcane-cyan: #69f5e7;
    --arcane-violet: #a78bfa;
    --arcane-gold: #f8d477;
    --abyss: #07070d;
    --obsidian: #0d0d18;
    --obsidian-raised: #131322;
    --rune-line: rgba(167, 139, 250, .2);
    --text-primary: #f5f3ff;
    --text-secondary: #b8b2cf;
    --text-muted: #77718f;
    --border-color: rgba(167, 139, 250, .18);
    --surface-color: rgba(13, 13, 24, .94);
    --surface-elevated: rgba(20, 19, 35, .92);
    --primary-color: var(--arcane-violet);
    --primary-hover: #c4b5fd;
    --primary-light: rgba(167, 139, 250, .11);
    --tool-primary: #38c6c2;
    --tool-surface: #0d0d18;
    --tool-canvas: #080810;
    --visual-frontier: #7667d9;
    --visual-current: #f8d477;
    --visual-success: #62e6bd;
    --visual-pivot: #dc75ff;
    background:
        radial-gradient(circle at 15% 12%, rgba(91, 55, 170, .13), transparent 28rem),
        radial-gradient(circle at 88% 28%, rgba(31, 155, 161, .08), transparent 30rem),
        linear-gradient(180deg, #09090f 0%, #0b0912 55%, #07070c 100%);
    color-scheme: dark;
}

body.tool-array-visualizer .tool-main { position: relative; }
body.tool-array-visualizer .tool-main::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
    background-image: linear-gradient(rgba(167,139,250,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.05) 1px,transparent 1px);
    background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 75%);
}

body.tool-array-visualizer .tool-header { padding-top: 56px; }
body.tool-array-visualizer .header-content { max-width: 760px; }
body.tool-array-visualizer .header-icon {
    width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 20px;
    border: 1px solid rgba(167,139,250,.3); border-radius: 20px 6px 20px 6px;
    background: linear-gradient(145deg,rgba(167,139,250,.16),rgba(105,245,231,.04));
    box-shadow: inset 0 0 25px rgba(167,139,250,.08),0 0 35px rgba(105,245,231,.08);
    transform: rotate(45deg);
}
body.tool-array-visualizer .header-icon > * { transform: rotate(-45deg); filter: saturate(.7) drop-shadow(0 0 12px rgba(167,139,250,.7)); animation: none; }
body.tool-array-visualizer .tool-header h1 {
    margin: 0 0 12px; font-size: clamp(2.1rem,5vw,3.6rem); font-weight: 800; letter-spacing: -.055em;
    color: transparent; background: linear-gradient(105deg,#fff 15%,#d8d0f5 52%,#85eee5); background-clip: text;
    text-shadow: 0 10px 45px rgba(167,139,250,.14);
}
body.tool-array-visualizer .subtitle { color: #aaa3c0; }
body.tool-array-visualizer .keyboard-hint { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
body.tool-array-visualizer kbd { color: var(--arcane-cyan); background: rgba(105,245,231,.06); border-color: rgba(105,245,231,.25); box-shadow: inset 0 0 12px rgba(105,245,231,.05); }

body.tool-array-visualizer .stats-bar {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 0; overflow: hidden;
    background: linear-gradient(120deg,#151426,#0c0c16) !important;
    border: 1px solid var(--rune-line) !important; border-radius: 18px 5px 18px 5px;
    box-shadow: 0 24px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.025);
}
body.tool-array-visualizer .stat-item { position: relative; justify-content: center; min-height: 74px; padding: 12px 18px; background:linear-gradient(180deg,#171629,#0d0d17) !important; }
body.tool-array-visualizer .stat-item::before { content:"";position:absolute;left:18%;right:18%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--arcane-violet),transparent);opacity:.65; }
body.tool-array-visualizer .stat-item:not(:last-child)::after { content:"";position:absolute;right:0;height:32px;border-right:1px solid var(--rune-line); }
body.tool-array-visualizer .stat-icon { opacity: .5; filter: grayscale(1); }
body.tool-array-visualizer .stat-value { color: var(--arcane-cyan); font: 700 1.15rem ui-monospace,SFMono-Regular,monospace; text-shadow: 0 0 16px rgba(105,245,231,.35); }
body.tool-array-visualizer .stat-label { color: #716b87; text-transform: uppercase; letter-spacing: .11em; font-size: .62rem; }

body.tool-array-visualizer .tool-content { grid-template-columns: 310px minmax(0,1fr); gap: 22px; }
body.tool-array-visualizer .options-sidebar, body.tool-array-visualizer .canvas-container, body.tool-array-visualizer .legend-panel {
    background: linear-gradient(150deg,#151426,#0a0a12) !important;
    border: 1px solid var(--rune-line) !important; border-radius: 18px 5px 18px 5px;
    box-shadow: 0 28px 80px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025);
}
body.tool-array-visualizer .options-sidebar { overflow: hidden; }
body.tool-array-visualizer .sidebar-header, body.tool-array-visualizer .canvas-header {
    min-height: 58px; padding: 14px 18px; background: linear-gradient(90deg,rgba(167,139,250,.1),transparent 70%); border-bottom: 1px solid var(--rune-line);
}
body.tool-array-visualizer .sidebar-header h2, body.tool-array-visualizer .canvas-title { text-transform: uppercase; letter-spacing: .11em; font-size: .72rem; color: #d7d1e8; }
body.tool-array-visualizer .option-card { padding: 18px; border-color: rgba(167,139,250,.11); }
body.tool-array-visualizer .option-card, body.tool-array-visualizer .preset-card, body.tool-array-visualizer .card-content { background: transparent !important; }
body.tool-array-visualizer .option-card h3 { color: #d5cee9; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
body.tool-array-visualizer .card-icon, body.tool-array-visualizer .icon { filter: grayscale(1); opacity: .58; }
body.tool-array-visualizer select, body.tool-array-visualizer input[type="number"], body.tool-array-visualizer #array-values {
    color: #e8e3f3; background: rgba(5,5,11,.7); border: 1px solid rgba(167,139,250,.2); border-radius: 10px 3px 10px 3px;
    box-shadow: inset 0 4px 16px rgba(0,0,0,.24); transition: border-color .2s,box-shadow .2s;
}
body.tool-array-visualizer select:focus, body.tool-array-visualizer input:focus, body.tool-array-visualizer #array-values:focus { outline: none; border-color: var(--arcane-violet); box-shadow: inset 0 4px 16px rgba(0,0,0,.24),0 0 0 3px rgba(167,139,250,.1); }
body.tool-array-visualizer input[type="range"] { height: 3px; background: linear-gradient(90deg,var(--arcane-violet),rgba(167,139,250,.16)); }
body.tool-array-visualizer input[type="range"]::-webkit-slider-thumb { width: 15px;height:15px;background:#ddd5ff;border:2px solid #8a72dd;box-shadow:0 0 16px rgba(167,139,250,.7); }
body.tool-array-visualizer .mini-btn, body.tool-array-visualizer .chip-btn, body.tool-array-visualizer .preset-btn {
    color: #aaa3c0; background: rgba(167,139,250,.045); border: 1px solid rgba(167,139,250,.18); border-radius: 9px 3px 9px 3px;
    letter-spacing: .035em; transition: .2s ease;
}
body.tool-array-visualizer .mini-btn:hover, body.tool-array-visualizer .chip-btn:hover { color: #fff; background: rgba(167,139,250,.13); box-shadow: 0 0 20px rgba(167,139,250,.09); }
body.tool-array-visualizer .upload-array { border-style: dashed; color: var(--arcane-cyan); }

body.tool-array-visualizer .canvas-container { position: relative; overflow: hidden; }
body.tool-array-visualizer .canvas-container::before { content:"◇"; position:absolute; top:11px; left:50%; color:rgba(167,139,250,.38); font-size:1.2rem; }
body.tool-array-visualizer .canvas-wrapper { padding: 18px; background: radial-gradient(circle at 50% 42%,rgba(96,70,167,.13),transparent 47%),linear-gradient(145deg,#090910,#06060b) !important; }
body.tool-array-visualizer .canvas-wrapper canvas { background:#080810 !important; border: 1px solid rgba(167,139,250,.22); border-radius: 16px 4px 16px 4px; box-shadow: inset 0 0 80px rgba(0,0,0,.55),0 0 50px rgba(106,75,190,.09); }
body.tool-array-visualizer .operation-label { color:var(--arcane-gold);background:rgba(248,212,119,.055);border-color:rgba(248,212,119,.18);text-transform:uppercase;letter-spacing:.07em; }
body.tool-array-visualizer .action-bar { padding: 14px 0; }
body.tool-array-visualizer .action-btn { min-height: 46px; border-radius: 11px 3px 11px 3px; border: 1px solid rgba(167,139,250,.18); background: #12101d; color: #bdb6cf; box-shadow: 0 8px 25px rgba(0,0,0,.22); transition: transform .2s,box-shadow .2s,border-color .2s; }
body.tool-array-visualizer .action-btn:hover { transform: translateY(-2px); border-color: rgba(167,139,250,.5); box-shadow: 0 12px 35px rgba(0,0,0,.34),0 0 20px rgba(167,139,250,.09); }
body.tool-array-visualizer .action-btn.primary { color:#090811;background:linear-gradient(115deg,#b5a0ff,#73e7dc);border:0;font-weight:800;box-shadow:0 10px 32px rgba(118,101,217,.24); }
body.tool-array-visualizer .action-btn.warning { color:var(--arcane-gold); }
body.tool-array-visualizer .action-btn.danger { color:#da91ad; }
body.tool-array-visualizer .legend-panel { margin-top: 2px; }
body.tool-array-visualizer .legend-color { box-shadow: 0 0 14px currentColor; border-radius: 2px; }
body.tool-array-visualizer .canvas-area { position:relative; }
body.tool-array-visualizer .canvas-area::after { content:"";position:absolute;inset:62px -8px auto;height:55%;z-index:-1;background:radial-gradient(ellipse,rgba(103,77,180,.14),transparent 68%);filter:blur(28px);pointer-events:none; }

body.tool-array-visualizer .help-box, body.tool-array-visualizer .explanation-section { border-color: rgba(167,139,250,.14); background: linear-gradient(145deg,rgba(18,17,30,.9),rgba(9,9,16,.9)); box-shadow: 0 24px 70px rgba(0,0,0,.2); }
body.tool-array-visualizer .explanation-card { border-color: rgba(167,139,250,.12); background: rgba(11,10,19,.66); }

@media (max-width: 900px) { body.tool-array-visualizer .tool-content { grid-template-columns: 1fr; } body.tool-array-visualizer .options-sidebar { position: static; order:2; } body.tool-array-visualizer .canvas-area { order:1; } }
@media (max-width: 620px) {
    body.tool-array-visualizer .tool-main { padding-inline: 12px; }
    body.tool-array-visualizer .tool-header { padding: 28px 4px 18px; margin-bottom: 8px; }
    body.tool-array-visualizer .header-icon { width:48px;height:48px;margin-bottom:15px;border-radius:14px 4px 14px 4px; }
    body.tool-array-visualizer .header-icon > * { font-size:1.7rem; }
    body.tool-array-visualizer .tool-header h1 { font-size:2rem;line-height:1.02;letter-spacing:-.045em; }
    body.tool-array-visualizer .tool-header .subtitle { margin:12px auto 0;font-size:.9rem;line-height:1.45;max-width:320px; }
    body.tool-array-visualizer .keyboard-hint { display:none; }
    body.tool-array-visualizer .stats-bar { grid-template-columns: 1fr 1fr; }
    body.tool-array-visualizer .stat-item:nth-child(2)::after { display:none; }
    body.tool-array-visualizer .stat-item:nth-child(-n+2) { border-bottom:1px solid var(--rune-line); }
    body.tool-array-visualizer .canvas-wrapper { padding: 7px; }
    body.tool-array-visualizer .action-bar, body.tool-array-visualizer .secondary-actions { gap: 8px; }
    body.tool-array-visualizer .secondary-actions { display:grid;grid-template-columns:repeat(3,1fr); }
    body.tool-array-visualizer .action-btn { padding-inline:8px;font-size:.72rem; }
    body.tool-array-visualizer .canvas-container { border-radius:14px 4px 14px 4px; }
    body.tool-array-visualizer .canvas-header { min-height:48px;padding:10px 12px; }
}

@media (prefers-reduced-motion: reduce) { body.tool-array-visualizer *,body.tool-array-visualizer *::before { animation:none!important;transition:none!important; } }

/* Light mode: keep the spectral identity without leaking dark tokens into the site chrome. */
body.tool-array-visualizer:not(.dark-mode) {
    --text-primary:#202437;--text-secondary:#5f667b;--text-muted:#81889a;
    --border-color:#dcd8eb;--surface-color:#fff;--surface-elevated:#f7f6fb;
    --primary-color:#6855bd;--primary-hover:#5744a8;--primary-light:rgba(104,85,189,.09);
    --tool-surface:#fff;--tool-surface-raised:#f7f6fb;--tool-text:#202437;--tool-text-muted:#697086;--tool-border:#dedbea;
    color-scheme:light;
    background:radial-gradient(circle at 12% 10%,rgba(127,102,201,.09),transparent 28rem),radial-gradient(circle at 90% 22%,rgba(56,198,194,.07),transparent 30rem),#f5f4f8;
}
body.tool-array-visualizer:not(.dark-mode) .tool-header h1{background:linear-gradient(105deg,#242034,#604cae 58%,#188f91);background-clip:text;text-shadow:none}
body.tool-array-visualizer:not(.dark-mode) .subtitle{color:#667087}
body.tool-array-visualizer:not(.dark-mode) .stats-bar{background:linear-gradient(120deg,#fff,#f7f6fb)!important;border-color:#dcd8eb!important;box-shadow:0 18px 48px rgba(45,38,76,.09)}
body.tool-array-visualizer:not(.dark-mode) .stat-item{background:linear-gradient(180deg,#fff,#f7f6fb)!important}
body.tool-array-visualizer:not(.dark-mode) .stat-value{color:#247f84;text-shadow:none}
body.tool-array-visualizer:not(.dark-mode) .stat-label{color:#74798b}
body.tool-array-visualizer:not(.dark-mode) .options-sidebar,body.tool-array-visualizer:not(.dark-mode) .canvas-container,body.tool-array-visualizer:not(.dark-mode) .legend-panel{background:linear-gradient(150deg,#fff,#f8f7fc)!important;border-color:#dcd8eb!important;box-shadow:0 22px 58px rgba(43,35,76,.1)}
body.tool-array-visualizer:not(.dark-mode) .sidebar-header,body.tool-array-visualizer:not(.dark-mode) .canvas-header{background:linear-gradient(90deg,rgba(104,85,189,.08),transparent 70%)}
body.tool-array-visualizer:not(.dark-mode) .sidebar-header h2,body.tool-array-visualizer:not(.dark-mode) .canvas-title,body.tool-array-visualizer:not(.dark-mode) .option-card h3{color:#3c3850}
body.tool-array-visualizer:not(.dark-mode) select,body.tool-array-visualizer:not(.dark-mode) input[type=number],body.tool-array-visualizer:not(.dark-mode) #array-values{color:#29263a;background:#fff;border-color:#d6d1e5;box-shadow:inset 0 2px 8px rgba(45,38,76,.04)}
body.tool-array-visualizer:not(.dark-mode) .mini-btn,body.tool-array-visualizer:not(.dark-mode) .chip-btn,body.tool-array-visualizer:not(.dark-mode) .preset-btn{color:#514b67;background:#f8f7fc;border-color:#d8d4e7}
body.tool-array-visualizer:not(.dark-mode) .action-btn{color:#514b67;background:#fff;border-color:#d8d4e7}
body.tool-array-visualizer:not(.dark-mode) .action-btn.primary{color:#fff;background:linear-gradient(115deg,#725fc4,#299fa0)}
body.tool-array-visualizer:not(.dark-mode) .help-box,body.tool-array-visualizer:not(.dark-mode) .explanation-section,body.tool-array-visualizer:not(.dark-mode) .explanation-card{color:#343044;background:#fff!important;border-color:#ddd9ea}