frontend/style.css

/* ═══════════════════════════════════════════════════════
   GarbageBot — Bright Light Mode Dashboard CSS
   ═══════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────── */
:root {
    /* Background — bright soft white/cyan */
    --bg:           #f1f5f9;
    --surface:      rgba(255, 255, 255, 0);
    --surface-2:    rgba(255, 255, 255, 0);
    --surface-hi:   rgba(255, 255, 255, 1);

    --border:       rgba(0, 0, 0, 0.08);
    --border-hi:    rgba(0, 0, 0, 0.16);
    --border-glow:  rgba(59, 130, 246, 0.3);

    --text:         #1e293b;
    --text-muted:   #64748b;
    --text-dim:     #94a3b8;

    /* Vibrant accents (slightly darker for contrast on white) */
    --blue:         #3b82f6;      
    --blue-glow:    rgba(59, 130, 246, 0.45);
    --indigo:       #6366f1;
    --indigo-glow:  rgba(99, 102, 241, 0.45);
    --teal:         #14b8a6;
    --teal-glow:    rgba(20, 184, 166, 0.4);
    --purple:       #a855f7;
    --purple-glow:  rgba(168, 85, 247, 0.45);
    --success:      #10b981;
    --success-glow: rgba(16, 185, 129, 0.4);
    --warning:      #f59e0b;
    --warning-glow: rgba(245, 158, 11, 0.4);
    --danger:       #ef4444;
    --danger-glow:  rgba(239, 68, 68, 0.5);
    --neon:         #0ea5e9;
    --neon-glow:    rgba(14, 165, 233, 0.35);

    /* World */
    --floor:        #ffffff;
    --floor-light:  #f8fafc;
    --wall:         #e2e8f0;
    --wall-top:     #f1f5f9;
    --wall-shadow:  rgba(15, 23, 42, 0.15);

    --radius:       16px;
    --radius-sm:    10px;
    --radius-xs:    6px;

    --cell:         52px;   
    --gap:          3px;
    --pad:          10px;

    --font:  'Inter', sans-serif;
    --mono:  'JetBrains Mono', monospace;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Animated background orbs ───────────────────────────── */
.bg-orbs {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.orb {
    position: absolute; border-radius: 50%;
    filter: blur(100px);
    animation: drift 28s ease-in-out infinite alternate;
}
/* Opacities remain similar (since background is white, colors will act like pale washes) */
.orb-1 { width:700px;height:700px; background:radial-gradient(circle,var(--blue) 0%,transparent 70%); opacity:.15; left:-200px;top:-150px; animation-delay:0s; }
.orb-2 { width:600px;height:600px; background:radial-gradient(circle,var(--purple) 0%,transparent 70%); opacity:.15; right:-180px;bottom:-100px; animation-delay:-9s; }
.orb-3 { width:500px;height:500px; background:radial-gradient(circle,var(--teal) 0%,transparent 70%); opacity:.1; left:42%;top:25%; animation-delay:-18s; }
.orb-4 { width:350px;height:350px; background:radial-gradient(circle,var(--warning) 0%,transparent 70%); opacity:.1; right:30%;top:-80px; animation-delay:-5s; }

@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(50px, 35px) scale(1.12); }
}

/* Dot-grid background */
.grid-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(15,23,42,.06) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ── Layout ─────────────────────────────────────────────── */
.dashboard {
    position: relative; z-index: 1;
    max-width: 1360px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: 1.1rem;
    min-height: 100vh;
}

/* ── Glass panel ─────────────────────────────────────────── */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.glass {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 4px 48px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,1);
}

/* ── HEADER ─────────────────────────────────────────────── */
.header-bar {
    display: flex; align-items: center; gap: 1.2rem;
    padding: .9rem 1.4rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.88) 100%);
    border: 1px solid var(--border);
    border-top: 1px solid rgba(255,255,255,1);
    border-radius: var(--radius);
    backdrop-filter: blur(28px);
    box-shadow: 0 2px 36px rgba(15,23,42,0.05), 0 0 60px rgba(59,130,246,0.06), inset 0 1px 0 rgba(255,255,255,1);
}

