:root{
  --bg:#07090d; --bg2:#0a0e15; --panel:#0d1219; --panel2:#111823;
  --line:#1b2430; --line2:#243040;
  --tx:#e9eff7; --tx2:#b3c0d1; --dim:#77869a; --dim2:#5a697c;
  --ac:#ffb444; --ac2:#5aa9ff; --ok:#34d399; --warn:#ff8a4c; --bad:#ff5d6c;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(900px 500px at 50% -12%,rgba(255,180,68,.09),transparent 70%),
    radial-gradient(700px 400px at 100% 100%,rgba(90,169,255,.07),transparent 70%),
    var(--bg);
  color:var(--tx); font-family:var(--sans); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button,input,textarea{font-family:inherit;color:inherit}
.hidden{display:none !important}

.app{
  display:flex; flex-direction:column;
  height:100dvh; height:100vh; max-width:760px; margin:0 auto;
  border-left:1px solid transparent; border-right:1px solid transparent;
}
@media(min-width:820px){
  .app{border-left:1px solid var(--line); border-right:1px solid var(--line)}
}

/* ================= 顶栏 ================= */
.head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(10px + var(--sat)) 14px 10px;
  background:linear-gradient(180deg,rgba(9,12,18,.96),rgba(9,12,18,.86));
  border-bottom:1px solid var(--line); backdrop-filter:blur(14px); z-index:5;
}
.hd-l{display:flex; align-items:center; gap:9px; min-width:0}
.mark{color:var(--ac); display:flex; align-items:center; filter:drop-shadow(0 0 7px rgba(255,180,68,.45))}
.hd-t{min-width:0}
.hd-t b{display:block; font-size:14.5px; letter-spacing:.2px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hd-t span{display:block; font-size:10.5px; color:var(--dim); font-family:var(--mono); margin-top:1px}
.hd-r{display:flex; align-items:center; gap:7px; flex:0 0 auto}
.pill{
  font:10px/1 var(--mono); padding:5px 8px; border-radius:20px;
  border:1px solid var(--line2); color:var(--dim); background:#0c1219; white-space:nowrap;
}
.pill.on{color:var(--ok); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.08)}
.pill.warn{color:var(--ac); border-color:rgba(255,180,68,.4); background:rgba(255,180,68,.08)}
.ico{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line2);
  background:#0c1219; font-size:15px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
}
.ico:active{transform:scale(.94); border-color:var(--ac)}

/* ================= 状态条 ================= */
.status{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line); background:#080c12;
}
.st{display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 2px; border-right:1px solid var(--line)}
.st:last-child{border-right:0}
.st b{font:600 13px/1.2 var(--mono); color:var(--tx); font-variant-numeric:tabular-nums}
.st span{font-size:9.5px; color:var(--dim2); letter-spacing:.4px}

/* ================= 主体 ================= */
.body{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px 12px calc(14px + var(--sab)); display:flex; flex-direction:column; gap:11px;
}
.view{display:flex; flex-direction:column; gap:11px}

/* ================= 卡片 ================= */
.card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r); padding:12px 13px;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px}
.card-h b{font-size:12.5px; letter-spacing:.3px; color:var(--tx)}
.card-h span{font:10px/1 var(--mono); color:var(--dim2)}
.card-h .mini{font-size:10px}

/* 任务输入 */
textarea#task{
  width:100%; min-height:78px; max-height:190px; resize:vertical;
  background:#080c12; border:1px solid var(--line2); border-radius:11px;
  padding:10px 11px; font-size:14px; line-height:1.62; outline:none;
  transition:.15s;
}
textarea#task:focus{border-color:rgba(255,180,68,.55); box-shadow:0 0 0 3px rgba(255,180,68,.08)}
textarea#task::placeholder{color:var(--dim2); font-size:13px}
.row-quick{display:flex; gap:6px; margin-top:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:1px}
.row-quick::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; font-size:11.5px; padding:5px 10px; border-radius:20px;
  border:1px solid var(--line2); background:#0b1118; color:var(--tx2); cursor:pointer;
}
.chip:active{border-color:var(--ac); color:var(--ac)}

