#nnlab{--brand:#2f6bff;          
  --brand-2:#5b8bff;        
  --brand-deep:#1e4fd6;     
  --brand-soft:#e8f0ff;     
  --brand-line:#cfddfc;     
  --accent:#ffd021;         
  --accent-2:#ffb020;       
  --accent-soft:#fff7da;
  --accent-line:#ffe6a3;
  --pink:#f2559d;           
  --pink-soft:#ffe9f2;
  --purple:#8a5cf6;         
  --purple-soft:#f0ebff;
  --mint:#12c98c;           
  --mint-soft:#e3f9f0;
  --ink:#0d2259;            
  --ink-2:#384f82;          
  --ink-3:#8496bb;          
  --ok:#16c784; --err:#f0446a; --warn:#ff9f1c;
  --surface:#ffffff;
  --line:#e2eafb;
  --shadow:0 16px 40px -20px rgba(47,107,255,.20);
  --shadow-sm:0 6px 18px -6px rgba(47,107,255,.16);
  --r-lg:22px; --r-md:16px;}
#nnlab *{margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#nnlab,
#nnlab{height:100%;}
#nnlab{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink-2);
  min-height:100%; overflow-x:hidden;
  background:
    radial-gradient(1100px 460px at 92% -8%, #d9e8ff 0%, rgba(217,232,255,0) 60%),
    radial-gradient(900px 460px at -6% 6%, #e5f3ff 0%, rgba(229,243,255,0) 55%),
    radial-gradient(760px 460px at 8% 112%, #fff3d6 0%, rgba(255,243,214,0) 55%),
    linear-gradient(180deg,#e9f0ff 0%, #f4f8ff 55%, #fbfdff 100%);
  background-attachment:fixed;}
#nnlab .bg{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
#nnlab .bg::before,
#nnlab .bg::after{content:''; position:absolute; border-radius:50%; filter:blur(6px); opacity:.55;}
#nnlab .bg::before{width:340px; height:340px; top:-120px; right:-90px;
  background:radial-gradient(circle at 35% 35%, rgba(140,180,255,.55), rgba(140,180,255,0) 70%);}
#nnlab .bg::after{width:300px; height:300px; left:-110px; bottom:8%;
  background:radial-gradient(circle at 60% 40%, rgba(255,208,33,.32), rgba(255,208,33,0) 70%);}
#nnlab .bg .sun,
#nnlab .bg .stars,
#nnlab .bg .cloud,
#nnlab .bg .balloon,
#nnlab .stars2,
#nnlab .stars{display:none;}
#nnlab #app,
#nnlab .page{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:14px 16px 80px;}
#nnlab .topbar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 26px -12px rgba(47,107,255,.28); border-radius:20px; padding:10px 16px; margin-bottom:18px;}
#nnlab .topbar .t{flex:1; color:#0d2259; font-weight:800; font-size:17px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
#nnlab .topbar .pr{color:#1e4fd6; font-size:12px; font-weight:800; white-space:nowrap; background:#e8f0ff;
  border:1px solid #cfddfc; padding:4px 12px; border-radius:30px;}
#nnlab .topbar .right{display:flex; align-items:center; gap:8px;}
#nnlab .logo{color:#0d2259; font-weight:800; font-size:19px; letter-spacing:.3px;
  display:flex; align-items:center; gap:7px; text-decoration:none;}
#nnlab .logo small{font-size:12px; color:#1e4fd6; font-weight:700; margin-left:2px;
  background:#e8f0ff; border:1px solid #cfddfc; padding:2px 10px; border-radius:30px; white-space:nowrap;}
#nnlab .logo-ic{font-size:26px; line-height:1; display:inline-block;}
#nnlab .logo-name{position:relative;}
#nnlab .logo-num{font-style:italic; background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff;
  padding:2px 10px; border-radius:14px; font-size:13px; transform:rotate(-3deg);
  box-shadow:0 4px 10px rgba(47,107,255,.35);}
#nnlab .back{display:inline-flex; align-items:center; gap:4px; background:#e8f0ff;
  border:1px solid #cfddfc; color:#1e4fd6; font-size:13px; font-weight:800; padding:8px 14px;
  border-radius:30px; cursor:pointer; transition:.15s; white-space:nowrap; text-decoration:none;}