.brand { display: flex; align-items: center; gap: .9rem; }
.brand-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 12px rgba(99,102,241,.4));
    animation: bob 3s ease-in-out infinite;
}
@keyframes bob {
    0%,100%{ transform:translateY(0) rotate(-2deg); }
    50%     { transform:translateY(-5px) rotate(2deg); }
}
h1 {
    font-size: 1.4rem; font-weight: 800;
    color: var(--text);
    background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.04em;
}
.version-tag {
    font-size: .62rem; font-weight: 700;
    background: rgba(99,102,241,.1); color: var(--indigo);
    padding: 2px 7px; border-radius: 20px;
    border: 1px solid rgba(99,102,241,.25);
    vertical-align: middle; margin-left: 6px;
    -webkit-text-fill-color: initial;
}
.brand-sub { font-size: .72rem; color: var(--text-muted); font-family: var(--mono); margin-top: 3px; }

/* Status strip */
.status-strip { display:flex; gap:.7rem; align-items:center; margin-left:auto; }
.status-pill {
    display:flex; align-items:center; gap:.45rem;
    font-size:.8rem; font-family:var(--mono);
    padding:.35rem .9rem;
    border-radius:20px;
    background:rgba(255,255,255,.6);
    border:1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.pulse-dot {
    width:9px;height:9px;border-radius:50%;
    background:var(--danger);
    box-shadow:0 0 6px var(--danger-glow);
    transition:all .4s;
}
.pulse-dot.online {
    background: var(--success);
    box-shadow: 0 0 6px var(--success-glow);
    animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.policy-badge {
    display:flex; align-items:center; gap:.4rem;
    font-size:.8rem; font-family:var(--mono);
    padding:.35rem .9rem;
    border-radius:20px;
    background: linear-gradient(135deg,rgba(59,130,246,.08),rgba(168,85,247,.08));
    border:1px solid rgba(59,130,246,.25);
    transition:all .4s;
    color: var(--text);
}
.policy-badge.active { border-color:rgba(59,130,246,.5); box-shadow:0 0 12px rgba(59,130,246,.1); }
.badge-icon { font-size:.9rem; }

#mode-pill {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-muted);
    font-weight: 700;
    transition: all 0.3s ease;
}
#mode-pill.recharging { background: var(--blue); color: #fff; box-shadow: 0 0 12px var(--blue-glow); }
#mode-pill.unloading { background: var(--warning); color: #fff; box-shadow: 0 0 12px var(--warning-glow); }
#mode-pill.normal { background: rgba(0, 0, 0, 0.05); color: var(--text-muted); }

/* Controls */
.controls { display:flex; gap:.65rem; align-items:center; flex-wrap:wrap; }

select {
    background:rgba(255,255,255,.6);
    color:var(--text);
    border:1px solid var(--border);
    padding:.52rem .9rem;
    border-radius:var(--radius-sm);
    font-size:.85rem; font-family:var(--font);
    outline:none; cursor:pointer;
    transition:border-color .2s,box-shadow .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.02);
}
select:hover,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15); }

/* Speed control */
.speed-group {
    display:flex; align-items:center; gap:.5rem;
    padding:.4rem .85rem;
    background:rgba(255,255,255,.6);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
}
.speed-label { font-size:.75rem; color:var(--text-muted); }
#speed-slider {
    -webkit-appearance:none; appearance:none;
    width:85px; height:4px;
    background:linear-gradient(90deg, var(--blue) 0%, rgba(0,0,0,.08) 0%);
    border-radius:2px; outline:none; cursor:pointer;
    transition:background .1s;
}
#speed-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:16px;height:16px;border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 6px var(--blue-glow);
    cursor:pointer;
    transition:transform .15s;
}
#speed-slider::-webkit-slider-thumb:active { transform:scale(1.25); }
#speed-val { font-size:.75rem;color:var(--text-muted);font-family:var(--mono);min-width:40px;text-align:right; }

/* Buttons */
.btn {
    padding:.55rem 1.15rem;
    border-radius:var(--radius-sm);
    font-size:.875rem; font-weight:700;
    cursor:pointer; border:none;
    transition:all .18s ease;
    position:relative; overflow:hidden;
    white-space:nowrap; letter-spacing:.01em;
}
.btn::after {
    content:''; position:absolute; inset:0;
    background:rgba(0,0,0,0); transition:background .18s;
}
.btn:hover::after { background:rgba(0,0,0,.03); }
.btn:active { transform:scale(.96); }

