<style>
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;display:flex;justify-content:center;align-items:center;
  background:linear-gradient(135deg,#1e1e2f,#2b2b45);
  font-family:'Segoe UI',system-ui,sans-serif;padding:20px;
  transition:background .6s;overflow:hidden;position:relative;
}
#matrixCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;transition:opacity .8s}
body.matrix #matrixCanvas{opacity:1}
.app{
  position:relative;z-index:1;background:#26263a;border-radius:20px;padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);width:100%;max-width:520px;
  transition:background .6s,box-shadow .6s;max-height:95vh;overflow-y:auto;
}
body.mode-desktop .app{max-width:560px}
body.matrix .app{
  background:#051a0a;border:1px solid rgba(0,255,100,.3);
  box-shadow:0 0 40px rgba(0,255,100,.3),0 20px 50px rgba(0,0,0,.8);
}
body.matrix{background:#000}

.mode-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}
.app-title{
  font-size:13px;font-weight:800;color:#8888aa;letter-spacing:1.5px;
  cursor:pointer;user-select:none;padding:4px 0;
}
.app-title:hover{color:#bbb}
body.matrix .app-title{color:#1d8a3d}
.device-btn{
  background:#2f2f48;border:none;border-radius:8px;padding:6px 12px;
  color:#ff7a45;font-family:inherit;font-weight:700;font-size:12px;
  cursor:pointer;transition:background .15s;margin-left:6px;
}
.device-btn:hover{background:#3a3a58}
body.matrix .device-btn{background:#0a2814;color:#00ff66}

.kbd-hint,.kbd-hint-block{display:none}
body.mode-desktop .kbd-hint{display:inline}
body.mode-desktop .kbd-hint-block{display:block}

body.mode-mobile .calc-btn{padding:16px 0;font-size:18px}
body.mode-mobile .scientific .calc-btn{padding:14px 0;font-size:15px}
body.mode-mobile .snake-dpad button{padding:22px 0;font-size:26px}
body.mode-mobile .durak-card{width:46px;height:64px;font-size:14px}
body.mode-mobile .durak-card.small{width:38px;height:52px;font-size:12px}
body.mode-mobile .tab{padding:10px 3px;font-size:11px}
body.mode-mobile .piano{height:180px}
body.mode-mobile .piano-key{font-size:9px}
body.mode-mobile .teacher-answer-btn{padding:20px 12px;font-size:16px;min-height:64px}
body.mode-mobile .teacher-question{font-size:18px;padding:16px}
body.mode-mobile .app{padding:14px}

.tabs{display:flex;gap:4px;margin-bottom:16px;background:#1a1a2a;border-radius:12px;padding:6px;flex-wrap:wrap}
.tab{flex:1 1 auto;min-width:60px;padding:10px 2px;border:none;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;color:#8888aa;background:transparent;font-family:inherit;transition:all .25s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.tab.active{background:#4a4a75;color:#fff;box-shadow:0 2px 10px rgba(74,74,117,.5)}
.tab:hover:not(.active){color:#bbb;transform:translateY(-2px)}
body.matrix .tabs{background:#020d05}
body.matrix .tab{color:#1d6b32}
body.matrix .tab.active{background:#0a3d1a;color:#00ff66;box-shadow:0 0 15px rgba(0,255,100,.4)}
.panel{display:none}.panel.active{display:block;animation:panelIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tab.active{animation:tabPulse .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes tabPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

button.calc-btn,.convert-btn,.snake-controls button,.snake-dpad button,
.durak-new-btn,.durak-actions button,.piano-actions button,.piano-demos button,
.wave-btn,.teacher-answer-btn,.admin-btn,.device-btn{position:relative;overflow:hidden}
button.calc-btn::before,.convert-btn::before,.snake-dpad button::before,
.durak-new-btn::before,.teacher-answer-btn::before,.admin-btn::before,
.snake-controls button::before,.wave-btn::before,.piano-actions button::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle,rgba(255,255,255,.45) 0%,transparent 70%);
  opacity:0;transform:scale(0);pointer-events:none;
  transition:opacity .4s,transform .4s;
}
button.calc-btn:active::before,.convert-btn:active::before,.snake-dpad button:active::before,
.durak-new-btn:active::before,.teacher-answer-btn:active:not(:disabled)::before,
.admin-btn:active::before,.snake-controls button:active::before,.wave-btn:active::before,
.piano-actions button:active::before{opacity:.7;transform:scale(2.2);transition:0s}

.display{background:#12121c;border-radius:12px;padding:12px 16px;margin-bottom:14px;min-height:100px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:background .6s}
body.matrix .display{background:#000;border:1px solid rgba(0,255,100,.3)}
.mode-row{display:flex;justify-content:flex-start}
.mode{font-size:12px;color:#ff7a45;background:rgba(255,122,69,.15);padding:4px 10px;border-radius:6px;cursor:pointer;font-weight:700;letter-spacing:1px;border:none;font-family:inherit}
body.matrix .mode{color:#00ff66;background:rgba(0,255,100,.1)}
.expression{color:#fff;font-size:28px;font-weight:500;text-align:right;word-wrap:break-word;overflow-wrap:anywhere;line-height:1.2;transition:color .3s,transform .15s,text-shadow .3s}
.expression.bump{animation:exprBump .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes exprBump{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
body.matrix .expression{color:#00ff66;text-shadow:0 0 8px rgba(0,255,100,.6);font-family:'Courier New',monospace}

.scientific,.basic{display:grid;gap:8px;margin-bottom:8px}
.scientific{grid-template-columns:repeat(5,1fr)}
.basic{grid-template-columns:repeat(4,1fr)}
button.calc-btn{border:none;border-radius:10px;padding:14px 0;font-size:17px;font-weight:600;cursor:pointer;color:#fff;background:#353550;transition:transform .12s cubic-bezier(.34,1.56,.64,1),background .15s,color .3s;user-select:none;font-family:inherit}
button.calc-btn:hover{background:#40405f}
button.calc-btn:active{transform:scale(.92);transition:transform .06s}
.func{background:#2f2f48;color:#b0b0d0;font-size:15px}
.func:hover{background:#3a3a58}
.op{background:#4a4a75}.op:hover{background:#57578a}
.equals{background:#ff7a45}.equals:hover{background:#ff8f60}
.clear{background:#d64550}.clear:hover{background:#e65a65}
.span-2{grid-column:span 2}
body.matrix button.calc-btn{background:#0a2814;color:#00cc55;font-family:'Courier New',monospace}
body.matrix .func{background:#061a0d;color:#1d8a3d}
body.matrix .op{background:#0d4a22;color:#00ff66}
body.matrix .equals{background:#00cc55;color:#000}
body.matrix .clear{background:#8a1a1a;color:#ff8888}

.currency-display{background:#12121c;border-radius:12px;padding:16px;margin-bottom:16px;text-align:right;transition:background .6s;position:relative;overflow:hidden}
.currency-display.loading::after{content:'';position:absolute;top:0;left:-50%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,122,69,.2),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{left:150%}}
body.matrix .currency-display{background:#000;border:1px solid rgba(0,255,100,.3)}
.currency-amount{color:#fff;font-size:34px;font-weight:600;word-wrap:break-word;overflow-wrap:anywhere;transition:color .6s}
body.matrix .currency-amount{color:#00ff66;text-shadow:0 0 8px rgba(0,255,100,.6)}
.currency-rate{color:#7a7a9a;font-size:13px;margin-top:6px;min-height:16px}
.currency-status{color:#ff7a45;font-size:13px;margin-top:4px}
.currency-row{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.currency-input{flex:1;background:#353550;border:2px solid transparent;border-radius:10px;padding:14px;color:#fff;font-size:16px;font-weight:600;font-family:inherit;outline:none;transition:border-color .2s,background .6s,color .6s}
.currency-input:focus{border-color:#ff7a45}
body.matrix .currency-input{background:#0a2814;color:#00ff66;border-color:rgba(0,255,100,.3);font-family:'Courier New',monospace}
.currency-select{background:#4a4a75;border:none;border-radius:10px;padding:14px 10px;color:#fff;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;outline:none;min-width:110px;transition:background .6s}
.currency-select:hover{background:#57578a}
body.matrix .currency-select{background:#0d4a22;color:#00ff66}
.swap-btn{background:#2f2f48;border:none;border-radius:50%;width:40px;height:40px;color:#ff7a45;font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:transform .2s,background .6s,color .6s}
.swap-btn:hover{transform:rotate(180deg);background:#3a3a58}
body.matrix .swap-btn{background:#0a2814;color:#00ff66}
.result-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;padding:0 4px}
.result-label{color:#7a7a9a;font-size:13px}
.result-value{color:#ff7a45;font-size:20px;font-weight:700}
.result-value.flash{animation:resultFlash .7s cubic-bezier(.16,1,.3,1)}
@keyframes resultFlash{0%{transform:scale(1);filter:none}40%{transform:scale(1.18);filter:drop-shadow(0 0 20px #ff7a45)}100%{transform:scale(1);filter:none}}
body.matrix .result-value{color:#00ff66}
.convert-btn{width:100%;border:none;border-radius:12px;padding:16px;font-size:17px;font-weight:700;cursor:pointer;color:#fff;background:#ff7a45;font-family:inherit;margin-top:4px;transition:background .15s,transform .08s}
.convert-btn:hover{background:#ff8f60}
.convert-btn:active{transform:scale(.98)}
.convert-btn:disabled{background:#555;cursor:not-allowed;opacity:.6}
body.matrix .convert-btn{background:#00cc55;color:#000}
.rate-info{text-align:center;color:#555577;font-size:11px;margin-top:10px;line-height:1.5}

.snake-hud{background:#12121c;border-radius:12px;padding:12px 16px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
body.matrix .snake-hud{background:#000;border:1px solid rgba(0,255,100,.3)}
.snake-score{color:#fff;font-size:22px;font-weight:700;transition:color .3s}
.snake-score.pop{animation:scorePop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes scorePop{0%{transform:scale(1)}50%{transform:scale(1.3);color:#22c55e;text-shadow:0 0 20px #22c55e}100%{transform:scale(1)}}
body.matrix .snake-score{color:#00ff66}
.snake-best{color:#7a7a9a;font-size:13px}
.snake-board{position:relative;background:#12121c;border-radius:12px;margin-bottom:12px;border:2px solid #353550;overflow:hidden}
body.matrix .snake-board{border-color:rgba(0,255,100,.5)}
#snakeCanvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:transparent}
.snake-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(18,18,28,.9);color:#fff;text-align:center;padding:20px}
.snake-overlay.hidden{display:none}
.snake-overlay h2{margin:0 0 8px;font-size:24px;color:#ff7a45}
body.matrix .snake-overlay h2{color:#00ff66}
.snake-overlay p{margin:0 0 16px;color:#9999bb;font-size:14px;line-height:1.5}
.snake-overlay button{border:none;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:700;cursor:pointer;background:#ff7a45;color:#fff;font-family:inherit}
.snake-overlay button:hover{background:#ff8f60}
body.matrix .snake-overlay button{background:#00cc55;color:#000}
.snake-controls{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.snake-controls button{flex:1;border:none;border-radius:10px;padding:12px 0;font-size:15px;font-weight:600;cursor:pointer;color:#fff;background:#353550;font-family:inherit}
.snake-controls button:hover{background:#40405f}
.snake-dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;margin-top:10px}
.snake-dpad button{border:none;border-radius:10px;padding:16px 0;font-size:22px;cursor:pointer;color:#fff;background:#353550;font-family:inherit;user-select:none;touch-action:manipulation;transition:transform .1s,background .15s}
.snake-dpad button:hover{background:#40405f}
.snake-dpad button:active{transform:scale(.88);background:#ff7a45}
.dpad-up{grid-column:2;grid-row:1}
.dpad-left{grid-column:1;grid-row:2}
.dpad-down{grid-column:2;grid-row:2}
.dpad-right{grid-column:3;grid-row:2}

.durak-top{display:flex;justify-content:space-between;align-items:center;background:#12121c;border-radius:12px;padding:10px 14px;margin-bottom:12px}
body.matrix .durak-top{background:#000;border:1px solid rgba(0,255,100,.3)}
.durak-deck-info{text-align:center}
.durak-mini-label{color:#7a7a9a;font-size:11px;margin-bottom:4px}
.durak-deck-count{color:#ff7a45;font-size:22px;font-weight:700}
.durak-trump-card{display:inline-block;min-width:36px;min-height:50px}
.durak-new-btn{border:none;border-radius:8px;padding:8px 14px;background:#4a4a75;color:#fff;font-family:inherit;font-weight:600;cursor:pointer;font-size:13px}
.durak-new-btn:hover{background:#57578a}
body.matrix .durak-new-btn{background:#0d4a22;color:#00ff66}
.durak-section{margin-bottom:10px}
.durak-label{color:#7a7a9a;font-size:12px;margin-bottom:6px;padding:0 4px}
body.matrix .durak-label{color:#1d8a3d}
.durak-hand{display:flex;gap:4px;min-height:60px;flex-wrap:wrap;background:rgba(0,0,0,.15);border-radius:10px;padding:6px}
.durak-table{display:flex;flex-wrap:wrap;gap:10px;min-height:70px;background:rgba(0,0,0,.2);border-radius:10px;padding:8px;align-items:center;justify-content:center}
.durak-pair{display:flex;position:relative}
.durak-pair .durak-card:nth-child(2){margin-left:-14px;transform:rotate(-10deg) translateY(3px);animation:cardPopDefend .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes cardPopDefend{from{opacity:0;transform:rotate(-30deg) translateY(-10px)}to{opacity:1;transform:rotate(-10deg) translateY(3px)}}
.durak-card{display:flex;flex-direction:column;justify-content:space-between;width:42px;height:58px;background:#f5f5f5;border-radius:6px;padding:4px 5px;color:#222;font-weight:700;font-size:13px;cursor:pointer;user-select:none;border:1px solid #bbb;flex-shrink:0;transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;animation:cardPop .28s cubic-bezier(.34,1.56,.64,1);transform-origin:center}
@keyframes cardPop{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.durak-card .card-rank{line-height:1}
.durak-card .card-suit{align-self:flex-end;font-size:16px;line-height:1}
.durak-card.red{color:#d32f2f}
.durak-card.clickable:hover{transform:translateY(-8px) scale(1.08)!important;z-index:10;box-shadow:0 8px 20px rgba(255,122,69,.5)}
.durak-card.disabled{opacity:.45;cursor:not-allowed}
.durak-card.back{background:repeating-linear-gradient(45deg,#4a4a75,#4a4a75 4px,#3a3a5a 4px,#3a3a5a 8px);color:transparent;cursor:default;border-color:#222}
.durak-card.small{width:34px;height:46px;font-size:11px;padding:3px 4px}
.durak-card.small .card-suit{font-size:13px}
body.matrix .durak-card{background:#e8f5e8}
.durak-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.durak-actions button{flex:1;min-width:100px;border:none;border-radius:10px;padding:12px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;color:#fff;background:#4a4a75;transition:background .15s,transform .08s}
.durak-actions button:hover{background:#57578a}
.durak-actions button.primary{background:#ff7a45}
body.matrix .durak-actions button{background:#0d4a22;color:#00ff66}
body.matrix .durak-actions button.primary{background:#00cc55;color:#000}
.durak-message{margin-top:10px;text-align:center;color:#fff;font-size:14px;font-weight:600;min-height:20px;padding:8px;background:rgba(255,122,69,.15);border-radius:8px}
body.matrix .durak-message{background:rgba(0,255,100,.1);color:#00ff66}

.piano-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.piano-row{display:flex;gap:6px;align-items:center;flex:1 1 100%}
.piano-row label{color:#7a7a9a;font-size:12px;min-width:78px}
body.matrix .piano-row label{color:#1d8a3d}
.wave-btn{flex:1;border:none;border-radius:8px;padding:8px 4px;background:#353550;color:#fff;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;transition:background .15s}
.wave-btn:hover{background:#40405f}
.wave-btn.active{background:#ff7a45}
body.matrix .wave-btn{background:#0a2814;color:#00cc55}
body.matrix .wave-btn.active{background:#00cc55;color:#000}
input[type="range"]{flex:1;accent-color:#ff7a45;cursor:pointer}
body.matrix input[type="range"]{accent-color:#00ff66}
.piano{position:relative;height:150px;background:#12121c;border-radius:12px;margin-bottom:12px;overflow:hidden;user-select:none}
body.matrix .piano{background:#000;border:1px solid rgba(0,255,100,.3)}
.piano-key{position:absolute;top:0;bottom:0;cursor:pointer;border:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:10px;font-weight:700;transition:background .05s;user-select:none;touch-action:manipulation}
.piano-key.white{background:#f5f5f5;color:#888;border-right:1px solid #ccc;border-radius:0 0 6px 6px;z-index:1}
.piano-key.white:hover{background:#e6e6e6}
.piano-key.white.active{background:#ffd0b0}
.piano-key.black{background:#222;color:#aaa;border-radius:0 0 4px 4px;z-index:2;height:62%;bottom:auto}
.piano-key.black:hover{background:#333}
.piano-key.black.active{background:#ff7a45;color:#fff}
body.matrix .piano-key.white{background:#a0e8b0;color:#0a2814}
body.matrix .piano-key.white.active{background:#00ff66}
body.matrix .piano-key.black{background:#041a0c;color:#00cc55}
body.matrix .piano-key.black.active{background:#00ff66;color:#000}
.piano-actions,.piano-demos{display:flex;gap:8px;margin-bottom:10px}
.piano-actions button,.piano-demos button{flex:1;border:none;border-radius:10px;padding:10px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#fff;background:#4a4a75;transition:background .15s,transform .08s}
.piano-actions button:hover,.piano-demos button:hover{background:#57578a}
.piano-actions button.recording{background:#d64550;animation:pianoPulse 1s infinite}
@keyframes pianoPulse{50%{opacity:.6}}
body.matrix .piano-actions button,body.matrix .piano-demos button{background:#0d4a22;color:#00ff66}
body.matrix .piano-actions button.recording{background:#8a1a1a;color:#ff8888}
.piano-status{text-align:center;color:#7a7a9a;font-size:12px;margin-top:8px;min-height:16px}
body.matrix .piano-status{color:#1d8a3d}

.g2048-hud{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.g2048-score-box{background:#12121c;border-radius:10px;padding:8px 14px;text-align:center;flex:1}
.g2048-score-label{color:#7a7a9a;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.g2048-score-value{color:#ff7a45;font-size:20px;font-weight:700;transition:transform .2s}
.g2048-score-value.pop{animation:scorePop .45s cubic-bezier(.34,1.56,.64,1)}
body.matrix .g2048-score-box{background:#000;border:1px solid rgba(0,255,100,.3)}
body.matrix .g2048-score-value{color:#00ff66}
.g2048-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#12121c;border-radius:12px;padding:8px;aspect-ratio:1/1;margin-bottom:12px;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
body.matrix .g2048-board{background:#000;border:1px solid rgba(0,255,100,.3)}
.g2048-cell{background:#1f1f2f;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;color:transparent;transition:background .15s,color .15s,transform .12s cubic-bezier(.34,1.56,.64,1);user-select:none;line-height:1}
.g2048-cell.new{animation:tileNew .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes tileNew{from{opacity:0;transform:scale(0) rotate(-45deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.g2048-cell.merged{animation:tileMerge .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes tileMerge{0%{transform:scale(1)}40%{transform:scale(1.25);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}
body.matrix .g2048-cell{background:#0a1a0a}
.g2048-cell.t2{background:#eee4da;color:#776e65;font-size:28px}
.g2048-cell.t4{background:#ede0c8;color:#776e65;font-size:28px}
.g2048-cell.t8{background:#f2b179;color:#fff;font-size:28px}
.g2048-cell.t16{background:#f59563;color:#fff;font-size:26px}
.g2048-cell.t32{background:#f67c5f;color:#fff;font-size:26px}
.g2048-cell.t64{background:#f65e3b;color:#fff;font-size:26px}
.g2048-cell.t128{background:#edcf72;color:#fff;font-size:22px}
.g2048-cell.t256{background:#edcc61;color:#fff;font-size:22px}
.g2048-cell.t512{background:#edc850;color:#fff;font-size:22px}
.g2048-cell.t1024{background:#edc53f;color:#fff;font-size:18px}
.g2048-cell.t2048{background:#edc22e;color:#fff;font-size:18px;animation:tileWin .8s ease-in-out infinite alternate}
@keyframes tileWin{from{box-shadow:0 0 20px rgba(237,194,46,.6)}to{box-shadow:0 0 35px rgba(237,194,46,1),0 0 60px rgba(237,194,46,.5)}}
.g2048-cell.t4096{background:#3c3a32;color:#fff;font-size:16px}
body.matrix .g2048-cell.t2{background:#0a3d1a;color:#00ff66}
body.matrix .g2048-cell.t4{background:#0d4a22;color:#00ff66}
body.matrix .g2048-cell.t8{background:#106028;color:#aaffbb}
body.matrix .g2048-cell.t16{background:#0f7a2d;color:#fff}
body.matrix .g2048-cell.t32{background:#12903a;color:#fff}
body.matrix .g2048-cell.t64{background:#15a844;color:#fff}
body.matrix .g2048-cell.t128{background:#00cc55;color:#000;box-shadow:0 0 10px rgba(0,255,100,.4)}
body.matrix .g2048-cell.t256{background:#00e060;color:#000;box-shadow:0 0 12px rgba(0,255,100,.5)}
body.matrix .g2048-cell.t512{background:#00ff66;color:#000;box-shadow:0 0 15px rgba(0,255,100,.6)}
body.matrix .g2048-cell.t1024{background:#66ff99;color:#000;box-shadow:0 0 20px rgba(0,255,100,.7)}
body.matrix .g2048-cell.t2048{background:#bbffcc;color:#000;animation:tileWinM .8s ease-in-out infinite alternate}
@keyframes tileWinM{from{box-shadow:0 0 30px rgba(0,255,100,.9)}to{box-shadow:0 0 50px rgba(0,255,100,1),0 0 80px rgba(0,255,100,.5)}}
.g2048-over{position:absolute;inset:0;background:rgba(18,18,28,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;color:#fff;text-align:center;padding:20px;gap:12px;font-weight:700;animation:panelIn .35s cubic-bezier(.16,1,.3,1)}
.g2048-over h3{margin:0;font-size:24px;color:#ff7a45}
body.matrix .g2048-over h3{color:#00ff66}
.g2048-over button{border:none;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:700;cursor:pointer;background:#ff7a45;color:#fff;font-family:inherit}
.g2048-over button:hover{background:#ff8f60}
body.matrix .g2048-over button{background:#00cc55;color:#000}

.teacher-display{background:linear-gradient(135deg,#4a1a1a,#2b0a0a);border-radius:12px;padding:20px;text-align:center;margin-bottom:12px;position:relative;overflow:hidden;transition:background .3s}
.teacher-display.flash-red{animation:flashRed .55s}
@keyframes flashRed{0%,100%{background:linear-gradient(135deg,#4a1a1a,#2b0a0a)}50%{background:linear-gradient(135deg,#8a1a1a,#5a0a0a);transform:scale(1.02)}}
.teacher-display.flash-green{animation:flashGreen .55s}
@keyframes flashGreen{0%,100%{background:linear-gradient(135deg,#4a1a1a,#2b0a0a)}50%{background:linear-gradient(135deg,#1a6a2a,#0a3d1a);transform:scale(1.02)}}
body.matrix .teacher-display.flash-red{animation:flashRedM .55s}
@keyframes flashRedM{0%,100%{background:linear-gradient(135deg,#0a1a0a,#000)}50%{background:linear-gradient(135deg,#3a0a0a,#1a0000);transform:scale(1.02)}}
body.matrix .teacher-display.flash-green{animation:flashGreenM .55s}
@keyframes flashGreenM{0%,100%{background:linear-gradient(135deg,#0a1a0a,#000)}50%{background:linear-gradient(135deg,#003a1a,#001a0a);transform:scale(1.02)}}
.teacher-face{font-size:80px;line-height:1;margin-bottom:8px;display:inline-block;transition:transform .3s}
.teacher-face.shake{animation:teacherShake .4s}
@keyframes teacherShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-8px) rotate(-5deg)}75%{transform:translateX(8px) rotate(5deg)}}
.teacher-speech{color:#ffb0b0;font-size:14px;font-weight:600;min-height:20px;line-height:1.4}
.teacher-hud{display:flex;justify-content:space-between;align-items:center;background:#12121c;border-radius:10px;padding:10px 14px;margin-bottom:10px;color:#fff;font-size:14px;font-weight:600}
.teacher-hud span{color:#ff7a45;transition:all .25s;display:inline-block}
.teacher-hud span.pop{animation:scorePop .45s cubic-bezier(.34,1.56,.64,1)}
.teacher-timer-bar{height:8px;background:#12121c;border-radius:4px;overflow:hidden;margin-bottom:12px}
.teacher-timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#4ade80,#fbbf24,#ef4444);transition:width .1s linear}
.teacher-timer-fill.low{animation:teacherPulse .5s infinite}
@keyframes teacherPulse{50%{opacity:.5}}
.teacher-question{background:#12121c;border-radius:12px;padding:20px;text-align:center;color:#fff;font-size:20px;font-weight:600;margin-bottom:12px;min-height:70px;display:flex;align-items:center;justify-content:center;line-height:1.3}
.teacher-answers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.teacher-answer-btn{border:none;border-radius:10px;padding:16px;font-size:17px;font-weight:700;cursor:pointer;color:#fff;background:#4a4a75;font-family:inherit;transition:transform .12s cubic-bezier(.34,1.56,.64,1),background .15s;min-height:52px;word-wrap:break-word;overflow-wrap:anywhere;animation:panelIn .3s cubic-bezier(.16,1,.3,1)}
.teacher-answer-btn:hover:not(:disabled){background:#57578a;transform:translateY(-2px)}
.teacher-answer-btn:active:not(:disabled){transform:scale(.96)}
.teacher-answer-btn.correct{background:#22c55e;animation:answerCorrect .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes answerCorrect{0%{transform:scale(1)}40%{transform:scale(1.08);box-shadow:0 0 20px rgba(34,197,94,.8)}100%{transform:scale(1)}}
.teacher-answer-btn.wrong{background:#ef4444;animation:answerWrong .4s}
@keyframes answerWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.teacher-answer-btn:disabled{cursor:default}
body.matrix .teacher-display{background:linear-gradient(135deg,#0a1a0a,#000);border:1px solid rgba(0,255,100,.3)}
body.matrix .teacher-speech{color:#00ff66}
body.matrix .teacher-hud{background:#000;border:1px solid rgba(0,255,100,.3)}
body.matrix .teacher-hud span{color:#00ff66}
body.matrix .teacher-question{background:#000;border:1px solid rgba(0,255,100,.3);color:#00ff66}
body.matrix .teacher-answer-btn{background:#0d4a22;color:#00ff66}
body.matrix .teacher-answer-btn:hover:not(:disabled){background:#125c2b}
body.matrix .teacher-answer-btn.correct{background:#00cc55;color:#000}
body.matrix .teacher-answer-btn.wrong{background:#8a1a1a;color:#ff8888}
body.matrix .teacher-timer-bar{background:#000;border:1px solid rgba(0,255,100,.3)}

.wordle-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;background:#12121c;border-radius:12px;padding:10px 14px;color:#fff;font-weight:600}
body.matrix .wordle-header{background:#000;border:1px solid rgba(0,255,100,.3)}
.wordle-board{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;align-items:center}
.wordle-row{display:flex;gap:6px}
.wordle-cell{width:52px;height:52px;border:2px solid #353550;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;text-transform:uppercase;transition:background .35s,border-color .35s,color .35s,transform .15s;line-height:1}
.wordle-cell:not(:empty){animation:cellPop .15s cubic-bezier(.34,1.56,.64,1)}
@keyframes cellPop{from{transform:scale(.8)}to{transform:scale(1)}}
.wordle-cell.correct{background:#22c55e;border-color:#22c55e;animation:cellFlip .5s}
.wordle-cell.present{background:#eab308;border-color:#eab308;animation:cellFlip .5s}
.wordle-cell.absent{background:#3a3a4a;border-color:#3a3a4a;color:#999;animation:cellFlip .5s}
@keyframes cellFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
body.matrix .wordle-cell{border-color:#0d4a22;color:#00ff66}
body.matrix .wordle-cell.correct{background:#00cc55;border-color:#00cc55;color:#000}
body.matrix .wordle-cell.present{background:#00aa44;border-color:#00aa44;color:#000}
body.matrix .wordle-cell.absent{background:#052010;border-color:#052010;color:#1d8a3d}
.wordle-message{text-align:center;color:#fff;font-weight:700;min-height:22px;margin-bottom:10px;font-size:14px}
body.matrix .wordle-message{color:#00ff66}
.wordle-keyboard{display:flex;flex-direction:column;gap:5px;width:100%}
.wordle-kb-row{display:flex;gap:3px;width:100%}
.wordle-key{flex:1 1 0;min-width:0;height:44px;border:none;border-radius:6px;padding:0;background:#4a4a75;color:#fff;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s,transform .12s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.wordle-key::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.45) 0%,transparent 70%);opacity:0;transform:scale(0);pointer-events:none;transition:opacity .4s,transform .4s}
.wordle-key:active::before{opacity:.7;transform:scale(2.2);transition:0s}
.wordle-key:hover{background:#57578a}
.wordle-key:active{transform:scale(.95)}
.wordle-key.correct{background:#22c55e;animation:keyPop .3s}
.wordle-key.present{background:#eab308;animation:keyPop .3s}
.wordle-key.absent{background:#2a2a3a;color:#666}
@keyframes keyPop{50%{transform:scale(1.15)}}
.wordle-wide{flex:1.7 1 0;font-size:11px;letter-spacing:.3px}
body.matrix .wordle-key{background:#0d4a22;color:#00ff66}
body.matrix .wordle-key.correct{background:#00cc55;color:#000}
body.matrix .wordle-key.present{background:#00aa44;color:#000}
body.matrix .wordle-key.absent{background:#052010;color:#1d8a3d}
body.mode-mobile .wordle-cell{width:46px;height:46px;font-size:20px}
body.mode-mobile .wordle-key{height:40px;font-size:12px}
body.mode-mobile .wordle-kb-row{gap:2px}
body.mode-mobile .wordle-wide{font-size:10px}
body.mode-mobile .wordle-message{font-size:13px;margin-bottom:8px}

.bj-table{background:radial-gradient(ellipse at center,#0a5a2e,#042a15);border-radius:16px;padding:14px;margin-bottom:12px;border:2px solid #0d3d20;position:relative;transition:background .3s}
body.matrix .bj-table{background:radial-gradient(ellipse at center,#052a10,#000);border-color:rgba(0,255,100,.4)}
.bj-hand-label{color:#ffd700;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:6px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
body.matrix .bj-hand-label{color:#00ff66}
.bj-hand-value{background:rgba(0,0,0,.5);padding:2px 8px;border-radius:6px;font-size:12px;color:#fff}
.bj-hand-value.blackjack{background:#ff7a45;color:#fff;animation:scorePop .6s}
.bj-hand-value.bust{background:#8a1a1a;color:#fff;animation:answerWrong .4s}
.bj-hand{display:flex;gap:6px;min-height:76px;flex-wrap:wrap;margin-bottom:12px;align-items:center;min-width:60px}
.bj-hand:last-child{margin-bottom:0}
.bj-card{width:52px;height:72px;background:#f8f8f8;border-radius:6px;padding:5px 6px;color:#222;font-weight:700;font-size:15px;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.4);animation:bjCardDeal .45s cubic-bezier(.34,1.56,.64,1);transform-origin:center}
@keyframes bjCardDeal{from{opacity:0;transform:translateX(-120px) translateY(-50px) rotate(-25deg) scale(.7)}to{opacity:1;transform:translateX(0) translateY(0) rotate(0) scale(1)}}
.bj-card.red{color:#d32f2f}
.bj-card .bj-rank{line-height:1;font-size:15px}
.bj-card .bj-suit{align-self:flex-end;font-size:20px;line-height:1}
.bj-card.back{background:repeating-linear-gradient(45deg,#8b1a1a,#8b1a1a 5px,#5a1010 5px,#5a1010 10px);border:1px solid #333}
.bj-card.back::after{content:'♠';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-size:28px}
body.matrix .bj-card{background:#e8f5e8;box-shadow:0 0 8px rgba(0,255,100,.3)}
body.matrix .bj-card.back{background:repeating-linear-gradient(45deg,#0a2814,#0a2814 5px,#051a0a 5px,#051a0a 10px)}
.bj-info{display:flex;justify-content:space-between;align-items:center;background:#12121c;border-radius:12px;padding:12px 16px;margin-bottom:12px;color:#fff;font-weight:600}
body.matrix .bj-info{background:#000;border:1px solid rgba(0,255,100,.3)}
.bj-chips{font-size:22px;font-weight:800;color:#ffd700;transition:transform .2s}
.bj-chips.pop{animation:scorePop .5s cubic-bezier(.34,1.56,.64,1)}
body.matrix .bj-chips{color:#00ff66}
.bj-chips-label{font-size:11px;color:#7a7a9a;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.bj-bet-row{display:flex;gap:8px;margin-bottom:12px;align-items:center;background:#12121c;border-radius:12px;padding:10px 14px}
body.matrix .bj-bet-row{background:#000;border:1px solid rgba(0,255,100,.3)}
.bj-bet-row label{color:#7a7a9a;font-size:13px;font-weight:600}
.bj-bet-value{color:#ffd700;font-size:20px;font-weight:800;flex:1;text-align:center}
body.matrix .bj-bet-value{color:#00ff66}
.bj-chip-btn{border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;color:#fff;background:#4a4a75;transition:transform .12s,background .15s;border:2px solid rgba(255,255,255,.15);flex-shrink:0}
.bj-chip-btn:hover{transform:scale(1.1)}
.bj-chip-btn:active{transform:scale(.92)}
.bj-chip-btn.c5{background:#a02020}
.bj-chip-btn.c25{background:#1a6a2a}
.bj-chip-btn.c100{background:#1a1a2a}
.bj-chip-btn.c500{background:#5a1a6a}
body.matrix .bj-chip-btn{background:#0d4a22;color:#00ff66;border-color:rgba(0,255,100,.3)}
.bj-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bj-actions button{flex:1;min-width:80px;border:none;border-radius:10px;padding:14px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;color:#fff;background:#4a4a75;transition:background .15s,transform .12s;text-transform:uppercase;letter-spacing:.5px}
.bj-actions button:hover:not(:disabled){background:#57578a}
.bj-actions button:active:not(:disabled){transform:scale(.96)}
.bj-actions button.primary{background:#ff7a45}
.bj-actions button.primary:hover:not(:disabled){background:#ff8f60}
.bj-actions button.green{background:#22c55e}
.bj-actions button.green:hover:not(:disabled){background:#16a34a}
.bj-actions button.red{background:#d64550}
.bj-actions button.red:hover:not(:disabled){background:#e65a65}
.bj-actions button:disabled{opacity:.35;cursor:not-allowed}
body.matrix .bj-actions button{background:#0d4a22;color:#00ff66}
body.matrix .bj-actions button.primary{background:#00cc55;color:#000}
body.matrix .bj-actions button.green{background:#00cc55;color:#000}
body.matrix .bj-actions button.red{background:#8a1a1a;color:#ff8888}
.bj-message{text-align:center;color:#fff;font-weight:800;min-height:26px;font-size:15px;padding:8px;background:rgba(0,0,0,.3);border-radius:8px;transition:color .3s}
.bj-message.win{color:#22c55e;animation:scorePop .5s}
.bj-message.lose{color:#ef4444;animation:answerWrong .4s}
.bj-message.push{color:#eab308}
body.matrix .bj-message{background:rgba(0,255,100,.08)}
body.matrix .bj-message.win{color:#00ff66}
body.matrix .bj-message.lose{color:#ff8888}
body.mode-mobile .bj-card{width:46px;height:64px;font-size:13px;padding:4px}
body.mode-mobile .bj-card .bj-rank{font-size:13px}
body.mode-mobile .bj-card .bj-suit{font-size:17px}
body.mode-mobile .bj-chip-btn{width:40px;height:40px;font-size:12px}
body.mode-mobile .bj-actions button{padding:12px;font-size:13px}
body.mode-mobile .bj-chips{font-size:19px}

.chess-top{display:flex;justify-content:space-between;align-items:center;background:#12121c;border-radius:12px;padding:10px 14px;margin-bottom:12px;color:#fff;font-weight:600}
body.matrix .chess-top{background:#000;border:1px solid rgba(0,255,100,.3)}
.chess-status{font-size:14px;color:#fff;flex:1}
.chess-status.captured{font-size:20px;line-height:1;letter-spacing:2px;margin-top:4px;min-height:20px;color:#999}
body.matrix .chess-status{color:#00ff66}
.chess-board-wrap{position:relative;width:100%;aspect-ratio:1/1;margin-bottom:12px;user-select:none}
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;height:100%;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.5);border:3px solid #4a3a2a;touch-action:manipulation}
body.matrix .chess-board{border-color:#0d4a22;box-shadow:0 0 20px rgba(0,255,100,.3)}
.chess-cell{display:flex;align-items:center;justify-content:center;font-size:clamp(28px,7vw,44px);line-height:1;cursor:pointer;position:relative;transition:background .12s;font-family:'Segoe UI Symbol','Arial Unicode MS',sans-serif}
.chess-cell.light{background:#f0d9b5;color:#2a2a2a}
.chess-cell.dark{background:#b58863;color:#1a1a1a}
.chess-cell.selected{background:#7fc97f!important}
.chess-cell.valid-move::after{content:'';position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(0,0,0,.28);pointer-events:none}
.chess-cell.valid-capture::after{content:'';position:absolute;inset:6%;border-radius:50%;border:4px solid rgba(220,50,50,.75);pointer-events:none}
.chess-cell.check{background:radial-gradient(circle,#ff4444 0%,#b58863 70%)!important}
.chess-cell.check.light{background:radial-gradient(circle,#ff4444 0%,#f0d9b5 70%)!important}
.chess-cell.last-move{box-shadow:inset 0 0 0 3px rgba(255,200,0,.6)}
body.matrix .chess-cell.light{background:#0a3d1a;color:#00ff66}
body.matrix .chess-cell.dark{background:#051a0a;color:#00cc55}
body.matrix .chess-cell.selected{background:#00cc55!important;color:#000}
body.matrix .chess-cell.valid-move::after{background:rgba(0,255,100,.4)}
body.matrix .chess-cell.valid-capture::after{border-color:rgba(255,80,80,.9)}
body.matrix .chess-cell.check{background:radial-gradient(circle,#ff4444 0%,#0a3d1a 70%)!important}
body.matrix .chess-cell.check.light{background:radial-gradient(circle,#ff4444 0%,#0a3d1a 70%)!important}
.chess-promo{position:absolute;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;border-radius:12px;z-index:10;backdrop-filter:blur(4px)}
.chess-promo.show{display:flex}
.chess-promo h3{color:#fff;margin:0;font-size:18px}
.chess-promo-options{display:flex;gap:10px}
.chess-promo-options button{width:60px;height:60px;font-size:36px;background:#f0d9b5;color:#2a2a2a;border:none;border-radius:10px;cursor:pointer;font-family:'Segoe UI Symbol',sans-serif;transition:transform .12s}
.chess-promo-options button:hover{transform:scale(1.1);background:#fff}
.chess-actions{display:flex;gap:8px;margin-bottom:10px}
.chess-actions button{flex:1;border:none;border-radius:10px;padding:12px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;color:#fff;background:#4a4a75;transition:background .15s,transform .12s}
.chess-actions button:hover{background:#57578a}
.chess-actions button:active{transform:scale(.97)}
.chess-actions button.primary{background:#ff7a45}
body.matrix .chess-actions button{background:#0d4a22;color:#00ff66}
body.matrix .chess-actions button.primary{background:#00cc55;color:#000}
.chess-history{max-height:80px;overflow-y:auto;background:#12121c;border-radius:10px;padding:8px 12px;font-size:12px;color:#aaa;font-family:'Courier New',monospace;line-height:1.6}
body.matrix .chess-history{background:#000;color:#1d8a3d;border:1px solid rgba(0,255,100,.3)}
.chess-history .move-num{color:#ff7a45;font-weight:700}
body.matrix .chess-history .move-num{color:#00ff66}
body.mode-mobile .chess-cell{font-size:clamp(24px,9vw,36px)}
body.mode-mobile .chess-actions button{padding:10px;font-size:13px}

/* Тетріс */
.tetris-hud{display:flex;gap:8px;margin-bottom:12px}
.tetris-info-box{flex:1;background:#12121c;border-radius:10px;padding:8px 10px;text-align:center}
.tetris-info-label{color:#7a7a9a;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.tetris-info-value{color:#ff7a45;font-size:20px;font-weight:800}
body.matrix .tetris-info-box{background:#000;border:1px solid rgba(0,255,100,.3)}
body.matrix .tetris-info-value{color:#00ff66}
.tetris-playfield{position:relative;display:flex;gap:12px;margin-bottom:12px;justify-content:center}
#tetrisCanvas{background:#0a0a14;border-radius:10px;border:2px solid #353550;display:block;max-width:100%;height:auto;image-rendering:pixelated}
body.matrix #tetrisCanvas{border-color:rgba(0,255,100,.4);background:#000}
.tetris-side{background:#12121c;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;align-self:flex-start}
body.matrix .tetris-side{background:#000;border:1px solid rgba(0,255,100,.3)}
#tetrisNextCanvas{background:transparent;display:block}
.tetris-overlay{position:absolute;inset:0;background:rgba(18,18,28,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;color:#fff;text-align:center;padding:20px;gap:12px;font-weight:700}
.tetris-overlay.hidden{display:none}
.tetris-overlay h2{margin:0;font-size:24px;color:#ff7a45}
body.matrix .tetris-overlay h2{color:#00ff66}
.tetris-overlay p{margin:0;color:#9999bb;font-size:13px;line-height:1.5}
.tetris-overlay button{border:none;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:700;cursor:pointer;background:#ff7a45;color:#fff;font-family:inherit}
.tetris-overlay button:hover{background:#ff8f60}
body.matrix .tetris-overlay button{background:#00cc55;color:#000}
.tetris-controls{display:flex;gap:8px;margin-bottom:10px}
.tetris-controls button{flex:1;border:none;border-radius:10px;padding:12px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;color:#fff;background:#353550}
.tetris-controls button:hover{background:#40405f}
body.matrix .tetris-controls button{background:#0d4a22;color:#00ff66}
.tetris-dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;grid-template-areas:"rot . drop" "left down right";margin-top:10px}
.tetris-dpad button{border:none;border-radius:10px;padding:16px 0;font-size:20px;cursor:pointer;color:#fff;background:#353550;font-family:inherit;user-select:none;touch-action:manipulation;transition:transform .1s,background .15s}
.tetris-dpad button:hover{background:#40405f}
.tetris-dpad button:active{transform:scale(.9);background:#ff7a45}
.tdpad-left{grid-area:left}
.tdpad-rotate{grid-area:rot}
.tdpad-right{grid-area:right}
.tdpad-down{grid-area:down}
.tdpad-drop{grid-area:drop;background:#4a4a75!important}
body.matrix .tetris-dpad button{background:#0d4a22;color:#00ff66}
body.mode-mobile #tetrisCanvas{max-height:50vh;width:auto}
body.mode-mobile .tetris-side{padding:6px}
body.mode-mobile #tetrisNextCanvas{width:80px;height:80px}

/* Помодоро */
.pomodoro-modes{display:flex;gap:6px;margin-bottom:14px}
.pomodoro-mode{flex:1;border:none;border-radius:10px;padding:10px 4px;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;color:#8888aa;background:#1a1a2a;transition:all .2s}
.pomodoro-mode:hover{color:#bbb}
.pomodoro-mode.active{background:#ff7a45;color:#fff;box-shadow:0 2px 10px rgba(255,122,69,.4)}
body.matrix .pomodoro-mode{background:#020d05;color:#1d6b32}
body.matrix .pomodoro-mode.active{background:#00cc55;color:#000}
.pomodoro-circle-wrap{position:relative;width:220px;height:220px;margin:0 auto 16px}
.pomodoro-svg{width:100%;height:100%;transform:rotate(-90deg)}
.pomodoro-circle-bg{fill:none;stroke:#1a1a2a;stroke-width:10}
body.matrix .pomodoro-circle-bg{stroke:#020d05}
.pomodoro-circle-fill{fill:none;stroke:#ff7a45;stroke-width:10;stroke-linecap:round;stroke-dasharray:552.92;stroke-dashoffset:0;transition:stroke-dashoffset .5s linear,stroke .3s}
body.matrix .pomodoro-circle-fill{stroke:#00ff66}
.pomodoro-time-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pomodoro-time{color:#fff;font-size:40px;font-weight:800;font-family:'Courier New',monospace;letter-spacing:2px;line-height:1}
body.matrix .pomodoro-time{color:#00ff66;text-shadow:0 0 10px rgba(0,255,100,.5)}
.pomodoro-status{color:#7a7a9a;font-size:12px;text-transform:uppercase;letter-spacing:2px;margin-top:6px;font-weight:700}
body.matrix .pomodoro-status{color:#1d8a3d}
.pomodoro-status.running{color:#22c55e;animation:teacherPulse 1s infinite}
.pomodoro-status.paused{color:#eab308}
.pomodoro-sessions{background:#12121c;border-radius:12px;padding:12px;margin-bottom:12px;text-align:center}
body.matrix .pomodoro-sessions{background:#000;border:1px solid rgba(0,255,100,.3)}
.pomodoro-session-count{color:#fff;font-size:13px;margin-bottom:8px}
body.matrix .pomodoro-session-count{color:#00ff66}
.pomodoro-dots{display:flex;gap:8px;justify-content:center}
.pomodoro-dot{width:14px;height:14px;border-radius:50%;background:#2a2a3a;border:2px solid #353550;transition:all .3s}
.pomodoro-dot.done{background:#ff7a45;border-color:#ff7a45;box-shadow:0 0 10px rgba(255,122,69,.6)}
body.matrix .pomodoro-dot{background:#052010;border-color:#0d4a22}
body.matrix .pomodoro-dot.done{background:#00cc55;border-color:#00cc55;box-shadow:0 0 10px rgba(0,255,100,.6)}
.pomodoro-actions{display:flex;gap:8px;margin-bottom:12px}
.pomodoro-btn{flex:1;border:none;border-radius:10px;padding:14px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;color:#fff;background:#4a4a75;transition:background .15s,transform .12s}
.pomodoro-btn:hover{background:#57578a}
.pomodoro-btn:active{transform:scale(.97)}
.pomodoro-btn.primary{background:#ff7a45}
.pomodoro-btn.primary:hover{background:#ff8f60}
body.matrix .pomodoro-btn{background:#0d4a22;color:#00ff66}
body.matrix .pomodoro-btn.primary{background:#00cc55;color:#000}
.pomodoro-custom{display:flex;gap:8px;align-items:center;background:#12121c;border-radius:10px;padding:10px 14px}
body.matrix .pomodoro-custom{background:#000;border:1px solid rgba(0,255,100,.3)}
.pomodoro-custom label{color:#7a7a9a;font-size:12px;flex-shrink:0}
body.matrix .pomodoro-custom label{color:#1d8a3d}
.pomodoro-input{flex:1;background:#1a1a2a;border:2px solid transparent;border-radius:8px;padding:8px 10px;color:#fff;font-size:14px;font-family:inherit;outline:none}
.pomodoro-input:focus{border-color:#ff7a45}
body.matrix .pomodoro-input{background:#0a2814;color:#00ff66}
body.matrix .pomodoro-input:focus{border-color:#00ff66}
.pomodoro-custom .pomodoro-btn{flex:0 0 auto;padding:8px 14px;font-size:13px}

/* Погода */
.weather-search{display:flex;gap:8px;margin-bottom:10px}
.weather-input{flex:1;background:#12121c;border:2px solid transparent;border-radius:10px;padding:12px 14px;color:#fff;font-size:15px;font-family:inherit;outline:none;transition:border-color .2s}
.weather-input:focus{border-color:#ff7a45}
body.matrix .weather-input{background:#000;color:#00ff66;border-color:rgba(0,255,100,.3)}
body.matrix .weather-input:focus{border-color:#00ff66}
.weather-btn{border:none;border-radius:10px;padding:12px 18px;font-size:18px;background:#ff7a45;color:#fff;cursor:pointer;font-family:inherit;transition:background .15s,transform .12s}
.weather-btn:hover{background:#ff8f60}
.weather-btn:active{transform:scale(.95)}
body.matrix .weather-btn{background:#00cc55;color:#000}
.weather-quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.weather-quick button{border:none;border-radius:8px;padding:6px 12px;font-size:12px;background:#2f2f48;color:#ff7a45;font-family:inherit;font-weight:600;cursor:pointer;transition:background .15s}
.weather-quick button:hover{background:#3a3a58}
body.matrix .weather-quick button{background:#0a2814;color:#00ff66}
.weather-card{background:linear-gradient(135deg,#1e40af,#3b82f6);border-radius:16px;padding:20px;color:#fff;min-height:280px;transition:background .5s;position:relative;overflow:hidden}
.weather-card.night{background:linear-gradient(135deg,#1e1b4b,#312e81)}
.weather-card.cloudy{background:linear-gradient(135deg,#475569,#64748b)}
.weather-card.rainy{background:linear-gradient(135deg,#1e3a8a,#1e40af)}
.weather-card.snowy{background:linear-gradient(135deg,#64748b,#94a3b8)}
.weather-card.clear{background:linear-gradient(135deg,#0369a1,#0ea5e9)}
body.matrix .weather-card{background:linear-gradient(135deg,#052a10,#0a5a2e);border:1px solid rgba(0,255,100,.4)}
.weather-loading{color:rgba(255,255,255,.7);font-size:14px;text-align:center;padding:80px 20px}
.weather-city-name{font-size:24px;font-weight:800;margin-bottom:4px}
.weather-country{font-size:13px;opacity:.75;margin-bottom:16px}
.weather-main{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.weather-icon{font-size:72px;line-height:1}
.weather-temp{font-size:52px;font-weight:800;line-height:1}
.weather-desc{font-size:16px;opacity:.9;margin-top:4px;text-transform:capitalize}
.weather-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:rgba(0,0,0,.2);border-radius:12px;padding:12px}
.weather-detail{display:flex;justify-content:space-between;font-size:13px}
.weather-detail span:first-child{opacity:.75}
.weather-detail span:last-child{font-weight:700}
.weather-forecast{display:flex;gap:6px;margin-top:12px;overflow-x:auto;padding-bottom:6px}
.weather-day{flex:0 0 auto;background:rgba(0,0,0,.2);border-radius:10px;padding:8px 10px;text-align:center;min-width:64px}
.weather-day-name{font-size:11px;opacity:.75;margin-bottom:4px}
.weather-day-icon{font-size:24px;line-height:1;margin:4px 0}
.weather-day-temp{font-size:12px;font-weight:700}

/* Paint */
.paint-toolbar{background:#12121c;border-radius:12px;padding:12px;margin-bottom:12px}
body.matrix .paint-toolbar{background:#000;border:1px solid rgba(0,255,100,.3)}
.paint-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.paint-row:last-child{margin-bottom:0}
.paint-row label{color:#7a7a9a;font-size:12px;font-weight:600;min-width:60px}
body.matrix .paint-row label{color:#1d8a3d}
.paint-color{width:44px;height:32px;border:none;border-radius:8px;cursor:pointer;background:transparent;padding:0}
.paint-swatch{width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;transition:transform .12s;flex-shrink:0}
.paint-swatch:hover{transform:scale(1.15)}
.paint-swatch:active{transform:scale(.9)}
input[type="range"]#paintSize{flex:1;accent-color:#ff7a45;cursor:pointer}
body.matrix input[type="range"]#paintSize{accent-color:#00ff66}
.paint-mode{flex:1;border:none;border-radius:8px;padding:8px 4px;font-family:inherit;font-weight:600;font-size:11px;cursor:pointer;color:#8888aa;background:#1a1a2a;transition:all .15s;white-space:nowrap}
.paint-mode:hover{color:#bbb}
.paint-mode.active{background:#ff7a45;color:#fff}
body.matrix .paint-mode{background:#020d05;color:#1d6b32}
body.matrix .paint-mode.active{background:#00cc55;color:#000}
.paint-canvas-wrap{background:#ffffff;border-radius:12px;overflow:hidden;margin-bottom:12px;box-shadow:0 4px 16px rgba(0,0,0,.4);touch-action:none;position:relative}
body.matrix .paint-canvas-wrap{border:2px solid rgba(0,255,100,.4)}
#paintCanvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none;background:#ffffff}
.paint-actions{display:flex;gap:8px}
.paint-action-btn{flex:1;border:none;border-radius:10px;padding:12px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;color:#fff;background:#4a4a75;transition:background .15s,transform .12s}
.paint-action-btn:hover{background:#57578a}
.paint-action-btn:active{transform:scale(.97)}
.paint-action-btn.primary{background:#ff7a45}
.paint-action-btn.primary:hover{background:#ff8f60}
body.matrix .paint-action-btn{background:#0d4a22;color:#00ff66}
body.matrix .paint-action-btn.primary{background:#00cc55;color:#000}
body.mode-mobile .paint-swatch{width:24px;height:24px}
body.mode-mobile .paint-mode{font-size:10px;padding:7px 2px}
body.mode-mobile .weather-temp{font-size:44px}
body.mode-mobile .weather-icon{font-size:60px}

/* Нагадування */
.rem-permission{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(255,122,69,.15);border-radius:10px;padding:10px 14px;
  margin-bottom:12px;color:#ff7a45;font-size:13px;font-weight:600;
  transition:opacity .3s;
}
body.matrix .rem-permission{background:rgba(0,255,100,.1);color:#00ff66}
.rem-permission.hidden{display:none}
.rem-perm-btn{
  border:none;border-radius:8px;padding:8px 14px;
  font-family:inherit;font-weight:700;font-size:12px;
  cursor:pointer;background:#ff7a45;color:#fff;flex-shrink:0;
}
.rem-perm-btn:hover{background:#ff8f60}
body.matrix .rem-perm-btn{background:#00cc55;color:#000}

.rem-form{background:#12121c;border-radius:12px;padding:14px;margin-bottom:12px}
body.matrix .rem-form{background:#000;border:1px solid rgba(0,255,100,.3)}
.rem-input{
  width:100%;background:#1a1a2a;border:2px solid transparent;
  border-radius:10px;padding:12px 14px;color:#fff;font-size:15px;
  font-family:inherit;outline:none;margin-bottom:10px;transition:border-color .2s;
}
.rem-input:focus{border-color:#ff7a45}
body.matrix .rem-input{background:#0a2814;color:#00ff66}
body.matrix .rem-input:focus{border-color:#00ff66}
.rem-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rem-row label{color:#7a7a9a;font-size:12px;font-weight:600;min-width:60px}
body.matrix .rem-row label{color:#1d8a3d}
.rem-date,.rem-time,.rem-select{
  flex:1;background:#1a1a2a;border:2px solid transparent;border-radius:8px;
  padding:10px 12px;color:#fff;font-size:14px;font-family:inherit;
  outline:none;cursor:pointer;transition:border-color .2s;
}
.rem-date:focus,.rem-time:focus,.rem-select:focus{border-color:#ff7a45}
body.matrix .rem-date,body.matrix .rem-time,body.matrix .rem-select{background:#0a2814;color:#00ff66}
.rem-sound{
  flex:1;border:none;border-radius:8px;padding:8px 6px;
  font-family:inherit;font-weight:600;font-size:12px;
  cursor:pointer;color:#8888aa;background:#1a1a2a;transition:all .15s;
}
.rem-sound:hover{color:#bbb}
.rem-sound.active{background:#ff7a45;color:#fff}
body.matrix .rem-sound{background:#020d05;color:#1d6b32}
body.matrix .rem-sound.active{background:#00cc55;color:#000}
.rem-add-btn{
  width:100%;border:none;border-radius:10px;padding:14px;
  font-family:inherit;font-weight:700;font-size:15px;
  cursor:pointer;background:#ff7a45;color:#fff;
  transition:background .15s,transform .12s;
}
.rem-add-btn:hover{background:#ff8f60}
.rem-add-btn:active{transform:scale(.98)}
body.matrix .rem-add-btn{background:#00cc55;color:#000}

.rem-quick{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px;
}
.rem-quick span{color:#7a7a9a;font-size:12px;font-weight:600}
body.matrix .rem-quick span{color:#1d8a3d}
.rem-quick button{
  border:none;border-radius:8px;padding:6px 12px;
  font-size:12px;background:#2f2f48;color:#ff7a45;
  font-family:inherit;font-weight:600;cursor:pointer;
}
.rem-quick button:hover{background:#3a3a58}
body.matrix .rem-quick button{background:#0a2814;color:#00ff66}

.rem-list-title{
  display:flex;justify-content:space-between;align-items:center;
  color:#fff;font-weight:700;font-size:14px;margin-bottom:10px;padding:0 4px;
}
body.matrix .rem-list-title{color:#00ff66}
.rem-clear-done{
  border:none;border-radius:6px;padding:5px 10px;
  font-size:11px;background:#4a4a75;color:#fff;
  font-family:inherit;font-weight:600;cursor:pointer;
}
.rem-clear-done:hover{background:#d64550}
body.matrix .rem-clear-done{background:#0d4a22;color:#00ff66}

.rem-list{display:flex;flex-direction:column;gap:8px}
.rem-empty{
  text-align:center;color:#7a7a9a;font-size:13px;
  padding:30px 20px;background:#12121c;border-radius:12px;
}
body.matrix .rem-empty{background:#000;color:#1d8a3d;border:1px solid rgba(0,255,100,.2)}

.rem-item{
  display:flex;gap:10px;align-items:center;
  background:#12121c;border-radius:10px;padding:12px 14px;
  border-left:4px solid #ff7a45;
  transition:all .2s;animation:panelIn .3s ease;
}
body.matrix .rem-item{background:#000;border:1px solid rgba(0,255,100,.3);border-left:4px solid #00ff66}
.rem-item.done{opacity:.5;border-left-color:#22c55e}
.rem-item.done .rem-item-text{text-decoration:line-through}
.rem-item.overdue{border-left-color:#ef4444;animation:teacherPulse 1s infinite}
.rem-item-check{
  width:22px;height:22px;border-radius:50%;
  border:2px solid #4a4a75;background:transparent;
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:transparent;font-size:14px;font-weight:700;
  transition:all .2s;
}
.rem-item-check:hover{border-color:#22c55e}
.rem-item.done .rem-item-check{background:#22c55e;border-color:#22c55e;color:#fff}
.rem-item-body{flex:1;min-width:0}
.rem-item-text{
  color:#fff;font-size:14px;font-weight:600;
  margin-bottom:4px;word-wrap:break-word;overflow-wrap:anywhere;
}
body.matrix .rem-item-text{color:#00ff66}
.rem-item-meta{
  color:#7a7a9a;font-size:11px;font-weight:600;
  display:flex;gap:8px;flex-wrap:wrap;
}
body.matrix .rem-item-meta{color:#1d8a3d}
.rem-item-meta .repeat-badge{
  background:#4a4a75;padding:2px 6px;border-radius:4px;
  font-size:10px;color:#fff;
}
body.matrix .rem-item-meta .repeat-badge{background:#0d4a22;color:#00ff66}
.rem-item-delete{
  border:none;border-radius:6px;width:28px;height:28px;
  background:transparent;color:#7a7a9a;
  cursor:pointer;font-size:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.rem-item-delete:hover{background:#d64550;color:#fff}
body.matrix .rem-item-delete:hover{background:#8a1a1a;color:#ff8888}

body.mode-mobile .rem-input,body.mode-mobile .rem-date,
body.mode-mobile .rem-time,body.mode-mobile .rem-select{font-size:13px;padding:9px 10px}
body.mode-mobile .rem-add-btn{font-size:14px;padding:12px}
body.mode-mobile .rem-item-text{font-size:13px}

/* Аудіо-візуалізатор */
.viz-controls{background:#12121c;border-radius:12px;padding:12px;margin-bottom:12px}
body.matrix .viz-controls{background:#000;border:1px solid rgba(0,255,100,.3)}
.viz-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.viz-row:last-child{margin-bottom:0}
.viz-row label{color:#7a7a9a;font-size:12px;font-weight:600;min-width:80px}
body.matrix .viz-row label{color:#1d8a3d}
.viz-src-btn,.viz-mode-btn{
  flex:1;min-width:0;border:none;border-radius:8px;padding:8px 6px;
  font-family:inherit;font-weight:600;font-size:12px;
  cursor:pointer;color:#8888aa;background:#1a1a2a;transition:all .15s;white-space:nowrap;
}
.viz-src-btn:hover,.viz-mode-btn:hover{color:#bbb}
.viz-src-btn.active,.viz-mode-btn.active{background:#ff7a45;color:#fff}
body.matrix .viz-src-btn,body.matrix .viz-mode-btn{background:#020d05;color:#1d6b32}
body.matrix .viz-src-btn.active,body.matrix .viz-mode-btn.active{background:#00cc55;color:#000}
.viz-color-btn{
  width:32px;height:32px;border:2px solid transparent;border-radius:50%;
  cursor:pointer;transition:transform .12s;flex-shrink:0;
}
.viz-color-btn:hover{transform:scale(1.15)}
.viz-color-btn.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,122,69,.5)}
body.matrix .viz-color-btn.active{box-shadow:0 0 0 3px rgba(0,255,100,.5)}
input[type="range"]#vizSens,input[type="range"]#vizVol{flex:1;accent-color:#ff7a45;cursor:pointer}
body.matrix input[type="range"]#vizSens,body.matrix input[type="range"]#vizVol{accent-color:#00ff66}
.viz-canvas-wrap{
  position:relative;background:#0a0a14;border-radius:12px;overflow:hidden;
  border:2px solid #353550;margin-bottom:12px;
}
body.matrix .viz-canvas-wrap{background:#000;border-color:rgba(0,255,100,.4)}
#vizCanvas{display:block;width:100%;height:auto;aspect-ratio:2/1}
.viz-status{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#7a7a9a;font-size:14px;font-weight:600;text-align:center;padding:20px;
  pointer-events:none;transition:opacity .3s;
}
.viz-status.hidden{opacity:0}
body.matrix .viz-status{color:#1d8a3d}
.viz-file-info{
  text-align:center;color:#7a7a9a;font-size:12px;
  min-height:18px;margin-top:8px;word-break:break-all;
}
body.matrix .viz-file-info{color:#1d8a3d}
body.mode-mobile .viz-row label{min-width:60px;font-size:11px}
body.mode-mobile .viz-src-btn,body.mode-mobile .viz-mode-btn{font-size:11px;padding:7px 4px}
body.mode-mobile .viz-color-btn{width:28px;height:28px}

/* AI-чат */
.ai-header{margin-bottom:12px}
.ai-key-area{display:flex;gap:8px}
.ai-key-input{flex:1;background:#12121c;border:2px solid transparent;border-radius:10px;padding:12px 14px;color:#fff;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}
.ai-key-input:focus{border-color:#ff7a45}
body.matrix .ai-key-input{background:#000;color:#00ff66;border-color:rgba(0,255,100,.3)}
.ai-key-save{border:none;border-radius:10px;padding:12px 16px;font-size:16px;background:#ff7a45;color:#fff;cursor:pointer;font-family:inherit;transition:background .15s}
.ai-key-save:hover{background:#ff8f60}
body.matrix .ai-key-save{background:#00cc55;color:#000}
.ai-key-saved{display:flex;justify-content:space-between;align-items:center;background:#12121c;border-radius:10px;padding:10px 14px;color:#22c55e;font-size:13px;font-weight:600}
body.matrix .ai-key-saved{background:#000;color:#00ff66;border:1px solid rgba(0,255,100,.3)}
.ai-key-change{border:none;border-radius:6px;padding:6px 12px;font-size:11px;background:#4a4a75;color:#fff;cursor:pointer;font-family:inherit;font-weight:600}
.ai-key-change:hover{background:#57578a}
body.matrix .ai-key-change{background:#0d4a22;color:#00ff66}

.ai-controls{display:flex;gap:8px;margin-bottom:12px}
.ai-model-select{flex:1;background:#12121c;border:2px solid transparent;border-radius:10px;padding:10px 12px;color:#fff;font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;outline:none}
.ai-model-select:focus{border-color:#ff7a45}
body.matrix .ai-model-select{background:#000;color:#00ff66;border-color:rgba(0,255,100,.3)}
.ai-clear-btn{border:none;border-radius:10px;padding:10px 14px;font-size:16px;background:#4a4a75;color:#fff;cursor:pointer;font-family:inherit;transition:background .15s}
.ai-clear-btn:hover{background:#d64550}
body.matrix .ai-clear-btn{background:#0d4a22;color:#00ff66}

.ai-messages{
  background:#12121c;border-radius:12px;padding:12px;
  min-height:300px;max-height:450px;overflow-y:auto;
  margin-bottom:12px;display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
}
body.matrix .ai-messages{background:#000;border:1px solid rgba(0,255,100,.3)}
.ai-empty{color:#7a7a9a;font-size:13px;text-align:center;padding:40px 20px;line-height:1.6}
body.matrix .ai-empty{color:#1d8a3d}

.ai-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;animation:panelIn .25s ease}
.ai-msg.user{align-self:flex-end;background:#ff7a45;color:#fff;border-bottom-right-radius:4px}
.ai-msg.assistant{align-self:flex-start;background:#2f2f48;color:#fff;border-bottom-left-radius:4px}
.ai-msg.error{align-self:flex-start;background:#8a1a1a;color:#ff8888;border-bottom-left-radius:4px;font-size:13px}
body.matrix .ai-msg.user{background:#00cc55;color:#000}
body.matrix .ai-msg.assistant{background:#0a2814;color:#00ff66;border:1px solid rgba(0,255,100,.2)}
body.matrix .ai-msg.error{background:#3a0a0a;color:#ff8888}

.ai-msg.typing::after{
  content:'▊';animation:aiBlink .8s infinite;margin-left:2px;
}
@keyframes aiBlink{50%{opacity:0}}

.ai-input-row{display:flex;gap:8px;align-items:flex-end}
.ai-input{
  flex:1;background:#12121c;border:2px solid transparent;border-radius:12px;
  padding:12px 14px;color:#fff;font-size:14px;font-family:inherit;
  outline:none;resize:none;max-height:120px;min-height:48px;
  transition:border-color .2s;line-height:1.4;
}
.ai-input:focus{border-color:#ff7a45}
body.matrix .ai-input{background:#000;color:#00ff66;border-color:rgba(0,255,100,.3)}
.ai-send-btn{
  border:none;border-radius:12px;padding:12px 18px;font-size:18px;
  background:#ff7a45;color:#fff;cursor:pointer;font-family:inherit;
  transition:background .15s,transform .12s;flex-shrink:0;height:48px;
}
.ai-send-btn:hover{background:#ff8f60}
.ai-send-btn:active{transform:scale(.95)}
.ai-send-btn:disabled{background:#555;cursor:not-allowed;opacity:.5}
body.matrix .ai-send-btn{background:#00cc55;color:#000}

body.mode-mobile .ai-messages{min-height:250px;max-height:380px}
body.mode-mobile .ai-msg{font-size:13px}

/* Адмінка */
.admin-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;justify-content:center;align-items:center;z-index:10000;padding:20px;overflow-y:auto;backdrop-filter:blur(0);transition:backdrop-filter .3s}
.admin-modal.show{display:flex;backdrop-filter:blur(6px)}
.admin-card{background:#26263a;border-radius:16px;padding:24px;width:100%;max-width:380px;color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.7);max-height:90vh;overflow-y:auto;transform:scale(.9);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.admin-modal.show .admin-card{transform:scale(1);opacity:1}
.admin-card.wide{max-width:480px}
.admin-card h2{margin:0 0 16px;font-size:20px;text-align:center;color:#ff7a45;font-weight:700}
body.matrix .admin-card{background:#051a0a;border:1px solid rgba(0,255,100,.4)}
body.matrix .admin-card h2{color:#00ff66}
.admin-input{width:100%;background:#1a1a2a;border:2px solid transparent;border-radius:10px;padding:12px 14px;color:#fff;font-size:16px;font-family:inherit;outline:none;margin-bottom:12px;transition:border-color .2s}
.admin-input:focus{border-color:#ff7a45}
.admin-input.small{width:90px;margin:0;padding:8px 10px;font-size:14px}
body.matrix .admin-input{background:#0a2814;color:#00ff66}
body.matrix .admin-input:focus{border-color:#00ff66}
.admin-err{color:#ef4444;font-size:13px;min-height:18px;margin-bottom:8px;text-align:center}
.admin-actions{display:flex;gap:8px;margin-top:16px}
.admin-btn{flex:1;border:none;border-radius:10px;padding:12px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;color:#fff;background:#4a4a75;transition:background .15s,transform .12s cubic-bezier(.34,1.56,.64,1)}
.admin-btn:hover{background:#57578a}
.admin-btn:active{transform:scale(.97)}
.admin-btn.primary{background:#ff7a45}
.admin-btn.primary:hover{background:#ff8f60}
.admin-btn.danger{background:#8a1a1a;color:#ff8888}
.admin-btn.danger:hover{background:#a02020}
.admin-btn.full{width:100%;flex:none}
body.matrix .admin-btn{background:#0d4a22;color:#00ff66}
body.matrix .admin-btn.primary{background:#00cc55;color:#000}
body.matrix .admin-btn.danger{background:#8a1a1a;color:#ff8888}
.admin-section{background:#1a1a2a;border-radius:10px;padding:12px 14px;margin-bottom:10px}
body.matrix .admin-section{background:#020d05;border:1px solid rgba(0,255,100,.2)}
.admin-section-title{font-size:13px;font-weight:700;color:#ff7a45;margin-bottom:10px;letter-spacing:.5px}
body.matrix .admin-section-title{color:#00ff66}
.admin-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:#bbb}
.admin-row span:first-child{color:#8888aa;flex-shrink:0}
.admin-row .admin-btn{flex:0 0 auto;padding:8px 12px;font-size:13px}
.admin-badge{background:#353550;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700;color:#ff7a45}
body.matrix .admin-badge{background:#0d4a22;color:#00ff66}
.admin-info{font-size:12px;color:#7a7a9a;line-height:1.7;font-family:'Courier New',monospace;word-break:break-all}
body.matrix .admin-info{color:#1d8a3d}
.danger-zone{border:1px solid rgba(138,26,26,.5)}

.toast-container{position:fixed;top:20px;right:20px;z-index:20000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:#26263a;color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;min-width:220px;box-shadow:0 10px 30px rgba(0,0,0,.5);border-left:4px solid #ff7a45;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);pointer-events:auto}
.toast.removing{animation:toastOut .3s ease-in forwards}
.toast.success{border-left-color:#22c55e}
.toast.error{border-left-color:#ef4444}
@keyframes toastIn{from{opacity:0;transform:translateX(120%) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateX(120%) scale(.9)}}
body.matrix .toast{background:#051a0a;border-left-color:#00ff66;color:#00ff66;box-shadow:0 10px 30px rgba(0,255,100,.3)}

#secretMsg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);background:rgba(0,20,5,.95);border:2px solid #00ff66;border-radius:16px;padding:30px 40px;color:#00ff66;font-family:'Courier New',monospace;font-size:18px;text-align:center;z-index:9999;opacity:0;pointer-events:none;box-shadow:0 0 40px rgba(0,255,100,.6);transition:opacity .4s,transform .4s;max-width:90vw;line-height:1.6}
#secretMsg.show{opacity:1;animation:secretIn .5s cubic-bezier(.34,1.56,.64,1);transform:translate(-50%,-50%) scale(1)}
@keyframes secretIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(2deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
#secretMsg .big{font-size:28px;font-weight:bold;margin-bottom:12px}
#secretMsg .hint{font-size:12px;color:#1d8a3d;margin-top:16px}
body.matrix .app-title{animation:glitch 2.5s infinite}
@keyframes glitch{0%,90%,100%{text-shadow:none}92%{text-shadow:2px 0 #00ff66,-2px 0 #ff0066;transform:translateX(-1px)}94%{text-shadow:-2px 0 #00ff66,2px 0 #ff0066;transform:translateX(1px)}96%{text-shadow:2px 0 #00ff66,0 2px #00ff66}}
.calc-extras{margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.calc-ext-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.calc-ext-btn{flex:1;min-width:44px;border:none;border-radius:8px;padding:8px 6px;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;color:#b0b0d0;background:#2f2f48;transition:all .15s;white-space:nowrap}
.calc-ext-btn:hover{background:#3a3a58;color:#fff}
.calc-ext-btn:active{transform:scale(.95)}
.calc-ext-btn.primary{background:#ff7a45;color:#fff}
.calc-ext-btn.primary:hover{background:#ff8f60}
.calc-ext-btn.wide{flex:none;width:100%}
body.matrix .calc-ext-btn{background:#061a0d;color:#1d8a3d}
body.matrix .calc-ext-btn:hover{background:#0a2814;color:#00ff66}
body.matrix .calc-ext-btn.primary{background:#00cc55;color:#000}
.calc-ext-label{color:#7a7a9a;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
body.matrix .calc-ext-label{color:#1d8a3d}
.calc-var-input,.calc-func-input{flex:1;min-width:50px;background:#1a1a2a;border:1.5px solid transparent;border-radius:8px;padding:7px 9px;color:#fff;font-size:13px;font-family:inherit;font-weight:600;outline:none;transition:border-color .15s}
.calc-var-input:focus,.calc-func-input:focus{border-color:#ff7a45}
.calc-var-input.filled{background:#2a1a1a}
body.matrix .calc-var-input,body.matrix .calc-func-input{background:#0a2814;color:#00ff66}
body.matrix .calc-var-input:focus,body.matrix .calc-func-input:focus{border-color:#00ff66}
.calc-func-list{display:flex;gap:4px;flex-wrap:wrap}
.calc-func-item{display:flex;align-items:center;gap:4px;background:#2f2f48;border-radius:6px;padding:4px 8px 4px 10px;font-size:11px;color:#b0b0d0;font-family:inherit;font-weight:600;cursor:pointer;transition:background .15s}
.calc-func-item:hover{background:#3a3a58;color:#fff}
.calc-func-item .del{border:none;background:transparent;color:#888;font-size:11px;cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.calc-func-item .del:hover{color:#ef4444}
body.matrix .calc-func-item{background:#0a2814;color:#1d8a3d}
body.matrix .calc-func-item:hover{background:#0f3d1e;color:#00ff66}
.calc-mem-badge{font-size:10px;font-weight:700;color:#ff7a45;background:rgba(255,122,69,.15);padding:3px 7px;border-radius:6px;min-width:20px;text-align:center}
.calc-mem-badge.empty{opacity:.3}
body.matrix .calc-mem-badge{color:#00ff66;background:rgba(0,255,100,.1)}
.calc-history-header{display:flex;justify-content:space-between;align-items:center;padding:4px 2px}
.calc-history-header span{color:#7a7a9a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
body.matrix .calc-history-header span{color:#1d8a3d}
.calc-hist-clear{border:none;border-radius:6px;padding:3px 8px;font-size:11px;background:#2f2f48;color:#888;cursor:pointer;font-family:inherit;font-weight:600}
.calc-hist-clear:hover{background:#d64550;color:#fff}
.calc-history{max-height:120px;overflow-y:auto;background:#12121c;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px}
.calc-history:empty{display:none}
body.matrix .calc-history{background:#000;border:1px solid rgba(0,255,100,.2)}
.calc-history-item{background:#1a1a2a;border-radius:6px;padding:6px 10px;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;gap:2px}
.calc-history-item:hover{background:#2f2f48}
body.matrix .calc-history-item{background:#052010}
body.matrix .calc-history-item:hover{background:#0a2814}
.calc-history-item .expr{color:#8888aa;font-size:11px;font-family:'Courier New',monospace;word-break:break-all}
.calc-history-item .result{color:#ff7a45;font-size:14px;font-weight:700;font-family:'Courier New',monospace;text-align:right}
body.matrix .calc-history-item .expr{color:#1d8a3d}
body.matrix .calc-history-item .result{color:#00ff66}
.calc-byte-panel{background:#12121c;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
body.matrix .calc-byte-panel{background:#000;border:1px solid rgba(0,255,100,.2)}
.calc-byte-row{display:flex;gap:6px}
.calc-byte-input{flex:1;background:#1a1a2a;border:1.5px solid transparent;border-radius:8px;padding:8px 10px;color:#fff;font-size:14px;font-family:inherit;font-weight:700;outline:none}
.calc-byte-input:focus{border-color:#ff7a45}
body.matrix .calc-byte-input{background:#0a2814;color:#00ff66}
.calc-byte-select{background:#2f2f48;border:none;border-radius:8px;padding:8px 10px;color:#fff;font-size:13px;font-family:inherit;font-weight:700;cursor:pointer;outline:none}
body.matrix .calc-byte-select{background:#0d4a22;color:#00ff66}
.calc-byte-results{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.calc-byte-item{display:flex;justify-content:space-between;gap:6px;background:#1a1a2a;border-radius:6px;padding:6px 10px;font-family:'Courier New',monospace;font-size:12px}
.calc-byte-item .lbl{color:#8888aa;font-weight:700}
.calc-byte-item .val{color:#ff7a45;font-weight:700}
body.matrix .calc-byte-item{background:#052010}
body.matrix .calc-byte-item .lbl{color:#1d8a3d}
body.matrix .calc-byte-item .val{color:#00ff66}
.calc-copy-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#22c55e;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:700;z-index:30000;animation:calcToastIn .3s;pointer-events:none}
@keyframes calcToastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.cr-input{background:#1a1a2a;border:1.5px solid transparent;border-radius:8px;padding:9px 12px;color:#fff;font-size:14px;font-family:inherit;font-weight:600;outline:none;transition:border-color .15s}
.cr-input:focus{border-color:#ff7a45}
body.matrix .cr-input{background:#0a2814;color:#00ff66}
.cr-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.cr-row label{color:#7a7a9a;font-size:12px;font-weight:600;min-width:60px}
body.matrix .cr-row label{color:#1d8a3d}
.cr-info{color:#7a7a9a;font-size:12px;text-align:center;line-height:1.5;padding:6px}
body.matrix .cr-info{color:#1d8a3d}
.cr-btn{border:none;border-radius:8px;padding:10px 14px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;background:#4a4a75;color:#fff;transition:all .15s}
.cr-btn:hover{background:#57578a}
.cr-btn:active{transform:scale(.96)}
.cr-btn.primary{background:#ff7a45}
.cr-btn.primary:hover{background:#ff8f60}
body.matrix .cr-btn{background:#0d4a22;color:#00ff66}
body.matrix .cr-btn.primary{background:#00cc55;color:#000}
.cr-btn:disabled{opacity:.4;cursor:not-allowed}

/* Crypto */
.cr-crypto{background:#12121c;border-radius:12px;padding:14px;margin-bottom:12px}
body.matrix .cr-crypto{background:#000;border:1px solid rgba(0,255,100,.3)}
.cr-coin{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:10px 12px;background:#1a1a2a;border-radius:10px;margin-bottom:8px;animation:panelIn .3s}
.cr-coin:last-child{margin-bottom:0}
body.matrix .cr-coin{background:#052010}
.cr-coin-icon{font-size:24px}
.cr-coin-name{font-weight:700;color:#fff;font-size:14px}
.cr-coin-symbol{color:#7a7a9a;font-size:11px;text-transform:uppercase}
body.matrix .cr-coin-name{color:#00ff66}
.cr-coin-price{font-weight:800;color:#fff;font-family:'Courier New',monospace;font-size:15px}
body.matrix .cr-coin-price{color:#00ff66}
.cr-coin-change{font-weight:700;font-size:13px;min-width:70px;text-align:right}
.cr-coin-change.up{color:#22c55e}
.cr-coin-change.down{color:#ef4444}

/* Yahtzee */
.cr-dice-row{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.cr-die{width:60px;height:60px;background:#f5f5f5;border-radius:10px;border:2px solid #bbb;cursor:pointer;font-size:32px;display:flex;align-items:center;justify-content:center;transition:all .2s;user-select:none}
.cr-die.held{background:#ff7a45;border-color:#ff7a45;color:#fff;transform:translateY(-6px);box-shadow:0 6px 16px rgba(255,122,69,.5)}
.cr-die.rolling{animation:diceRoll .3s}
@keyframes diceRoll{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}100%{transform:rotate(0)}}
body.matrix .cr-die{background:#e8f5e8;border-color:#00cc55}
body.matrix .cr-die.held{background:#00cc55;border-color:#00cc55;color:#000}
.cr-score-table{background:#12121c;border-radius:12px;padding:10px;font-size:13px}
body.matrix .cr-score-table{background:#000;border:1px solid rgba(0,255,100,.3)}
.cr-score-row{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:6px;cursor:pointer;transition:background .15s;color:#fff;font-weight:600}
.cr-score-row:hover{background:#2f2f48}
body.matrix .cr-score-row{color:#00ff66}
body.matrix .cr-score-row:hover{background:#0a2814}
.cr-score-row.used{opacity:.5;cursor:default}
.cr-score-row.used:hover{background:transparent}
.cr-score-row .val{font-family:'Courier New',monospace;font-weight:800;color:#ff7a45}
body.matrix .cr-score-row .val{color:#00ff66}

/* Nonogram */
.cr-nono-wrap{overflow:auto;background:#12121c;border-radius:12px;padding:14px;margin-bottom:12px}
body.matrix .cr-nono-wrap{background:#000;border:1px solid rgba(0,255,100,.3)}
.cr-nono-grid{display:inline-grid;gap:2px}
.cr-nono-cell{width:30px;height:30px;background:#f0f0f0;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#999;transition:all .15s;user-select:none}
.cr-nono-cell.filled{background:#ff7a45}
.cr-nono-cell.marked{background:#4a4a75;color:#fff}
body.matrix .cr-nono-cell{background:#a0e8b0;color:#0a2814}
body.matrix .cr-nono-cell.filled{background:#00cc55}
.cr-nono-hint{background:#4a4a75;color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:2px}
body.matrix .cr-nono-hint{background:#0d4a22;color:#00ff66}

/* Drums */
.cr-drums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.cr-pad{aspect-ratio:1;background:linear-gradient(135deg,#2f2f48,#1a1a2a);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:all .08s;border:2px solid transparent;color:#fff;font-weight:700;font-size:13px;touch-action:manipulation}
.cr-pad:active,.cr-pad.hit{background:linear-gradient(135deg,#ff7a45,#ff8f60);border-color:#fff;transform:scale(.95)}
.cr-pad .ico{font-size:24px;margin-bottom:4px}
.cr-pad .key{font-size:10px;opacity:.6;margin-top:2px}
body.matrix .cr-pad{background:linear-gradient(135deg,#0d4a22,#052010);color:#00ff66}
body.matrix .cr-pad:active,body.matrix .cr-pad.hit{background:linear-gradient(135deg,#00cc55,#00ff66);color:#000}

/* Sudoku */
.cr-sudoku{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;background:#4a4a75;padding:4px;border-radius:10px;margin-bottom:12px;aspect-ratio:1;max-width:450px;margin-left:auto;margin-right:auto;user-select:none}
body.matrix .cr-sudoku{background:#0d4a22}
.cr-sudoku-cell{background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,4vw,22px);font-weight:700;cursor:pointer;transition:background .15s;color:#2a2a2a;border-radius:3px}
.cr-sudoku-cell.fixed{background:#ddd;color:#000;cursor:default;font-weight:900}
.cr-sudoku-cell.selected{background:#ffd0b0}
.cr-sudoku-cell.error{background:#ff8888;color:#fff}
.cr-sudoku-cell.hint{background:#a0e8b0}
.cr-sudoku-cell.bt{border-top:2px solid #4a4a75}
.cr-sudoku-cell.bl{border-left:2px solid #4a4a75}
body.matrix .cr-sudoku-cell{background:#a0e8b0;color:#0a2814}
body.matrix .cr-sudoku-cell.fixed{background:#0a5a2e;color:#00ff66}
.cr-numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:450px;margin:0 auto}
.cr-num-btn{padding:14px 0;background:#4a4a75;color:#fff;border:none;border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s}
.cr-num-btn:hover{background:#57578a}
.cr-num-btn:active{transform:scale(.94)}
body.matrix .cr-num-btn{background:#0d4a22;color:#00ff66}

/* Sokoban */
.cr-sokoban{display:grid;gap:2px;justify-content:center;background:#12121c;border-radius:12px;padding:14px;margin-bottom:12px;max-width:fit-content;margin-left:auto;margin-right:auto}
body.matrix .cr-sokoban{background:#000;border:1px solid rgba(0,255,100,.3)}
.cr-sok-cell{width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:20px;user-select:none}
.cr-sok-wall{background:#3a3a5a}
.cr-sok-floor{background:#1a1a2a}
.cr-sok-target{background:#5a3a3a;position:relative}
.cr-sok-target::after{content:'';position:absolute;inset:30%;border-radius:50%;background:#ff7a45;opacity:.6}
.cr-sok-box{background:#8b5a2b;color:#fff}
.cr-sok-box-on{background:#22c55e;color:#fff}
.cr-sok-player{background:#1a1a2a;color:#fff}
body.matrix .cr-sok-floor{background:#052010}
body.matrix .cr-sok-wall{background:#0a3d1a}
body.matrix .cr-sok-target{background:#0d4a22}

/* Logo */
.cr-logo-preview{background:#12121c;border-radius:12px;padding:20px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;min-height:180px;overflow:hidden}
body.matrix .cr-logo-preview{background:#000;border:1px solid rgba(0,255,100,.3)}
.cr-logo-svg{max-width:100%;max-height:250px}

/* Meme */
.cr-meme-canvas-wrap{background:#12121c;border-radius:12px;padding:10px;margin-bottom:12px;text-align:center}
body.matrix .cr-meme-canvas-wrap{background:#000;border:1px solid rgba(0,255,100,.3)}
.cr-meme-canvas{max-width:100%;border-radius:8px;display:block;margin:0 auto}

/* Password */
.cr-pass-display{background:#12121c;border-radius:12px;padding:16px;margin-bottom:12px;font-family:'Courier New',monospace;font-size:18px;font-weight:700;color:#fff;word-break:break-all;text-align:center;cursor:pointer;user-select:all;position:relative;min-height:60px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.cr-pass-display:hover{background:#1a1a2a}
body.matrix .cr-pass-display{background:#000;color:#00ff66;border:1px solid rgba(0,255,100,.3)}
.cr-pass-strength{height:8px;background:#2f2f48;border-radius:4px;overflow:hidden;margin-bottom:12px}
.cr-pass-strength-bar{height:100%;width:0;transition:width .3s,background .3s}
.cr-check{display:flex;align-items:center;gap:8px;color:#7a7a9a;font-size:13px;font-weight:600;cursor:pointer;padding:6px 0}
body.matrix .cr-check{color:#1d8a3d}
.cr-check input{width:18px;height:18px;accent-color:#ff7a45;cursor:pointer}
body.matrix .cr-check input{accent-color:#00ff66}

body.mode-mobile .cr-die{width:50px;height:50px;font-size:26px}
body.mode-mobile .cr-nono-cell{width:26px;height:26px}
body.mode-mobile .cr-sok-cell{width:30px;height:30px;font-size:16px}
body.mode-mobile .cr-pad .ico{font-size:20px}
body.mode-mobile .cr-pad{font-size:11px}
/* Ховаємо старі таби */
.tabs { display: none !important; }

/* Приховуємо всі панелі за замовчуванням */
.panel { display: none !important; }
.panel.active { display: block !important; }

/* Контейнер лаунчера */
.launcher {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  animation: launcherIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes launcherIn {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}
.launcher.hidden {
  display: none;
}

/* Пошук */
.launcher-search-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #26263a;
  padding-bottom: 10px;
  margin-bottom: 6px;
}
body.matrix .launcher-search-wrap { background: #051a0a; }
.launcher-search {
  position: relative;
}
.launcher-search input {
  width: 100%;
  background: #12121c;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 40px 14px 44px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  outline: none;
  transition: border-color .2s;
}
.launcher-search input:focus { border-color: #ff7a45; }
body.matrix .launcher-search input {
  background: #000;
  color: #00ff66;
  border-color: rgba(0,255,100,.3);
}
body.matrix .launcher-search input:focus { border-color: #00ff66; }
.launcher-search .ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #7a7a9a;
  pointer-events: none;
}
.launcher-search .clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #7a7a9a;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  display: none;
}
.launcher-search .clear:hover { color: #fff; background: #2f2f48; }
.launcher-search .clear.show { display: block; }

/* Фільтри (категорії) */
.launcher-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.launcher-cats::-webkit-scrollbar { display: none; }
.launcher-cat {
  flex: 0 0 auto;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  background: #2f2f48;
  color: #8888aa;
  transition: all .18s;
  white-space: nowrap;
}
.launcher-cat:hover { color: #bbb; background: #3a3a58; }
.launcher-cat.active {
  background: #ff7a45;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,122,69,.35);
}
body.matrix .launcher-cat { background: #0a2814; color: #1d6b32; }
body.matrix .launcher-cat:hover { background: #0f3d1e; color: #00cc55; }
body.matrix .launcher-cat.active {
  background: #00cc55;
  color: #000;
  box-shadow: 0 4px 12px rgba(0,255,100,.4);
}

/* Заголовок групи */
.launcher-group-title {
  color: #7a7a9a;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 4px 6px;
  margin-top: 4px;
}
body.matrix .launcher-group-title { color: #1d8a3d; }

/* Сітка іконок */
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-bottom: 10px;
}
@media (max-width: 480px) {
  .launcher-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* Плитка застосунку */
.launcher-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 4px 10px;
  border: none;
  border-radius: 14px;
  background: #2f2f48;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  animation: tileIn .3s cubic-bezier(.34,1.56,.64,1) backwards;
  position: relative;
  overflow: hidden;
}
.launcher-tile:hover {
  background: #3a3a58;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.launcher-tile:active { transform: scale(.94); }
.launcher-tile.hidden { display: none; }
.launcher-tile .em {
  font-size: 30px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.launcher-tile .name {
  font-size: 10px;
  font-weight: 700;
  color: #ccc;
  text-align: center;
  line-height: 1.2;
  letter-spacing: .3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.matrix .launcher-tile { background: #0a2814; }
body.matrix .launcher-tile:hover { background: #0f3d1e; }
body.matrix .launcher-tile .name { color: #00cc55; }

@keyframes tileIn {
  from { opacity: 0; transform: scale(.6) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Порожній результат */
.launcher-empty {
  text-align: center;
  color: #7a7a9a;
  font-size: 14px;
  padding: 40px 20px;
}
body.matrix .launcher-empty { color: #1d8a3d; }

/* Панель застосунку (коли відкривається) */
.app-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a1a2a;
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
body.matrix .app-view { background: #020d05; }
.app-view.open { transform: translateX(0); }

/* Верхня панель з кнопкою назад */
.app-view-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #26263a;
  border-bottom: 1px solid #1a1a2a;
  flex-shrink: 0;
  min-height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
body.matrix .app-view-bar {
  background: #051a0a;
  border-bottom: 1px solid rgba(0,255,100,.2);
}
.app-view-back {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: #2f2f48;
  color: #ff7a45;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  font-family: inherit;
}
.app-view-back:hover { background: #3a3a58; transform: scale(1.05); }
.app-view-back:active { transform: scale(.92); }
body.matrix .app-view-back { background: #0a2814; color: #00ff66; }
body.matrix .app-view-back:hover { background: #0f3d1e; }

.app-view-title {
  flex: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.matrix .app-view-title { color: #00ff66; }
.app-view-title .em { font-size: 20px; }

/* Обгортка вмісту панелі */
.app-view-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.app-view-content .panel {
  display: block !important;
  animation: none !important;
}

/* Підсвітка при свайпі */
.app-view.swiping { transition: none; }

/* Кнопка «Назад» у браузері — стан */
.app-view.loading .app-view-content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #ff7a45;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Ховаємо mode-bar коли відкрито застосунок */
body.app-open .mode-bar,
body.app-open .tabs { display: none !important; }

/* Компактний mode-bar в лаунчері */
body .app { max-height: 95vh; overflow-y: auto; }

/* Красивіший скрол */
.app-view-content::-webkit-scrollbar { width: 8px; }
.app-view-content::-webkit-scrollbar-track { background: transparent; }
.app-view-content::-webkit-scrollbar-thumb {
  background: #4a4a75;
  border-radius: 4px;
}

/* Мобільний */
body.mode-mobile .launcher-tile { padding: 10px 3px 8px; }
body.mode-mobile .launcher-tile .em { font-size: 26px; }
body.mode-mobile .launcher-tile .name { font-size: 9px; }
body.mode-mobile .launcher-cat { padding: 6px 12px; font-size: 11px; }
body.mode-mobile .app-view-content { padding: 14px; }
.ai-layout{display:flex;gap:10px;height:calc(100% - 10px);min-height:480px}
.ai-sidebar{width:210px;flex-shrink:0;background:#12121c;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:100%}
body.matrix .ai-sidebar{background:#000;border:1px solid rgba(0,255,100,.3)}
.ai-sidebar-top{display:flex;gap:4px;flex-shrink:0}
.ai-new-chat{flex:1;border:none;border-radius:10px;padding:10px 8px;font-family:inherit;font-weight:700;font-size:12px;background:#ff7a45;color:#fff;cursor:pointer;transition:background .15s}
.ai-new-chat:hover{background:#ff8f60}
body.matrix .ai-new-chat{background:#00cc55;color:#000}
.ai-del-all{border:none;border-radius:10px;padding:10px;background:#2f2f48;color:#888;font-size:14px;cursor:pointer;font-family:inherit}
.ai-del-all:hover{background:#d64550;color:#fff}
.ai-search-chats{background:#1a1a2a;border:1.5px solid transparent;border-radius:8px;padding:7px 10px;color:#fff;font-size:12px;font-family:inherit;outline:none;flex-shrink:0}
.ai-search-chats:focus{border-color:#ff7a45}
body.matrix .ai-search-chats{background:#0a2814;color:#00ff66}
.ai-chat-list{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
.ai-chat-item{background:#1a1a2a;border-radius:8px;padding:8px 26px 8px 10px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;position:relative}
.ai-chat-item:hover{background:#2f2f48}
.ai-chat-item.active{background:#2f2f48;border-left-color:#ff7a45}
body.matrix .ai-chat-item{background:#052010}
body.matrix .ai-chat-item:hover,body.matrix .ai-chat-item.active{background:#0a2814;border-left-color:#00cc55}
.ai-chat-item .title{color:#fff;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.matrix .ai-chat-item .title{color:#00ff66}
.ai-chat-item .sub{color:#7a7a9a;font-size:10px;margin-top:2px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.ai-chat-item .cat-badge{background:#4a4a75;color:#fff;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700}
.ai-chat-item .pin-badge{color:#ff7a45}
body.matrix .ai-chat-item .pin-badge{color:#00ff66}
.ai-chat-item .del{position:absolute;right:4px;top:8px;width:20px;height:20px;border:none;border-radius:5px;background:transparent;color:#7a7a9a;font-size:11px;cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;font-family:inherit}
.ai-chat-item:hover .del{opacity:1}
.ai-chat-item .del:hover{background:#d64550;color:#fff}
.ai-chat-item .pin-btn{position:absolute;right:26px;top:8px;width:20px;height:20px;border:none;border-radius:5px;background:transparent;color:#7a7a9a;font-size:11px;cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;font-family:inherit}
.ai-chat-item:hover .pin-btn{opacity:1}
.ai-chat-item .pin-btn:hover{background:#ff7a45;color:#fff}
.ai-chat-item.pinned{border-left-color:#ff7a45!important}
body.matrix .ai-chat-item.pinned{border-left-color:#00ff66!important}

.ai-main{flex:1;display:flex;flex-direction:column;min-width:0;background:#12121c;border-radius:12px;padding:10px;position:relative}
body.matrix .ai-main{background:#000;border:1px solid rgba(0,255,100,.3)}
.ai-topbar{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-shrink:0}
.ai-model-select{flex:1;background:#1a1a2a;border:1.5px solid transparent;border-radius:8px;padding:8px 10px;color:#fff;font-size:12px;font-family:inherit;font-weight:600;cursor:pointer;outline:none}
.ai-model-select:focus{border-color:#ff7a45}
body.matrix .ai-model-select{background:#0a2814;color:#00ff66}
.ai-icon-btn{width:34px;height:34px;border:none;border-radius:8px;background:#2f2f48;color:#ff7a45;font-size:15px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit}
.ai-icon-btn:hover{background:#3a3a58;transform:scale(1.05)}
.ai-icon-btn.active{background:#ff7a45;color:#fff}
body.matrix .ai-icon-btn{background:#0a2814;color:#00ff66}
body.matrix .ai-icon-btn:hover{background:#0f3d1e}
body.matrix .ai-icon-btn.active{background:#00cc55;color:#000}

.ai-sys-editor{background:#1a1a2a;border-radius:10px;padding:10px;margin-bottom:8px;display:none;flex-shrink:0}
.ai-sys-editor.show{display:block}
body.matrix .ai-sys-editor{background:#052010;border:1px solid rgba(0,255,100,.2)}
.ai-sys-editor label{color:#7a7a9a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}
body.matrix .ai-sys-editor label{color:#1d8a3d}
.ai-sys-editor textarea{width:100%;background:#12121c;border:1.5px solid transparent;border-radius:8px;padding:10px;color:#fff;font-size:12px;font-family:inherit;resize:vertical;min-height:80px;outline:none;line-height:1.4;box-sizing:border-box}
.ai-sys-editor textarea:focus{border-color:#ff7a45}
body.matrix .ai-sys-editor textarea{background:#000;color:#00ff66}
.ai-sys-presets{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.ai-sys-preset{border:none;border-radius:6px;padding:5px 9px;font-size:10px;font-family:inherit;font-weight:700;background:#2f2f48;color:#b0b0d0;cursor:pointer;transition:all .15s}
.ai-sys-preset:hover{background:#3a3a58;color:#fff}
body.matrix .ai-sys-preset{background:#0a2814;color:#1d8a3d}
body.matrix .ai-sys-preset:hover{background:#0f3d1e;color:#00ff66}
.ai-sys-label{color:#7a7a9a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:10px;display:block}

.ai-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px;min-height:200px;position:relative}
.ai-msgs::-webkit-scrollbar{width:6px}
.ai-msgs::-webkit-scrollbar-thumb{background:#4a4a75;border-radius:3px}
.ai-empty{color:#7a7a9a;font-size:13px;text-align:center;padding:40px 20px;line-height:1.6}
body.matrix .ai-empty{color:#1d8a3d}

.ai-scroll-bottom{position:absolute;right:14px;bottom:70px;width:36px;height:36px;border-radius:50%;background:#ff7a45;color:#fff;border:none;font-size:16px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.4);font-family:inherit}
.ai-scroll-bottom.show{display:flex}
.ai-scroll-bottom:hover{background:#ff8f60}
body.matrix .ai-scroll-bottom{background:#00cc55;color:#000}

.ai-msg-row{display:flex;flex-direction:column;animation:panelIn .25s ease}
.ai-msg-row.user{align-items:flex-end}
.ai-msg-row.assistant{align-items:flex-start}
.ai-bubble{max-width:88%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.55;word-wrap:break-word;overflow-wrap:anywhere;position:relative}
.ai-bubble.user{background:#ff7a45;color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}
.ai-bubble.assistant{background:#2f2f48;color:#e8e8e8;border-bottom-left-radius:4px}
body.matrix .ai-bubble.user{background:#00cc55;color:#000}
body.matrix .ai-bubble.assistant{background:#0a2814;color:#00ff66;border:1px solid rgba(0,255,100,.2)}
.ai-bubble.error{background:#8a1a1a;color:#ff8888}
.ai-msg-meta{font-size:10px;color:#7a7a9a;margin-top:4px;padding:0 6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
body.matrix .ai-msg-meta{color:#1d8a3d}
.ai-msg-meta button{border:none;background:transparent;color:#7a7a9a;font-size:10px;cursor:pointer;padding:2px 5px;border-radius:4px;font-family:inherit;font-weight:700}
.ai-msg-meta button:hover{background:#2f2f48;color:#fff}
body.matrix .ai-msg-meta button:hover{background:#0d4a22;color:#00ff66}

.ai-bubble p{margin:0 0 8px}
.ai-bubble p:last-child{margin-bottom:0}
.ai-bubble strong{font-weight:800;color:#fff}
body.matrix .ai-bubble strong{color:#00ff66}
.ai-bubble em{font-style:italic;opacity:.95}
.ai-bubble code:not(pre code){background:rgba(0,0,0,.35);padding:2px 6px;border-radius:4px;font-family:'Courier New',monospace;font-size:12px}
.ai-bubble pre{background:#0a0a14;border-radius:8px;padding:10px 12px;margin:8px 0;overflow-x:auto;position:relative;border:1px solid #353550;max-height:400px}
.ai-bubble pre.collapsed{max-height:120px;overflow:hidden}
.ai-bubble pre.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,#0a0a14);pointer-events:none}
body.matrix .ai-bubble pre.collapsed::after{background:linear-gradient(transparent,#000)}
.ai-bubble pre code{background:transparent!important;padding:0!important;font-size:11.5px;line-height:1.5;display:block;white-space:pre}
.ai-code-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.ai-code-btn{border:none;border-radius:5px;padding:4px 8px;font-size:10px;font-family:inherit;font-weight:700;background:#2f2f48;color:#bbb;cursor:pointer;transition:opacity .15s;opacity:0}
.ai-bubble pre:hover .ai-code-btn{opacity:1}
.ai-code-btn:hover{background:#ff7a45;color:#fff}
.ai-code-btn.ok{background:#22c55e;color:#fff}
.ai-code-expand{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);border:none;border-radius:5px;padding:4px 12px;font-size:10px;font-family:inherit;font-weight:700;background:#ff7a45;color:#fff;cursor:pointer;z-index:1}
body.matrix .ai-code-expand{background:#00cc55;color:#000}

.ai-bubble ul,.ai-bubble ol{margin:6px 0 8px;padding-left:20px}
.ai-bubble li{margin:3px 0}
.ai-bubble h1,.ai-bubble h2,.ai-bubble h3{margin:8px 0 6px;font-weight:800;color:#fff;line-height:1.3}
.ai-bubble h1{font-size:17px}.ai-bubble h2{font-size:15px}.ai-bubble h3{font-size:14px}
body.matrix .ai-bubble h1,body.matrix .ai-bubble h2,body.matrix .ai-bubble h3{color:#00ff66}
.ai-bubble a{color:#4aabff;text-decoration:underline}
.ai-bubble blockquote{border-left:3px solid #ff7a45;margin:6px 0;padding:2px 10px;color:#aaa;font-style:italic}
.ai-bubble hr{border:none;border-top:1px solid #4a4a75;margin:10px 0}
.ai-bubble table{border-collapse:collapse;margin:8px 0;width:100%;font-size:12px;display:block;overflow-x:auto}
.ai-bubble th,.ai-bubble td{border:1px solid #4a4a75;padding:6px 10px;text-align:left}
.ai-bubble th{background:#2f2f48;font-weight:800;color:#fff}
body.matrix .ai-bubble th{background:#0a2814;color:#00ff66}
body.matrix .ai-bubble td{border-color:rgba(0,255,100,.3)}
.ai-bubble .katex{font-size:1.05em}
.ai-typing{display:inline-block}
.ai-typing::after{content:'▊';animation:aiBlink .8s infinite;margin-left:2px;color:#ff7a45}
@keyframes aiBlink{50%{opacity:0}}

.ai-file-preview{background:#1a1a2a;border-radius:8px;padding:6px 10px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;color:#bbb;font-size:12px;border:1px solid #2f2f48}
.ai-file-preview button{border:none;background:transparent;color:#d64550;cursor:pointer;font-size:14px;padding:0 4px}

.ai-input-row{display:flex;gap:6px;align-items:flex-end;margin-top:8px;flex-shrink:0}
.ai-input{flex:1;background:#1a1a2a;border:2px solid transparent;border-radius:10px;padding:10px 12px;color:#fff;font-size:13px;font-family:inherit;outline:none;resize:none;max-height:120px;min-height:44px;line-height:1.4;transition:border-color .2s;box-sizing:border-box}
.ai-input:focus{border-color:#ff7a45}
body.matrix .ai-input{background:#0a2814;color:#00ff66}
body.matrix .ai-input:focus{border-color:#00ff66}
.ai-icon-btn-sm{width:44px;height:44px;border:none;border-radius:10px;background:#2f2f48;color:#ff7a45;font-size:16px;cursor:pointer;flex-shrink:0;transition:all .15s;font-family:inherit}
.ai-icon-btn-sm:hover{background:#3a3a58}
.ai-icon-btn-sm.recording{background:#d64550;color:#fff;animation:teacherPulse 1s infinite}
body.matrix .ai-icon-btn-sm{background:#0a2814;color:#00ff66}
.ai-send-btn{width:44px;height:44px;border:none;border-radius:10px;background:#ff7a45;color:#fff;font-size:16px;cursor:pointer;flex-shrink:0;transition:all .15s;font-family:inherit}
.ai-send-btn:hover{background:#ff8f60}
.ai-send-btn:active{transform:scale(.94)}
.ai-send-btn:disabled{background:#555;opacity:.5;cursor:not-allowed}
.ai-send-btn.stop{background:#d64550}
body.matrix .ai-send-btn{background:#00cc55;color:#000}
body.matrix .ai-send-btn.stop{background:#8a1a1a;color:#ff8888}
.ai-status-bar{font-size:11px;color:#7a7a9a;text-align:center;padding:4px;min-height:16px}
body.matrix .ai-status-bar{color:#1d8a3d}

/* Модалки */
.ai-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;justify-content:center;align-items:center;z-index:11000;padding:20px}
.ai-modal.show{display:flex}
.ai-modal-card{background:#26263a;border-radius:14px;padding:20px;width:100%;max-width:520px;color:#fff;max-height:90vh;overflow-y:auto}
body.matrix .ai-modal-card{background:#051a0a;border:1px solid rgba(0,255,100,.4)}
.ai-modal-card h3{margin:0 0 12px;font-size:16px;color:#ff7a45;text-align:center}
body.matrix .ai-modal-card h3{color:#00ff66}
.ai-modal-card label{display:block;color:#7a7a9a;font-size:11px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
body.matrix .ai-modal-card label{color:#1d8a3d}
.ai-modal-card input,.ai-modal-card select,.ai-modal-card textarea{width:100%;background:#1a1a2a;border:1.5px solid transparent;border-radius:8px;padding:9px 12px;color:#fff;font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;margin-bottom:12px}
.ai-modal-card input:focus,.ai-modal-card select:focus,.ai-modal-card textarea:focus{border-color:#ff7a45}
body.matrix .ai-modal-card input,body.matrix .ai-modal-card select,body.matrix .ai-modal-card textarea{background:#0a2814;color:#00ff66}
.ai-modal-actions{display:flex;gap:8px;margin-top:8px}
.ai-modal-actions button{flex:1;border:none;border-radius:10px;padding:11px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;background:#4a4a75;color:#fff;transition:background .15s}
.ai-modal-actions button:hover{background:#57578a}
.ai-modal-actions button.primary{background:#ff7a45}
.ai-modal-actions button.primary:hover{background:#ff8f60}
body.matrix .ai-modal-actions button{background:#0d4a22;color:#00ff66}
body.matrix .ai-modal-actions button.primary{background:#00cc55;color:#000}
.ai-compare-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ai-compare-col{background:#1a1a2a;border-radius:8px;padding:10px;font-size:12px;line-height:1.5;max-height:400px;overflow-y:auto}
body.matrix .ai-compare-col{background:#052010;color:#00ff66}
.ai-compare-col h4{margin:0 0 8px;font-size:11px;color:#ff7a45;text-transform:uppercase;letter-spacing:.5px}
body.matrix .ai-compare-col h4{color:#00cc55}
.ai-compare-col pre{font-size:11px}

@media (max-width: 700px){
  .ai-layout{flex-direction:column;min-height:0}
  .ai-sidebar{width:100%;max-height:160px;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:6px;flex-wrap:nowrap}
  .ai-sidebar-top{flex-direction:row;flex-shrink:0}
  .ai-new-chat{padding:9px 12px;font-size:11px;white-space:nowrap}
  .ai-search-chats{min-width:140px;flex-shrink:0}
  .ai-chat-list{flex-direction:row;gap:6px;flex-wrap:nowrap}
  .ai-chat-item{min-width:150px;flex-shrink:0}
  .ai-msgs{min-height:250px}
  .ai-compare-result{grid-template-columns:1fr}
}
.ai-file-details{background:rgba(0,0,0,.25);border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:12px;cursor:pointer}
.ai-file-details summary{color:#fff;font-weight:700;list-style:none;cursor:pointer;outline:none}
.ai-file-details summary::-webkit-details-marker{display:none}
.ai-file-details summary::before{content:'▸ ';transition:transform .2s;display:inline-block}
.ai-file-details[open] summary::before{transform:rotate(90deg)}
.ai-file-details pre{margin-top:8px;background:#0a0a14;padding:8px;border-radius:6px;max-height:200px;overflow:auto;font-size:11px;white-space:pre-wrap}
body.matrix .ai-file-details{background:rgba(0,255,100,.08)}
body.matrix .ai-file-details pre{background:#000;border:1px solid rgba(0,255,100,.2)}
/* ============================================================
   МОБИЛЬНЫЕ ФИКСЫ
   ============================================================ */

/* --- AI-чат: сайдбар выезжает по кнопке --- */
@media (max-width: 700px){
  .ai-layout{flex-direction:row;min-height:0}
  .ai-sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:280px;max-width:85vw;max-height:100vh;
    z-index:2000;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.16,1,.3,1);
    box-shadow:4px 0 20px rgba(0,0,0,.5);
    border-radius:0;
    flex-direction:column;
    padding:14px;
    overflow-y:auto;
  }
  .ai-sidebar.mobile-open{transform:translateX(0)}
  .ai-sidebar-top{flex-direction:row}
  .ai-chat-list{flex-direction:column;gap:6px}
  .ai-chat-item{min-width:0;width:100%}
  .ai-search-chats{min-width:0;width:100%}

  /* Оверлей затемнения */
  .ai-sidebar-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.6);
    z-index:1999;display:none;
  }
  .ai-sidebar-backdrop.show{display:block}

  /* Кнопка бургера в топбаре */
  .ai-burger{
    display:flex!important;
    width:38px;height:38px;
    border:none;border-radius:8px;
    background:#2f2f48;color:#ff7a45;
    font-size:18px;cursor:pointer;
    align-items:center;justify-content:center;
    flex-shrink:0;font-family:inherit;
  }
  body.matrix .ai-burger{background:#0a2814;color:#00ff66}

  /* Топбар — компактнее */
  .ai-main{padding:8px}
  .ai-msgs{min-height:auto}
  .ai-icon-btn{width:32px;height:32px;font-size:14px}
}

/* Бургер видно только на мобилке */
.ai-burger{display:none}

/* --- Общие фиксы сайта на телефоне --- */
@media (max-width: 600px){
  body{padding:8px}
  .app{padding:12px;max-width:100%}
  body.mode-mobile .app{padding:10px}

  /* Табы: 2 ряда максимум */
  .tabs{padding:4px;gap:3px}
  .tab{min-width:0;padding:8px 4px;font-size:10px;flex:1 1 30%}

  /* Панели приложений */
  .app-view-content{padding:12px}

  /* AI-сообщения — компактнее */
  .ai-msg-row{margin-bottom:6px}
  .ai-bubble{font-size:13px;padding:9px 12px;max-width:92%}
  .ai-msg-meta{font-size:9px}
  .ai-input{font-size:14px;min-height:42px;padding:9px 11px}
  .ai-send-btn,.ai-icon-btn-sm{width:42px;height:42px;font-size:15px}

  /* Формулы — горизонтальный скролл если не влезают */
  .ai-bubble .katex-display{overflow-x:auto;overflow-y:hidden;padding:4px 0}

  /* Таблицы — тоже скролл */
  .ai-bubble table{font-size:11px}
  .ai-bubble th,.ai-bubble td{padding:4px 6px}

  /* Код — уменьшить шрифт */
  .ai-bubble pre code{font-size:11px}
}
/* ============================================================
   ОГРАНИЧЕНИЕ ШИРИНЫ ПРИЛОЖЕНИЙ НА ПК
   ============================================================ */
.app-view-content{
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

/* 2048 — ограничиваем размер доски */
.g2048-board{
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Шахматы — то же самое */
.chess-board-wrap{
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Paint — ограничить полотно */
.paint-canvas-wrap{
  max-width: 100%;
}

/* Змейка */
.snake-board{
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Тетрис — на ПК ограничить повысоты */
.tetris-playfield{
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* На мобилке — во всю ширину */
@media (max-width: 700px){
  .app-view-content{max-width: 100%}
  .g2048-board{max-width: 100%}
  .chess-board-wrap{max-width: 100%}
  .snake-board{max-width: 100%}
}

.app-view-content:has(#panel-ai) .ai-layout{
  flex: 1;
  min-height: 0;
  height: auto;
}

/* На мобилке — обратно во всю ширину */
@media (max-width: 700px){
  .app-view-content:has(#panel-ai){max-width: 100%}
}
/* --- Фикс код-блоков: не перекрывают ввод --- */
.ai-bubble pre{
  max-height: 400px;
  overflow: auto;
  overscroll-behavior: contain;
}
.ai-bubble pre.collapsed{
  max-height: 140px;
  overflow: hidden;
}
.ai-bubble pre.collapsed::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;height:50px;
  background:linear-gradient(transparent,#0a0a14);
  pointer-events:none;
  border-radius:0 0 8px 8px;
}
body.matrix .ai-bubble pre.collapsed::after{
  background:linear-gradient(transparent,#000);
}

/* Чат не должен вылезать за пределы */
.ai-main{
  overflow: hidden;
  min-height: 0;
}
.ai-msgs{
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
}

/* Кнопки на блоке кода видны всегда когда пре раскрыт */
.ai-bubble pre:not(.collapsed) .ai-code-btn{
  opacity: 1;
}
/* ============================================================
   AI-ЧАТ: ФИКС ВЫСОТЫ (не перекрывает поле ввода)
   ============================================================ */

/* 1. Родитель — flex-контейнер на всю высоту */
.app-view-content:has(#panel-ai){
  max-width: 1100px;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
  padding: 10px !important;
  height: 100%;
}

/* 4. Правая колонка (чат) */
#panel-ai .ai-main{
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  overflow: hidden;
  height: 100%;
}

/* 7. Сайдбар — своя высота, скролл внутри */
#panel-ai .ai-sidebar{
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

/* 8. Код-блоки — НЕ выходят за пределы */
.ai-bubble pre{
  max-height: 350px !important;
  overflow: auto !important;
}
.ai-bubble pre.collapsed{
  max-height: 140px !important;
  overflow: hidden !important;
}

/* 9. Отдельные сообщения не растягивают ленту */
.ai-msg-row{
  flex-shrink: 0;
}
.ai-bubble{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Мобильный — сброс жёстких max-height */
@media (max-width: 700px){
  .app-view-content:has(#panel-ai){
    max-width: 100% !important;
    padding: 6px !important;
  }
  .ai-bubble pre{max-height: 280px !important}
}
/* ============================================================
   DEEP THINKING
   ============================================================ */
.ai-think-toggle-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 4px 2px;margin-top:4px;
  font-size:12px;flex-shrink:0;
}
.ai-think-toggle{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  user-select:none;
}
.ai-think-toggle input{display:none}
.ai-think-slider{
  width:36px;height:20px;background:#2f2f48;border-radius:10px;
  position:relative;transition:background .2s;flex-shrink:0;
}
.ai-think-slider::after{
  content:'';position:absolute;top:2px;left:2px;
  width:16px;height:16px;background:#888;border-radius:50%;
  transition:transform .2s,background .2s;
}
.ai-think-toggle input:checked + .ai-think-slider{background:#a855f7}
.ai-think-toggle input:checked + .ai-think-slider::after{
  transform:translateX(16px);background:#fff;
}
body.matrix .ai-think-toggle input:checked + .ai-think-slider{background:#00cc55}
.ai-think-label{color:#bbb;font-weight:700}
body.matrix .ai-think-label{color:#00ff66}
.ai-think-hint{color:#7a7a9a;font-size:11px;margin-left:auto}
body.matrix .ai-think-hint{color:#1d8a3d}
.ai-think-toggle-row.disabled{opacity:.4;pointer-events:none}

/* Блок размышлений */
.ai-reasoning{
  background:rgba(168,85,247,.08);
  border-left:3px solid #a855f7;
  border-radius:8px;
  padding:8px 12px;
  margin-bottom:10px;
  font-size:12px;
  color:#c8b8e0;
}
body.matrix .ai-reasoning{
  background:rgba(0,255,100,.05);
  border-left-color:#00cc55;
  color:#1d8a3d;
}
.ai-reasoning summary{
  cursor:pointer;list-style:none;outline:none;
  color:#a855f7;font-weight:700;font-style:normal;
  user-select:none;
}
body.matrix .ai-reasoning summary{color:#00cc55}
.ai-reasoning summary::-webkit-details-marker{display:none}
.ai-reasoning summary::before{
  content:'▸ ';display:inline-block;
  transition:transform .2s;margin-right:4px;
}
.ai-reasoning[open] summary::before{transform:rotate(90deg)}
.ai-reasoning .ai-reasoning-content{
  margin-top:8px;
  white-space:pre-wrap;
  max-height:280px;overflow-y:auto;
  font-style:italic;
  line-height:1.55;
  font-family:'Courier New',monospace;
  font-size:11.5px;
  padding-right:6px;
}
.ai-reasoning .ai-reasoning-content::-webkit-scrollbar{width:4px}
.ai-reasoning .ai-reasoning-content::-webkit-scrollbar-thumb{
  background:#a855f7;border-radius:2px;
}
body.matrix .ai-reasoning .ai-reasoning-content::-webkit-scrollbar-thumb{
  background:#00cc55;
}
/* Панели внутри лаунчера всегда скрыты */
.app > .panel {
  display: none !important;
}
/* Перебиваем ID-специфичность — работает только внутри app-view */
.app > #panel-ai {
  display: none !important;
}

/* А внутри app-view — flex как было */
.app-view-content > #panel-ai {
  display: flex !important;
}
/* ============================================================
   AI-ЧАТ: РАСТЯНУТЬ НА ВСЮ ВЫСОТУ
   ============================================================ */

/* Родитель app-view-content — flex-колонка */
.app-view-content{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Панель приложения внутри — растягивается */
.app-view-content > .panel.active{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* AI-панель — flex-колонка на всю высоту */
.app-view-content > #panel-ai.active{
  display: flex;
  flex-direction: column;
}

/* Layout — на всю высоту */
#panel-ai .ai-layout{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

/* Сайдбар — своя высота с внутренним скроллом */
#panel-ai .ai-sidebar{
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

/* Основная колонка — flex-колонка, растягивается */
#panel-ai .ai-main{
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Лента сообщений — занимает всё свободное место */
#panel-ai .ai-msgs{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* Всё остальное в main — фиксированной высоты */
#panel-ai .ai-topbar,
#panel-ai .ai-sys-editor,
#panel-ai .ai-input-row,
#panel-ai .ai-think-toggle-row,
#panel-ai .ai-status-bar{
  flex-shrink: 0;
}

/* На мобилке — сбрасываем высоту для сайдбара */
@media (max-width: 700px){
  #panel-ai .ai-layout{
    flex-direction: column;
  }
  #panel-ai .ai-sidebar{
    max-height: none;
  }
}
.mu-wrap{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mu-tab{flex:1 1 auto;min-width:80px;border:none;border-radius:10px;padding:10px 6px;font-family:inherit;font-weight:700;font-size:11px;cursor:pointer;background:#2f2f48;color:#8888aa;transition:all .15s}
.mu-tab:hover{color:#bbb;background:#3a3a58}
.mu-tab.active{background:#ff7a45;color:#fff}
body.matrix .mu-tab{background:#0a2814;color:#1d6b32}
body.matrix .mu-tab.active{background:#00cc55;color:#000}

.mu-pane{display:none}
.mu-pane.active{display:block;animation:panelIn .25s ease}

.mu-card{background:#12121c;border-radius:12px;padding:14px;margin-bottom:12px}
body.matrix .mu-card{background:#000;border:1px solid rgba(0,255,100,.3)}

.mu-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.mu-row:last-child{margin-bottom:0}
.mu-row label{color:#7a7a9a;font-size:12px;font-weight:700;min-width:70px}
body.matrix .mu-row label{color:#1d8a3d}

.mu-input{flex:1;min-width:0;background:#1a1a2a;border:1.5px solid transparent;border-radius:8px;padding:10px 12px;color:#fff;font-size:14px;font-family:inherit;font-weight:600;outline:none;box-sizing:border-box;transition:border-color .15s}
.mu-input:focus{border-color:#ff7a45}
body.matrix .mu-input{background:#0a2814;color:#00ff66}

.mu-btn{border:none;border-radius:10px;padding:11px 14px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;background:#4a4a75;color:#fff;transition:all .15s;flex-shrink:0}
.mu-btn:hover{background:#57578a}
.mu-btn:active{transform:scale(.96)}
.mu-btn.primary{background:#ff7a45}
.mu-btn.primary:hover{background:#ff8f60}
body.matrix .mu-btn{background:#0d4a22;color:#00ff66}
body.matrix .mu-btn.primary{background:#00cc55;color:#000}

.mu-output{background:#0a0a14;border-radius:8px;padding:12px;color:#00ff66;font-family:'Courier New',monospace;font-size:13px;word-break:break-all;min-height:20px;line-height:1.5}
body.matrix .mu-output{background:#052010;color:#00ff66}

/* Метроном */
.mu-bpm-display{text-align:center;margin-bottom:14px}
.mu-bpm-num{color:#fff;font-size:64px;font-weight:900;line-height:1;font-family:'Courier New',monospace;letter-spacing:2px}
body.matrix .mu-bpm-num{color:#00ff66;text-shadow:0 0 20px rgba(0,255,100,.5)}
.mu-bpm-label{color:#7a7a9a;font-size:11px;text-transform:uppercase;letter-spacing:2px;margin-top:6px;font-weight:700}
.mu-beat-dots{display:flex;gap:10px;justify-content:center;margin-top:12px}
.mu-beat-dot{width:20px;height:20px;border-radius:50%;background:#2f2f48;border:2px solid #353550;transition:all .1s}
.mu-beat-dot.on{background:#ff7a45;box-shadow:0 0 16px #ff7a45;transform:scale(1.3)}
body.matrix .mu-beat-dot{background:#052010;border-color:#0d4a22}
body.matrix .mu-beat-dot.on{background:#00cc55;box-shadow:0 0 16px #00cc55}

/* Border-radius */
.mu-br-preview{width:180px;height:180px;background:linear-gradient(135deg,#ff7a45,#a855f7);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;text-align:center;transition:border-radius .15s;box-shadow:0 6px 24px rgba(255,122,69,.3)}
.mu-br-sliders{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mu-br-cell{display:flex;flex-direction:column;gap:4px}
.mu-br-cell label{color:#7a7a9a;font-size:11px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
body.matrix .mu-br-cell label{color:#1d8a3d}
.mu-br-cell input[type=range]{accent-color:#ff7a45;width:100%;cursor:pointer}
body.matrix .mu-br-cell input[type=range]{accent-color:#00ff66}

/* Палитра */
.mu-swatch{width:100%;height:80px;border-radius:12px;margin-bottom:12px;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:background .2s}
.mu-color-info{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.mu-color-cell{background:#0a0a14;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:background .15s}
.mu-color-cell:hover{background:#1a1a2a}
body.matrix .mu-color-cell{background:#052010}
.mu-color-cell .lbl{color:#7a7a9a;font-size:10px;font-weight:700;text-transform:uppercase;margin-bottom:4px}
body.matrix .mu-color-cell .lbl{color:#1d8a3d}
.mu-color-cell .val{color:#fff;font-family:'Courier New',monospace;font-size:14px;font-weight:800}
body.matrix .mu-color-cell .val{color:#00ff66}

/* BMI */
.mu-bmi-result{text-align:center;padding:16px;border-radius:12px;margin-top:12px;transition:background .3s}
.mu-bmi-num{font-size:52px;font-weight:900;line-height:1;font-family:'Courier New',monospace}
.mu-bmi-cat{font-size:14px;font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:1px}

/* QR */
.mu-qr-wrap{text-align:center;padding:16px;background:#fff;border-radius:12px;margin-top:12px}
.mu-qr-wrap img{max-width:200px;width:100%;display:block;margin:0 auto}
.mu-qr-wrap.hidden{display:none}

/* Валидатор */
.mu-val-item{display:flex;gap:10px;align-items:center;padding:10px 12px;background:#0a0a14;border-radius:8px;margin-bottom:6px;font-size:13px}
body.matrix .mu-val-item{background:#052010}
.mu-val-item .name{color:#7a7a9a;font-weight:700;min-width:80px}
body.matrix .mu-val-item .name{color:#1d8a3d}
.mu-val-item .result{flex:1;font-family:'Courier New',monospace;font-weight:700}
.mu-val-item .result.ok{color:#22c55e}
.mu-val-item .result.bad{color:#ef4444}
.mu-val-item .icon{font-size:18px}
.mg-wrap{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.mg-tab{flex:1 1 auto;min-width:80px;border:none;border-radius:10px;padding:10px 6px;font-family:inherit;font-weight:700;font-size:11px;cursor:pointer;background:#2f2f48;color:#8888aa;transition:all .15s}
.mg-tab:hover{color:#bbb;background:#3a3a58}
.mg-tab.active{background:#ff7a45;color:#fff}
body.matrix .mg-tab{background:#0a2814;color:#1d6b32}
body.matrix .mg-tab.active{background:#00cc55;color:#000}

.mg-pane{display:none}
.mg-pane.active{display:block;animation:panelIn .25s ease}

.mg-hud{display:flex;justify-content:space-between;align-items:center;background:#12121c;border-radius:10px;padding:10px 14px;margin-bottom:10px;color:#fff;font-weight:700;font-size:13px}
body.matrix .mg-hud{background:#000;border:1px solid rgba(0,255,100,.3)}
.mg-hud span{color:#ff7a45}
body.matrix .mg-hud span{color:#00ff66}

.mg-canvas-wrap{background:#0a0a14;border-radius:12px;overflow:hidden;border:2px solid #353550;position:relative;margin-bottom:10px}
body.matrix .mg-canvas-wrap{border-color:rgba(0,255,100,.4)}
.mg-canvas-wrap canvas{display:block;width:100%;height:auto}

.mg-btn{border:none;border-radius:10px;padding:11px 14px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;background:#4a4a75;color:#fff;transition:all .15s}
.mg-btn:hover{background:#57578a}
.mg-btn:active{transform:scale(.96)}
.mg-btn.primary{background:#ff7a45}
.mg-btn.primary:hover{background:#ff8f60}
body.matrix .mg-btn{background:#0d4a22;color:#00ff66}
body.matrix .mg-btn.primary{background:#00cc55;color:#000}

.mg-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.mg-overlay{position:absolute;inset:0;background:rgba(10,10,20,.92);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;padding:20px;gap:12px;font-weight:700;z-index:2}
.mg-overlay.hidden{display:none}
.mg-overlay h2{margin:0;font-size:24px;color:#ff7a45}
body.matrix .mg-overlay h2{color:#00ff66}
.mg-overlay p{margin:0;color:#9999bb;font-size:13px}

/* Memory */
.mg-mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.mg-mem-card{aspect-ratio:1;background:#2f2f48;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:36px;cursor:pointer;user-select:none;transition:all .2s;position:relative;transform-style:preserve-3d}
.mg-mem-card:hover{background:#3a3a58}
.mg-mem-card .face{font-size:32px;opacity:0;transition:opacity .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mg-mem-card .back{font-size:28px;opacity:1;transition:opacity .2s;color:#7a7a9a}
.mg-mem-card.opened .face,.mg-mem-card.matched .face{opacity:1}
.mg-mem-card.opened .back,.mg-mem-card.matched .back{opacity:0}
.mg-mem-card.matched{background:#22c55e;cursor:default;pointer-events:none}
body.matrix .mg-mem-card{background:#052010}
body.matrix .mg-mem-card.matched{background:#00cc55}

/* 15-puzzle */
.mg-puz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;aspect-ratio:1;max-width:400px;margin:0 auto 10px;user-select:none}
.mg-puz-cell{background:linear-gradient(135deg,#4a4a75,#2f2f48);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#fff;cursor:pointer;transition:all .12s cubic-bezier(.34,1.56,.64,1)}
.mg-puz-cell:hover{background:linear-gradient(135deg,#57578a,#3a3a58)}
.mg-puz-cell.empty{background:transparent;cursor:default;pointer-events:none}
body.matrix .mg-puz-cell{background:linear-gradient(135deg,#0d4a22,#052010);color:#00ff66}
body.matrix .mg-puz-cell:hover{background:linear-gradient(135deg,#125c2b,#0a2814)}

/* Snake+ */
.mg-snake-dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;max-width:220px;margin:10px auto 0}
.mg-snake-dpad button{border:none;border-radius:10px;padding:14px 0;font-size:20px;cursor:pointer;color:#fff;background:#353550;font-family:inherit;user-select:none;touch-action:manipulation}
.mg-snake-dpad button:active{background:#ff7a45;transform:scale(.9)}
.mg-snake-dpad .up{grid-column:2;grid-row:1}
.mg-snake-dpad .left{grid-column:1;grid-row:2}
.mg-snake-dpad .down{grid-column:2;grid-row:2}
.mg-snake-dpad .right{grid-column:3;grid-row:2}
body.matrix .mg-snake-dpad button{background:#0d4a22;color:#00ff66}

@media (max-width: 500px){
  .mg-mem-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .mg-mem-card{font-size:26px}
  .mg-puz-cell{font-size:22px}
}
#aiImageBtn { background: #2f2f48; color: #4aabff; }
#aiImageBtn:hover { background: #3a3a58; }
body.matrix #aiImageBtn { background: #0a2814; color: #4aabff; }
body.matrix #aiImageBtn:hover { background: #0f3d1e; }

.ai-images-preview { display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin: 0 0 6px 0; }
.ai-images-preview:empty { display: none; }
.ai-images-preview .ai-img-thumb {
  position: relative; width: 60px; height: 60px; border-radius: 8px;
  overflow: hidden; border: 2px solid #4a4a75; background: #0a0a14;
  animation: panelIn .25s ease;
}
body.matrix .ai-images-preview .ai-img-thumb { border-color: #0d4a22; }
.ai-images-preview .ai-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-images-preview .ai-img-remove {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: rgba(214,69,80,.95);
  color: #fff; font-size: 11px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-family: inherit;
  font-weight: 700; line-height: 1; padding: 0;
}
.ai-images-preview .ai-img-remove:hover { background: #ef4444; }

.ai-msg-images {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px; margin-bottom: 8px; max-width: 100%;
}
.ai-msg-images img {
  width: 100%; max-height: 240px; object-fit: cover; border-radius: 8px;
  cursor: zoom-in; transition: transform .15s; display: block;
}
.ai-msg-images img:hover { transform: scale(1.02); }
.ai-msg-images.single img { max-height: 320px; }

.ai-img-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; cursor: zoom-out; animation: panelIn .2s ease;
}
.ai-img-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.8); }

.ai-img-processing {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #26263a; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 700; z-index: 99998;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); border-left: 4px solid #4aabff;
}
body.matrix .ai-img-processing { background: #051a0a; color: #00ff66; border-left-color: #00cc55; }
/* ============================================================
   ФИКС: убрать горизонтальный скролл у .app
   ============================================================ */
.app {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Внутренние контейнеры не должны вылезать за ширину */
.tabs,
.launcher,
.launcher-cats,
.launcher-grid,
.panel {
  max-width: 100%;
  box-sizing: border-box;
}

/* Скрываем полосу скролла у категорий (она всё равно есть скроллбаром) */
.launcher-cats::-webkit-scrollbar {
  display: none;
}
.launcher-cats {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* На всякий случай — если что-то ещё шире контейнера, отрежем */
.app * {
  max-width: 100%;
}

/* Исключения: игровые поля и канвасы, которые должны быть широкими */
.app canvas,
.app .chess-board,
.app .g2048-board,
.app .snake-board,
.app .tetris-playfield {
  max-width: 100%;
}
/* ============================================================
   ФИКС: AI-чат не вылезает за экран
   Принцип: везде flex + min-height: 0, НИГДЕ height: 100%
   ============================================================ */

.app-view {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.app-view-bar {
  flex-shrink: 0 !important;
}

.app-view-content:has(#panel-ai) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 10px !important;
}

#panel-ai {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

#panel-ai .ai-layout {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

#panel-ai .ai-sidebar {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}

#panel-ai .ai-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

#panel-ai .ai-msgs {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

#panel-ai .ai-topbar,
#panel-ai .ai-sys-editor,
#panel-ai .ai-input-row,
#panel-ai .ai-think-toggle-row,
#panel-ai .ai-status-bar,
#panel-ai #aiFilePreview,
#panel-ai .ai-images-preview {
  flex-shrink: 0 !important;
}

/* Мобилка — вертикальная раскладка */
@media (max-width: 700px) {
  #panel-ai .ai-layout {
    flex-direction: column !important;
  }
  #panel-ai .ai-msgs {
    max-height: 55vh !important;
  }
}
.ai-variants-bar{
  display:flex;align-items:center;gap:6px;
  margin-top:4px;margin-left:4px;
  padding:4px 8px;font-size:11px;
  color:#7a7a9a;background:rgba(0,0,0,.2);
  border-radius:8px;width:fit-content;
  animation:panelIn .2s ease;
}
body.matrix .ai-variants-bar{background:rgba(0,255,100,.05);color:#1d8a3d}
.ai-variants-bar button{
  border:none;border-radius:6px;padding:3px 8px;
  font-size:11px;font-family:inherit;font-weight:700;
  cursor:pointer;background:#2f2f48;color:#bbb;
  transition:all .15s;
}
.ai-variants-bar button:hover:not(:disabled){background:#ff7a45;color:#fff}
.ai-variants-bar button:disabled{opacity:.4;cursor:not-allowed}
.ai-variants-bar .ai-var-count{
  font-family:'Courier New',monospace;
  min-width:38px;text-align:center;font-weight:700;
}
.ai-variants-bar .ai-var-spacer{flex:1;min-width:8px}
body.matrix .ai-variants-bar button{background:#0a2814;color:#1d8a3d}
body.matrix .ai-variants-bar button:hover:not(:disabled){background:#00cc55;color:#000}
/* ============================================================
   ФИКС: #panel-ai всегда виден из-за ID-селектора с !important
   Перебиваем более специфичными селекторами
   ============================================================ */

/* Когда панель в .app (в лаунчере) — скрыта */
.app > #panel-ai {
  display: none !important;
}

/* Когда панель в app-view — показываем */
.app-view-content > #panel-ai {
  display: flex !important;
}
.app-view-content > #panel-ai:not(.active) {
  display: none !important;
}

/* Аналогично для других панелей с ID, если они где-то есть в CSS как "display:flex" */
.app > #panel-multiutils,
.app > #panel-minigames {
  display: none !important;
}
/* ============================================================
   СВЕТЛАЯ ТЕМА
   ============================================================ */

body.light {
  background: linear-gradient(135deg, #f5f5fa, #e8e8f0) !important;
}
body.light.matrix { background: #000 !important; }

body.light .app {
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
body.light .mode-bar { border-color: #e0e0e8; }
body.light .app-title { color: #666680; }
body.light .app-title:hover { color: #333; }
body.light .device-btn {
  background: #ececf4;
  color: #ff7a45;
}
body.light .device-btn:hover { background: #e0e0ea; }

/* Лаунчер */
body.light .launcher-search-wrap { background: #ffffff; }
body.light .launcher-search input {
  background: #f5f5fa;
  color: #222;
  border-color: #e0e0e8;
}
body.light .launcher-search input::placeholder { color: #999; }
body.light .launcher-search .ico { color: #999; }
body.light .launcher-search .clear { color: #999; }
body.light .launcher-cat {
  background: #ececf4;
  color: #666680;
}
body.light .launcher-cat:hover { background: #e0e0ea; color: #333; }
body.light .launcher-tile {
  background: #f5f5fa;
}
body.light .launcher-tile:hover {
  background: #eaeaf3;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
body.light .launcher-tile .name { color: #444; }

/* Панели */
body.light .panel { color: #222; }
body.light .rate-info { color: #999; }

/* Кнопки, инпуты */
body.light .calc-btn { background: #e8e8f0; color: #333; }
body.light .calc-btn:hover { background: #dcdce6; }
body.light .calc-btn.func { background: #e0e0ea; color: #555; }
body.light .calc-btn.op { background: #d8d8e4; color: #333; }
body.light .calc-btn.equals { background: #ff7a45; color: #fff; }
body.light .calc-btn.clear { background: #e44; color: #fff; }
body.light .display { background: #f5f5fa; }
body.light .expression { color: #222; }
body.light .mode { color: #ff7a45; background: rgba(255,122,69,.12); }

body.light .currency-input,
body.light .currency-select,
body.light .pomodoro-input,
body.light .weather-input,
body.light .rem-input,
body.light .rem-date,
body.light .rem-time,
body.light .rem-select,
body.light .admin-input,
body.light .ai-input,
body.light .ai-key-input,
body.light .mu-input,
body.light .cr-input {
  background: #f5f5fa;
  color: #222;
}

body.light .currency-display,
body.light .snake-hud,
body.light .durak-top,
body.light .teacher-hud,
body.light .wordle-header,
body.light .bj-info,
body.light .chess-top,
body.light .tetris-info-box,
body.light .g2048-score-box,
body.light .pomodoro-sessions,
body.light .admin-section,
body.light .rem-form,
body.light .rem-empty,
body.light .rem-item,
body.light .mu-card,
body.light .cr-crypto,
body.light .ai-sidebar,
body.light .ai-main,
body.light .ai-sys-editor {
  background: #f5f5fa;
  border-color: #e0e0e8;
}

body.light .ai-msgs { background: #fafaff; }
body.light .ai-msg-row.user .ai-bubble {
  background: #ff7a45;
  color: #fff;
}
body.light .ai-msg-row.assistant .ai-bubble {
  background: #f0f0f5;
  color: #222;
  border-color: #e0e0e8;
}
body.light .ai-msg-row.assistant .ai-bubble strong { color: #d95a25; }
body.light .ai-msg-row.assistant .ai-bubble code:not(pre code) {
  background: rgba(0,0,0,.08);
  color: #333;
}
body.light .ai-bubble pre {
  background: #2d2d2d;
  border-color: #444;
}

body.light .app-view {
  background: #ffffff !important;
}
body.light .app-view-bar {
  background: #f5f5fa;
  border-bottom-color: #e0e0e8;
}
body.light .app-view-title { color: #222; }
body.light .app-view-back {
  background: #ececf4;
  color: #ff7a45;
}

/* Настройки тумблера */
.theme-toggle-btn {
  background: #2f2f48;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  color: #ff7a45;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
  margin-left: 6px;
}
.theme-toggle-btn:hover { background: #3a3a58; }
body.light .theme-toggle-btn {
  background: #ececf4;
  color: #ff7a45;
}
body.light .theme-toggle-btn:hover { background: #e0e0ea; }
body.matrix .theme-toggle-btn { background: #0a2814; color: #00ff66; }
.admin-v2-input-sm[type="textarea"],
textarea.admin-v2-input-sm {
  width: 100%;
  min-height: 80px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  padding: 8px 12px;
  resize: vertical;
  line-height: 1.5;
}
</style>