#nnlab .back:hover{background:#dce8ff; transform:translateY(-1px);}
#nnlab .back:active{transform:scale(.96);}
#nnlab .btn-guide,
#nnlab .backbtn{display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg,#ffd021,#ffb020); color:#7a4a00; font-size:13px; font-weight:800;
  padding:7px 15px; border-radius:30px; text-decoration:none;
  box-shadow:0 6px 16px -6px rgba(255,176,32,.65); transition:.15s;}
#nnlab .btn-guide:hover,
#nnlab .backbtn:hover{transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(255,176,32,.75);}
#nnlab .btn-guide:active,
#nnlab .backbtn:active{transform:scale(.96);}
#nnlab .btn-gh{display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg,#0d2259,#1a2c5e); color:#fff; font-size:13px; font-weight:800;
  padding:7px 15px; border-radius:30px; text-decoration:none;
  box-shadow:0 6px 16px -6px rgba(13,34,89,.5); transition:.15s;}
#nnlab .btn-gh:hover{transform:translateY(-2px);}
#nnlab .btn-gh:active{transform:scale(.96);}
#nnlab .btn{border:none; border-radius:30px; padding:10px 20px; font-size:13px; font-weight:800; cursor:pointer;
  transition:.15s; color:#fff; font-family:inherit; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#nnlab .btn:active{transform:scale(.96);}
#nnlab .btn-primary{background:linear-gradient(135deg,#2f6bff,#1e4fd6);}
#nnlab .btn-success{background:linear-gradient(135deg,#12c98c,#0ea876);}
#nnlab .btn-danger{background:linear-gradient(135deg,#ff8a9c,#f0446a);}
#nnlab .btn-warning{background:linear-gradient(135deg,#ffd021,#ffb020); color:#7a4a00;}
#nnlab .btn-ghost{background:#eef1fa; color:#5a638a; box-shadow:none;}
#nnlab .btn-outline{background:transparent; border:2px solid #cfddfc; color:#1e4fd6; box-shadow:none;}
#nnlab .btn:disabled{opacity:.5; cursor:default;}
#nnlab .hero{text-align:center; padding:26px 10px 10px; position:relative;}
#nnlab .hero .big{font-size:72px; line-height:1; display:inline-block; animation:float 3.4s ease-in-out infinite;
  filter:drop-shadow(0 10px 22px rgba(47,107,255,.22));}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
#nnlab .hero h1{color:#0d2259; font-size:30px; margin:10px 0 6px; letter-spacing:.3px;}
#nnlab .hero .tagline{color:#5469a0; font-size:16px;}
#nnlab .hero .meta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px;}
#nnlab .kicker{display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff; font-size:12px; font-weight:800;
  letter-spacing:.5px; padding:5px 16px; border-radius:30px;
  box-shadow:0 6px 16px -6px rgba(47,107,255,.6);}
#nnlab .chip{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.92);
  border:1px solid #cfddfc; color:#335099; font-size:12px; font-weight:800;
  padding:7px 15px; border-radius:30px; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#nnlab .card{background:#fff; border-radius:22px; padding:20px; box-shadow:0 16px 40px -20px rgba(47,107,255,.2);
  margin:16px 0; border:1px solid #eef2fc;}
#nnlab .card h3{font-size:16px; color:#0d2259; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#nnlab .card p,
#nnlab .card li{font-size:14px; line-height:1.85; color:#384f82;}
#nnlab .card ul{padding-left:20px;}
#nnlab .badge{display:inline-block; background:#e8f0ff; color:#1e4fd6; padding:2px 11px; border-radius:30px; font-size:11px; font-weight:800;}
#nnlab .muted{color:#8496bb; font-size:12px;}
#nnlab .tl{position:relative; margin-top:10px; padding-bottom:10px;}
#nnlab .tl::before{content:''; position:absolute; left:26px; top:8px; bottom:8px; width:4px;
  background:linear-gradient(180deg,#2f6bff,#8a5cf6,#f2559d); border-radius:4px; opacity:.9;}
#nnlab .node{position:relative; padding-left:64px; margin-bottom:18px;}
#nnlab .node .dot{position:absolute; left:12px; top:14px; width:34px; height:34px; border-radius:50%;
  background:#fff; border:3px solid #2f6bff; display:flex; align-items:center; justify-content:center;
  font-size:16px; z-index:1; box-shadow:0 6px 14px -4px rgba(47,107,255,.4);}