.btn.primary {
    background:linear-gradient(135deg, var(--blue), var(--indigo));
    color:#fff;
    box-shadow:0 4px 18px var(--blue-glow);
}
.btn.primary:hover { box-shadow:0 6px 24px var(--blue-glow); transform:translateY(-1px); }

.btn.secondary {
    background:rgba(255,255,255,1);
    color:var(--text); border:1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.btn.secondary:hover { border-color:var(--border-hi); }

.btn.outline {
    background:transparent; color:var(--text);
    border:1px solid var(--border);
}
.btn.outline:hover { border-color:var(--border-hi); background:rgba(0,0,0,.02); }

.btn.stop {
    background:linear-gradient(135deg, var(--danger), #ef4444);
    color:#fff;
    box-shadow:0 4px 18px var(--danger-glow);
}
.btn.stop:hover { box-shadow:0 6px 24px var(--danger-glow); transform:translateY(-1px); }

/* ── MAIN LAYOUT ────────────────────────────────────────── */
main {
    display:grid;
    grid-template-columns:1fr 310px;
    gap:1.1rem;
    flex:1;
}

/* ── GRID PANEL ─────────────────────────────────────────── */
.grid-panel {
    display:flex; flex-direction:column;
    padding:1.25rem; gap:.75rem;
}
.grid-header {
    display:flex; align-items:center; justify-content:space-between;
}
.grid-title {
    font-size:.75rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);
}
.grid-meta { display:flex; gap:.5rem; }

.mono-chip {
    font-family:var(--mono); font-size:.75rem;
    padding:.22rem .65rem; border-radius:20px;
    background:rgba(0,0,0,.03);
    border:1px solid var(--border); color:var(--text-muted);
}
.accent-chip {
    color:var(--blue); border-color:rgba(59,130,246,.25);
    background:rgba(59,130,246,.08);
}

.grid-stage {
    flex:1; display:flex; align-items:center; justify-content:center;
    position:relative;
}

/* ─── The World ──────────────────────────────────────────── */
.grid-world {
    display:grid;
    gap:0;                        /* no cell gap — seamless floor */
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    background: var(--floor);
    border:1px solid rgba(0,0,0,.06);
    box-shadow:
        0 8px 30px rgba(15,23,42,.06),
        inset 0 0 20px rgba(0,0,0,.02);

    /* Continuous floor: subtle tile lines */
    background-image:
        linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
    background-size:
        var(--cell) var(--cell),
        var(--cell) var(--cell);
}

/* Transparent click-target cells — world feels seamless */
.cell {
    width:var(--cell); height:var(--cell);
    background:transparent;
    position:relative; z-index:2;
    cursor:pointer;
    transition:background .18s;
}
.cell:hover { background:rgba(0,0,0,.025); }

/* ── OBSTACLES — 3D walls ────────────────────────────────── */
.world-obstacle {
    position:absolute; z-index:10;
    width:var(--cell); height:var(--cell);
    border-radius:4px;
    background:linear-gradient(160deg, var(--wall-top) 0%, var(--wall) 45%, #94a3b8 100%);
    border:1px solid rgba(0,0,0,.15);
    border-top-color:rgba(255,255,255,.8);
    border-left-color:rgba(255,255,255,.4);
    box-shadow:
        inset -1px 0 0 rgba(0,0,0,.08),
        0 6px 0 0 #94a3b8,                      /* 3D depth */
        0 8px 12px rgba(15,23,42,.25);          /* floor shadow */
    overflow:hidden;
}
.world-obstacle::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 40%);
}
/* stone texture lines */
.world-obstacle::after {
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(
        0deg, transparent, transparent 14px,
        rgba(0,0,0,.03) 14px, rgba(0,0,0,.03) 15px
    ),
    repeating-linear-gradient(
        90deg, transparent, transparent 14px,
        rgba(0,0,0,.02) 14px, rgba(0,0,0,.02) 15px
    );
}

