/* ===================================================================
   CONSTRUCTION-TOY THEME — applies to the whole app (editor + cabinets
   + modals). Loaded last so it wins; !important beats inline styles.
   =================================================================== */
:root{
  --bg:#FBEEDB; --panel:#FFF8EC; --panel2:#F3E7CF;
  --border:rgba(36,30,59,0.22);
  --text:#241E3B; --muted:#6A6280;
  --ard-teal:#10A7AA; --ard-dark:#241E3B;
  --shadow:4px 4px 0 rgba(36,30,59,0.16);
  --shadow-md:6px 6px 0 rgba(36,30,59,0.18);
}
html,body{ background:var(--bg); }
.logo,.panel-head h2,.pw-title,.win-title,.rb-card-title,.rb-hero h3,
.stat-val,.rb-stat-val{ font-family:'Rubik','Nunito',sans-serif !important; }

/* ---------- TOPBAR ---------- */
#topbar{ background:#FFF8EC !important; border-bottom:3px solid #241E3B !important;
  box-shadow:none !important; }
.logo{ color:#241E3B !important; }
.badge{ background:#FFC53D !important; color:#241E3B !important;
  border:2px solid #241E3B !important; }
.tbtn{ border:2.5px solid #241E3B !important; border-radius:11px !important;
  background:#fff !important; color:#241E3B !important;
  box-shadow:3px 3px 0 #241E3B !important;
  transition:transform .1s, box-shadow .1s !important; }
.tbtn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 #241E3B !important; }
.tbtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #241E3B !important; }
.tbtn.play{ background:#4CB944 !important; color:#fff !important; }
.tbtn.stop{ background:#FF6B5B !important; color:#fff !important; }
.tbtn.reset{ background:#fff !important; color:#241E3B !important; }
.sel{ border:2.5px solid #241E3B !important; border-radius:11px !important;
  box-shadow:3px 3px 0 #241E3B !important; background:#fff !important;
  color:#241E3B !important; font-weight:800 !important; }

/* ---------- WORKSPACE / PALETTE / SIM ---------- */
#palette{ background:#FFF8EC !important; border-right:3px solid #241E3B !important; }
#sim-wrap{ border-left:3px solid #241E3B !important; }
#ws-area{ background:linear-gradient(to bottom,#FFF8EC,#F3E7CF) !important; }
#ws-drop{ background-image:radial-gradient(circle at 1px 1px, rgba(36,30,59,0.12) 1px, transparent 0) !important; }
#mission-panel{ background:#FFF8EC !important; border:3px solid #241E3B !important;
  border-radius:14px !important; box-shadow:5px 5px 0 #241E3B !important; }

/* ---------- CABINET PANELS ---------- */
#panel-overlay{ background:rgba(36,30,59,0.55) !important; }
.panel-modal{ background:#FBEEDB !important; border:3px solid #241E3B !important;
  border-radius:22px !important; box-shadow:10px 10px 0 #241E3B !important; }
.panel-head{ background:#10A7AA !important; border-bottom:3px solid #241E3B !important; }
.panel-head h2{ color:#fff !important; }
.panel-close{ background:#fff !important; color:#241E3B !important;
  border:2.5px solid #241E3B !important; border-radius:10px !important;
  box-shadow:2px 2px 0 #241E3B !important; }
.panel-tabs{ background:transparent !important; padding:0 !important; gap:8px !important; }
.panel-tab{ background:#fff !important; border:2.5px solid #241E3B !important;
  border-radius:11px !important; color:#241E3B !important;
  box-shadow:3px 3px 0 #241E3B !important; }
.panel-tab.active{ background:#FFC53D !important; color:#241E3B !important; }
.stat-card,.class-card{ background:#FFF8EC !important; border:3px solid #241E3B !important;
  border-radius:16px !important; box-shadow:5px 5px 0 #241E3B !important; }
.stat-val{ color:#241E3B !important; }
.badge-pill{ background:#FFF8EC !important; border:2.5px solid #241E3B !important;
  box-shadow:3px 3px 0 #241E3B !important; color:#241E3B !important; }
.panel-search{ border:2.5px solid #241E3B !important; border-radius:12px !important;
  background:#fff !important; }
.a-btn{ border:2px solid #241E3B !important; border-radius:8px !important;
  box-shadow:2px 2px 0 #241E3B !important; }
.m-table tr:hover td{ background:rgba(16,167,170,0.08) !important; }

/* ---------- rb-* DASHBOARDS ---------- */
.rb-hero{ background:#10A7AA !important; border:3px solid #241E3B !important;
  border-radius:22px !important; box-shadow:8px 8px 0 #241E3B !important; }
.rb-kicker{ color:#FFE08A !important; font-family:'Rubik','Nunito',sans-serif !important; }
.rb-donut-wrap{ background:rgba(255,255,255,.18) !important;
  border:2px solid rgba(255,255,255,.32) !important; }
.rb-card,.rb-stat{ background:#FFF8EC !important; border:3px solid #241E3B !important;
  border-radius:18px !important; box-shadow:5px 5px 0 #241E3B !important; }
.rb-card-head{ border-bottom:3px solid #241E3B !important; }
.rb-card-title{ color:#241E3B !important; }
.rb-stat::after{ display:none !important; }
.rb-stat-icon{ background:#FFC53D !important; border:2.5px solid #241E3B !important; }
.rb-stat-val,.rb-score,.rb-col-num,.rb-name{ color:#241E3B !important; }
.rb-pill{ background:#FFC53D !important; color:#241E3B !important;
  border:2px solid #241E3B !important; font-family:'Rubik','Nunito',sans-serif !important; }
.rb-btn{ border:2.5px solid #241E3B !important; border-radius:12px !important;
  box-shadow:3px 3px 0 #241E3B !important; font-family:'Rubik','Nunito',sans-serif !important; }
.rb-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 #241E3B !important;
  filter:none !important; }
.rb-btn.primary{ background:#10A7AA !important; color:#fff !important; }
.rb-btn.secondary,.rb-btn.light{ background:#fff !important; color:#241E3B !important; }
.rb-col-bar{ background:#10A7AA !important; border:2.5px solid #241E3B !important;
  border-radius:10px 10px 0 0 !important; box-shadow:none !important; }
.rb-table td{ background:#FFF8EC !important; border-top:2px solid #241E3B !important;
  border-bottom:2px solid #241E3B !important; }
.rb-table td:first-child{ border-left:2px solid #241E3B !important; }
.rb-table td:last-child{ border-right:2px solid #241E3B !important; }
.rb-rank{ background:#FFC53D !important; border:2px solid #241E3B !important;
  color:#241E3B !important; }
.rb-student-card{ background:#FFF8EC !important; border:2.5px solid #241E3B !important;
  border-radius:14px !important; }
.rb-avatar{ background:#FF6B5B !important; border:2.5px solid #241E3B !important;
  color:#fff !important; }
.rb-empty{ background:#FFF1D6 !important; border:2.5px dashed #241E3B !important;
  color:#6A6280 !important; }
.rb-dot.on{ background:#10A7AA !important; }

/* ---------- PAYWALL ---------- */
.pw-modal{ background:#FBEEDB !important; border:3px solid #241E3B !important;
  border-radius:24px !important; box-shadow:10px 10px 0 #241E3B !important; }
.pw-title{ color:#241E3B !important; }
.pw-sub,.pw-period,.pw-note{ color:#6A6280 !important; }
.pw-features{ background:#FFF8EC !important; border:2.5px solid #241E3B !important;
  border-radius:14px !important; }
.pw-feature{ color:#241E3B !important; }
.pw-feature::before{ color:#10A7AA !important; }
.pw-amount{ color:#241E3B !important; }
.pw-amount span{ color:#6A6280 !important; }
.pw-btn{ border:3px solid #241E3B !important; border-radius:14px !important;
  background:#FF6B5B !important; color:#fff !important;
  box-shadow:4px 4px 0 #241E3B !important; }
.pw-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #241E3B !important; }
.pw-btn.secondary{ background:#fff !important; color:#241E3B !important; }
.pw-close{ background:#fff !important; color:#241E3B !important;
  border:2.5px solid #241E3B !important; }

/* ---------- WIN overlay ---------- */
#win-box{ background:#10A7AA !important; border:3px solid #241E3B !important;
  border-radius:24px !important; box-shadow:10px 10px 0 #241E3B !important; }
#win-box::before{ display:none !important; }
.win-title{ color:#fff !important; text-shadow:none !important; }
.win-sub{ color:rgba(255,255,255,.92) !important; }
.win-btn{ border:3px solid #241E3B !important; border-radius:13px !important;
  box-shadow:4px 4px 0 #241E3B !important; }
.win-btn.primary{ background:#FFC53D !important; color:#241E3B !important; }
.win-btn.secondary{ background:#fff !important; color:#241E3B !important; }

/* ---------- MAP / ROBOT pickers ---------- */
.map-card,.robot-card{ background:#FFF8EC !important; border:3px solid #241E3B !important;
  border-radius:14px !important; box-shadow:4px 4px 0 #241E3B !important; }
.map-card:hover,.robot-card:hover{ transform:translate(-2px,-2px) !important;
  box-shadow:6px 6px 0 #241E3B !important; }

/* ---------- generic modal containers (course/guide/builder/lego) ---------- */
.pw-icon,.win-emoji{ filter:none !important; }

/* ---------- SHOP (Робот дүкені) ---------- */
#shop-overlay{position:fixed;inset:0;background:rgba(36,30,59,0.55);backdrop-filter:blur(6px);z-index:8200;display:none;align-items:center;justify-content:center;padding:20px;}
#shop-overlay.show{display:flex;}
#shop-modal{background:#FBEEDB;border:3px solid #241E3B;border-radius:18px;box-shadow:8px 8px 0 #241E3B;width:100%;max-width:920px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;}
#shop-modal-head{padding:16px 22px;background:#FFF8EC;border-bottom:3px solid #241E3B;display:flex;align-items:center;gap:14px;}
#shop-modal-head .rmh-title{font-size:18px;font-weight:900;color:#241E3B;font-family:'JetBrains Mono',monospace;}
#shop-modal-head .rmh-title .acc{color:#10A7AA;}
#shop-wallet{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:900;font-size:16px;color:#241E3B;background:#FFC53D;border:2.5px solid #241E3B;border-radius:10px;padding:5px 12px;box-shadow:2px 2px 0 #241E3B;}
#shop-modal-close{font-size:16px;font-weight:900;width:34px;height:34px;border-radius:8px;border:2.5px solid #241E3B;background:#fff;color:#241E3B;cursor:pointer;font-family:'JetBrains Mono',monospace;box-shadow:2px 2px 0 #241E3B;}
#shop-modal-close:hover{background:#FF6B5B;color:white;}
#shop-modal-sub{padding:9px 22px;background:#F3E7CF;border-bottom:2px solid rgba(36,30,59,0.15);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
#shop-robot-label{font-weight:900;font-size:12px;color:#241E3B;font-family:'JetBrains Mono',monospace;}
.shop-sub-hint{font-size:10.5px;font-weight:700;color:#6A6280;}
#shop-modal-body{padding:20px 22px;overflow-y:auto;}
.skin-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.skin-card{background:#FFF8EC;border:2.5px solid #241E3B;border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 #241E3B;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column;}
.skin-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #241E3B;}
.skin-card.equipped{outline:3px solid #4CB944;outline-offset:-1px;}
.skin-swatch{height:82px;position:relative;display:flex;align-items:center;justify-content:center;}
.skin-swatch .sw-ring{position:absolute;width:52px;height:52px;border-radius:50%;opacity:.35;}
.skin-swatch .sw-core{width:34px;height:34px;border-radius:10px;border:2.5px solid #241E3B;position:relative;z-index:1;}
.skin-info{padding:10px 10px 12px;text-align:center;}
.skin-name{font-size:12.5px;font-weight:900;color:#241E3B;margin-bottom:6px;}
.skin-price{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;color:#6A6280;margin-bottom:8px;}
.skin-price.owned{color:#4CB944;}
.skin-btn{width:100%;padding:7px 0;border-radius:9px;border:2.5px solid #241E3B;font-family:'Nunito',sans-serif;font-weight:900;font-size:11.5px;cursor:pointer;box-shadow:2px 2px 0 #241E3B;transition:transform .1s;background:#fff;color:#241E3B;}
.skin-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #241E3B;}
.skin-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #241E3B;}
.skin-btn.buy{background:#10A7AA;color:#fff;}
.skin-btn.equip{background:#FFC53D;color:#241E3B;}
.skin-btn.equipped{background:#4CB944;color:#fff;cursor:default;}
.skin-btn.locked{background:#eee;color:#999;cursor:not-allowed;box-shadow:none;}
.skin-card.rare{outline:2px solid #FFD700;}
.skin-card.rare .skin-name::after{content:' ✨';}

/* ---------- ADVENTURE MODE (Ғарыш саяхаты) ---------- */
#adventure-overlay{position:fixed;inset:0;background:rgba(15,10,30,0.72);backdrop-filter:blur(6px);z-index:8200;display:none;align-items:center;justify-content:center;padding:20px;}
#adventure-overlay.show{display:flex;}
#adventure-modal{background:linear-gradient(180deg,#1B1533,#241E3B 40%,#2E2650);border:3px solid #241E3B;border-radius:18px;box-shadow:8px 8px 0 rgba(0,0,0,0.4);width:100%;max-width:560px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;}
#adventure-head{padding:16px 20px;background:rgba(0,0,0,0.25);border-bottom:3px solid #241E3B;display:flex;align-items:center;gap:12px;}
#adventure-head .rmh-title{font-size:17px;font-weight:900;color:#fff;font-family:'JetBrains Mono',monospace;}
#adventure-head .rmh-title .acc{color:#FFC53D;}
#adv-progress-pill{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:900;font-size:13px;color:#241E3B;background:#FFC53D;border:2.5px solid #241E3B;border-radius:10px;padding:4px 10px;}
#adventure-close{font-size:16px;font-weight:900;width:32px;height:32px;border-radius:8px;border:2.5px solid #241E3B;background:#fff;color:#241E3B;cursor:pointer;box-shadow:2px 2px 0 rgba(0,0,0,0.3);}
#adventure-body{padding:28px 20px 40px;overflow-y:auto;background-image:radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,0.35) 100%, transparent),radial-gradient(1.5px 1.5px at 90px 90px, rgba(255,255,255,0.25) 100%, transparent),radial-gradient(1px 1px at 150px 50px, rgba(255,255,255,0.3) 100%, transparent),radial-gradient(1px 1px at 60px 150px, rgba(255,255,255,0.2) 100%, transparent);background-size:200px 200px;}
#adventure-path{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;}
.adv-node-wrap{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;}
.adv-node-wrap:nth-child(even){align-items:flex-end;padding-right:14%;}
.adv-node-wrap:nth-child(odd){align-items:flex-start;padding-left:14%;}
.adv-connector{width:4px;height:34px;background:repeating-linear-gradient(180deg,rgba(255,255,255,0.35) 0 6px,transparent 6px 12px);}
.adv-node{width:76px;height:76px;border-radius:50%;border:3px solid #241E3B;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform .15s;box-shadow:0 4px 0 rgba(0,0,0,0.35);font-size:28px;}
.adv-node:hover{transform:scale(1.06);}
.adv-node.locked{background:#4B4468;cursor:not-allowed;opacity:.55;filter:grayscale(0.6);}
.adv-node.locked:hover{transform:none;}
.adv-node.unlocked{background:linear-gradient(160deg,#FFC53D,#FF9E2C);}
.adv-node.done1{background:linear-gradient(160deg,#93E68B,#4CB944);}
.adv-node.done2{background:linear-gradient(160deg,#7DD8DB,#10A7AA);}
.adv-node.done3{background:linear-gradient(160deg,#FFD86B,#FFC53D);}
.adv-node.current{box-shadow:0 0 0 5px rgba(255,197,61,0.35),0 4px 0 rgba(0,0,0,0.35);animation:advPulse 1.6s ease-in-out infinite;}
@keyframes advPulse{0%,100%{box-shadow:0 0 0 5px rgba(255,197,61,0.35),0 4px 0 rgba(0,0,0,0.35);}50%{box-shadow:0 0 0 10px rgba(255,197,61,0.12),0 4px 0 rgba(0,0,0,0.35);}}
.adv-node-label{margin-top:6px;font-size:10.5px;font-weight:900;color:#fff;text-align:center;max-width:110px;font-family:'Nunito',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,0.6);}
.adv-node-stars{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);display:flex;gap:1px;background:rgba(0,0,0,0.55);border-radius:8px;padding:2px 5px;font-size:9px;}
.adv-node-lock-icon{font-size:22px;}
.adv-node-num{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;background:#241E3B;color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;border:2px solid #fff;}
.adv-finish{margin-top:8px;font-size:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4));}