#nnlab .node .ncard{background:#fff; border-radius:16px; padding:14px 16px; cursor:pointer;
  box-shadow:0 16px 40px -20px rgba(47,107,255,.2); border:1px solid #eef2fc; transition:.18s;}
#nnlab .node .ncard:hover{transform:translateY(-2px); border-color:#cfddfc;}
#nnlab .node .ncard:active{transform:scale(.98);}
#nnlab .node .ncard.done{border-color:#12c98c; background:linear-gradient(180deg,#ffffff,#f2fcf7);}
#nnlab .node .ncard.cur{border-color:#ffd021; box-shadow:0 12px 26px -12px rgba(255,176,32,.5);}
#nnlab .node .year{display:inline-block; background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff;
  font-size:12px; font-weight:800; padding:3px 11px; border-radius:30px; margin-bottom:6px;}
#nnlab .node .row{display:flex; align-items:center; gap:8px;}
#nnlab .node .row .em{font-size:26px;}
#nnlab .node .row .tt{flex:1;}
#nnlab .node .row .tt b{font-size:16px; color:#0d2259; display:block;}
#nnlab .node .row .tt span{font-size:12px; color:#8496bb;}
#nnlab .node .state{font-size:15px;}
#nnlab .node .ncard.done .state::after{content:'完成'; font-size:10px; color:#fff; background:#12c98c;
  border-radius:12px; padding:2px 8px; margin-left:4px; font-weight:800; vertical-align:middle;}
@media (min-width:720px){#nnlab .tl::before{left:50%; margin-left:-2px;}
#nnlab .node{width:50%; padding-left:0;}
#nnlab .node:nth-child(odd){left:0; padding-right:44px; text-align:right;}
#nnlab .node:nth-child(even){left:50%; padding-left:44px;}
#nnlab .node .dot{left:auto; right:-17px; top:14px;}
#nnlab .node:nth-child(even) .dot{left:-17px; right:auto;}
#nnlab .node .row{justify-content:flex-start;}
#nnlab .node:nth-child(odd) .row{justify-content:flex-end;}
#nnlab .node:nth-child(odd) .ncard .state::after{margin-left:0; margin-right:4px;}}
#nnlab #modal{position:fixed; inset:0; z-index:30; background:rgba(13,24,54,.68); backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:22px 10px 60px;}
#nnlab #modal.open{display:flex;}
#nnlab .lesson{background:#fff; border-radius:26px; max-width:660px; width:100%; padding:24px 22px 22px;
  position:relative; animation:up .35s ease; box-shadow:0 30px 80px -20px rgba(13,24,54,.5);}
@keyframes up { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
#nnlab .lesson .l-head{text-align:center; margin-bottom:14px;}
#nnlab .lesson .l-head .lemo{font-size:58px; display:block;}
#nnlab .lesson .l-head .lyear{display:inline-block; background:linear-gradient(135deg,#2f6bff,#1e4fd6);
  color:#fff; font-size:12px; font-weight:800; padding:3px 13px; border-radius:30px;}
#nnlab .lesson .l-head h2{font-size:23px; color:#0d2259; margin:8px 0 3px;}
#nnlab .lesson .l-head .ltag{font-size:13px; color:#8496bb;}
#nnlab .sec{border-radius:16px; padding:14px 16px; margin-top:12px;}
#nnlab .sec h4{font-size:14px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:6px;}
#nnlab .sec p,
#nnlab .sec li{font-size:14px; line-height:1.9; color:#46587d;}
#nnlab .sec.story{background:#fff8e6;}
#nnlab .sec.story h4{color:#9a6b00;}
#nnlab .sec.teach{background:#eaf2ff;}
#nnlab .sec.teach h4{color:#1e4fd6;}
#nnlab .sec.act{background:#e7faf2;}
#nnlab .sec.act h4{color:#0d9d6a;}
#nnlab .sec.act ol{padding-left:20px;}
#nnlab .sec.act li{margin:4px 0;}
#nnlab .sec.think{background:#f3edff;}
#nnlab .sec.think h4{color:#6d3fbd;}
#nnlab .sec.quiz{background:#fff0f7;}
#nnlab .sec.quiz h4{color:#c0448e;}
#nnlab .sec.person{background:#fff4e8;}
#nnlab .sec.person h4{color:#b96a1e;}
#nnlab .sec.struct{background:#e7f7f5;}
#nnlab .sec.struct h4{color:#147a6e;}
#nnlab .quiz-q{font-size:15px; font-weight:800; color:#0d2259; margin-bottom:12px; line-height:1.7;}
#nnlab .opt{display:block; width:100%; text-align:left; background:#fff; border:2px solid #e8eefc;
  border-radius:14px; padding:11px 15px; margin-top:9px; font-size:14px; color:#46587d; cursor:pointer;
  transition:.15s; font-family:inherit;}
