/* Cubroid Simulator - Styles */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:#0d1520;color:#e0e0e0;height:100vh;overflow:hidden;user-select:none}

/* === INTRO SHELL === */
.intro{position:fixed;top:0;left:0;width:100%;height:100%;background:#0d1520;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .5s;overflow-y:auto;padding:20px 0}
.intro.hidden{opacity:0;pointer-events:none}
.intro-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.intro-logo img{height:48px}
.intro-title{font-size:28px;font-weight:800;letter-spacing:-0.5px}
.intro-title b{color:#fff}.intro-title i{color:#00d4ff;font-style:normal}
.intro-sub{font-size:14px;color:rgba(255,255,255,.4);text-align:center;max-width:400px}
.lang-cards{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center;max-width:800px;margin-left:auto;margin-right:auto}
.lang-card{width:100px;padding:10px 8px;border-radius:12px;cursor:pointer;text-align:center;background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.06);transition:all .2s}
.lang-card:hover{background:rgba(0,212,255,.06);border-color:rgba(0,212,255,.2);transform:translateY(-2px)}
.lang-card.selected{background:rgba(0,212,255,.12);border-color:#00d4ff}
.lang-card .flag{font-size:32px;margin-bottom:8px}
.lang-card .lname{font-size:13px;font-weight:600;color:#fff}
.lang-card .lsub{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px}
.intro-start{margin-top:20px;padding:14px 48px;border:none;border-radius:12px;font-family:'Outfit';font-size:16px;font-weight:700;cursor:pointer;background:#00d4ff;color:#0d1520;transition:all .2s}
.intro-start:hover{background:#33ddff;transform:scale(1.03);box-shadow:0 4px 24px rgba(0,212,255,.3)}

/* === APP LAYOUT === */
.app{display:grid;grid-template-columns:210px 1fr 240px;grid-template-rows:50px 1fr;height:100vh;display:none}
.app.visible{display:grid}
.app.code-active{grid-template-columns:210px 1fr 0px}

/* Header */
.hdr{grid-column:1/-1;background:#1e2a3a;border-bottom:1px solid rgba(0,212,255,.12);display:flex;align-items:center;padding:0 16px;gap:12px}
.logo{font-size:18px;font-weight:800;transition:opacity .2s}.logo:hover{opacity:.7}.logo b{color:#fff}.logo i{color:#00d4ff;font-style:normal}
.hsep{width:1px;height:24px;background:rgba(255,255,255,.1)}
.mode-tabs{display:flex;gap:2px;background:rgba(0,0,0,.3);border-radius:8px;padding:2px}
.mtab{padding:6px 16px;border:none;border-radius:6px;font-family:'Outfit';font-size:12px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.45);transition:all .15s}
.mtab:hover{color:rgba(255,255,255,.7)}
.mtab.active{background:rgba(0,212,255,.15);color:#00d4ff}
.mtab.drive-ready{background:rgba(0,212,255,.8);color:#0d1520}
.mtab:disabled{opacity:.3;cursor:not-allowed}
.hright{margin-left:auto;display:flex;gap:6px;align-items:center}
.ico{vertical-align:-2px;margin-right:2px;flex-shrink:0}
.btn{padding:6px 13px;border:none;border-radius:6px;font-family:'Outfit';font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-o{background:transparent;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
.btn-o:hover{border-color:#00d4ff;color:#00d4ff}
.btn-o.active{background:rgba(0,212,255,.12);border-color:#00d4ff;color:#00d4ff}
.btn-d{background:rgba(214,48,49,.12);border:1px solid rgba(214,48,49,.25);color:#ff6b6b}

/* Left panel */
.lpan{background:#1e2a3a;border-right:1px solid rgba(0,212,255,.06);padding:10px 8px;overflow-y:auto}
.slbl{font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.25);margin:10px 0 6px 4px}
.blk-btn{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;cursor:grab;transition:all .12s;margin-bottom:2px;border:2px solid transparent}
.blk-btn:hover{background:rgba(255,255,255,.03)}
.blk-btn:active{cursor:grabbing}
.blk-btn.sel{border-color:#00d4ff;background:rgba(0,212,255,.06)}
.blk-btn .th{width:36px;height:36px;border-radius:7px;overflow:hidden;flex-shrink:0;position:relative}
.blk-btn .th img{width:100%;height:100%;object-fit:cover}
.blk-btn .th .cb{position:absolute;bottom:0;left:0;right:0;height:2px}
.blk-btn .bn{font-size:11px;font-weight:600;color:#fff}
.blk-btn .bd{font-size:9px;color:rgba(255,255,255,.3)}
.blk-btn .blk-limit{font-size:9px;font-weight:400;color:rgba(255,255,255,.4);margin-left:4px}
.blk-btn.blk-maxed{opacity:.4;cursor:not-allowed;pointer-events:auto}
.blk-btn.blk-maxed:active{cursor:not-allowed}

/* Preset buttons */
.preset-btn{width:100%;padding:8px 10px;border:none;border-radius:7px;font-family:'Outfit';font-size:11px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.6);text-align:left;transition:all .12s;display:flex;align-items:center;gap:8px}
.preset-btn:hover{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.2);color:#00d4ff;transform:translateX(2px)}
.preset-icon{font-size:16px;flex-shrink:0}
.preset-info{display:flex;flex-direction:column;gap:1px}
.preset-name{font-size:11px;font-weight:600}
.preset-num{color:#89b4fa;font-size:10px;font-weight:700;opacity:.7}
.preset-meta{font-size:8px;color:rgba(255,255,255,.2);font-weight:400}
.preset-mission{font-size:8px;color:rgba(0,212,255,.4);font-weight:400;font-style:italic;margin-top:1px}
.preset-group{margin:2px 0}
.preset-group-hdr{width:100%;padding:6px 10px;border:none;border-radius:6px;font-family:'Outfit';font-size:10px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.35);text-align:left;transition:all .12s;display:flex;align-items:center;justify-content:space-between}
.preset-group-hdr:hover{background:rgba(0,212,255,.06);border-color:rgba(0,212,255,.15);color:rgba(255,255,255,.5)}
.preset-group-hdr.open{background:rgba(0,212,255,.04);border-color:rgba(0,212,255,.12);color:rgba(0,212,255,.6)}
.preset-group-arrow{font-size:8px;opacity:.5;transition:transform .15s}
.preset-group-body{display:flex;flex-direction:column;gap:2px;padding:2px 0 2px 6px;margin-top:2px}

/* 3D Scene */
.sc{position:relative;overflow:hidden;touch-action:none}
#cv{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;z-index:10;pointer-events:none}
.place-hint{top:10px;left:50%;transform:translateX(-50%);background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.25);border-radius:8px;padding:5px 14px;font-size:11px;color:#00d4ff;display:none}
.place-hint.on{display:flex;align-items:center;gap:8px}

/* Drive HUD */
.hud-spd{top:12px;left:12px;background:rgba(0,0,0,.55);border:1px solid rgba(0,212,255,.2);border-radius:10px;padding:10px 14px;display:none;pointer-events:auto}
.hud-spd.on{display:block}
.hud-spd .sv{font-size:26px;font-weight:800;color:#00d4ff}
.hud-spd .sl{font-size:8px;color:rgba(255,255,255,.3);letter-spacing:1px;text-transform:uppercase}
.hud-spd .su{font-size:10px;color:rgba(255,255,255,.25)}
.hud-sensor{top:12px;right:256px;background:rgba(0,0,0,.55);border:1px solid rgba(225,112,85,.25);border-radius:10px;padding:8px 12px;display:none;align-items:center;gap:8px}
.hud-sensor.on{display:flex}
.sbar-bg{width:80px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.sbar{height:100%;border-radius:3px;transition:width .1s,background .1s}
.sval{font-size:12px;font-weight:700;color:#e17055;min-width:28px;text-align:right}
.stxt{font-size:9px;color:#e17055}

/* D-Pad */
/* Drive control wrapper */
.drv-ctrl{position:absolute;bottom:12px;left:12px;z-index:10;display:none;pointer-events:auto}
.drv-ctrl.on{display:block}
.drv-tabs{display:flex;gap:2px;background:rgba(0,0,0,.5);border-radius:8px 8px 0 0;padding:3px 3px 0}
.drv-tab{padding:5px 14px;border:none;border-radius:6px 6px 0 0;font-family:'Outfit';font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.35);transition:all .15s}
.drv-tab:hover{color:rgba(255,255,255,.6)}
.drv-tab.active{background:rgba(0,0,0,.45);color:#00d4ff}
.drv-panel{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.06);border-radius:0 8px 8px 8px;padding:8px}
/* D-Pad inside wrapper */
.dgrid{display:grid;grid-template-columns:52px 52px 52px;grid-template-rows:52px 52px 52px;gap:3px}
.dbtn{width:52px;height:52px;border:none;border-radius:10px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);transition:all .1s;pointer-events:auto}
.dbtn:hover{background:rgba(0,212,255,.12);border-color:rgba(0,212,255,.25);color:#00d4ff}
.dbtn:active,.dbtn.p{background:rgba(0,212,255,.25);border-color:#00d4ff;color:#00d4ff;transform:scale(.95)}
.dbtn.emp{background:transparent;border:none;cursor:default;pointer-events:none}
.dbtn.stp{background:rgba(214,48,49,.25);border-color:rgba(214,48,49,.35);color:#ff6b6b;font-size:10px;font-weight:700}
/* Motor Lab */
.mlab-row{display:flex;gap:10px;align-items:stretch;justify-content:center}
.mlab-col{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px}
.mlab-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:60px}
.mlab-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);text-align:center;letter-spacing:.5px}
.mlab-side{font-size:8px;font-weight:400;color:rgba(255,255,255,.2)}
.mlab-gauge-wrap{position:relative;width:40px;height:160px;display:flex;align-items:center;justify-content:center}
.mlab-gauge{position:absolute;inset:0;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.mlab-gauge-fill{position:absolute;left:0;right:0;background:#555;transition:all .08s}
.mlab-gauge-zero{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.15)}
.mlab-vslider{-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:28px;height:150px;cursor:pointer;position:relative;z-index:2;opacity:.01;transition:opacity .2s}
.mlab-gauge-wrap:hover .mlab-vslider{opacity:.6}
.mlab-vslider:active{opacity:1}
/* Firefox vertical slider */
@-moz-document url-prefix() {
    .mlab-vslider{-moz-orient:vertical}
}
.mlab-val{font-size:18px;font-weight:800;color:#00d4ff;font-family:'Outfit',monospace;min-height:24px;line-height:1}
.mlab-dir{font-size:9px;font-weight:600;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px;min-height:13px}
.mlab-byte{font-size:8px;font-family:monospace;color:rgba(255,255,255,.2);min-height:12px}
.mlab-stop{width:48px;height:48px;border-radius:12px;border:1px solid rgba(214,48,49,.35);background:rgba(214,48,49,.15);color:#ff6b6b;font-size:14px;font-weight:700;cursor:pointer;font-family:'Outfit';line-height:1.2;transition:all .12s}
.mlab-stop:hover{background:rgba(214,48,49,.3);border-color:rgba(214,48,49,.5)}
.mlab-stop:active{transform:scale(.93)}
.mlab-link-row{display:flex;align-items:center;justify-content:center}
.mlab-link-label{font-size:9px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:4px;cursor:pointer}
.mlab-link-label input{width:12px;height:12px;cursor:pointer}
.mlab-code{font-size:9px;font-family:monospace;color:rgba(0,212,255,.35);background:rgba(0,0,0,.3);border-radius:4px;padding:4px 8px;margin-top:6px;text-align:center}

/* Camera toggle */
.cams{position:absolute;bottom:20px;right:256px;display:none;gap:3px;z-index:10}
.cams.on{display:flex}
.cbtn{padding:6px 12px;border:none;border-radius:6px;font-family:'Outfit';font-size:10px;font-weight:600;cursor:pointer;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);pointer-events:auto;transition:all .12s}
.cbtn.active{background:rgba(0,212,255,.12);border-color:#00d4ff;color:#00d4ff}

/* Bottom hints */
.chint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,.15);z-index:5;display:flex;gap:8px}
.chint .k{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:0 4px;font-family:monospace;font-size:8px}

/* Right panel */
.rpan{background:#1e2a3a;border-left:1px solid rgba(0,212,255,.06);padding:10px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.st{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:7px;padding:8px;text-align:center}
.st .v{font-size:20px;font-weight:700;color:#00d4ff}
.st .l{font-size:8px;color:rgba(255,255,255,.3);margin-top:1px}
.val-list{display:flex;flex-direction:column;gap:3px}
.val-item{display:flex;align-items:center;gap:6px;font-size:10px;padding:4px 6px;border-radius:5px}
.val-ok{color:#00b894}.val-miss{color:rgba(255,255,255,.25)}
.val-check{width:16px;text-align:center}
.blist{display:flex;flex-direction:column;gap:3px}
.bli{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:5px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);font-size:10px;cursor:pointer}
.bli.selected{border-color:rgba(0,212,255,.3)}
.bd2{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bln{flex:1;color:rgba(255,255,255,.55)}
.brot{font-size:8px;color:rgba(255,255,255,.2);font-family:monospace}

/* Rotation toolbar */
.rot-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0}
.rot-label{font-size:10px;color:rgba(255,255,255,.4)}
.rbtn{padding:5px 12px;border:none;border-radius:6px;font-family:'Outfit';font-size:11px;font-weight:600;cursor:pointer;background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.3);color:#a29bfe;transition:all .12s}
.rbtn:hover{background:rgba(108,92,231,.25);border-color:#a29bfe;transform:scale(1.05)}
.rbtn:active{transform:scale(0.95)}
.del-btn{width:100%;margin-top:8px;padding:7px;border:none;border-radius:6px;font-family:'Outfit';font-size:11px;font-weight:600;cursor:pointer;background:rgba(214,48,49,.1);border:1px solid rgba(214,48,49,.2);color:#ff6b6b;transition:all .12s}
.del-btn:hover{background:rgba(214,48,49,.2);border-color:#ff6b6b}

/* Motor cards */
.mcards{display:flex;gap:6px}
.mc{flex:1;background:rgba(0,0,0,.25);border:1px solid rgba(9,132,227,.18);border-radius:7px;padding:8px;text-align:center}
.mc .mn{font-size:9px;color:rgba(255,255,255,.3)}.mc .mv{font-size:16px;font-weight:700;color:#0984e3}.mc .md{font-size:9px;color:rgba(255,255,255,.2);margin-top:1px}

/* LED panel */
.ledp{background:rgba(0,0,0,.25);border:1px solid rgba(108,92,231,.18);border-radius:7px;padding:8px}
.ledp .ll{font-size:9px;color:rgba(255,255,255,.3);margin-bottom:5px}
.lcr{display:flex;gap:5px}
.lsw{width:24px;height:24px;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:all .12s}
.lsw:hover{transform:scale(1.1)}.lsw.act{border-color:#fff}
.drv-out-sec{margin-bottom:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:7px;overflow:hidden}
.drv-out-hdr{display:flex;align-items:center;gap:5px;padding:5px 8px;cursor:pointer;font-size:10px;font-weight:600;color:rgba(255,255,255,.4);transition:background .12s}
.drv-out-hdr:hover{background:rgba(255,255,255,.03)}
.drv-out-body{padding:4px 6px 6px;display:none}
.drv-out-body.open{display:block}
.drv-out-grid{display:flex;flex-wrap:wrap;gap:3px}
.drv-out-grid .do-btn{width:26px;height:26px;border:1px solid rgba(255,255,255,.06);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;transition:all .1s;background:rgba(255,255,255,.02)}
.drv-out-grid .do-btn:hover{background:rgba(0,212,255,.12);border-color:rgba(0,212,255,.2);transform:scale(1.08)}
.drv-out-grid .do-btn.act{border-color:#00d4ff;background:rgba(0,212,255,.15)}
.drv-out-grid .do-csw{width:20px;height:20px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all .1s}
.drv-out-grid .do-csw:hover{transform:scale(1.1)}.drv-out-grid .do-csw.act{border-color:#fff}

/* Panel visibility */
.drive-info{display:none}.drive-info.on{display:block}
.code-info{display:none}
/* Code Editor Overlay */
.code-overlay{position:fixed;top:50px;right:0;bottom:0;width:620px;z-index:7000;
    transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.code-overlay.open{transform:translateX(0);pointer-events:auto}
.code-panel{width:100%;height:100%;background:rgba(15,20,30,.97);border-left:1px solid rgba(0,212,255,.15);
    display:flex;flex-direction:column;backdrop-filter:blur(12px)}
.code-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
    border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.code-panel-title{font-size:14px;font-weight:700;color:#00d4ff}
.code-panel-close{width:28px;height:28px;border:none;border-radius:6px;background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.4);font-size:14px;cursor:pointer;transition:all .12s}
.code-panel-close:hover{background:rgba(214,48,49,.2);color:#ff6b6b}
.code-panel-body{display:flex;flex:1;overflow:hidden}
/* Left: Palette */
.code-palette-col{width:240px;flex-shrink:0;overflow-y:auto;padding:10px;border-right:1px solid rgba(255,255,255,.04)}
.code-palette-col .cmd-group{margin-bottom:8px}
.code-palette-col .cmd-group-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    color:rgba(255,255,255,.25);margin-bottom:4px}
.cmd-palette-wide{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.code-palette-col .cmd-btn{padding:8px 10px;font-size:11px;border-radius:8px}
/* Right: Program */
.code-prog-col{flex:1;display:flex;flex-direction:column;padding:10px;min-width:0}
.code-prog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.code-prog-col .prog-list{flex:1;min-height:0;max-height:none;overflow-y:auto;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:6px}
.code-prog-col .prog-item{padding:7px 10px;font-size:12px;border-radius:6px;gap:6px}
.code-prog-col .prog-item .pnum{font-size:10px;min-width:18px}
.code-prog-col .prog-item .pdel{font-size:14px}
.code-prog-col .pinp-dur{width:60px;height:12px}
.code-prog-col .plbl{font-size:9px;min-width:36px}
.code-prog-actions{display:flex;gap:6px;margin-top:8px;flex-shrink:0}
.code-prog-col .run-btn{padding:10px;font-size:14px;border-radius:8px}
.code-prog-col .stop-prog-btn{padding:10px;font-size:14px;border-radius:8px}
.code-prog-col .prog-output{margin-top:6px;font-size:10px;max-height:80px;overflow-y:auto;
    background:rgba(0,0,0,.3);border-radius:6px;padding:6px 8px;color:rgba(255,255,255,.3);flex-shrink:0}
/* Running state: shrink panel to show 3D */
.code-overlay.running{width:300px}
.code-overlay.running .code-palette-col{display:none}
.code-overlay.running .code-panel-title::after{content:" ▶ Running...";color:#00b894;font-size:11px}
.build-info{display:block}.build-info.off{display:none}

/* Code editor */
.cmd-palette{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.cmd-btn{padding:6px 8px;border:none;border-radius:6px;font-family:'Outfit';font-size:10px;font-weight:600;cursor:grab;text-align:left;transition:all .1s}
.cmd-btn:hover{transform:scale(1.03);filter:brightness(1.2)}
.cmd-btn:active{cursor:grabbing}
.cmd-move{background:rgba(9,132,227,.15);border:1px solid rgba(9,132,227,.25);color:#74b9ff}
.cmd-turn{background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.25);color:#a29bfe}
.cmd-wait{background:rgba(253,203,110,.12);border:1px solid rgba(253,203,110,.2);color:#fdcb6e}
.cmd-stop{background:rgba(214,48,49,.12);border:1px solid rgba(214,48,49,.2);color:#ff6b6b}
.cmd-led{background:rgba(0,184,148,.12);border:1px solid rgba(0,184,148,.2);color:#55efc4}
.cmd-sound{background:rgba(0,184,148,.12);border:1px solid rgba(0,184,148,.2);color:#55efc4}
.cmd-sensor{background:rgba(225,112,85,.12);border:1px solid rgba(225,112,85,.2);color:#fab1a0}
.cmd-loop{background:rgba(162,155,254,.12);border:1px solid rgba(162,155,254,.2);color:#a29bfe}
.prog-list{min-height:80px;max-height:280px;overflow-y:auto;border:1px solid rgba(255,255,255,.06);border-radius:7px;padding:4px}
.prog-empty{font-size:10px;color:rgba(255,255,255,.15);padding:16px 8px;text-align:center}
.prog-item{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:5px;margin-bottom:2px;font-size:10px;font-weight:500;cursor:grab;position:relative;transition:all .1s}
.prog-item:hover{filter:brightness(1.15)}
.prog-item:active{cursor:grabbing}
.prog-item.active{outline:2px solid #00d4ff;outline-offset:1px;animation:progPulse .6s ease infinite alternate}
@keyframes progPulse{from{outline-color:rgba(0,212,255,.4);background:rgba(0,212,255,.08)}to{outline-color:rgba(0,212,255,.9);background:rgba(0,212,255,.18)}}
.prog-item .pnum{font-size:8px;color:rgba(255,255,255,.2);min-width:14px;font-family:monospace}
.prog-item .pdel{margin-left:auto;opacity:0;cursor:pointer;font-size:12px;padding:0 3px;transition:opacity .1s}
.prog-item:hover .pdel{opacity:.6}
.prog-item .pdel:hover{opacity:1;color:#ff6b6b}
.pi-move{background:rgba(9,132,227,.12);color:#74b9ff}
.pi-turn{background:rgba(108,92,231,.12);color:#a29bfe}
.pi-wait{background:rgba(253,203,110,.1);color:#fdcb6e}
.pi-stop{background:rgba(214,48,49,.1);color:#ff6b6b}
.pi-led{background:rgba(0,184,148,.1);color:#55efc4}
.pi-sound{background:rgba(0,184,148,.1);color:#55efc4}
.pi-sensor{background:rgba(225,112,85,.1);color:#fab1a0}
.pi-loop{background:rgba(162,155,254,.1);color:#a29bfe}
.pi-motor{background:rgba(9,132,227,.12);color:#74b9ff}
.pi-motor2{background:rgba(52,211,153,.12);color:#34d399}
.pi-master{background:rgba(168,85,247,.1);color:#c084fc}
.cmd-motor{background:rgba(9,132,227,.15);border:1px solid rgba(9,132,227,.25);color:#74b9ff}
.cmd-motor2{background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.25);color:#34d399}
.cmd-master{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.2);color:#c084fc}
/* Dropdown in program items */
.psel{height:22px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#1a1f2e;color:#fff;
    font-size:10px;font-family:'Outfit';padding:0 4px;outline:none;max-width:90px;cursor:pointer;margin-left:4px}
.psel:focus{border-color:#00d4ff;background:#1e2840}
.psel option{background:#1a1f2e;color:#fff;padding:2px 4px}
.pinp-count{width:36px;height:18px;border:1px solid rgba(255,255,255,.12);border-radius:3px;background:rgba(0,0,0,.3);
    color:#fff;font-size:10px;font-family:monospace;text-align:center;padding:0 2px;outline:none;margin-left:4px}
.pinp-count:focus{border-color:#00d4ff}
/* Inline param inputs */
.pparam{display:flex;align-items:center;gap:3px;margin-left:4px}
.pinp{width:42px;height:18px;border:1px solid rgba(255,255,255,.12);border-radius:3px;background:rgba(0,0,0,.3);color:#fff;font-size:10px;font-family:monospace;text-align:center;padding:0 2px;outline:none}
.pinp:focus{border-color:#00d4ff;background:rgba(0,212,255,.08)}
.pinp-dur{width:50px;height:10px;cursor:pointer;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.08);border-radius:3px;outline:none}
.pinp-dur::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:14px;border-radius:3px;background:#00d4ff;cursor:pointer}
.plbl{font-size:8px;color:rgba(255,255,255,.3);white-space:nowrap;min-width:30px}
.plbl2{font-size:8px;font-weight:700;color:rgba(255,255,255,.25)}
.pi-indent{margin-left:16px}
.run-btn{flex:1;padding:8px;border:none;border-radius:7px;font-family:'Outfit';font-size:12px;font-weight:700;cursor:pointer;background:rgba(0,184,148,.2);border:1px solid rgba(0,184,148,.3);color:#00b894;transition:all .12s}
.run-btn:hover{background:rgba(0,184,148,.3);transform:scale(1.02)}
.run-btn:disabled{opacity:.3;cursor:not-allowed}
.stop-prog-btn{padding:8px 14px;border:none;border-radius:7px;font-family:'Outfit';font-size:12px;font-weight:700;cursor:pointer;background:rgba(214,48,49,.2);border:1px solid rgba(214,48,49,.3);color:#ff6b6b}
.mini-btn{padding:2px 8px;border:none;border-radius:4px;font-family:'Outfit';font-size:8px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4)}
.mini-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.prog-output{font-size:10px;font-family:monospace;color:rgba(255,255,255,.3);padding:6px 8px;background:rgba(0,0,0,.2);border-radius:6px;min-height:32px;margin-top:4px;line-height:1.5}

/* Footer */
.ft{position:fixed;bottom:0;left:0;right:0;height:20px;background:#1e2a3a;border-top:1px solid rgba(0,212,255,.06);display:flex;align-items:center;justify-content:center;font-size:8px;color:rgba(255,255,255,.15);z-index:100}

/* Collapse sections */
.collapse-section{margin-bottom:4px}
.collapse-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:none;border-radius:6px;background:rgba(255,255,255,.02);cursor:pointer;font-family:'Outfit';font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.3);transition:all .12s}
.collapse-toggle:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.5)}
.collapse-arrow{font-size:10px;transition:transform .2s}
.collapse-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.collapse-body.open{max-height:500px}

/* Step guide */
.step-guide{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.5);border:1px solid rgba(0,212,255,.12);border-radius:10px;padding:6px 14px;pointer-events:none}
.step{display:flex;align-items:center;gap:5px;opacity:.35;transition:opacity .3s}
.step[data-active="true"]{opacity:1}
.step-num{width:20px;height:20px;border-radius:50%;background:rgba(0,212,255,.15);border:1px solid rgba(0,212,255,.3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#00d4ff}
.step[data-active="true"] .step-num{background:rgba(0,212,255,.3);border-color:#00d4ff}
.step-text{font-size:10px;color:rgba(255,255,255,.6);font-weight:500}
.step[data-active="true"] .step-text{color:#fff}
.step-arrow{font-size:10px;color:rgba(255,255,255,.15)}

/* Command groups */
.cmd-group{margin-bottom:4px}
.cmd-group-label{font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(0,212,255,.4);margin-bottom:4px;padding-left:2px}

/* BLE Connection Drawer */
.ble-global{font-size:9px;color:rgba(255,255,255,.3)}
.ble-global-on{color:#00b894;font-weight:600}
.btn-ble-header{background:rgba(52,152,219,.15);border:1px solid rgba(52,152,219,.25);color:#3498db;padding:6px 13px;border-radius:6px;font-family:'Outfit';font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-ble-header:hover{background:rgba(52,152,219,.25);border-color:#3498db}
.ble-header-on{background:rgba(0,184,148,.15)!important;border-color:rgba(0,184,148,.3)!important;color:#00b894!important}

/* Drawer overlay */
.ble-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:8000;opacity:0;pointer-events:none;transition:opacity .3s}
.ble-overlay.open{opacity:1;pointer-events:auto}

/* Drawer panel */
.ble-drawer{position:fixed;top:0;right:-380px;width:360px;height:100%;background:#1a2332;border-left:1px solid rgba(0,212,255,.12);z-index:8500;transition:right .3s ease;display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.4)}
.ble-drawer.open{right:0}

.ble-drawer-header{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;color:#fff}
.ble-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s}
.ble-close:hover{background:rgba(255,255,255,.06);color:#fff}

.ble-drawer-body{flex:1;overflow-y:auto;padding:16px 16px}

/* Group section */
.ble-group-section{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.ble-group-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:6px;display:block}
.ble-group-input{flex:1;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(0,0,0,.25);color:#fff;font-family:'Outfit';font-size:14px;text-align:center;letter-spacing:4px}
.ble-group-input::placeholder{color:rgba(255,255,255,.2);letter-spacing:2px}
.ble-group-clear{padding:8px 14px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);font-family:'Outfit';font-size:12px;cursor:pointer}
.ble-group-clear:hover{background:rgba(255,255,255,.08)}
.ble-group-hint{font-size:10px;color:rgba(255,255,255,.2);margin-top:6px}

/* Block cards */
.ble-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);margin-bottom:8px;transition:all .15s}
.ble-card:hover{background:rgba(255,255,255,.04)}
.ble-card-icon{font-size:28px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:10px}
.ble-card-info{flex:1;min-width:0}
.ble-card-name{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px}
.ble-card-state{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.35)}
.ble-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:background .3s}
.ble-disconnected{background:rgba(255,255,255,.15)}
.ble-connected{background:#00b894;box-shadow:0 0 6px rgba(0,184,148,.5)}
.ble-searching,.ble-reconnecting{background:#fdcb6e;animation:blepulse 1s infinite}
@keyframes blepulse{0%,100%{opacity:1}50%{opacity:.3}}
.ble-card-btn{padding:8px 18px;border:none;border-radius:8px;font-family:'Outfit';font-size:12px;font-weight:600;cursor:pointer;background:rgba(52,152,219,.2);border:1px solid rgba(52,152,219,.3);color:#3498db;transition:all .15s;flex-shrink:0}
.ble-card-btn:hover{background:rgba(52,152,219,.3);transform:scale(1.02)}
.ble-card-btn-on{background:rgba(0,184,148,.15);border-color:rgba(0,184,148,.3);color:#00b894}
.ble-card-btn-on:hover{background:rgba(0,184,148,.25)}
.ble-card-btn-wait{background:rgba(253,203,110,.12);border-color:rgba(253,203,110,.2);color:#fdcb6e;cursor:default}

/* ═══════════════════════════════════════════
   BLOCK LAB — DOT MATRIX EDITOR
   ═══════════════════════════════════════════ */

/* Tab separator */
.tab-sep{width:1px;height:18px;background:rgba(255,255,255,.08);margin:0 4px}
.mtab-lab{color:rgba(251,191,36,.5)!important}
.mtab-lab.active{background:rgba(251,191,36,.15)!important;color:#fbbf24!important}
.mtab-lab:hover{color:rgba(251,191,36,.7)!important}

/* Main view container — now has modbar row + module panel row */
.bl-view{display:none;grid-column:1/-1;
    background:#0d1520;
    grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
.bl-view.active{display:grid}

/* Left panel */
.bl-left{background:#161f2d;border-right:1px solid rgba(251,191,36,.08);padding:10px 8px;overflow-y:auto}
.bl-section-title{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(251,191,36,.4);margin:0 0 8px 2px}

/* Category tabs */
.bl-cat-tabs{display:flex;gap:2px;background:rgba(0,0,0,.3);border-radius:7px;padding:2px;margin-bottom:8px}
.bl-cat-btn{flex:1;padding:5px 4px;border:none;border-radius:5px;font-family:'Outfit';font-size:9px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.35);transition:all .15s;white-space:nowrap}
.bl-cat-btn:hover{color:rgba(255,255,255,.6)}
.bl-cat-btn.active{background:rgba(251,191,36,.12);color:#fbbf24}
.bl-cat-content{display:none}.bl-cat-content.active{display:block}

/* Preset grid */
.bl-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.bl-preset-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border:none;border-radius:6px;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);transition:all .12s}
.bl-preset-btn:hover{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2);transform:scale(1.05)}
.bl-preset-btn canvas{border-radius:3px;image-rendering:pixelated}
.bl-preset-label{font-size:7px;color:rgba(255,255,255,.3);font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}

/* Animation presets list */
.bl-anim-list{display:flex;flex-direction:column;gap:3px}
.bl-anim-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:none;border-radius:6px;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);transition:all .12s;text-align:left;font-family:'Outfit'}
.bl-anim-btn:hover{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.15)}
.bl-anim-btn.adv{border-left:2px solid rgba(162,155,254,.3)}
.bl-anim-icon{font-size:18px;flex-shrink:0}
.bl-anim-name{font-size:10px;font-weight:600;color:rgba(255,255,255,.6);flex:1}
.bl-anim-meta{font-size:8px;color:rgba(255,255,255,.2);font-family:monospace}

/* ── Center panel ── */
.bl-center{display:flex;flex-direction:column;align-items:center;padding:12px 16px;gap:12px;overflow-y:auto;
    background:radial-gradient(ellipse at 50% 40%,rgba(251,191,36,.03) 0%,#0d1520 70%)}

/* Toolbar */
.bl-toolbar{display:flex;align-items:center;gap:4px;padding:6px 10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:10px;flex-wrap:wrap;justify-content:center}
.bl-tool-group{display:flex;gap:2px}
.bl-tool-sep{width:1px;height:22px;background:rgba(255,255,255,.06);margin:0 4px}
.bl-tool-btn{width:34px;height:34px;border:none;border-radius:7px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);transition:all .12s}
.bl-tool-btn:hover{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.2)}
.bl-tool-btn.active{background:rgba(251,191,36,.2);border-color:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.2)}
.bl-tbtn{width:30px;height:30px;border:none;border-radius:6px;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.5);transition:all .12s}
.bl-tbtn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.bl-tbtn:active{transform:scale(0.92)}
.bl-tbtn:disabled{opacity:.25;cursor:not-allowed}

/* ── 8×8 Grid ── */
.bl-grid-wrap{padding:16px;background:rgba(0,0,0,.4);border:1px solid rgba(251,191,36,.1);border-radius:16px;
    box-shadow:0 0 40px rgba(251,191,36,.03),inset 0 0 30px rgba(0,0,0,.3)}
.bl-grid{display:grid;grid-template-columns:24px repeat(8,1fr);grid-template-rows:24px repeat(8,1fr);gap:3px;
    width:min(380px,calc(100vw - 520px));height:min(380px,calc(100vw - 520px));touch-action:none}
.bl-col-label,.bl-row-label{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:rgba(251,191,36,.25);font-family:monospace}
.bl-cell{border-radius:4px;cursor:crosshair;transition:background .06s,box-shadow .06s;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);
    aspect-ratio:1;min-width:0}
.bl-cell:hover{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3)}
.bl-cell.on{background:radial-gradient(circle,#ffe066 30%,rgba(255,187,0,.5) 70%);
    border-color:rgba(255,221,68,.6);
    box-shadow:0 0 8px rgba(255,187,0,.4),0 0 16px rgba(255,187,0,.15)}

/* Preview + Output row */
.bl-preview-row{display:flex;gap:14px;align-items:flex-start;width:100%;max-width:420px}
.bl-preview-box{display:flex;flex-direction:column;align-items:center;gap:4px}
#blPreview{border-radius:10px;border:1px solid rgba(251,191,36,.12);background:#0a0a0a}
.bl-preview-label{font-size:8px;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:1px}

.bl-output-box{flex:1;display:flex;flex-direction:column;gap:6px}
.bl-out-section{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:6px 8px}
.bl-out-label{font-size:8px;font-weight:600;color:rgba(251,191,36,.35);letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.bl-out-val{font-family:'Courier New',monospace;font-size:11px;color:#fbbf24;word-break:break-all;line-height:1.4}
.bl-out-bytes{font-size:9px;color:rgba(251,191,36,.6)}
.bl-out-actions{display:flex;gap:4px;flex-wrap:wrap}
.bl-action-btn{padding:6px 10px;border:none;border-radius:6px;font-family:'Outfit';font-size:10px;font-weight:600;cursor:pointer;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2);color:#fbbf24;transition:all .12s}
.bl-action-btn:hover{background:rgba(251,191,36,.2);border-color:#fbbf24;transform:scale(1.02)}
.bl-send-btn{background:rgba(0,184,148,.12);border-color:rgba(0,184,148,.2);color:#55efc4}
.bl-send-btn:hover{background:rgba(0,184,148,.2);border-color:#00b894}
.bl-clear-ble-btn{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.4)}
.bl-clear-ble-btn:hover{background:rgba(255,255,255,.08)}

/* Keyboard hints */
.bl-hints{display:flex;gap:8px;font-size:9px;color:rgba(255,255,255,.12);justify-content:center;flex-wrap:wrap}
.bl-hints .k{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:3px;padding:0 4px;font-family:monospace;font-size:8px;margin-right:2px}

/* ── Right panel ── */
.bl-right{background:#161f2d;border-left:1px solid rgba(251,191,36,.08);padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}

/* Tabs */
.bl-tabs{display:flex;gap:2px;background:rgba(0,0,0,.3);border-radius:7px;padding:2px}
.bl-tab-btn{flex:1;padding:6px 8px;border:none;border-radius:5px;font-family:'Outfit';font-size:10px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.35);transition:all .15s}
.bl-tab-btn:hover{color:rgba(255,255,255,.6)}
.bl-tab-btn.active{background:rgba(251,191,36,.12);color:#fbbf24}
.bl-tab-content{display:none}.bl-tab-content.active{display:block}

/* Animation controls */
.bl-anim-controls{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.bl-anim-ctrl-btn{width:32px;height:32px;border:none;border-radius:7px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.15);color:#fbbf24;transition:all .12s}
.bl-anim-ctrl-btn:hover{background:rgba(251,191,36,.2);border-color:#fbbf24;transform:scale(1.05)}
.bl-anim-ctrl-btn.playing{background:rgba(214,48,49,.2);border-color:rgba(214,48,49,.4);color:#ff6b6b}
.bl-frame-count{font-size:9px;color:rgba(255,255,255,.2);margin-left:auto;font-family:monospace}

/* Timeline */
.bl-timeline{display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 240px);overflow-y:auto}
.bl-tframe{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:7px;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);transition:all .12s}
.bl-tframe:hover{background:rgba(251,191,36,.06);border-color:rgba(251,191,36,.12)}
.bl-tframe.active{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25);box-shadow:0 0 6px rgba(251,191,36,.1)}
.bl-tframe.playing{border-color:#00d4ff;background:rgba(0,212,255,.1);box-shadow:0 0 6px rgba(0,212,255,.2)}
.bl-tframe-cv{border-radius:4px;flex-shrink:0;image-rendering:pixelated}
.bl-tframe-num{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);min-width:16px;text-align:center}
.bl-tframe-ms{width:52px;padding:3px 4px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(0,0,0,.3);color:rgba(251,191,36,.6);font-family:monospace;font-size:9px;text-align:center}
.bl-tframe-ms:focus{border-color:rgba(251,191,36,.3);outline:none}

/* Export section */
.bl-export-section{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.04);border-radius:8px;padding:8px}
.bl-code-output{font-family:'Courier New',monospace;font-size:9px;color:rgba(251,191,36,.5);background:rgba(0,0,0,.3);border-radius:5px;padding:6px 8px;margin-top:4px;word-break:break-all;line-height:1.5;max-height:120px;overflow-y:auto}

/* ── Module Selector Bar ── */
.bl-modbar{grid-column:1/-1;display:flex;align-items:center;gap:3px;padding:4px 12px;background:#111a26;border-bottom:1px solid rgba(251,191,36,.1)}
.bl-module-btn{padding:7px 16px;border:none;border-radius:7px;font-family:'Outfit';font-size:11px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.4);transition:all .15s}
.bl-module-btn:hover{background:rgba(251,191,36,.08);color:rgba(255,255,255,.7)}
.bl-module-btn.active{background:rgba(251,191,36,.15);border-color:rgba(251,191,36,.4);color:#fbbf24}
.bl-ble-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:4px;vertical-align:middle;background:rgba(255,255,255,.15);transition:background .3s}
.bl-ble-dot.on{background:#00e676;box-shadow:0 0 4px #00e676}
.bl-ble-bar{display:flex;gap:4px;padding:0 8px 4px;flex-wrap:wrap}
.bl-ble-strip{display:flex;align-items:center;gap:6px;padding:3px 8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:6px;font-size:9px;color:rgba(255,255,255,.3)}
.bl-ble-strip .bl-ble-conn{padding:2px 8px;border:none;border-radius:4px;font-size:9px;font-family:'Outfit';cursor:pointer;background:rgba(0,212,255,.12);color:#00d4ff;margin-left:auto;transition:all .12s}
.bl-ble-strip .bl-ble-conn:hover{background:rgba(0,212,255,.25)}
.bl-ble-strip .bl-ble-conn.on{background:rgba(0,230,118,.12);color:#00e676}

/* Module panels */
.bl-module-panel{display:none;grid-column:1/-1;grid-template-columns:210px 1fr 240px;grid-template-rows:1fr}
.bl-module-panel.active{display:grid}

/* ═══ PIANO ═══ */
.piano-wrap{display:flex;justify-content:center;padding:20px 10px;overflow-x:auto}
.piano-keyboard{display:flex;position:relative;height:200px;gap:0}
.piano-key{position:relative;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:all .08s;user-select:none;touch-action:none}
.piano-key.white{width:40px;height:200px;background:linear-gradient(180deg,#f0f0f0,#fff);border:1px solid #bbb;border-radius:0 0 6px 6px;z-index:1}
.piano-key.white:hover{background:linear-gradient(180deg,#e8e8e8,#f8f8f8)}
.piano-key.white.active{background:linear-gradient(180deg,#fbbf24,#fde68a)!important;border-color:#f59e0b}
.piano-key.black{width:28px;height:130px;background:linear-gradient(180deg,#1a1a1a,#333);border:1px solid #000;border-radius:0 0 4px 4px;margin:0 -14px;z-index:2}
.piano-key.black:hover{background:linear-gradient(180deg,#2a2a2a,#444)}
.piano-key.black.active{background:linear-gradient(180deg,#b45309,#f59e0b)!important}
.piano-label{font-size:8px;font-weight:600;color:rgba(0,0,0,.3);pointer-events:none}
.piano-key.black .piano-label{color:rgba(255,255,255,.4)}
.piano-info-row{display:flex;justify-content:center;padding:8px}
.piano-info{font-size:11px;font-family:monospace;color:rgba(251,191,36,.5);background:rgba(0,0,0,.3);border-radius:6px;padding:6px 14px}
.piano-fx-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 16px}
.piano-fx-btn{padding:8px 14px;border:none;border-radius:7px;font-family:'Outfit';font-size:12px;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);transition:all .12s}
.piano-fx-btn:hover{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.2);color:#fbbf24}
.piano-mel-list{display:flex;flex-direction:column;gap:3px}
.piano-mel-btn{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border:none;border-radius:6px;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-family:'Outfit';transition:all .12s;text-align:left}
.piano-mel-btn:hover{background:rgba(244,114,182,.08);border-color:rgba(244,114,182,.15)}
.piano-mel-btn.adv{border-left:2px solid rgba(162,155,254,.3)}
.piano-mel-btn.playing{background:rgba(244,114,182,.15);border-color:#f472b6;animation:blepulse 1s infinite}
.mel-icon{font-size:16px}.mel-name{font-size:10px;font-weight:600;color:rgba(255,255,255,.5)}
.piano-help{font-size:10px;color:rgba(255,255,255,.25);line-height:1.8;padding:4px}
.piano-help b{color:rgba(255,255,255,.4)}

/* ═══ COLOR FX ═══ */
.color-main{display:flex;flex-direction:column;align-items:center;padding:16px;gap:14px}
.color-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.color-preview{width:140px;height:140px;border-radius:50%;background:#000;border:3px solid rgba(255,255,255,.1);box-shadow:0 0 30px rgba(0,0,0,.5);transition:background .15s,box-shadow .3s}
.color-values{font-size:10px;font-family:monospace;color:rgba(255,255,255,.3)}
.color-sliders{width:100%;max-width:360px;display:flex;flex-direction:column;gap:8px}
.color-slider-row{display:flex;align-items:center;gap:8px}
.color-slider-row label{font-size:12px;font-weight:700;color:rgba(255,255,255,.3);width:16px}
.cslider{flex:1;height:6px;-webkit-appearance:none;appearance:none;border-radius:3px;outline:none;cursor:pointer}
.cslider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid #fff}
.cslider-r{background:linear-gradient(90deg,#000,#f00)}.cslider-r::-webkit-slider-thumb{background:#f00}
.cslider-g{background:linear-gradient(90deg,#000,#0f0)}.cslider-g::-webkit-slider-thumb{background:#0f0}
.cslider-b{background:linear-gradient(90deg,#000,#00f)}.cslider-b::-webkit-slider-thumb{background:#66f}
.csv{font-size:10px;font-family:monospace;color:rgba(255,255,255,.3);min-width:24px;text-align:right}
.color-preset-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;max-width:360px;width:100%}
.color-swatch{width:100%;aspect-ratio:1;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all .12s}
.color-swatch:hover{transform:scale(1.15);border-color:rgba(255,255,255,.3)}
.cfx-list{display:flex;flex-direction:column;gap:3px}
.cfx-btn{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border:none;border-radius:6px;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-family:'Outfit';transition:all .12s;text-align:left}
.cfx-btn:hover{background:rgba(167,139,250,.08);border-color:rgba(167,139,250,.15)}
.cfx-btn.adv{border-left:2px solid rgba(162,155,254,.3)}
.cfx-btn.playing{background:rgba(167,139,250,.15);border-color:#a78bfa;animation:blepulse 1s infinite}
.cfx-icon{font-size:16px}.cfx-name{font-size:10px;font-weight:600;color:rgba(255,255,255,.5);flex:1}
.cfx-meta{font-size:8px;color:rgba(255,255,255,.2);font-family:monospace}

/* ═══ MOTOR ═══ */
.motor-main{display:flex;gap:20px;justify-content:center;padding:24px 16px;flex-wrap:wrap}
.motor-card{width:280px;background:rgba(0,0,0,.3);border:1px solid rgba(52,211,153,.1);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.motor-card-title{font-size:12px;font-weight:700;color:rgba(52,211,153,.6)}
.motor-gauge{width:100%;height:28px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:background .15s}
.motor-gval{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);font-family:monospace}
.motor-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,#f472b6 0%,#555 50%,#34d399 100%);outline:none;cursor:pointer}
.motor-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #34d399;cursor:pointer}
.motor-wheel-wrap{width:60px;height:60px;display:flex;align-items:center;justify-content:center}
.motor-wheel{font-size:48px;color:rgba(255,255,255,.15)}
.motor-wheel.spinning{animation:motorSpin 1s linear infinite}
@keyframes motorSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.motor-dpad{padding:8px}
.motor-dpad-grid{display:grid;grid-template-columns:60px 60px 60px;grid-template-rows:60px 60px 60px;gap:4px}
.motor-dbtn{border:none;border-radius:8px;font-size:14px;cursor:pointer;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.15);color:rgba(52,211,153,.6);font-family:'Outfit';font-weight:700;transition:all .12s;line-height:1.2}
.motor-dbtn:hover{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.3)}
.motor-dbtn:active{transform:scale(.95)}
.motor-dbtn small{font-size:7px;font-weight:400;opacity:.5}
.motor-stop{background:rgba(214,48,49,.12);border-color:rgba(214,48,49,.2);color:#ff6b6b}
.motor-stop:hover{background:rgba(214,48,49,.2)}
.motor-bytes-row{display:flex;justify-content:center;padding:0 16px}

/* ═══ SENSOR ═══ */
.sensor-main{display:flex;gap:16px;justify-content:center;padding:24px 16px;flex-wrap:wrap}
.sensor-card{width:260px;background:rgba(0,0,0,.3);border:1px solid rgba(34,211,238,.1);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.sensor-card-title{font-size:12px;font-weight:700;color:rgba(34,211,238,.6)}
.sensor-status{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.4)}
.sensor-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .2s}
.sensor-dot.on{background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.5)}
.sensor-bar-bg{width:100%;height:8px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden}
.sensor-bar{height:100%;border-radius:4px;transition:width .15s}
.prox-bar{background:#34d399;width:0}
.light-bar{background:#fbbf24;width:0}
.sensor-light-val{font-family:monospace;font-size:16px;font-weight:700;color:#fbbf24}
.sensor-sim-row{display:flex;align-items:center;gap:8px;font-size:9px;color:rgba(255,255,255,.2)}
.sensor-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;border-radius:2px;background:rgba(255,255,255,.08);outline:none;cursor:pointer}
.sensor-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#22d3ee;cursor:pointer}

/* ── Responsive ── */
@media(max-width:900px){
    .bl-module-panel.active{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
    .bl-module-panel .bl-left{display:none}
    .bl-module-panel .bl-right{max-height:200px}
    .bl-grid{width:min(320px,90vw);height:min(320px,90vw)}
    .bl-modbar{flex-wrap:wrap}
}

/* ── Tablet ── */
@media(max-width:768px){
    .hdr{padding:4px 6px}
    .hdr .logo{font-size:12px}
    .hdr .btn{padding:4px 8px;font-size:10px}
    .hdr .btn span{display:none}
    .mtab{padding:4px 8px;font-size:11px}
    .mtab span{display:none}
    .lpan{width:160px;font-size:11px}
    .rpan{width:180px;font-size:11px}
    .blk-btn .th img{width:32px;height:32px}
    .dpad-btn{width:48px;height:48px;font-size:18px}
    .dpad-stop{width:44px;height:44px;font-size:10px}
}

/* ── Mobile ── */
@media(max-width:480px){
    .hdr{flex-wrap:wrap;gap:2px}
    .hright{flex-wrap:wrap;gap:2px}
    .lpan{position:fixed;left:0;top:40px;bottom:0;width:140px;z-index:200;transform:translateX(-100%);transition:transform .3s}
    .lpan.mobile-open{transform:translateX(0)}
    .rpan{position:fixed;right:0;top:40px;bottom:0;width:160px;z-index:200;transform:translateX(100%);transition:transform .3s}
    .rpan.mobile-open{transform:translateX(0)}
    .mode-tabs{gap:2px}
    .mtab{padding:3px 6px;font-size:10px}
    .dpad-grid{gap:4px}
    .dpad-btn{width:56px;height:56px;font-size:22px}
    .dpad-stop{width:50px;height:50px}
    .cmd-btn{padding:6px 10px;font-size:11px;min-height:36px}
    .prog-item{padding:6px 8px;font-size:11px;min-height:36px}
}


/* ===== STAGE SYSTEM CSS ===== */

/* Stage Dropdown */
.stage-dropdown{
    display:none;position:absolute;top:100%;right:0;z-index:7500;
    min-width:240px;background:rgba(10,16,24,.96);backdrop-filter:blur(12px);
    border:1px solid rgba(0,212,255,.2);border-radius:10px;padding:6px 0;
    box-shadow:0 12px 40px rgba(0,0,0,.6);margin-top:4px;
}
.stage-dropdown.show{display:block;animation:dropIn .2s ease;}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.stage-opt{
    display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;
    transition:background .15s;
}
.stage-opt:hover{background:rgba(0,212,255,.1);}
.stage-icon{font-size:14px;min-width:32px;text-align:center;}
.stage-label{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;}
.stage-desc{font-size:10px;color:rgba(255,255,255,.3);margin-left:auto;white-space:nowrap;}
.stage-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 10px;}

/* Reroll button inside obstacle button */
.reroll-btn{
    display:inline-block;background:rgba(0,212,255,.15);border-radius:4px;
    padding:1px 6px;margin-left:4px;font-size:12px;cursor:pointer;
    transition:background .15s;
}
.reroll-btn:hover{background:rgba(0,212,255,.3);}

/* Score HUD */
.score-hud{
    position:absolute;top:80px;right:12px;z-index:10;
    background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
    border:1px solid rgba(0,212,255,.15);border-radius:10px;
    padding:10px 14px;min-width:100px;font-family:Outfit;
}
.shud-level{font-size:13px;font-weight:700;color:#00d4ff;margin-bottom:4px;}
.shud-stars{font-size:12px;color:#feca57;margin-bottom:2px;}
.shud-score{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:2px;}
.shud-goal{font-size:11px;color:#00ff88;margin-bottom:2px;}
.shud-time{font-size:11px;color:rgba(255,255,255,.5);margin-bottom:1px;}
.shud-seed{font-size:9px;color:rgba(255,255,255,.15);margin-top:2px;font-family:monospace;}

/* Clear Overlay */
.clear-overlay{
    display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;
    background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
    justify-content:center;align-items:center;
}
.clear-overlay.show{display:flex;}
.clear-content{
    background:rgba(10,16,24,.95);border:2px solid rgba(0,255,136,.3);
    border-radius:16px;padding:28px 36px;text-align:center;min-width:280px;
    box-shadow:0 0 60px rgba(0,255,136,.1);
}
.clear-title{
    font-size:28px;font-weight:800;
    background:linear-gradient(135deg,#00ff88,#00d4ff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:16px;
}
.clear-stats{margin-bottom:20px;}
.clear-row{
    display:flex;justify-content:space-between;padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    font-size:13px;color:rgba(255,255,255,.7);
}
.clear-row b{color:#00ff88;}
.clear-actions{display:flex;gap:8px;justify-content:center;}
.clear-btn{
    padding:10px 20px;border:none;border-radius:8px;font-family:Outfit;
    font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;
}
.clear-retry{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15);}
.clear-retry:hover{background:rgba(255,255,255,.2);}
.clear-next{background:rgba(0,255,136,.2);color:#00ff88;border:1px solid rgba(0,255,136,.3);}
.clear-next:hover{background:rgba(0,255,136,.35);}

@keyframes clearPop{
    0%{opacity:0;transform:scale(0.8)}
    50%{transform:scale(1.05)}
    100%{opacity:1;transform:scale(1)}
}

/* ===== GEAR SPEED SELECTOR ===== */
.gear-row{
    display:flex;gap:3px;margin-top:5px;justify-content:center;
}
.gear-btn{
    width:42px;height:24px;border:1px solid rgba(255,255,255,.12);border-radius:5px;
    background:rgba(255,255,255,.05);color:#fff;font-size:11px;cursor:pointer;
    transition:all .15s;display:flex;align-items:center;justify-content:center;
    padding:0;line-height:1;
}
.gear-btn:hover{background:rgba(0,212,255,.15);border-color:rgba(0,212,255,.3);}
.gear-btn.active{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.5);box-shadow:0 0 8px rgba(0,212,255,.2);}

/* ===== STAR PULSE (collect animation) ===== */
.star-pulse{
    position:absolute;width:40px;height:40px;border-radius:50%;
    background:radial-gradient(circle,rgba(254,202,87,.8),rgba(254,202,87,0) 70%);
    pointer-events:none;z-index:50;
    animation:starPulseAnim .5s ease-out forwards;
}
@keyframes starPulseAnim{
    0%{transform:translate(-50%,-50%) scale(0.3);opacity:1}
    60%{transform:translate(-50%,-50%) scale(2.5);opacity:.6}
    100%{transform:translate(-50%,-50%) scale(3.5);opacity:0}
}

/* ===== PERFORMANCE MODE BUTTON ===== */
.btn-perf{font-size:10px!important;padding:4px 8px!important;opacity:.6;transition:all .15s;}
.btn-perf:hover{opacity:1;}
.btn-perf.active{background:rgba(255,200,0,.15)!important;border-color:rgba(255,200,0,.4)!important;color:#feca57!important;opacity:1;}

/* ===== MUTE BUTTON ===== */
.btn-mute{font-size:12px!important;padding:4px 6px!important;min-width:28px;opacity:.6;transition:all .15s;}
.btn-mute:hover{opacity:1;}
.btn-mute.muted{opacity:1;color:#ff6b6b!important;}

/* ===== SHORTCUT HELP MODAL ===== */
.shortcut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:10002;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.shortcut-modal{position:relative;width:90%;max-width:560px;background:#1e2a3a;border-radius:16px;border:1px solid rgba(0,212,255,.2);padding:28px 32px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:slideUp .3s ease-out;max-height:80vh;overflow-y:auto}
.shortcut-modal h3{font-size:18px;font-weight:700;color:#00d4ff;margin:0 0 16px;text-align:center}
.shortcut-section{margin-bottom:14px}
.shortcut-section h4{font-size:13px;font-weight:600;color:rgba(255,255,255,.5);margin:0 0 6px;text-transform:uppercase;letter-spacing:1px}
.shortcut-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:rgba(255,255,255,.8)}
.shortcut-row kbd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:2px 8px;font-family:'Outfit';font-size:12px;color:#00d4ff;min-width:28px;text-align:center}
.shortcut-hint{position:fixed;bottom:8px;right:8px;font-size:11px;color:rgba(255,255,255,.2);z-index:5;pointer-events:none}

/* ===== WARNING MODAL ===== */
.warn-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:10001;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.warn-modal{position:relative;width:90%;max-width:420px;background:#1e2a3a;border-radius:16px;border:1px solid rgba(255,180,0,.3);padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:slideUp .3s ease-out;text-align:center}
.warn-icon{font-size:48px;margin-bottom:16px}
.warn-title{font-size:18px;font-weight:700;color:#ffb400;margin-bottom:12px}
.warn-msg{font-size:14px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:24px}
.warn-ok{padding:10px 32px;border:none;border-radius:8px;background:#ffb400;color:#0d1520;font-family:'Outfit';font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.warn-ok:hover{background:#ffc933;transform:scale(1.05)}

/* ===== TUTORIAL MODAL ===== */
.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.tutorial-modal{position:relative;width:90%;max-width:500px;background:#1e2a3a;border-radius:16px;border:1px solid rgba(0,212,255,.2);padding:40px 32px 32px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:slideUp .3s ease-out}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.tutorial-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.6);font-size:20px;cursor:pointer;transition:all .2s;font-family:'Outfit'}
.tutorial-close:hover{background:rgba(255,255,255,.2);color:#fff}
.tutorial-content{min-height:280px;display:flex;flex-direction:column}
.tutorial-step{text-align:center;display:none}
.tutorial-step.active{display:block;animation:fadeIn .3s ease-in}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tutorial-icon{font-size:64px;margin-bottom:16px}
.tutorial-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:12px}
.tutorial-desc{font-size:14px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:24px;flex-grow:1;display:flex;align-items:center;justify-content:center}
.tutorial-nav{display:flex;gap:12px;justify-content:center;margin-top:auto}
.tut-btn{padding:10px 24px;border:none;border-radius:8px;font-family:'Outfit';font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.tut-prev,.tut-next{background:rgba(0,212,255,.12);color:#00d4ff;border:1px solid rgba(0,212,255,.3)}
.tut-prev:hover,.tut-next:hover{background:rgba(0,212,255,.25);border-color:rgba(0,212,255,.6)}
.tut-finish{background:#00d4ff;color:#0d1520;font-weight:700;border:none}
.tut-finish:hover{background:#33ddff;transform:scale(1.05)}
.tutorial-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:all .2s}
.dot.active{background:#00d4ff;width:28px;border-radius:5px}

/* === ACHIEVEMENT MODAL === */
.ach-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);opacity:0;transition:opacity .4s;cursor:pointer}
.ach-overlay.show{opacity:1}
.ach-modal{text-align:center;padding:32px 48px;background:rgba(13,21,32,.97);border:2px solid rgba(0,212,255,.5);border-radius:20px;box-shadow:0 0 60px rgba(0,212,255,.2),0 20px 60px rgba(0,0,0,.5);transform:scale(.7);transition:transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.ach-overlay.show .ach-modal{transform:scale(1)}
.ach-modal-icon{font-size:64px;margin-bottom:12px;animation:achBounce .6s ease}
.ach-modal-title{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#00d4ff;font-weight:700}
.ach-modal-name{font-size:22px;font-weight:700;color:#fff;margin-top:8px}
.ach-modal-progress{font-size:11px;color:#888;margin-top:8px}
@keyframes achBounce{0%{transform:scale(0) rotate(-20deg)}50%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}

/* === AI PANEL === */
.ai-modes{display:flex;gap:4px;margin-bottom:8px}
.ai-mode-btn{flex:1;padding:8px 4px;border:1px solid rgba(0,212,255,.2);border-radius:8px;background:rgba(0,212,255,.05);color:#aaa;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.ai-mode-btn.active{background:rgba(0,212,255,.15);color:#00d4ff;border-color:rgba(0,212,255,.5);box-shadow:0 0 8px rgba(0,212,255,.2)}
.ai-mode-btn:disabled{opacity:.4;cursor:not-allowed}
.ai-btns{display:flex;gap:6px;margin-bottom:8px}
.ai-start{flex:1;padding:10px;border:none;border-radius:8px;background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s}
.ai-start:hover{transform:scale(1.03)}
.ai-stop{flex:1;padding:10px;border:none;border-radius:8px;background:linear-gradient(135deg,#e17055,#d63031);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.ai-log{height:100px;overflow-y:auto;background:rgba(0,0,0,.3);border-radius:6px;padding:6px 8px;font-family:'Fira Code',monospace;font-size:10px;color:#74b9ff;line-height:1.5;white-space:pre-wrap}

/* === CODE TAB (Block / Python) === */
.code-tabs{display:flex;gap:2px}
.code-tab{padding:6px 14px;border:1px solid rgba(255,255,255,.1);border-radius:8px 8px 0 0;background:rgba(255,255,255,.03);color:#888;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;border-bottom:none}
.code-tab.active{background:rgba(0,212,255,.1);color:#00d4ff;border-color:rgba(0,212,255,.3)}

/* === PYTHON EDITOR === */
.py-editor-col{display:flex;flex-direction:column;height:100%;gap:0;padding:0;background:#1e1e2e;border-radius:8px;overflow:hidden}

/* API Quick Reference Bar */
.py-api-bar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#181825;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.py-api-sep{width:1px;height:16px;background:rgba(255,255,255,.08);margin:0 2px}
.py-api-title{font-size:9px;font-weight:700;color:#585b70;text-transform:uppercase;letter-spacing:1px;margin-right:2px}
.py-api-chip{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;background:rgba(137,180,250,.1);color:#89b4fa;border:1px solid rgba(137,180,250,.15);white-space:nowrap}
.py-api-chip:hover{background:rgba(137,180,250,.25);transform:translateY(-1px)}
.py-api-chip:active{transform:scale(.95)}
.py-api-chip.s{background:rgba(249,226,175,.1);color:#f9e2af;border-color:rgba(249,226,175,.15)}
.py-api-chip.s:hover{background:rgba(249,226,175,.25)}
.py-api-chip.l{background:rgba(166,227,161,.1);color:#a6e3a1;border-color:rgba(166,227,161,.15)}
.py-api-chip.l:hover{background:rgba(166,227,161,.25)}
.py-api-chip.m{background:rgba(245,194,231,.1);color:#f5c2e7;border-color:rgba(245,194,231,.15)}
.py-api-chip.m:hover{background:rgba(245,194,231,.25)}
.py-api-chip.snd{background:rgba(203,166,247,.1);color:#cba6f7;border-color:rgba(203,166,247,.15)}
.py-api-chip.snd:hover{background:rgba(203,166,247,.25)}
.py-api-chip.ai{background:rgba(180,130,255,.1);color:#b482ff;border-color:rgba(180,130,255,.15)}
.py-api-chip.ai:hover{background:rgba(180,130,255,.25)}

/* AI Vision block command style */
.cmd-ai{background:rgba(180,130,255,.18);border-left:3px solid #b482ff;color:#e8deff}

/* Toolbar */
.py-toolbar{display:flex;gap:6px;align-items:center;padding:4px 8px;background:#181825;border-bottom:1px solid rgba(255,255,255,.06)}
/* Custom Examples Dropdown */
.py-ex-dropdown{position:relative}
.py-ex-btn{padding:6px 14px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:#11111b;color:#cdd6f4;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s}
.py-ex-btn:hover{background:#1e1e2e;border-color:rgba(137,180,250,.4);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.py-ex-arrow{font-size:10px;opacity:.6;transition:transform .2s}
.py-ex-menu{display:none;position:absolute;top:100%;left:0;margin-top:6px;min-width:280px;max-height:420px;overflow-y:auto;background:#1e1e2e;border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.6);z-index:999;padding:6px 0}
.py-ex-menu.open{display:block;animation:pyExFade .15s ease}
@keyframes pyExFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.py-ex-group{padding:10px 14px 4px;font-size:12px;font-weight:700;color:#89b4fa;letter-spacing:.3px;display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.05)}
.py-ex-group:first-child{border-top:none}
.py-ex-group img{width:20px;height:20px;border-radius:4px}
.py-ex-item{padding:8px 14px 8px 38px;font-size:14px;color:#cdd6f4;cursor:pointer;transition:all .12s;border-radius:6px;margin:1px 4px}
.py-ex-item:hover{background:rgba(137,180,250,.15);color:#fff;padding-left:42px}
.py-file-label{font-size:10px;color:#585b70;margin-left:auto;font-style:italic}

/* Editor with Line Numbers */
.py-editor-wrap{display:flex;flex:1;min-height:0;overflow:hidden}
.py-line-nums{width:36px;padding:10px 6px 10px 0;text-align:right;font-family:'Fira Code','Courier New',monospace;font-size:13px;line-height:22px;color:#45475a;background:#181825;border-right:1px solid rgba(255,255,255,.06);overflow:hidden;user-select:none;flex-shrink:0;white-space:pre}
/* Editor area: overlay pre + textarea */
.py-edit-area{position:relative;flex:1;min-height:0;overflow:hidden;background:#1e1e2e}
.py-highlight{position:absolute;top:0;left:0;right:0;bottom:0;padding:10px 12px;margin:0;border:none;background:transparent;color:#cdd6f4;font-family:'Fira Code','Courier New',monospace;font-size:13px;line-height:22px;white-space:pre-wrap;word-wrap:break-word;overflow-y:auto;pointer-events:none;tab-size:4}
.py-textarea{position:absolute;top:0;left:0;width:100%;height:100%;padding:10px 12px;border:none;border-radius:0;background:transparent;color:transparent;caret-color:#cdd6f4;font-family:'Fira Code','Courier New',monospace;font-size:13px;line-height:22px;resize:none;tab-size:4;outline:none;overflow-y:auto;z-index:1}
.py-textarea:focus{box-shadow:none}
.py-textarea::placeholder{color:#45475a}
.py-textarea::selection{background:rgba(137,180,250,.3)}
/* Syntax colors */
.py-hl-kw{color:#cba6f7} /* keywords: purple */
.py-hl-bi{color:#89b4fa} /* builtins: blue */
.py-hl-str{color:#a6e3a1} /* strings: green */
.py-hl-num{color:#fab387} /* numbers: orange */
.py-hl-cmt{color:#585b70;font-style:italic} /* comments: gray */
.py-hl-fn{color:#89dceb} /* function calls: teal */
.py-hl-op{color:#94e2d5} /* operators: cyan */
.py-hl-def{color:#f9e2af} /* def name: yellow */

/* Actions */
.py-actions{display:flex;gap:4px;padding:0 8px 4px}
.py-run-btn{flex:1;padding:7px;border:none;border-radius:6px;background:linear-gradient(135deg,#a6e3a1,#94e2d5);color:#1e1e2e;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.py-run-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.py-stop-btn{flex:1;padding:7px;border:none;border-radius:6px;background:linear-gradient(135deg,#f38ba8,#eba0ac);color:#1e1e2e;font-size:12px;font-weight:700;cursor:pointer}

/* Console */
/* Console drag handle */
.py-console-drag{text-align:center;padding:2px 0;background:#181825;color:#45475a;font-size:10px;cursor:ns-resize;user-select:none;letter-spacing:3px;border-top:1px solid rgba(255,255,255,.06)}
.py-console-drag:hover{background:#1e1e2e;color:#89b4fa}
.py-console-header{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;background:#11111b;color:#585b70;font-size:11px;font-weight:600;letter-spacing:.5px}
.py-console-clear{padding:3px 10px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:transparent;color:#585b70;font-size:11px;cursor:pointer}
.py-console-clear:hover{color:#cdd6f4;border-color:rgba(255,255,255,.2)}
.py-output{flex-shrink:0;height:80px;min-height:30px;max-height:300px;overflow-y:auto;background:#11111b;padding:6px 10px;font-family:'Fira Code',monospace;font-size:11px;color:#a6e3a1;line-height:1.5;white-space:pre-wrap}

/* === AI Vision === */
.ai-subtabs{display:flex;gap:2px;margin-bottom:8px}
.ai-subtab{flex:1;padding:6px 0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:rgba(255,255,255,.5);font-size:11px;cursor:pointer;transition:all .15s}
.ai-subtab.active{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.3);color:#00d4ff}
.vision-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:600;color:#fff}
.vision-toggle-btn{padding:4px 10px;background:rgba(0,212,255,.15);border:1px solid rgba(0,212,255,.3);border-radius:5px;color:#00d4ff;font-size:11px;cursor:pointer}
.vision-preview-wrap{position:relative;margin-bottom:8px;border-radius:8px;overflow:hidden;background:#000}
.vision-preview{display:block;width:100%;height:auto;border-radius:8px}
.vision-crosshair{position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border:2px solid rgba(0,212,255,.5);border-radius:4px;pointer-events:none}
.vision-modules{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}
.vision-mod-label{display:flex;align-items:center;gap:4px;font-size:11px;color:rgba(255,255,255,.7);cursor:pointer;padding:4px 6px;background:rgba(255,255,255,.03);border-radius:4px}
.vision-mod-label input{width:14px;height:14px}
.vision-results{display:flex;flex-direction:column;gap:3px}
.vision-result-row{font-size:11px;color:rgba(255,255,255,.7);padding:4px 8px;background:rgba(0,0,0,.3);border-radius:4px}
.vision-result-row b{color:#fff}
.floating-vision{position:fixed;left:180px;top:60px;z-index:500;background:rgba(15,15,25,.92);border:1px solid rgba(0,212,255,.3);border-radius:10px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);backdrop-filter:blur(8px);display:none}
.floating-vision-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:rgba(0,212,255,.08);cursor:move;user-select:none;font-size:12px;font-weight:600;color:#00d4ff}
.floating-vision-close,.floating-vision-size{background:none;border:none;color:rgba(255,255,255,.4);font-size:14px;cursor:pointer;padding:2px 6px;line-height:1}
.floating-vision-close:hover,.floating-vision-size:hover{color:#fff}
.floating-vision-size{font-size:16px;font-weight:bold}
.floating-vision canvas{display:block;border-radius:0;max-width:100%}
.floating-vision-status{padding:4px 10px;font-size:10px;color:rgba(255,255,255,.6);background:rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vision-blocked-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(30,30,40,.95);border:1px solid rgba(255,215,0,.3);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.5);backdrop-filter:blur(8px);animation:toastSlide .3s ease}
.vision-blocked-icon{font-size:28px}
.vision-blocked-text{font-size:12px;color:rgba(255,255,255,.7);line-height:1.5;max-width:320px}
.vision-blocked-text strong{color:#ffd700;display:block;margin-bottom:4px}
.vision-blocked-close{background:none;border:none;color:rgba(255,255,255,.3);font-size:16px;cursor:pointer;padding:4px}
.vision-blocked-close:hover{color:#fff}
.vision-blocked-inline{text-align:center;padding:24px 16px;background:rgba(255,215,0,.03);border:1px dashed rgba(255,215,0,.15);border-radius:8px;margin:8px 0}