/* ============================================================
   编程实验室 CodeLab · 设计系统 v2（浅色高级感）
   原则：浅底护眼 / 多层柔和阴影造景深 / 发丝描边 / 克制用色 /
        大标题负字距 + 小标签宽字距 / 等宽数字 / 无霓虹发光
   ============================================================ */
:root{
  /* —— 表面层级（0→3 逐级抬起）—— */
  --bg:#F4F7FC;
  --surf:#FFFFFF;
  --surf-2:#F7F9FD;
  --surf-3:#EDF2FA;
  --surf-4:#E4EBF6;

  /* —— 发丝描边 —— */
  --line:rgba(13,28,58,.075);
  --line-2:rgba(13,28,58,.13);
  --line-3:rgba(13,28,58,.20);

  /* —— 文字四阶 —— */
  --ink:#0C172E;
  --ink-2:#41546F;
  --sub:#8194B2;
  --faint:#A9B8CE;

  /* —— 品牌与语义色（低饱和、高级灰调）—— */
  --brand:#2557D6; --brand-d:#1A43B2; --brand-l:#EBF1FF; --brand-b:#CBDCFB;
  --violet:#6A4BE0; --violet-l:#F0ECFE; --violet-b:#D8CDFA;
  --teal:#0B8F84;  --teal-l:#E4F7F4;  --teal-b:#B4E4DF;
  --amber:#A9720C; --amber-l:#FDF4E2; --amber-b:#F2DCA8;
  --green:#18854A; --green-l:#E8F7EF; --green-b:#B4E2C8;
  --red:#C63A3A;   --red-l:#FDECEC;   --red-b:#F5C6C6;
  --gold:#E0A61F;

  /* —— 景深阴影（三层叠加=高级感的来源）—— */
  --sh-1:0 1px 2px rgba(13,28,58,.05);
  --sh-2:0 1px 2px rgba(13,28,58,.05), 0 4px 10px -3px rgba(13,28,58,.07);
  --sh-3:0 2px 4px rgba(13,28,58,.05), 0 12px 28px -10px rgba(13,28,58,.16);
  --sh-4:0 4px 10px -2px rgba(13,28,58,.08), 0 24px 56px -18px rgba(13,28,58,.24);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(13,28,58,.035);

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;max-width:100%;overflow-x:hidden;}

body{
  font-family:var(--sans); color:var(--ink); overflow-x:hidden;
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* —— 背景：顶部柔光 + 四角彩色雾 + 极淡网格（不抢内容，只给"空气感"）—— */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 12% -12%, rgba(37,87,214,.13), transparent 66%),
    radial-gradient(620px 380px at 96% 4%, rgba(106,75,224,.10), transparent 62%),
    radial-gradient(700px 460px at 50% 104%, rgba(11,143,132,.08), transparent 64%),
    linear-gradient(180deg,#FAFCFF 0%, #F3F7FD 46%, #F5F6FC 100%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(13,28,58,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,28,58,.04) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.14) 58%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.14) 58%,transparent 100%);
}
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:16px 16px calc(30px + env(safe-area-inset-bottom));}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.back{
  flex:0 0 auto;width:40px;height:40px;border-radius:13px;border:1px solid var(--line);
  background:var(--surf);color:var(--ink);font-size:19px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:var(--sh-2);cursor:pointer;transition:transform .12s,box-shadow .15s;
}
.back:active{transform:translateY(1px);box-shadow:var(--sh-1);}
.ttl{flex:1;min-width:0;font-size:16.5px;font-weight:650;letter-spacing:-.2px;line-height:1.25;}
.ttl .sub{display:block;font-size:11.5px;font-weight:450;color:var(--sub);margin-top:4px;letter-spacing:.2px;}
.pill{
  flex:0 0 auto;font:600 12.5px/1 var(--mono);color:var(--amber);background:var(--surf);
  border:1px solid var(--amber-b);border-radius:999px;padding:9px 13px;box-shadow:var(--sh-2);
  display:flex;align-items:center;gap:6px;letter-spacing:-.2px;
}
.pill.beat{animation:beat .5s cubic-bezier(.3,1.6,.5,1);}

/* ---------- 卡片 / 面板 ---------- */
.card{
  background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:16px 17px;
  box-shadow:var(--sh-2);position:relative;
}
.card+.card{margin-top:12px;}
.card h3{
  font-size:12px;font-weight:650;color:var(--ink-2);letter-spacing:.4px;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;text-transform:none;
}
.card h3::before{content:'';width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,var(--brand),var(--violet));}
.card h3 .hint{margin-left:auto;font:500 11px/1 var(--mono);color:var(--faint);letter-spacing:0;}