#nnlab .opt:hover{border-color:#2f6bff; background:#f5f8ff;}
#nnlab .opt.right{border-color:#12c98c; background:#e7faf2; color:#0d7a51; font-weight:800;}
#nnlab .opt.wrong{border-color:#f0446a; background:#fff0f3; color:#c02b4e;}
#nnlab .opt:disabled{cursor:default;}
#nnlab .quiz-fb{display:none; margin-top:12px; font-size:13px; line-height:1.7; border-radius:14px; padding:10px 14px;}
#nnlab .quiz-fb.show{display:block;}
#nnlab .quiz-fb.ok{background:#e7faf2; color:#0d7a51;}
#nnlab .quiz-fb.no{background:#fff0f3; color:#c02b4e;}
#nnlab .l-nav{display:flex; gap:10px; margin-top:18px;}
#nnlab .l-nav button{flex:1; border:none; border-radius:16px; padding:13px; font-size:15px; font-weight:800;
  cursor:pointer; transition:.15s;}
#nnlab .l-nav button:active{transform:scale(.97);}
#nnlab .btn-next{background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff;
  box-shadow:0 8px 20px -8px rgba(47,107,255,.7);}
#nnlab .btn-prev{background:#eef1fa; color:#5a638a;}
#nnlab .btn-next.done{background:linear-gradient(135deg,#12c98c,#0ea876); box-shadow:0 8px 20px -8px rgba(18,201,140,.6);}
#nnlab .l-close{position:absolute; top:16px; right:16px; background:#eef1fa; border:none;
  color:#5a638a; font-size:13px; padding:8px 14px; border-radius:30px; cursor:pointer; font-weight:700;}
#nnlab .l-close:hover{background:#e1e6f6;}
#nnlab .panel{background:#fff; border-radius:16px; border:1px solid #eef2fc; padding:14px 16px;
  box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#nnlab .panel-title{font-size:14px; font-weight:800; color:#0d2259; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
#nnlab .panel-title .badge{font-size:11px; background:#e8f0ff; color:#1e4fd6; padding:0 10px; border-radius:30px; font-weight:800;}
#nnlab .ctrl-group{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px;}
#nnlab .ctrl-label{font-size:13px; color:#46587d; font-weight:700;}
#nnlab .ctrl-input{width:60px; padding:5px 8px; border-radius:12px; border:2px solid #cfddfc; font-size:13px;
  text-align:center; font-weight:700; outline:none; font-family:inherit;}
#nnlab .ctrl-input:focus{border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.15);}
#nnlab .status-bar{background:#f7f9ff; border:1px solid #e8eefb; border-radius:14px; padding:10px 14px;
  font-size:13px; color:#46587d; display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:10px;}
#nnlab .status-item{display:flex; align-items:center; gap:6px;}
#nnlab .status-item .dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
#nnlab .dot.green{background:#12c98c;}
#nnlab .dot.blue{background:#2f6bff;}
#nnlab .dot.orange{background:#ff9f1c;}
#nnlab .data-row{display:grid; grid-template-columns:64px 1fr; gap:4px 12px; padding:4px 0; font-size:13px;
  align-items:baseline; border-bottom:1px solid #eef3fc;}