/* 编成 */
.sizes{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.sizes .sz{
  padding:9px 0; border-radius:10px; border:1px solid var(--line2);
  background:#0b1118; color:var(--tx2); font:600 12.5px/1 var(--mono); cursor:pointer;
  transition:.14s;
}
.sizes .sz.on{
  border-color:var(--ac); color:#0a0800; background:linear-gradient(180deg,#ffc96b,#ffab2e);
  box-shadow:0 3px 14px rgba(255,180,68,.22);
}
.sizes .sz:active{transform:scale(.96)}
.layers{
  margin-top:9px; display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font:10.5px/1 var(--mono); color:var(--dim);
}
.layers i{
  font-style:normal; padding:3px 7px; border-radius:6px;
  background:#0b1118; border:1px solid var(--line); color:var(--tx2);
}
.layers i b{color:var(--ac); font-weight:600}
.layers u{text-decoration:none; color:var(--dim2)}

.run-row{display:flex; gap:8px; margin-top:11px}
.go{
  flex:1 1 auto; padding:13px 0; border:0; border-radius:11px; cursor:pointer;
  background:linear-gradient(180deg,#ffc96b,#ffa51f); color:#140d00;
  font-size:14.5px; font-weight:700; letter-spacing:.5px;
  box-shadow:0 6px 20px rgba(255,165,31,.22);
}
.go:active{transform:scale(.985)}
.go:disabled{opacity:.45; box-shadow:none}
.stop{
  flex:0 0 96px; padding:13px 0; border-radius:11px; cursor:pointer;
  border:1px solid rgba(255,93,108,.5); background:rgba(255,93,108,.1); color:var(--bad);
  font-size:13px; font-weight:600;
}
.hint{margin-top:8px; font-size:11px; line-height:1.6; color:var(--dim2)}
.hint.ok{color:var(--ok)} .hint.bad{color:var(--bad)} .hint.warn{color:var(--ac)}

/* 上手引导 */
.steps3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.steps3 li{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.65;color:var(--dim)}
.steps3 li i{
  flex:0 0 18px;height:18px;border-radius:50%;font-style:normal;
  background:rgba(255,180,68,.12);border:1px solid rgba(255,180,68,.3);color:var(--ac);
  font:10px/18px var(--mono);text-align:center;margin-top:1px;
}
.steps3 li b{display:block;color:var(--tx2);font-weight:600;font-size:12.5px;margin-bottom:1px}
.btn3{
  width:100%;margin-top:11px;padding:9px 0;border-radius:9px;cursor:pointer;
  border:1px solid var(--line2);background:#0b1118;color:var(--ac);font-size:12.5px;
}
.btn3:active{border-color:var(--ac)}

/* 进度 */
.bar{height:6px; border-radius:4px; background:#111a24; overflow:hidden; position:relative}
.bar i{
  display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,var(--ac2),var(--ac));
  transition:width .3s ease; position:relative;
}
.bar i::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:sweep 1.5s linear infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.prog-meta{display:flex; justify-content:space-between; gap:8px; margin-top:7px; font:10.5px/1.4 var(--mono); color:var(--dim)}
.prog-meta span:first-child{color:var(--tx2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.tree{margin-top:10px; display:flex; flex-direction:column; gap:3px; max-height:190px; overflow-y:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 4px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 4px),transparent 100%)}
.tr-row{
  display:flex; align-items:center; gap:7px; font:10.5px/1.5 var(--mono);
  color:var(--dim); padding:2px 0; animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0; transform:translateY(-3px)}to{opacity:1; transform:none}}
.tr-row .lv{flex:0 0 26px; color:var(--dim2); font-size:9.5px}
.tr-row .dot{width:5px; height:5px; border-radius:50%; background:var(--dim2); flex:0 0 5px}
.tr-row.p .dot{background:var(--ac2)} .tr-row.p .tx{color:var(--tx2)}
.tr-row.e .dot{background:var(--ac)} .tr-row.e .tx{color:var(--tx)}
.tr-row.m .dot{background:var(--ok)}
.tr-row .tx{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 结果 */
.answer{
  font-size:14px; line-height:1.78; color:var(--tx2); white-space:pre-wrap; word-break:break-word;
  border-left:2px solid var(--ac); padding:2px 0 2px 10px;
}
.br-h{
  margin:14px 0 8px; font:10.5px/1 var(--mono); color:var(--dim2);
  display:flex; justify-content:space-between;
}
.branches{display:flex; flex-direction:column; gap:7px}
.br{
  border:1px solid var(--line); border-radius:10px; background:#0a0f16; overflow:hidden;
}
.br-hd{
  display:flex; align-items:center; gap:7px; padding:9px 10px; cursor:pointer;
  font-size:12.5px; color:var(--tx2);
}
.br-hd i{font-style:normal; color:var(--ac); font:10px/1 var(--mono); flex:0 0 auto}
.br-hd b{font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto}
.br-hd em{font-style:normal; color:var(--dim2); font-size:12px; transition:.2s}
.br.on .br-hd em{transform:rotate(90deg)}
.br-bd{display:none; padding:0 10px 10px; font-size:12.5px; line-height:1.72; color:var(--dim); white-space:pre-wrap; word-break:break-word}
.br.on .br-bd{display:block}

.res-stats{
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.res-stats div{text-align:center}
.res-stats b{display:block; font:600 12.5px/1.3 var(--mono); color:var(--ac)}
.res-stats span{font-size:9.5px; color:var(--dim2)}
.res-acts{display:flex; gap:7px; margin-top:12px}
.btn2{
  flex:1 1 0; padding:10px 0; border-radius:10px; cursor:pointer;
  border:1px solid var(--line2); background:#0c1219; color:var(--tx2); font-size:12.5px;
}
.btn2:active{border-color:var(--ac); color:var(--ac)}
.row2{display:flex; gap:7px; margin-top:9px}

/* 历史 */
.hlist{display:flex; flex-direction:column; gap:8px}
.hempty{text-align:center; padding:34px 10px; color:var(--dim2); font-size:12.5px}
.hit{
  border:1px solid var(--line); border-radius:11px; background:#0a0f16; padding:10px 11px;
  cursor:pointer;
}
.hit:active{border-color:var(--ac)}
.hit-t{display:flex; gap:8px; align-items:baseline}
.hit-t b{flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:500; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hit-t span{flex:0 0 auto; font:9.5px/1 var(--mono); color:var(--dim2)}
.hit-m{margin-top:6px; display:flex; gap:10px; font:9.5px/1 var(--mono); color:var(--dim2)}
.hit-m b{color:var(--ac); font-weight:600}

/* 设置 */
.lbl{font-size:11px; color:var(--dim); margin:9px 0 5px}
.txt{
  width:100%; height:40px; border-radius:10px; border:1px solid var(--line2);
  background:#080c12; padding:0 11px; font-size:13px; outline:none; transition:.15s;
}
.txt:focus{border-color:rgba(255,180,68,.55); box-shadow:0 0 0 3px rgba(255,180,68,.08)}
.txt::placeholder{color:var(--dim2); font-size:12px}
.about{font-size:12px; line-height:1.78; color:var(--dim)}
.about p{margin:0 0 8px}
.about p.warn{color:var(--warn)}
.lnk{display:inline-block; margin-top:4px; font-size:12.5px; color:var(--ac); text-decoration:none}

/* 底部导航 */
.tabs{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); background:rgba(9,12,18,.96); backdrop-filter:blur(14px);
  padding-bottom:calc(2px + var(--sab));
}
.tab{
  border:0; background:transparent; padding:8px 0 6px; display:flex; flex-direction:column;
  align-items:center; gap:2px; color:var(--dim2); cursor:pointer; transition:.15s;
}
.tab i{font-style:normal; font-size:16px; line-height:1}
.tab span{font-size:10px; letter-spacing:.3px}
.tab.on{color:var(--ac)}
.tab.on i{filter:drop-shadow(0 0 6px rgba(255,180,68,.5))}

/* 提示 */
.toast{
  position:fixed; left:50%; bottom:calc(78px + var(--sab)); transform:translate(-50%,8px);
  background:rgba(20,26,36,.97); border:1px solid var(--line2); color:var(--tx);
  padding:9px 15px; border-radius:11px; font-size:12.5px; opacity:0; pointer-events:none;
  transition:.22s; z-index:60; max-width:84vw; text-align:center;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* 手机微调 */
@media(max-width:600px){
  .body{padding:10px 10px calc(12px + var(--sab)); gap:10px}
  .card{padding:11px 11px; border-radius:13px}
  .hd-t b{font-size:14px}
  .sizes .sz{padding:13px 0; font-size:13px}
  .answer{font-size:14px}
  .go{padding:14px 0; font-size:15px}
}
@media(max-width:360px){
  .sizes{grid-template-columns:repeat(3,1fr)}
  .res-stats{grid-template-columns:repeat(2,1fr); gap:8px}
}