/* ============================================================
   AI Agent自学网 · 统一设计系统 theme-zhiyan.css
   基准：小学数学实验室「作业本风格」（2026-07 版）
   用法：页面 <link rel="stylesheet" href="/theme-zhiyan.css">
        根元素加 data-theme="light|dark"，body 加学段类
        .stage-primary / .stage-junior / .stage-high / .stage-brand
   ============================================================ */

/* ============ 主题变量（默认 = 品牌绿/橙） ============ */
:root, html[data-theme="light"]{
  --bg:#FBF6EA;
  --grid-line:rgba(46,94,78,.07);
  --grid-line-strong:rgba(46,94,78,.13);
  --card:#FFFFFF;
  --card-border:#EDE4D3;
  --text:#33291C;
  --text-soft:#8A7D68;
  --header-bg:#2E5E4E;
  --header-text:#FFF8E7;
  --accent:#FF8A00;
  --accent-soft:rgba(255,138,0,.12);
  --shadow:0 3px 14px rgba(90,70,30,.10);
  --shadow-hover:0 10px 28px rgba(90,70,30,.18);
  --sym-opacity:.10;
  --badge-done-bg:#E8F7E4;
  --badge-done-text:#3B8A3B;
  --search-bg:#FFFFFF;
  --sec-hover:rgba(255,138,0,.08);
  --iframe-bar:#FFF3DC;
  --ring-track:rgba(255,255,255,.25);
  --dice-bg:#FFE9C7;
  --header-h:58px;
}
html[data-theme="dark"]{
  --bg:#1C2621;
  --grid-line:rgba(120,180,150,.06);
  --grid-line-strong:rgba(120,180,150,.10);
  --card:#25322B;
  --card-border:#33443B;
  --text:#D9E6DC;
  --text-soft:#8FA396;
  --header-bg:#16211B;
  --header-text:#E4EFE6;
  --accent:#FFA53E;
  --accent-soft:rgba(255,165,62,.14);
  --shadow:0 3px 14px rgba(0,0,0,.30);
  --shadow-hover:0 10px 28px rgba(0,0,0,.45);
  --sym-opacity:.06;
  --badge-done-bg:rgba(90,180,90,.18);
  --badge-done-text:#8FD08F;
  --search-bg:#25322B;
  --sec-hover:rgba(255,165,62,.10);
  --iframe-bar:#2B3A31;
  --ring-track:rgba(255,255,255,.15);
  --dice-bg:rgba(255,165,62,.16);
}