#nnlab .data-row .label{color:#5a6d99; font-weight:700; white-space:nowrap;}
#nnlab .data-row .value{font-family:Consolas,Menlo,monospace; font-size:13px; color:#0d2259; word-break:break-all;}
#nnlab .data-row .value.highlight{background:#fff7da; padding:0 6px; border-radius:6px;}
#nnlab .data-row .value.fw{font-weight:700;}
#nnlab .scroll-data{max-height:400px; overflow-y:auto; padding-right:4px;}
#nnlab .scroll-data::-webkit-scrollbar{width:5px;}
#nnlab .scroll-data::-webkit-scrollbar-thumb{background:#c9d6f2; border-radius:10px;}
#nnlab .fmt{background:#e8f0ff; border:1px solid #cfddfc; border-radius:14px; padding:12px 15px;
  margin:10px 0; font-family:Consolas,Menlo,monospace; font-size:13px; color:#384f82; line-height:1.9;}
#nnlab .fmt b{color:#f2559d;}
#nnlab .data-list-panel{background:#fff; border:1px solid #cfddfc; border-radius:16px;
  padding:12px 10px; max-height:420px; overflow-y:auto; align-self:stretch; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#nnlab .data-list-panel .panel-title{font-size:13px; font-weight:800; color:#0d2259; margin-bottom:8px;
  display:flex; align-items:center; gap:6px;}
#nnlab .data-list-panel .badge{font-size:11px; background:#e8f0ff; color:#1e4fd6;
  padding:0 10px; border-radius:30px; font-weight:800;}
#nnlab .dl-row{display:flex; gap:6px; align-items:center; font-family:Consolas,Menlo,monospace; font-size:11px;
  padding:5px 8px; border-radius:9px; cursor:pointer; border:1px solid transparent; color:#46587d;}
#nnlab .dl-row:hover{background:#e8f0ff;}
#nnlab .dl-row.active{background:#e8f0ff; border-color:#2f6bff; font-weight:700;}
#nnlab .dl-idx{color:#8496bb;}
#nnlab .dl-out{color:#f2559d; margin-left:auto; white-space:nowrap;}
#nnlab .fs-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:none;
  border-radius:12px; background:#e8f0ff; color:#1e4fd6; font-size:19px; cursor:pointer;
  transition:.15s; line-height:1; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#nnlab .fs-btn:hover{background:#dce8ff; transform:scale(1.06);}
#nnlab .fs-btn:active{transform:scale(.94);}
#nnlab .net-legend{display:flex; gap:14px; align-items:center; justify-content:center; font-size:11px;
  color:#384f82; flex-wrap:wrap;}
#nnlab .net-legend .lg{display:inline-block; width:20px; height:5px; border-radius:3px;}
#nnlab .net-legend .lg.red{background:#f0446a;}
#nnlab .net-legend .lg.blue{background:#2f6bff;}
#nnlab #toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,#0d2259,#223a82); color:#fff; padding:12px 22px; border-radius:30px;
  font-size:13px; font-weight:600; z-index:99; opacity:0; pointer-events:none; transition:.3s;
  max-width:86vw; text-align:center; box-shadow:0 16px 40px -12px rgba(13,24,54,.6);}
#nnlab #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#nnlab .foot{text-align:center; color:#5a6d99; font-size:12px; margin-top:26px; line-height:1.9;
  background:rgba(255,255,255,.75); border:1px solid #eef2fc; border-radius:16px; padding:14px;}
@media (max-width:640px){#nnlab .topbar{flex-wrap:wrap;}
#nnlab .hero h1{font-size:25px;}
#nnlab .hero .big{font-size:60px;}
#nnlab #app,
#nnlab .page{padding:10px 10px 70px;}}
#nnlab #app{max-width:1100px;}
#nnlab .hero{text-align:center; padding:26px 10px 10px;}
#nnlab .hero .big{font-size:80px; display:inline-block; animation:float 3.4s ease-in-out infinite;
    filter:drop-shadow(0 10px 22px rgba(47,107,255,.22));}
#nnlab .hero h1{color:#0d2259; font-size:28px; margin:8px 0 6px;}
#nnlab .hero .tagline{color:#5469a0; font-size:15px;}
#nnlab .fmt{background:#e8f0ff; border:1px solid #cfddfc; border-radius:14px; padding:12px 15px; margin:10px 0;
    font-family:Consolas,Menlo,monospace; font-size:13px; color:#384f82; line-height:1.9;}