/* ── GARBAGE — glowing litter ────────────────────────────── */
.world-garbage {
    position:absolute; z-index:8;
    width:var(--cell); height:var(--cell);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
    cursor:pointer;
    border-radius:var(--radius-xs);
    background:rgba(168,85,247,.1);
    border:1px solid rgba(168,85,247,.3);
    animation: garbo-spawn .35s cubic-bezier(.34,1.56,.64,1) both;
    transition:transform .15s;
}
.world-garbage:hover { transform:scale(1.12); }
@keyframes garbo-spawn {
    from { transform:scale(0) rotate(-25deg); opacity:0; }
    to   { transform:scale(1) rotate(0);      opacity:1; }
}
/* glow ring */
.world-garbage::before {
    content:''; position:absolute; inset:-3px; border-radius:inherit;
    border:1.5px solid rgba(168,85,247,.4);
    animation:garbo-ring 2.4s ease-out infinite;
}
@keyframes garbo-ring {
    0%   { opacity:.6; transform:scale(1); }
    70%  { opacity:0;  transform:scale(1.45); }
    100% { opacity:0;  transform:scale(1.45); }
}
/* bounce */
.world-garbage span { display:block; animation:garbo-bob 2.2s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(168,85,247,.2)); }
@keyframes garbo-bob {
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-4px); }
}

/* ── STATIONS ───────────────────────────────────────────── */
.world-home, .world-unload {
    position: absolute;
    width: var(--cell); height: var(--cell);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}
.world-home {
    background: rgba(59, 130, 246, 0.08);
    border: 2px dashed rgba(59, 130, 246, 0.3);
}
.world-home::before {
    content: '⚡'; filter: drop-shadow(0 0 8px var(--blue));
}

.world-unload {
    background: rgba(245, 158, 11, 0.08);
    border: 2px dashed rgba(245, 158, 11, 0.3);
}
.world-unload::before {
    content: '📦'; filter: drop-shadow(0 0 8px var(--warning));
}

/* ── ROBOT ───────────────────────────────────────────────── */
.robot-entity {
    position:absolute; z-index:30;
    width:var(--cell); height:var(--cell);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem;
    border-radius:var(--radius-sm);
    /* vivid gradient body */
    background:linear-gradient(145deg, #60a5fa, #818cf8 50%, #6366f1);
    border:1px solid rgba(255,255,255,.6);
    border-top-color:rgba(255,255,255,.9);
    /* multi-layer shadow */
    box-shadow:
        0 0 0 1px rgba(59,130,246,.2),
        0 4px 12px rgba(59,130,246,.3),
        0 8px 24px rgba(15,23,42,.2);
    
    transition:
        left   var(--move-dur,350ms) linear,
        top    var(--move-dur,350ms) linear,
        background 0.4s ease,
        box-shadow 0.4s ease;
    will-change: left, top;
}

.robot-entity.recharging { 
    background: linear-gradient(145deg, #3b82f6, #60a5fa); 
    box-shadow: 0 0 20px var(--blue-glow);
}
.robot-entity.unloading { 
    background: linear-gradient(145deg, #f59e0b, #fbbf24); 
    box-shadow: 0 0 20px var(--warning-glow);
}
/* top highlight */
.robot-entity::before {
    content:''; position:absolute; top:2px; left:3px; right:3px; height:40%;
    background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,transparent 100%);
    border-radius: 4px 4px 50% 50%;
}
/* ground shadow */
.robot-entity::after {
    content:''; position:absolute; bottom:-12px; left:50%;
    transform:translateX(-50%);
    width:80%; height:10px;
    background:rgba(15,23,42,.25);
    border-radius:50%; filter:blur(4px);
}

/* Collect burst */
.robot-entity.collecting {
    animation:robot-collect .42s ease-out;
}
@keyframes robot-collect {
    0%   { box-shadow:0 0 0 1px rgba(59,130,246,.2),0 4px 12px rgba(59,130,246,.3),0 8px 24px rgba(15,23,42,.2); }
    35%  { box-shadow:0 0 0 2px var(--purple),0 12px 35px var(--purple-glow),0 20px 45px rgba(15,23,42,.15); }
    100% { box-shadow:0 0 0 1px rgba(59,130,246,.2),0 4px 12px rgba(59,130,246,.3),0 8px 24px rgba(15,23,42,.2); }
}

/* ── Trail ghost ────────────────────────────────────────── */
.trail-ghost {
    position:absolute; z-index:6;
    width:var(--cell); height:var(--cell);
    border-radius:var(--radius-sm);
    background:rgba(59,130,246,.08);
    border:1px solid rgba(59,130,246,.15);
    pointer-events:none;
    animation:trail-fade 1.1s ease-out forwards;
}
@keyframes trail-fade {
    from { opacity:1; transform:scale(1); }
    to   { opacity:0;  transform:scale(.82); }
}

/* ── Particle burst ─────────────────────────────────────── */
.particle-layer { position:absolute; inset:0; pointer-events:none; z-index:40; }
.particle {
    position:absolute;
    border-radius:50%; pointer-events:none;
    animation:pfx .75s ease-out forwards;
}
@keyframes pfx {
    0%   { transform:translate(0,0) scale(1); opacity:1; }
    100% { transform:var(--tx) scale(0);       opacity:0; }
}

/* ── Grid hint ──────────────────────────────────────────── */
.grid-hint { font-size:.72rem; color:var(--text-dim); text-align:center; }

/* ── SIDE PANEL ─────────────────────────────────────────── */
.side-panel { display:flex; flex-direction:column; gap:1.1rem; }

.section-title {
    font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted);
    margin-bottom:.9rem;
}

/* Telemetry card */
.tele-card { padding:1.2rem; }
.stat-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.95rem; }
.stat-icon { font-size:1.3rem; flex-shrink:0; width:34px; text-align:center; filter:drop-shadow(0 2px 4px rgba(0,0,0,.1)); }
.stat-body { flex:1; }
.stat-label-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.35rem; }
.stat-label { font-size:.78rem; color:var(--text-muted); }
.stat-num { font-family:var(--mono); font-size:.85rem; font-weight:600; color:var(--text); }
.stat-num.big-num { font-size:1.55rem; font-weight:800; }
.stat-num.accent { color:var(--blue); }