/* ============ 学段识别色 ============ */
/* 小学：橙（与现网一致） */
.stage-primary{--header-bg:#2E5E4E;--header-text:#FFF8E7;--accent:#FF8A00;--accent-soft:rgba(255,138,0,.12);--sec-hover:rgba(255,138,0,.08);--dice-bg:#FFE9C7;--iframe-bar:#FFF3DC;--grid-line:rgba(46,94,78,.07);--grid-line-strong:rgba(46,94,78,.13)}
html[data-theme="dark"] .stage-primary{--header-bg:#16211B;--header-text:#E4EFE6;--accent:#FFA53E;--accent-soft:rgba(255,165,62,.14);--sec-hover:rgba(255,165,62,.10);--dice-bg:rgba(255,165,62,.16);--iframe-bar:#2B3A31}
/* 初中：紫（延续原初中站识别色） */
.stage-junior{--header-bg:#3B2D7D;--header-text:#F3EFFE;--accent:#7C3AED;--accent-soft:rgba(124,58,237,.12);--sec-hover:rgba(124,58,237,.08);--dice-bg:#EDE6FE;--iframe-bar:#F1EBFE;--grid-line:rgba(59,45,125,.07);--grid-line-strong:rgba(59,45,125,.13)}
html[data-theme="dark"] .stage-junior{--header-bg:#1D1743;--header-text:#E3DBFB;--accent:#A78BFA;--accent-soft:rgba(167,139,250,.14);--sec-hover:rgba(167,139,250,.10);--dice-bg:rgba(167,139,250,.16);--iframe-bar:#2A2450}
/* 高中：蓝（延续原高中站识别色） */
.stage-high{--header-bg:#173B6B;--header-text:#EAF3FE;--accent:#3B82F6;--accent-soft:rgba(59,130,246,.12);--sec-hover:rgba(59,130,246,.08);--dice-bg:#DCEBFE;--iframe-bar:#EAF2FE;--grid-line:rgba(23,59,107,.07);--grid-line-strong:rgba(23,59,107,.13)}
html[data-theme="dark"] .stage-high{--header-bg:#101F38;--header-text:#D7E6FB;--accent:#60A5FA;--accent-soft:rgba(96,165,250,.14);--sec-hover:rgba(96,165,250,.10);--dice-bg:rgba(96,165,250,.16);--iframe-bar:#1C2C47}
/* 英语学科：蓝青（语言/国际感，区别于品牌绿与高中藏蓝） */
.stage-english{--header-bg:#155E75;--header-text:#ECFEFF;--accent:#0891B2;--accent-soft:rgba(8,145,178,.12);--sec-hover:rgba(8,145,178,.08);--dice-bg:#CFFAFE;--iframe-bar:#ECFEFF;--grid-line:rgba(21,94,117,.07);--grid-line-strong:rgba(21,94,117,.13)}
html[data-theme="dark"] .stage-english{--header-bg:#0B2733;--header-text:#D5F1F7;--accent:#22D3EE;--accent-soft:rgba(34,211,238,.14);--sec-hover:rgba(34,211,238,.10);--dice-bg:rgba(34,211,238,.16);--iframe-bar:#123341}

/* ============ 基础 ============ */
.zy-body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  height:100%;
  overflow:hidden;
  transition:background .35s,color .35s;
}
html.zy-html{height:100%}
/* 网格纸背景 */
.zy-body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(0deg,var(--grid-line-strong) 0 1px,transparent 1px 140px),
    repeating-linear-gradient(90deg,var(--grid-line-strong) 0 1px,transparent 1px 140px);
}
.display-font{font-family:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif}

/* ============ 漂浮数学符号 ============ */
.zy-float-syms{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.zy-float-syms span{
  position:absolute;
  font-family:"ZCOOL KuaiLe",serif;
  color:var(--accent);
  opacity:var(--sym-opacity);
  user-select:none;
  animation:zy-drift linear infinite;
  will-change:transform;
}
@keyframes zy-drift{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-34px) rotate(10deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

/* ============ 顶栏 ============ */
.zy-header{
  position:relative;z-index:20;
  background:var(--header-bg);
  color:var(--header-text);
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  transition:background .35s;
}
.zy-header .zy-back{
  color:rgba(255,255,255,.8);text-decoration:none;font-size:13px;font-weight:600;
  padding:5px 10px;border-radius:8px;transition:all .15s;white-space:nowrap;
}
.zy-header .zy-back:hover{background:rgba(255,255,255,.12);color:#fff}
.zy-header .zy-logo{display:flex;align-items:center;gap:8px;cursor:default}
.zy-header .zy-logo .zy-logo-ico{font-size:26px;animation:zy-wiggle 3s ease-in-out infinite}
@keyframes zy-wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.zy-header h1{font-size:clamp(17px,2.6vw,22px);font-weight:400;letter-spacing:1px}
.zy-header .zy-subtag{
  font-size:11px;background:rgba(255,255,255,.14);padding:3px 9px;border-radius:20px;
  color:rgba(255,255,255,.85);white-space:nowrap;
}
.zy-header .zy-spacer{flex:1}
/* 进度环 */
.zy-progress{display:flex;align-items:center;gap:8px;white-space:nowrap}
.zy-ring{width:38px;height:38px;transform:rotate(-90deg)}
.zy-ring circle{fill:none;stroke-width:4.5}
.zy-ring .track{stroke:var(--ring-track)}
.zy-ring .bar{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.zy-prog-text{font-size:12px;line-height:1.3}
.zy-prog-text b{font-size:15px;color:var(--accent)}
/* 主题切换按钮 */
.zy-theme-btn{
  background:rgba(255,255,255,.14);border:none;color:var(--header-text);
  border-radius:10px;padding:7px 13px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap;
}
.zy-theme-btn:hover{background:rgba(255,255,255,.25)}
.zy-theme-btn:active{transform:scale(.95)}

/* ============ 主布局 ============ */
.zy-layout{position:relative;z-index:10;display:flex;height:calc(100% - var(--header-h))}

/* 侧边目录 */
.zy-sidebar{
  width:236px;min-width:236px;
  overflow-y:auto;padding:12px 10px 20px;
  scrollbar-width:thin;
}
.zy-sidebar::-webkit-scrollbar{width:5px}
.zy-sidebar::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:3px}
.zy-sidebar .zy-side-title{
  font-size:11px;color:var(--text-soft);font-weight:700;letter-spacing:2px;
  padding:4px 10px 8px;
}
.zy-sec-node{margin-bottom:3px}
.zy-sec-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;cursor:pointer;user-select:none;
  transition:background .12s;
}
.zy-sec-head:hover{background:var(--sec-hover)}
.zy-sec-head .arr{font-size:10px;color:var(--text-soft);transition:transform .18s;width:12px;text-align:center}
.zy-sec-head.open .arr{transform:rotate(90deg)}
.zy-sec-head .sec-emoji{font-size:17px}
.zy-sec-head .sec-name{font-size:13px;font-weight:700;flex:1;line-height:1.3}
.zy-sec-head .sec-prog{font-size:10px;color:var(--text-soft);font-weight:600}
.zy-sec-head .sec-prog.full{color:var(--badge-done-text)}
.zy-sec-kids{overflow:hidden;max-height:0;transition:max-height .25s ease}
.zy-sec-kids.open{max-height:2400px}
.zy-sec-kid{
  display:flex;align-items:center;gap:7px;
  padding:6px 10px 6px 30px;border-radius:8px;cursor:pointer;
  font-size:12px;color:var(--text-soft);transition:all .12s;line-height:1.35;
}
.zy-sec-kid:hover{background:var(--sec-hover);color:var(--text)}
.zy-sec-kid.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.zy-sec-kid .dot{width:5px;height:5px;border-radius:50%;background:var(--card-border);flex-shrink:0;transition:background .2s}
.zy-sec-kid.done .dot{background:var(--badge-done-text)}

/* ============ 内容区 ============ */
.zy-content{flex:1;overflow-y:auto;padding:16px 20px 30px;scrollbar-width:thin}
.zy-content::-webkit-scrollbar{width:6px}
.zy-content::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:3px}

/* 工具条 */
.zy-toolbar{
  position:sticky;top:-16px;z-index:15;
  display:flex;align-items:center;gap:10px;
  padding:12px 0 10px;margin:0 0 6px;
  background:var(--bg);
  transition:background .35s;
}
.zy-search{
  flex:1;max-width:340px;display:flex;align-items:center;gap:8px;
  background:var(--search-bg);border:1.5px solid var(--card-border);
  border-radius:12px;padding:8px 14px;transition:all .15s;
}
.zy-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.zy-search .icon{color:var(--text-soft);font-size:14px}
.zy-search input{
  flex:1;border:none;outline:none;background:transparent;
  font-size:13px;color:var(--text);min-width:0;
}
.zy-search input::placeholder{color:var(--text-soft)}
.zy-dice{
  background:var(--dice-bg);border:1.5px solid var(--accent);
  color:var(--accent);border-radius:12px;padding:8px 14px;
  font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:6px;transition:all .15s;
}
.zy-dice:hover{background:var(--accent);color:#fff}
.zy-dice:active{transform:scale(.95)}
.zy-dice .dice-ico{display:inline-block;transition:transform .4s}
.zy-dice:hover .dice-ico{transform:rotate(180deg)}
.zy-reset{
  background:transparent;border:1.5px solid var(--card-border);color:var(--text-soft);
  border-radius:12px;padding:8px 12px;font-size:12px;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.zy-reset:hover{border-color:#E06060;color:#E06060}

/* 分区筛选 tabs */
.zy-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;
  scrollbar-width:none;
}
.zy-tabs::-webkit-scrollbar{display:none}
.zy-ftab{
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--card-border);background:var(--card);color:var(--text-soft);
  cursor:pointer;white-space:nowrap;transition:all .15s;
}
.zy-ftab:hover{border-color:var(--accent);color:var(--accent)}
.zy-ftab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* 板块 */
.zy-block{margin-bottom:22px;animation:zy-fadeUp .45s ease both}
@keyframes zy-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.zy-block-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0 2px}
.zy-block-head .b-emoji{
  font-size:17px;width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);
}
.zy-block-head .b-title{font-size:16px;font-weight:800;letter-spacing:.5px}
.zy-block-head .b-tag{
  font-size:10px;color:var(--text-soft);border:1px solid var(--card-border);
  padding:2px 8px;border-radius:10px;
}
.zy-block-head .b-prog{margin-left:auto;font-size:11px;color:var(--text-soft);font-weight:600}
.zy-block-head .b-prog.full{color:var(--badge-done-text)}

/* 卡片 */
.zy-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.zy-card{
  position:relative;display:flex;flex-direction:column;gap:6px;
  background:var(--card);border:1.5px solid var(--card-border);
  border-radius:14px;padding:14px 14px 12px;cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .16s,box-shadow .16s,border-color .16s;
  animation:zy-fadeUp .45s ease both;
  overflow:hidden;
}
.zy-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--sec-color,var(--accent));border-radius:4px 0 0 4px;
}
.zy-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--sec-color,var(--accent))}
.zy-card:active{transform:translateY(-1px) scale(.98)}
.zy-card .c-top{display:flex;align-items:center;gap:9px}
.zy-card .c-emoji{
  font-size:22px;width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--sec-soft,var(--accent-soft));border-radius:12px;
  transition:transform .25s;
}
.zy-card:hover .c-emoji{transform:scale(1.12) rotate(-8deg)}
.zy-card .c-name{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--text)}
.zy-card .c-desc{font-size:11.5px;color:var(--text-soft);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zy-card .c-foot{display:flex;align-items:center;margin-top:auto;padding-top:7px}
.zy-card .c-go{font-size:11px;font-weight:700;color:var(--sec-color,var(--accent));opacity:0;transform:translateX(-6px);transition:all .2s}
.zy-card:hover .c-go{opacity:1;transform:translateX(0)}
.zy-card .c-done{margin-left:auto;font-size:10px;font-weight:700;color:var(--badge-done-text);background:var(--badge-done-bg);padding:2px 9px;border-radius:10px;display:none}
.zy-card.done .c-done{display:block}
.zy-card.done{border-color:var(--badge-done-text)}

/* 空状态 */
.zy-empty{text-align:center;padding:60px 20px;color:var(--text-soft)}
.zy-empty .big{font-size:48px;margin-bottom:12px}
.zy-empty p{font-size:14px}

/* ============ iframe 学习视图 ============ */
.zy-catalog{min-height:100%;animation:zy-fadeUp .3s ease both}
.zy-study-view{display:none;flex-direction:column;height:100%;min-height:0;animation:zy-fadeUp .28s ease both}
.zy-study-view.visible{display:flex}
.zy-study-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--iframe-bar);padding:8px 14px;
  border-bottom:1.5px solid var(--card-border);
  transition:background .35s;
}
.zy-study-bar .sb-back{
  background:var(--card);border:1.5px solid var(--card-border);color:var(--text);
  border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.zy-study-bar .sb-back:hover{border-color:var(--accent);color:var(--accent)}
.zy-study-bar .sb-back:active{transform:scale(.95)}
.zy-study-bar .sb-title{font-size:14px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zy-study-bar .sb-learn{
  background:var(--badge-done-bg);border:1.5px solid var(--badge-done-text);color:var(--badge-done-text);
  border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.zy-study-bar .sb-learn:hover{background:var(--badge-done-text);color:#fff}
.zy-study-bar .sb-learn.learned{background:var(--badge-done-text);color:#fff}
.zy-study-bar .sb-learn:active{transform:scale(.95)}
.zy-study-bar .sb-open{
  background:transparent;border:1.5px solid var(--card-border);color:var(--text-soft);
  border-radius:10px;padding:7px 11px;font-size:13px;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.zy-study-bar .sb-open:hover{border-color:var(--accent);color:var(--accent)}
.zy-study-frame{flex:1;min-height:0;border:none;width:100%;background:#fff;border-radius:12px;box-shadow:var(--shadow)}
html[data-theme="dark"] .zy-study-frame{background:var(--card)}
.zy-content.studying{overflow:hidden;padding:12px 16px 16px}
.zy-content.studying .zy-study-bar{border-radius:12px 12px 0 0}

/* ============ 页脚 ============ */
.zy-footer{
  text-align:center;padding:22px 16px 14px;color:var(--text-soft);font-size:11px;line-height:1.8;
}
.zy-footer a{color:var(--text-soft);text-decoration:none}
.zy-footer a:hover{color:var(--accent)}

/* ============ 移动端抽屉 ============ */
.zy-drawer-mask{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
.zy-drawer-mask.show{opacity:1;pointer-events:auto}
.zy-menu-btn{display:none;background:rgba(255,255,255,.14);border:none;color:var(--header-text);border-radius:10px;padding:7px 11px;font-size:16px;cursor:pointer}

@media(max-width:860px){
  .zy-sidebar{position:fixed;left:0;top:var(--header-h);bottom:0;z-index:35;background:var(--bg);transform:translateX(-105%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 20px rgba(0,0,0,.12);width:250px;min-width:250px}
  .zy-sidebar.open{transform:translateX(0)}
  .zy-menu-btn{display:block}
  .zy-header .zy-subtag{display:none}
  .zy-prog-text{display:none}
  .zy-card-grid{grid-template-columns:1fr 1fr;gap:10px}
  .zy-content{padding:12px 12px 24px}
  .zy-toolbar{top:-12px}
}
@media(max-width:520px){
  .zy-card-grid{grid-template-columns:1fr}
  .zy-header h1{font-size:16px}
  .zy-theme-btn .t-label{display:none}
  .zy-search{max-width:none}
}

/* ============================================================
   滚动页模式（枢纽页/首页等非实验室布局页面）
   body 加 .zy-page 即普通文档流滚动，共享同一套主题变量
   ============================================================ */
body.zy-page{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  transition:background .35s,color .35s;
}
body.zy-page::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(0deg,var(--grid-line-strong) 0 1px,transparent 1px 140px),
    repeating-linear-gradient(90deg,var(--grid-line-strong) 0 1px,transparent 1px 140px);
}