#nnlab .fmt b{color:#f2559d;}
#nnlab .ann-card{position:relative;}
#nnlab .fs-btn{position:absolute; top:12px; right:14px; width:38px; height:38px; border:none; border-radius:12px;
    background:#eef3ff; color:#2f4a8a; font-size:19px; cursor:pointer; transition:.15s; line-height:1;
    box-shadow:0 2px 6px rgba(90,107,255,.15);}
#nnlab .fs-btn:hover{background:#dbe7ff; transform:scale(1.06);}
#nnlab .fs-btn:active{transform:scale(.94);}
#nnlab .ann-card:fullscreen{width:100vw; height:100vh; overflow-y:auto; border-radius:0; border:none; margin:0;
    background:linear-gradient(180deg,#eef4ff 0%,#f7fbff 100%);}
/* 全屏 = 看网络的专注模式：数据列表挤到下面一行，网络占满剩余空间（JS 再把 SVG 撑到刚好装满） */
#nnlab .ann-card:fullscreen .trainer-grid{grid-template-columns:1fr 300px; grid-template-areas:"main side" "left left"; gap:14px;}
#nnlab .ann-card:fullscreen .trainer-main{grid-area:main;}
#nnlab .ann-card:fullscreen .trainer-side{grid-area:side; display:flex;}
#nnlab .ann-card:fullscreen .left-col{grid-area:left; flex-direction:row; gap:14px; max-height:170px;}
#nnlab .ann-card:fullscreen .left-col .data-list-panel{max-height:170px;}
#nnlab .ann-card:fullscreen .mini9-wrap{width:170px;}
#nnlab .ann-card:fullscreen .net-panel{align-items:flex-start;}
#nnlab .ann-card:fullscreen .net-viz svg{width:min(100%, calc((100vh - 470px) * 1.362)); max-width:none; height:auto;}
#nnlab .ann-card:fullscreen #lossCanvas{width:auto; height:130px;}
#nnlab .ann-card:fullscreen .net-legend{font-size:12.5px;}
/* 全屏：把网络图放大到“宽度或高度装满可视区”的较大值，节点/数字/权重都看得清 */
#nnlab .ann-card:fullscreen .mini9-wrap{width:190px;}
#nnlab .ann-card:fullscreen .net-viz{padding:2px 0;}
#nnlab .ann-card:fullscreen .net-viz svg{width:min(100%, calc((100vh - 470px) * 1.362)); max-width:none; height:auto;}
#nnlab .ann-card:fullscreen .net-legend{font-size:12.5px;}
#nnlab .trainer-grid{display:grid; grid-template-columns:240px 1fr; gap:16px; margin-top:8px;}
#nnlab .trainer-side{display:none; flex-direction:column; gap:10px; min-width:0;}
@media (max-width:860px){#nnlab .trainer-grid{grid-template-columns:1fr;}}
#nnlab .trainer-main{min-width:0;}
#nnlab .left-col{display:flex; flex-direction:column; gap:12px; align-self:stretch; min-width:0;}
#nnlab .data-list-panel{background:#fff; border:2px solid #eaf3ff; border-radius:18px; padding:12px 10px;
    flex:1 1 0; min-height:0; max-height:none; overflow-y:auto; align-self:stretch;}
#nnlab .data-list-panel .panel-title{font-size:13px; font-weight:800; color:#2f4a8a; margin-bottom:8px;
    display:flex; align-items:center; gap:6px;}
#nnlab .data-list-panel .badge{font-size:11px; background:#eef3ff; color:#5a6b96; padding:0 10px; border-radius:30px; font-weight:700;}
#nnlab .dl-row{display:flex; gap:6px; align-items:center; font-family:Consolas,Menlo,monospace; font-size:11px;
    padding:5px 8px; border-radius:8px; cursor:pointer; border:1px solid transparent;}