/* 说明条：左侧色条 + 淡底 */
.task{
  background:linear-gradient(180deg,#FFFFFF,#FAFCFF);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.75;color:var(--ink-2);
  box-shadow:var(--sh-1);
}
.task b{color:var(--ink);font-weight:650;}
.task .k{
  font-family:var(--mono);background:var(--brand-l);color:var(--brand-d);
  border:1px solid var(--brand-b);border-radius:6px;padding:1px 6px;font-size:12.5px;font-weight:600;
}

/* 发丝分隔线 */
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);margin:14px 0;}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--brand);color:#fff;font-family:inherit;
  background:linear-gradient(180deg,#3B6BEB,var(--brand));font-size:15px;font-weight:650;
  border-radius:13px;padding:13px 18px;cursor:pointer;letter-spacing:.2px;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 2px 4px rgba(37,87,214,.18),0 8px 20px -8px rgba(37,87,214,.5);
  transition:transform .1s,box-shadow .15s,filter .15s;
}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(37,87,214,.3);filter:saturate(.95);}
.btn[disabled]{opacity:.42;box-shadow:none;filter:grayscale(.5);cursor:default;}
.btn.ghost{
  background:var(--surf);color:var(--ink-2);border-color:var(--line-2);font-weight:500;
  box-shadow:var(--sh-1);
}
.btn.teal{
  border-color:var(--teal);background:linear-gradient(180deg,#14A79A,var(--teal));
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 8px 20px -8px rgba(11,143,132,.5);
}
.btn.violet{
  border-color:var(--violet);background:linear-gradient(180deg,#8163E8,var(--violet));
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 8px 20px -8px rgba(106,75,224,.5);
}
.btn.full{width:100%;}
.btn.lg{font-size:16px;padding:15px 20px;letter-spacing:1px;}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;}
.btnrow .btn{flex:1;min-width:0;}
.mini{
  border:1px solid var(--line-2);background:var(--surf);color:var(--ink-2);
  font-family:inherit;font-size:13px;font-weight:550;border-radius:10px;padding:9px 12px;cursor:pointer;
  box-shadow:var(--sh-1);transition:transform .1s,background .15s,border-color .15s;
}
.mini:active{transform:translateY(1px);}
.mini.on{background:var(--brand-l);border-color:var(--brand-b);color:var(--brand-d);font-weight:650;box-shadow:0 1px 2px rgba(37,87,214,.14);}

/* ---------- 关卡切换（分段控件质感）---------- */
.lvbar{
  display:flex;gap:7px;margin-bottom:13px;overflow-x:auto;padding:3px 0 5px;scrollbar-width:none;
}
.lvbar::-webkit-scrollbar{display:none;}
.lvtag{
  flex:0 0 auto;border:1px solid var(--line);background:var(--surf);border-radius:11px;
  padding:10px 14px;font-size:13px;font-weight:550;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  box-shadow:var(--sh-1);transition:transform .12s,box-shadow .15s,border-color .15s,background .15s;
}
.lvtag:active{transform:scale(.97);}
.lvtag .n{font-family:var(--mono);color:var(--faint);margin-right:6px;font-size:12px;}
.lvtag.on{
  background:linear-gradient(180deg,#3B6BEB,var(--brand));border-color:var(--brand);color:#fff;font-weight:650;
  box-shadow:0 2px 4px rgba(37,87,214,.22),0 10px 22px -10px rgba(37,87,214,.6);
}
.lvtag.on .n{color:#BFD3FB;}
.lvtag.done::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-left:7px;vertical-align:1px;}

/* ---------- 舞台 ---------- */
.stage{
  background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:17px;margin-bottom:12px;
  box-shadow:var(--sh-2);
}
.stage.tight{padding:13px;}
/* 舞台内凹画布（放图表/棋盘，形成第二层表面） */
.well{
  background:linear-gradient(180deg,var(--surf-2),var(--surf-3));
  border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--sh-in);
}

/* ---------- 数据面板 ---------- */
.stats{display:flex;gap:9px;}
.stat{
  flex:1;min-width:0;background:linear-gradient(180deg,var(--surf-2),#F2F6FC);
  border:1px solid var(--line);border-radius:13px;padding:11px 10px;text-align:center;
  box-shadow:var(--sh-in);position:relative;overflow:hidden;
}
.stat::after{content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--line-2);}
.stat .v{font:650 20px/1.2 var(--mono);color:var(--ink);letter-spacing:-.6px;}
.stat .k{font-size:10.5px;color:var(--sub);margin-top:4px;letter-spacing:.3px;}
.stat.hi{background:linear-gradient(180deg,#F3F7FF,#EAF1FF);border-color:var(--brand-b);}
.stat.hi .v{color:var(--brand);}
.stat.hi::after{background:var(--brand);}
.stat.warn{background:linear-gradient(180deg,#FFFBF2,#FDF5E6);border-color:var(--amber-b);}
.stat.warn .v{color:var(--amber);}
.stat.warn::after{background:var(--amber);}
.stat.ok{background:linear-gradient(180deg,#F3FBF6,#EAF7EF);border-color:var(--green-b);}
.stat.ok .v{color:var(--green);}
.stat.ok::after{background:var(--green);}

/* ---------- 图表：坐标轴 / 网格 / 图例 ---------- */
.chart{position:relative;padding:6px 2px 0;}
.axis-y,.axis-x{position:absolute;background:var(--line-2);}
.gridline{position:absolute;left:0;right:0;border-top:1px dashed rgba(13,28,58,.09);}
.axis-lbl{position:absolute;font:500 10px/1 var(--mono);color:var(--faint);}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0;}
.legend span{font-size:11.5px;color:var(--sub);display:inline-flex;align-items:center;}

/* 排序柱 / 通用柱 */
.bars{position:relative;height:196px;margin:0;border-bottom:1px solid var(--line-2);}
.bar{
  position:absolute;bottom:0;border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,#DCE8FC,#C7D9F8);border:1px solid var(--brand-b);border-bottom:none;
  color:var(--brand-d);font:650 12.5px/1 var(--mono);
  display:flex;align-items:flex-start;justify-content:center;padding-top:6px;
  transition:left .36s cubic-bezier(.4,1.25,.5,1),height .22s,background .22s,border-color .22s,box-shadow .22s;
}
.bar .who{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font:500 10.5px/1 var(--mono);color:var(--sub);}
.bar.cmp{background:linear-gradient(180deg,#FDF0D4,#F9E3B2);border-color:#E0B44F;color:#7E5300;box-shadow:0 0 0 3px rgba(224,180,79,.16);}
.bar.swap{background:linear-gradient(180deg,#C9F0EA,#A8E4DC);border-color:#63CCBF;color:#0A6359;}
.bar.done{background:linear-gradient(180deg,#CDEEDA,#AEE2C5);border-color:var(--green-b);color:#12663A;}
.bar.hit{background:linear-gradient(180deg,#FDF0D4,#F9E3B2);border-color:#E0B44F;}
.bars.scan .bar{opacity:.3;}

/* 数值刻度条 */
.tape{
  position:relative;height:38px;background:linear-gradient(180deg,var(--surf-3),var(--surf-4));
  border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--sh-in);
}
.tape .live{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(37,87,214,.22),rgba(37,87,214,.14));
  border-left:1px solid var(--brand);border-right:1px solid var(--brand);transition:left .32s cubic-bezier(.4,1.2,.5,1),width .32s;}
.tape .mark{position:absolute;top:0;bottom:0;width:2px;background:var(--brand);transition:left .32s cubic-bezier(.4,1.2,.5,1);
  box-shadow:0 0 0 3px rgba(37,87,214,.14);}
.tape .txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--mono);color:var(--brand-d);}
.tape .cells{position:absolute;inset:0;display:flex;gap:1px;padding:4px;}
.tape .cells i{flex:1;border-radius:2px;background:rgba(255,255,255,.55);transition:background .18s;}
.scale{display:flex;justify-content:space-between;font:500 10.5px/1 var(--mono);color:var(--faint);margin-top:6px;}

/* ---------- 汉诺塔 ---------- */
.towers{display:flex;gap:11px;align-items:flex-end;height:196px;padding:0;}
.tower{
  flex:1;position:relative;height:100%;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surf-2),var(--surf-3));cursor:pointer;
  box-shadow:var(--sh-in);transition:background .15s,border-color .15s,box-shadow .15s;
}
.tower .pole{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;width:5px;height:154px;border-radius:3px;
  background:linear-gradient(180deg,var(--line-2),var(--surface-4,#DCE4F1));}
.tower .base{position:absolute;left:8px;right:8px;bottom:9px;height:8px;border-radius:5px;background:var(--line-2);}
.tower.hot{background:linear-gradient(180deg,#F4F8FF,#E9F1FF);border-color:var(--brand-b);box-shadow:var(--sh-2);}
.tower.sel{background:linear-gradient(180deg,#FFFBF0,#FDF3DE);border-color:#E0B44F;box-shadow:0 0 0 3px rgba(224,180,79,.16);}
.tower .lbl{position:absolute;top:9px;left:0;right:0;text-align:center;font:600 10.5px/1 var(--mono);color:var(--faint);letter-spacing:1px;}
.disk{
  position:absolute;left:50%;transform:translateX(-50%);height:21px;border-radius:7px;
  border:1px solid;font:650 11px/1 var(--mono);display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(13,28,58,.14),inset 0 1px 0 rgba(255,255,255,.6);
  transition:bottom .28s cubic-bezier(.4,1.25,.5,1),width .22s;
}
.disk.pick{outline:2px solid var(--gold);outline-offset:2px;}

/* ---------- 代码 / 控制台 ---------- */
.code{
  font:500 12.5px/1.9 var(--mono);background:linear-gradient(180deg,#111C31,#0C1526);color:#D3DEF0;
  border-radius:13px;padding:13px 15px;overflow-x:auto;white-space:pre;
  border:1px solid #0A1220;box-shadow:0 10px 24px -12px rgba(9,17,32,.7),inset 0 1px 0 rgba(255,255,255,.05);
}
.code .c{color:#6B7C99;}
.code .k2{color:#6FD3C7;}
.code .n2{color:#F2BE6B;}
.console{
  font:500 12px/1.85 var(--mono);background:linear-gradient(180deg,var(--surf-2),var(--surf-3));
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;color:var(--ink-2);
  max-height:150px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;box-shadow:var(--sh-in);
}
.console .ok{color:var(--green);}
.console .warn{color:var(--amber);}
.console .bad{color:var(--red);}
.console .dim{color:var(--faint);}

/* ---------- 滑条 ---------- */
.slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-b),var(--surf-4));outline:none;box-shadow:var(--sh-in);}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#FFFFFF,#EAF1FF);border:2px solid var(--brand);
  box-shadow:0 2px 6px rgba(37,87,214,.35),inset 0 1px 0 #fff;cursor:pointer;}

/* ---------- 芯片 / 选项 ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  border:1px solid var(--line-2);background:var(--surf);border-radius:11px;padding:9px 13px;
  font:600 13px/1 var(--mono);color:var(--ink-2);cursor:pointer;box-shadow:var(--sh-1);
  transition:transform .1s,background .15s,border-color .15s,color .15s;
}
.chip:active{transform:scale(.97);}
.chip.on{background:linear-gradient(180deg,#FDF0D4,#FBE7BD);border-color:#E0B44F;color:#7E5300;}
.chip.ok{background:linear-gradient(180deg,#E9F8F0,#D8F0E4);border-color:var(--green-b);color:#12663A;}

/* ---------- 弹层 ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(13,25,48,.4);padding:20px;backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px);
}
.overlay.show{display:flex;}
.modal{
  width:100%;max-width:364px;background:var(--surf);border:1px solid var(--line);border-radius:22px;
  padding:26px 24px 22px;text-align:center;box-shadow:var(--sh-4);position:relative;overflow:hidden;
  animation:pop .36s cubic-bezier(.3,1.35,.5,1);
}
.modal::before{content:'';position:absolute;left:0;right:0;top:0;height:110px;pointer-events:none;
  background:radial-gradient(240px 110px at 50% -30%,rgba(37,87,214,.14),transparent 70%);}
@keyframes pop{from{transform:scale(.93) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal .em{
  position:relative;width:62px;height:62px;margin:0 auto 14px;border-radius:20px;font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg,#4A78EE,var(--brand));box-shadow:0 10px 24px -8px rgba(37,87,214,.6),inset 0 1px 0 rgba(255,255,255,.3);
}
.modal h2{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px;position:relative;}
.modal p{font-size:13.5px;line-height:1.8;color:var(--sub);margin-bottom:6px;position:relative;}
.modal p b{color:var(--ink-2);font-weight:650;}
.stars{display:flex;justify-content:center;gap:9px;margin:14px 0 16px;position:relative;}
.stars i{
  width:30px;height:30px;display:block;background:var(--surf-4);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.stars i.on{background:linear-gradient(180deg,#F7C948,var(--gold));animation:starIn .45s cubic-bezier(.3,1.6,.5,1) both;}
.stars i.on:nth-child(2){animation-delay:.1s;}
.stars i.on:nth-child(3){animation-delay:.2s;}
@keyframes starIn{from{transform:scale(.4) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- 浮动提示 ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px) scale(.97);
  background:rgba(12,23,46,.93);color:#fff;font-size:13px;font-weight:500;border-radius:12px;
  padding:12px 17px;opacity:0;transition:opacity .22s,transform .28s cubic-bezier(.3,1.4,.5,1);
  z-index:60;max-width:88vw;text-align:center;pointer-events:none;letter-spacing:.2px;
  box-shadow:0 16px 40px -12px rgba(12,23,46,.7);backdrop-filter:blur(8px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- 交互反馈 ---------- */
@keyframes beat{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s cubic-bezier(.2,.8,.3,1) both;}
.shake{animation:shk .4s;}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- 通用小组件 ---------- */
.tagline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.kv{display:flex;align-items:baseline;gap:7px;}
.kv .key{font-size:11.5px;color:var(--sub);}
.kv .val{font:600 13px/1 var(--mono);color:var(--ink);}
.note{font-size:11.5px;color:var(--faint);line-height:1.7;letter-spacing:.1px;}