.progress-track {
    height:7px; background:rgba(0,0,0,.06);
    border-radius:4px; overflow:hidden;
}
.progress-fill {
    height:100%; border-radius:4px;
    background:var(--success);
    transition:width .45s ease, background .45s ease;
    position:relative; overflow:hidden;
}
.progress-fill::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    animation:shimmer 1.8s linear infinite;
}
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* Mini chart */
.chart-wrap { margin-top:.5rem; }
#reward-chart { width:100%; height:68px; border-radius:var(--radius-xs); }

/* Log card */
.log-card { padding:1.2rem; display:flex; flex-direction:column; flex:1; min-height:0; }
.log-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; }
.log-header .section-title { margin-bottom:0; }
.clear-btn { font-size:.7rem; color:var(--text-muted); background:none; border:none; cursor:pointer; transition:color .2s; }
.clear-btn:hover { color:var(--danger); }

.log-feed {
    flex:1; display:flex; flex-direction:column; gap:.45rem;
    overflow-y:auto; max-height:280px; padding-right:.2rem;
}
.placeholder { font-size:.8rem; color:var(--text-dim); text-align:center; padding:1rem; }

.log-entry {
    display:flex; gap:.6rem; align-items:flex-start;
    font-size:.77rem; line-height:1.45;
    padding:.55rem .7rem;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,1);
    border:1px solid rgba(0,0,0,.04);
    box-shadow: 0 1px 3px rgba(15,23,42,.03);
    color: var(--text);
    animation:slide-in .22s cubic-bezier(.22,1,.36,1);
    transition:border-color .2s, box-shadow .2s;
}
.log-entry:hover { border-color:var(--border-hi); box-shadow: 0 2px 6px rgba(15,23,42,.06); }
@keyframes slide-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

.log-badge {
    font-family:var(--mono); font-size:.64rem; font-weight:700;
    padding:2px 6px; border-radius:4px; flex-shrink:0; margin-top:2px;
}
.log-badge.llm     { background:rgba(59,130,246,.12); color:var(--blue); }
.log-badge.bfs     { background:rgba(20,184,166,.12); color:var(--teal); }
.log-badge.q-table { background:rgba(245,158,11,.15); color:#d97706; }
.log-badge.sys     { background:rgba(0,0,0,.05);      color:var(--text-muted); }

.log-footer {
    font-size:.7rem; color:var(--text-dim);
    text-align:center; margin-top:.6rem; padding-top:.55rem;
    border-top:1px solid var(--border);
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar          { width:5px; }
::-webkit-scrollbar-track    { background:transparent; }
::-webkit-scrollbar-thumb    { background:rgba(0,0,0,.15); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.25); }