#nnlab .dl-row:hover{background:#f0f6ff;}
#nnlab .dl-row.active{background:#eef3ff; border-color:#7c8bff; font-weight:700;}
#nnlab .dl-idx{color:#8a93b8; width:30px; flex-shrink:0;}
#nnlab .dl-in{color:#3a4470;}
#nnlab .dl-out{color:#c44a8f; margin-left:auto; white-space:nowrap;}
#nnlab .mini9{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:12px;}
#nnlab .mini9 .m9{aspect-ratio:1; background:#fff; border:2px solid #e3ecf8; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:15px; position:relative;}
#nnlab .mini9 .m9.food{background:#eafff2; border-color:#4cd07d;}
#nnlab .mini9 .m9.empty{background:#f8fafc;}
#nnlab .mini9 .m9.empty::after{content:''; width:8px; height:8px; border-radius:50%; background:#dbe4f0;}
#nnlab .mini9 .m9.center{background:#eef3ff; border-color:#7c8bff; font-size:22px;}
#nnlab .mini9 .m9 .tag{position:absolute; bottom:1px; left:0; right:0; text-align:center; font-size:8px; color:#8a93b8;}
#nnlab .mini9 .m9.food .tag{color:#1d9e5c; font-weight:700;}
#nnlab .debug-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:16px; margin-top:6px;}
@media (max-width:820px){#nnlab .debug-grid{grid-template-columns:1fr;}}
#nnlab .net-panel{display:flex; align-items:center; gap:16px;}
#nnlab .mini9-wrap{flex-shrink:0; width:176px;}
#nnlab .mini9-wrap .panel-title{font-size:12px; font-weight:800; color:#2f4a8a; margin-bottom:6px; text-align:center;}
#nnlab .net-side{flex:1; min-width:0;}
#nnlab .net-viz{display:flex; justify-content:center; align-items:center; padding:8px 0 6px; overflow-x:auto;}
#nnlab .net-viz svg{width:100%; max-width:600px; height:auto; display:block;}
#nnlab .net-legend{display:flex; gap:14px; align-items:center; justify-content:center; font-size:11px; color:#5a6b96; flex-wrap:wrap;}
#nnlab .net-legend .lg{display:inline-block; width:20px; height:5px; border-radius:3px;}
#nnlab .net-legend .lg.red{background:#ef4444;}
#nnlab .net-legend .lg.blue{background:#3b82f6;}
#nnlab .net-legend .lg.gold{background:#facc15;}
#nnlab .net-legend .lg.purple{background:#a855f7;}
/* 单步调试步骤提示条 */
#nnlab .step-hint{display:flex; align-items:center; gap:10px; margin-top:10px;
  background:linear-gradient(135deg,#fffdec,#fff7d9); border:1px solid #f2e2ac;
  border-radius:14px; padding:9px 14px; font-size:12.5px; color:#6d5514; line-height:1.6;}
#nnlab .step-hint.back{background:linear-gradient(135deg,#faf6ff,#f2eaff); border-color:#ddccff; color:#5b3a99;}
#nnlab .step-hint .sh-step{flex:0 0 auto; background:#facc15; color:#5a4307; font-weight:800;
  padding:2px 11px; border-radius:30px; font-size:11.5px; white-space:nowrap;}
#nnlab .step-hint.back .sh-step{background:#a855f7; color:#fff;}
#nnlab .step-hint .sh-text{flex:1 1 auto;}
#nnlab .step-hint .sh-text b{color:#b45309;}
#nnlab .step-hint.back .sh-text b{color:#7c3aed;}
#nnlab .step-hint .sh-next{color:#9aa8c4; font-size:11.5px;}
#nnlab .layer{display:flex; flex-direction:column; align-items:center; gap:6px;}
#nnlab .layer-label{font-size:12px; font-weight:800; color:#2f4a8a; background:#eef3ff; padding:2px 14px; border-radius:30px;}
#nnlab .neurons{display:flex; flex-direction:column; gap:5px; align-items:center;}
#nnlab .neuron{width:28px; height:28px; border-radius:50%; background:#dbeafe; border:2px solid #7c8bff;
    display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#3a4470;
    transition:all .15s;}
