/* Warm premium color pass inspired by VK Games — structure and learning behavior unchanged. */
:root{
  --warm-peach:#ffb45d;
  --warm-peach-soft:#fff0d8;
  --warm-pink:#f4a6bd;
  --warm-pink-soft:#fff0f5;
  --warm-lilac:#a99af5;
  --warm-lilac-soft:#f1efff;
  --warm-blue:#8fc5f4;
  --warm-blue-soft:#edf7ff;
  --warm-mint:#a9dfcd;
  --warm-mint-soft:#effbf7;
  --warm-yellow:#f3cf67;
  --warm-yellow-soft:#fff8dc;
}

body{
  background:
    radial-gradient(circle at 4% 18%,rgba(255,180,93,.18),transparent 22%),
    radial-gradient(circle at 96% 34%,rgba(169,154,245,.17),transparent 25%),
    radial-gradient(circle at 12% 68%,rgba(244,166,189,.12),transparent 24%),
    radial-gradient(circle at 90% 86%,rgba(143,197,244,.14),transparent 23%),
    linear-gradient(180deg,#fffaf1 0%,#f8fbff 48%,#fff9f2 100%);
}

.top{
  background:rgba(255,250,239,.94);
  border-bottom-color:#f0e4d5;
  box-shadow:0 5px 18px rgba(91,63,31,.055);
}
.langs{
  border-color:#eadfd4;
  background:rgba(255,255,255,.86);
  box-shadow:0 5px 0 rgba(218,207,196,.65),0 10px 20px rgba(67,64,92,.07);
}
.langs button{transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.langs button.active{
  background:linear-gradient(180deg,#ffb45d,#f29448);
  color:#52300e;
  box-shadow:0 4px 0 #d87830,0 8px 16px rgba(242,148,72,.20);
}

.hero{
  background:
    radial-gradient(circle at 86% 18%,rgba(255,180,93,.25),transparent 24%),
    radial-gradient(circle at 72% 92%,rgba(169,154,245,.13),transparent 27%),
    radial-gradient(circle at 5% 10%,rgba(244,166,189,.10),transparent 24%),
    linear-gradient(135deg,#fffdf7 0%,#fff8ef 48%,#f7f3ff 100%);
  border-bottom-color:#eee2d8;
}
.hero:after{color:rgba(156,123,217,.055)}
.eyebrow{color:#b03957}
.eyebrow:before{color:#efaa3e}
.hero h1{text-shadow:0 2px 0 rgba(255,255,255,.9)}
.hero p{color:#68798a}
.meta .pill{
  border-width:1px;
  box-shadow:0 4px 0 rgba(220,203,177,.55),0 8px 16px rgba(91,67,42,.05);
}
.meta .pill:nth-child(1){background:linear-gradient(180deg,#fff9dc,#fff3bf);border-color:#ead17a;color:#6b5114}
.meta .pill:nth-child(2){background:linear-gradient(180deg,#eef7ff,#dfeeff);border-color:#bfdaf2;color:#315e83}
.meta .pill:nth-child(3){background:linear-gradient(180deg,#f5f0ff,#eae2ff);border-color:#cfc2f2;color:#5d4a91}

main{position:relative}
main:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 42%,rgba(255,205,121,.09),transparent 18%),
    radial-gradient(circle at 82% 58%,rgba(170,157,244,.08),transparent 19%);
}
.back{
  padding:7px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.72);
  box-shadow:0 3px 0 rgba(214,222,230,.7);
}

/* Resource buttons keep the compact layout but gain VK Games-like tactile color. */
.big-3d,.big-3d.red{
  border-width:1px;
  transform:translateY(0);
  box-shadow:0 5px 0 #ddcfa8,0 11px 22px rgba(81,60,42,.10);
}
.big-3d{
  background:linear-gradient(145deg,#fff9d9 0%,#ffedbd 52%,#f6e2ff 135%);
  border-color:#ecd58a;
  color:#173c5d;
}
.big-3d.red{
  background:linear-gradient(145deg,#ffeaf1 0%,#ffd8e6 48%,#e9e7ff 125%);
  border-color:#edc7d5;
  color:#173c5d;
  box-shadow:0 5px 0 #e0becb,0 11px 22px rgba(122,72,91,.10);
}
.big-3d:hover{transform:translateY(-2px);filter:saturate(1.04)}
.big-3d:active,.big-3d[aria-expanded="true"]{
  transform:translateY(3px);
  background:linear-gradient(145deg,#ffefb4,#f6e3ff);
  box-shadow:0 2px 0 #d8c58e,0 6px 12px rgba(79,58,38,.08);
}
.big-3d.red:active,.big-3d.red[aria-expanded="true"]{
  background:linear-gradient(145deg,#ffdbe7,#e3e2ff);
  box-shadow:0 2px 0 #d9b3c0,0 6px 12px rgba(107,67,83,.08);
}
.big-3d .icon{filter:drop-shadow(0 3px 4px rgba(58,44,88,.13))}
.big-3d .chev{color:#826d8f}

.drawer-card{
  border-color:#eadfd8;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 0 rgba(225,218,226,.62),0 18px 35px rgba(66,70,105,.08);
}
.drawer-head{background:linear-gradient(135deg,#fffaf0,#f5f2ff)}
.music-box{background:linear-gradient(145deg,#fff8d9,#fffdf7 54%,#f1edff);border-color:#ead491}
.empty{background:linear-gradient(135deg,#fff9ef,#f5f2ff);border-color:#e0d7df}
.mini-3d.alt{background:linear-gradient(180deg,#f0f7ff,#e1effc);border-color:#c7dced;box-shadow:0 4px 0 #bdd0e0,0 7px 13px rgba(56,93,124,.08)}
.mini-3d.gold{background:linear-gradient(180deg,#ffe28a,#f5bd55);border-color:#e1ac42;box-shadow:0 4px 0 #c98d2d,0 7px 13px rgba(199,139,38,.12)}

/* Warm learning dashboard */
.studio-top{
  border:1px solid #eadfcb;
  border-left:5px solid #f2b447;
  background:
    radial-gradient(circle at 88% 15%,rgba(169,154,245,.16),transparent 27%),
    radial-gradient(circle at 72% 110%,rgba(244,166,189,.14),transparent 32%),
    linear-gradient(135deg,#fffaf0 0%,#fff 52%,#f6f3ff 100%);
  box-shadow:0 7px 0 rgba(226,216,201,.72),0 16px 32px rgba(67,64,92,.08);
}
.studio-top:after{color:rgba(151,121,215,.09)}
.studio-kicker{color:#a66b16}
.progress-track{background:#eeeaf2;box-shadow:inset 0 1px 2px rgba(54,54,78,.06)}
.progress-fill{background:linear-gradient(90deg,#f3b847,#f2a5b9 48%,#9f94ef 100%)}

.lesson-card{
  border-color:#e9e2dc;
  box-shadow:0 5px 0 rgba(221,216,222,.68),0 12px 23px rgba(61,67,95,.065);
}
.lesson-card:nth-child(6n+1){background:linear-gradient(145deg,#fff8d8,#fffdf4);border-color:#ead890}
.lesson-card:nth-child(6n+2){background:linear-gradient(145deg,#edf7ff,#fafcff);border-color:#c8dfef}
.lesson-card:nth-child(6n+3){background:linear-gradient(145deg,#fff0f5,#fffafd);border-color:#edcbd6}
.lesson-card:nth-child(6n+4){background:linear-gradient(145deg,#f0fbf7,#fbfffd);border-color:#cbe7dc}
.lesson-card:nth-child(6n+5){background:linear-gradient(145deg,#fff1df,#fffbf5);border-color:#efd1aa}
.lesson-card:nth-child(6n+6){background:linear-gradient(145deg,#f1efff,#fbfaff);border-color:#d6cff2}
.lesson-card:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(215,208,217,.68),0 16px 28px rgba(61,67,95,.09)}
.lesson-card.locked{filter:saturate(.72);opacity:.64}
.lesson-card:nth-child(6n+1) .lesson-num{background:#ffe59a;color:#71500d}
.lesson-card:nth-child(6n+2) .lesson-num{background:#d7ebff;color:#285f8b}
.lesson-card:nth-child(6n+3) .lesson-num{background:#ffd9e5;color:#9b3d5b}
.lesson-card:nth-child(6n+4) .lesson-num{background:#d6f0e7;color:#31745f}
.lesson-card:nth-child(6n+5) .lesson-num{background:#ffddba;color:#925a20}
.lesson-card:nth-child(6n+6) .lesson-num{background:#ded9ff;color:#5d52a0}
.lesson-open{
  border-color:rgba(207,201,214,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,246,252,.96));
  box-shadow:0 4px 0 rgba(204,197,211,.82),0 7px 12px rgba(55,56,81,.05);
}
.lesson-open:not(:disabled):hover{background:#fff;transform:translateY(-1px)}

.practice-panel{
  border-color:#e6dfe7;
  background:
    radial-gradient(circle at 100% 0,rgba(169,154,245,.09),transparent 24%),
    linear-gradient(145deg,#fffdf8,#fff 58%,#fff3f7);
  box-shadow:0 7px 0 rgba(224,217,225,.66),0 15px 28px rgba(63,63,92,.075);
}
.close-panel{background:#fff8ed;border-color:#ead9c5;box-shadow:0 3px 0 #ddd0c2}
.speed-btn{background:linear-gradient(180deg,#fff,#f3f1f8);border-color:#ddd6e6;box-shadow:0 4px 0 #cec6d9}
.speed-btn.active{background:linear-gradient(180deg,#ffb45d,#f19347);color:#51300f;border-color:#e08a3e;box-shadow:0 4px 0 #c8722d}
.section-tabs button{background:#fff;border-color:#ddd7e4}
.section-tabs button.active{background:linear-gradient(180deg,#a99af5,#897be1);border-color:#897be1;box-shadow:0 3px 0 #6c61bd}
.section-view{background:linear-gradient(135deg,#fff8dc,#fff 48%,#f1efff);border-color:#e5d7a9}
.ab-point:nth-child(1){background:#eef7ff;border-color:#c9deed}
.ab-point:nth-child(2){background:#fff0f5;border-color:#eccbd5}
.karaoke-stage{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,180,93,.22),transparent 25%),
    radial-gradient(circle at 80% 0,rgba(169,154,245,.22),transparent 28%),
    linear-gradient(160deg,#0c3557,#123f67 55%,#633f78 130%);
  box-shadow:0 7px 0 #06253e,0 14px 24px rgba(25,47,79,.13);
}
.memory-text{background:linear-gradient(135deg,#fff8d9,#fffdf8,#f5f1ff);border-color:#e5d399}
.record-box{background:linear-gradient(135deg,#eef7ff,#fff 55%,#fff1f5);border-color:#d8e1e7}

.footer{
  color:#6e7180;
  background:linear-gradient(90deg,rgba(255,245,222,.68),rgba(242,239,255,.72),rgba(255,238,244,.65));
  border-top:1px solid #ebe2dd;
  padding-top:16px;
}

@media(max-width:700px){
  .top{background:rgba(255,250,239,.96)}
  .langs{box-shadow:0 4px 0 rgba(218,207,196,.62),0 8px 15px rgba(67,64,92,.06)}
  .hero{background:
    radial-gradient(circle at 98% 5%,rgba(255,180,93,.20),transparent 28%),
    radial-gradient(circle at 90% 85%,rgba(169,154,245,.12),transparent 28%),
    linear-gradient(135deg,#fffdf7,#fff9ef 60%,#f7f3ff)}
  .back{background:transparent;box-shadow:none;padding-left:2px}
  .big-3d,.big-3d.red{box-shadow:0 4px 0 rgba(215,199,202,.76),0 8px 15px rgba(78,62,79,.075)}
  .studio-top{box-shadow:0 5px 0 rgba(226,216,201,.72),0 12px 22px rgba(67,64,92,.07)}
  .lesson-card{box-shadow:0 4px 0 rgba(221,216,222,.68),0 9px 17px rgba(61,67,95,.055)}
}