#nnlab .neuron.small{width:24px; height:24px; font-size:8px;}
#nnlab .neuron.input{background:#dbeafe; border-color:#7c8bff;}
#nnlab .neuron.hidden{background:#d1fae5; border-color:#34d399;}
#nnlab .neuron.output{background:#fce7f3; border-color:#ec4899;}
#nnlab .neuron.hot{background:#3b82f6 !important; color:#fff !important; border-color:#2563eb !important;
    box-shadow:0 0 10px rgba(59,130,246,.45);}
#nnlab .neuron.hot-out{background:#ec4899 !important; color:#fff !important; border-color:#db2777 !important;
    box-shadow:0 0 10px rgba(236,72,153,.45);}
#nnlab .arrow-symbol{font-size:24px; color:#94a3b8; font-weight:300;}
#nnlab .layer-dims{font-size:11px; color:#6b7f94;}
#nnlab .side-panel{padding:12px 14px;}
#nnlab .side-panel .status-bar{background:transparent; border:none; border-top:1px solid #e6edf4; border-radius:0;
    padding:10px 0 0; margin:0;}
#nnlab #lossCanvas{width:100%; height:170px; display:block; border-radius:14px; margin-top:8px; background:#f8fafc;
    border:1px solid #e6edf4;}
#nnlab .test-area{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:8px;}
#nnlab .test-inputs{display:flex; gap:5px; flex-wrap:wrap; align-items:center;}
#nnlab .test-inputs .ti{display:flex; flex-direction:column; align-items:center; gap:2px;}
#nnlab .test-inputs .ti span{font-size:9px; color:#6b7f94;}
#nnlab .test-inputs input{width:34px; padding:4px 2px; text-align:center; border-radius:8px; border:2px solid #d1d9e6;
    font-size:13px; font-weight:600; outline:none;}
#nnlab .test-inputs input:focus{border-color:#7c8bff;}
#nnlab .test-result{font-family:Consolas,Menlo,monospace; font-size:13px; font-weight:700; color:#0b1e33;
    background:#f1f5f9; padding:6px 14px; border-radius:30px;}
#nnlab .grid-wrap{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;}
#nnlab #grid{display:grid; grid-template-columns:repeat(10,1fr); gap:2px; width:min(100%,420px);
    background:#fff; border:3px solid #dbe7ff; border-radius:14px; padding:6px; box-shadow:0 8px 20px rgba(120,160,210,.18);}
#nnlab .cell{aspect-ratio:1; background:#fff; border:1px solid #e3ecf8; border-radius:5px; position:relative;}
#nnlab .cell.seen{background:#fff7dc;}
#nnlab .cell.food::after{content:''; position:absolute; inset:22%; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #7de8a6, #2fb56a 70%); box-shadow:0 1px 3px rgba(0,0,0,.25);}
#nnlab .cell.bact::after{content:''; position:absolute; inset:16%; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #aeb8ff, #5a6bff 70%); box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(90,107,255,.55);}
#nnlab .problem-body{display:flex; gap:20px; align-items:flex-start;}
#nnlab .problem-body ul{flex:1; min-width:0;}
#nnlab .problem-map{flex:0 0 auto; width:240px;}
#nnlab .random-map{display:grid; grid-template-columns:repeat(10,1fr); gap:2px;
    background:#fff; border:3px solid #dbe7ff; border-radius:14px; padding:6px; box-shadow:0 8px 20px rgba(120,160,210,.18);}
#nnlab .cell.bact-red::after{content:''; position:absolute; inset:16%; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #ffb4b4, #e53935 70%); box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(229,57,53,.55);}
@media (max-width:820px){#nnlab .problem-body{flex-direction:column;}
#nnlab .problem-map{width:100%;}}
#nnlab .side{flex:1; min-width:220px;}
#nnlab .stat{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
#nnlab .stat .chip{background:#eef6ff; border:1px solid #dcebff; border-radius:14px; padding:6px 12px; font-size:13px; font-weight:700; color:#3a5bb0;}

/* ===== 内嵌容器（非作用域） ===== */
#nnlab { background:#f2f6ff; border-radius:18px; padding:14px 14px 8px; }
#nnlab .nn-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:2px 4px 12px; }
#nnlab .nn-head .nn-ico { font-size:26px; }
#nnlab .nn-head b { color:#0d2259; font-size:17px; }
#nnlab .nn-head .nn-sub { font-size:12px; color:#8496bb; }