@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Baloo+2:wght@500;700;800&display=swap');

/* ===========================================================
   Summer 工作台 · Hello Kitty 主题（浅蓝基调）
   设计依据 Sanrio 官方视觉：
   - 白猫 + 黑色粗描边（kawaii 标志性粗线条）
   - 红蝴蝶结 #E31B23 / 黄鼻子 #F2C200 / 粉 #F5A7C8
   - 浅蓝底 = Kitty 经典蓝色背带裤配色
   - 波点 + 蝴蝶结 + 爱心 三大经典纹样
   =========================================================== */
:root{
  /* 浅蓝基调（Kitty 背带裤蓝） */
  --blue-deep:#3f88d4;    /* 主强调：标题/按钮 */
  --blue:#6bb6e8;
  --blue-soft:#a9d6f2;
  --blue-mist:#dcefff;
  --blue-bg1:#d8ecff;
  --blue-bg2:#e9f5ff;
  --blue-bg3:#f6fbff;
  /* Hello Kitty 官方色 */
  --bow-red:#e31b23;      /* 蝴蝶结红 */
  --nose-yellow:#f2c200;  /* 鼻子黄 */
  --kitty-pink:#f5a7c8;   /* Kitty 粉（少量点缀） */
  --ink-line:#2b2b2b;     /* kawaii 粗描边 */
  /* 通用 */
  --card:#ffffff;
  --ink:#43536b;
  --ink-soft:#8b99b0;
  --line:#d9eefc;
  --shadow:0 8px 26px rgba(63,136,212,.14);
  --radius:22px;
  --up:#ff5b5b; --down:#2bbf6a;  /* 金价涨红跌绿 */
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body{
  font-family:"ZCOOL KuaiLe","Baloo 2",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:
    /* 右上柔光 */
    radial-gradient(circle at 88% 6%, rgba(255,255,255,.95) 0%, transparent 32%),
    /* 左下蓝光晕 */
    radial-gradient(circle at 4% 96%, #cfe9ff 0%, transparent 38%),
    /* Hello Kitty 经典波点（白点） */
    radial-gradient(circle, rgba(255,255,255,.95) 3px, transparent 3.6px),
    /* 浅蓝底渐变 */
    linear-gradient(165deg, var(--blue-bg1) 0%, var(--blue-bg2) 45%, var(--blue-bg3) 100%);
  background-attachment:fixed;
  background-size:auto, auto, 34px 34px, auto;
  display:flex;
}
/* 官方线稿 Kitty 平铺水印（assets/hello-kitty-2.svg） */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("assets/hello-kitty-2.svg") repeat;
  background-size:150px 150px;opacity:.05;}

/* 顶部部署提示条 */
.banner{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(135deg,#dcefff,#cfe9ff);
  color:var(--blue-deep);font-size:12.5px;text-align:center;padding:7px 12px;
  font-family:"Baloo 2",sans-serif;border-bottom:2px solid var(--blue-soft);display:none;}
.banner.show{display:block;}

/* ===== Hello Kitty 官方资源图 ===== */
.kitty-logo{width:56px;height:56px;flex-shrink:0;border-radius:16px;
  background:#fff;border:2.5px solid var(--blue-soft);
  box-shadow:0 4px 10px rgba(63,136,212,.22);object-fit:cover;}
.kitty-full{width:130px;display:block;margin:10px auto 4px;
  filter:drop-shadow(0 5px 10px rgba(63,136,212,.25));}
.kitty-wave{width:66px;flex-shrink:0;
  filter:drop-shadow(0 3px 6px rgba(63,136,212,.25));
  animation:wave-sway 3.5s ease-in-out infinite;transform-origin:bottom center;}
@keyframes wave-sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.greet-row{display:flex;align-items:center;gap:14px;}
.bow-ico{width:20px;height:16px;display:inline-block;vertical-align:-2px;margin-right:6px;}

/* ===== 左侧任务栏 ===== */
.sidebar{width:258px;flex-shrink:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-right:3px solid var(--blue-soft);
  padding:22px 15px 12px;display:flex;flex-direction:column;gap:4px;z-index:30;
  box-shadow:4px 0 24px rgba(63,136,212,.10);
  position:relative;
  transition:width .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);}

/* 侧栏顶部蝴蝶结红装饰条 */
.sidebar::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--bow-red) 0 26px,#fff 26px 34px,var(--blue) 34px 60px,#fff 60px 68px);
  opacity:.9;}

/* 收缩按钮（桌面端，圆形挂在右边缘） */
.sidebar-toggle{position:absolute;top:18px;right:-14px;z-index:40;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  background:#fff;border:2px solid var(--blue-soft);color:var(--blue-deep);
  display:none;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(63,136,212,.25);
  font-size:15px;line-height:1;font-family:"Baloo 2",sans-serif;font-weight:700;
  transition:.2s;}
.sidebar-toggle:hover{background:var(--blue-mist);transform:scale(1.08);}
.sidebar-toggle .arr{display:block;transition:transform .3s;}

/* 移动端汉堡按钮（固定在顶栏左侧） */
.menu-btn{display:none;}

/* 移动端遮罩 */
.scrim{position:fixed;inset:0;background:rgba(43,43,43,.35);z-index:25;
  opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;backdrop-filter:blur(1px);}

/* ===== 收缩状态（仅桌面端生效） ===== */
@media(min-width:861px){
  .sidebar-toggle{display:flex;}
  .sidebar.collapsed{width:78px;padding-left:10px;padding-right:10px;}
  .sidebar.collapsed .sidebar-toggle{right:-14px;}
  .sidebar.collapsed .sidebar-toggle .arr{transform:rotate(180deg);}
  .sidebar.collapsed .brand>div,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-item .lbl,
  .sidebar.collapsed .sidebar-foot,
  .sidebar.collapsed .kitty-full{display:none;}
  .sidebar.collapsed .nav-item{justify-content:center;padding:11px 0;gap:0;}
  .sidebar.collapsed .nav-item .ico{width:auto;font-size:20px;}
  .sidebar.collapsed .nav-item .badge{position:absolute;top:4px;right:14px;margin:0;
    padding:0 5px;min-width:16px;font-size:10px;}
  .sidebar.collapsed .nav-item.active::before{left:-4px;}
  .sidebar.collapsed .brand{justify-content:center;padding:10px 0 16px;}
  .sidebar.collapsed .kitty-logo{width:46px;height:46px;}
}

/* ===== 移动端：侧边栏变为抽屉 ===== */
@media(max-width:860px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:84vw;
    transform:translateX(-100%);box-shadow:6px 0 30px rgba(63,136,212,.18);}
  .sidebar.open{transform:translateX(0);}
  .scrim.show{opacity:1;visibility:visible;}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:13px;border:2px solid var(--blue-soft);
    background:#fff;color:var(--blue-deep);font-size:20px;cursor:pointer;
    box-shadow:0 3px 8px rgba(63,136,212,.2);margin-right:12px;flex-shrink:0;}
}
.brand{display:flex;align-items:center;gap:11px;padding:10px 8px 16px;
  border-bottom:2px dashed var(--blue-mist);margin-bottom:6px;}
.brand .name{font-size:18px;font-weight:700;color:var(--blue-deep);letter-spacing:.5px;}
.brand .sub{font-size:10.5px;color:var(--kitty-pink);font-family:"Baloo 2",sans-serif;
  letter-spacing:1px;font-weight:700;}

.nav-label{font-size:10.5px;color:var(--ink-soft);padding:10px 11px 4px;
  letter-spacing:2.5px;font-family:"Baloo 2",sans-serif;font-weight:700;}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:16px;
  color:var(--ink-soft);cursor:pointer;user-select:none;font-size:14px;font-weight:500;
  transition:.18s;position:relative;border:2px solid transparent;}
.nav-item .ico{font-size:18px;width:22px;text-align:center;}
.nav-item:hover{background:var(--blue-mist);color:var(--blue-deep);}
.nav-item.active{
  background:#fff;border-color:var(--blue-soft);
  color:var(--blue-deep);font-weight:700;
  box-shadow:0 5px 14px rgba(63,136,212,.16);}
/* 激活项 = 红蝴蝶结 SVG 标记 */
.nav-item.active::before{
  content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:20px;height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cg fill='%23e31b23' stroke='%232b2b2b' stroke-width='2'%3E%3Cellipse cx='9' cy='13' rx='8' ry='6'/%3E%3Cellipse cx='25' cy='13' rx='8' ry='6'/%3E%3Ccircle cx='17' cy='13' r='4.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  filter:drop-shadow(0 1px 2px rgba(227,27,35,.35));}
.nav-item .badge{margin-left:auto;font-size:11px;font-weight:700;
  background:var(--bow-red);color:#fff;border-radius:999px;padding:1px 7px;
  min-width:20px;text-align:center;font-family:"Baloo 2",sans-serif;
  box-shadow:0 2px 5px rgba(227,27,35,.3);}
.sidebar-foot{margin-top:auto;padding:10px 6px 4px;font-size:11px;color:var(--ink-soft);
  border-top:2px dashed var(--blue-mist);line-height:1.7;text-align:center;
  font-family:"Baloo 2",sans-serif;}

/* ===== 主区域 ===== */
.main{flex:1;padding:24px 30px;overflow-y:auto;z-index:1;}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:20px;gap:16px;flex-wrap:wrap;}
.topbar h1{font-size:26px;font-weight:700;color:var(--blue-deep);
  display:flex;align-items:center;gap:8px;}
.topbar .date{font-size:13px;color:var(--ink-soft);margin-top:4px;
  font-family:"Baloo 2",sans-serif;}
.gold-strip{
  background:linear-gradient(135deg,#fff,var(--blue-bg2));
  border:2px solid var(--blue-soft);border-radius:18px;padding:10px 16px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);
  font-family:"Baloo 2",sans-serif;cursor:pointer;transition:.15s;}
.gold-strip:hover{border-color:var(--blue);transform:translateY(-1px);}
.gold-strip .lab{font-size:12px;color:var(--ink-soft);}
.gold-strip .val{font-size:18px;font-weight:800;color:var(--blue-deep);}
.gold-strip .chg{font-size:12px;font-weight:700;}

.panel{display:none;animation:fade .25s ease;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ===== 今日计划 · TRAEWork 式看板 ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.stat{background:var(--card);border:2.5px solid var(--blue-mist);border-radius:20px;
  padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
/* 统计卡右上角小红蝴蝶结 */
.stat::after{content:"";position:absolute;right:10px;top:8px;width:22px;height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cg fill='%23e31b23' opacity='0.85'%3E%3Cellipse cx='9' cy='13' rx='8' ry='6'/%3E%3Cellipse cx='25' cy='13' rx='8' ry='6'/%3E%3Ccircle cx='17' cy='13' r='4.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.22;}
.stat .ic{position:absolute;right:12px;bottom:10px;font-size:24px;opacity:.22;z-index:0;}
.stat .k{font-size:12.5px;color:var(--ink-soft);font-family:"Baloo 2",sans-serif;}
.stat .v{font-size:30px;font-weight:800;color:var(--blue-deep);margin-top:2px;
  font-family:"Baloo 2",sans-serif;position:relative;z-index:1;}
.stat.acc .v{color:var(--blue-deep);}
.stat.warn .v{color:#f0a500;} .stat.warn .ic{color:#ffcf5c;}
.stat.ok .v{color:var(--down);} .stat.ok .ic{color:#7fe0a8;}

.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:16px;align-items:start;}
.col{background:rgba(255,255,255,.8);border:2.5px solid var(--blue-mist);
  border-radius:22px;padding:14px;box-shadow:var(--shadow);}
.col-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.col-head .d{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  font-size:17px;border:2px solid rgba(255,255,255,.9);}
.col-head .t{font-weight:700;font-size:14px;color:var(--blue-deep);}
.col-head .c{margin-left:auto;font-size:12px;color:var(--ink-soft);
  font-family:"Baloo 2",sans-serif;font-weight:700;background:var(--blue-bg2);
  border-radius:999px;padding:2px 9px;}

/* 任务卡片 */
.tcard{background:#fff;border:2px solid #e8f3fd;border-radius:16px;padding:11px 12px;
  margin-bottom:10px;display:flex;align-items:flex-start;gap:10px;transition:.15s;}
.tcard:hover{border-color:var(--blue);box-shadow:0 6px 16px rgba(63,136,212,.14);
  transform:translateY(-1px);}
.tcard.done{opacity:.55;}
.tcard.done .tt{text-decoration:line-through;color:var(--ink-soft);}
/* 勾选框 —— 完成时变红底白爱心（Kitty 风） */
.chk{width:23px;height:23px;border-radius:8px;border:2.5px solid var(--blue-soft);
  flex-shrink:0;cursor:pointer;display:grid;place-items:center;margin-top:1px;
  transition:.18s;background:#fff;}
.chk:hover{border-color:var(--bow-red);transform:scale(1.08);}
.chk.on{background:var(--bow-red);border-color:var(--bow-red);
  box-shadow:0 3px 8px rgba(227,27,35,.35);}
.chk.on::after{content:"♥";color:#fff;font-size:13px;font-weight:800;line-height:1;}
.tcard .body{flex:1;min-width:0;}
.tcard .tt{font-size:14px;line-height:1.35;}
.tcard .meta{font-size:11.5px;color:var(--ink-soft);margin-top:3px;
  font-family:"Baloo 2",sans-serif;}
.tcard .tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;
  border-radius:999px;background:var(--blue-bg2);color:var(--blue-deep);
  margin-top:6px;font-family:"Baloo 2",sans-serif;}
/* 删除按钮 */
.del{width:24px;height:24px;border-radius:8px;border:none;
  background:var(--blue-mist);color:var(--blue-deep);cursor:pointer;
  font-size:14px;font-weight:800;flex-shrink:0;line-height:1;transition:.12s;}
.del:hover{background:var(--bow-red);color:#fff;}

.spk{border:none;background:var(--blue-bg2);color:var(--blue-deep);cursor:pointer;
  border-radius:8px;padding:0 9px;font-size:13px;flex-shrink:0;transition:.12s;}
.spk:hover{background:var(--blue-soft);color:#fff;}

/* 添加任务输入 */
.add{display:flex;gap:8px;margin-top:6px;}
.add input{flex:1;border:2px solid #e8f3fd;border-radius:12px;padding:9px 11px;
  font-size:13px;outline:none;background:#fbfdff;
  font-family:"ZCOOL KuaiLe","Baloo 2",sans-serif;transition:.15s;}
.add input:focus{border-color:var(--blue);}
.add button{border:none;background:var(--blue-deep);color:#fff;font-weight:700;
  border-radius:12px;padding:0 15px;cursor:pointer;font-size:13px;transition:.12s;
  box-shadow:0 3px 8px rgba(63,136,212,.3);}
.add button:hover{filter:brightness(1.08);}

/* ===== 单模块清单页 ===== */
.sec-head{display:flex;align-items:center;gap:13px;margin:2px 0 16px;}
.sec-head .bi{width:50px;height:50px;border-radius:16px;display:grid;
  place-items:center;font-size:25px;border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(63,136,212,.14);}
.sec-head h2{font-size:21px;font-weight:700;color:var(--blue-deep);
  display:flex;align-items:center;}
.sec-head p{font-size:12.5px;color:var(--ink-soft);font-family:"Baloo 2",sans-serif;}

.list{background:var(--card);border:2.5px solid var(--blue-mist);
  border-radius:var(--radius);padding:6px 18px;box-shadow:var(--shadow);
  margin-bottom:16px;}
.list .lt{font-size:13px;font-weight:700;color:var(--blue-deep);
  padding:12px 2px 6px;letter-spacing:.5px;font-family:"Baloo 2",sans-serif;}

/* ===== 教资考点 ===== */
.ecat{background:var(--card);border:2.5px solid var(--blue-mist);
  border-radius:var(--radius);padding:6px 18px 14px;box-shadow:var(--shadow);
  margin-bottom:16px;}
.ecat-t{font-size:15px;font-weight:700;color:var(--blue-deep);
  padding:14px 2px 8px;}
.ecat-t::before{content:"🎯 ";}

/* ===== 英语单词 ===== */
.en-meta{background:linear-gradient(135deg,#fff,var(--blue-bg2));
  border:2px solid var(--blue-soft);border-radius:16px;padding:12px 16px;
  margin-bottom:16px;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow);}
.en-meta b{color:var(--blue-deep);font-family:"Baloo 2",sans-serif;}
.en-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.wcard{background:var(--card);border:2.5px solid var(--blue-mist);border-radius:20px;
  padding:16px;box-shadow:var(--shadow);transition:.15s;position:relative;}
.wcard:hover{border-color:var(--blue);transform:translateY(-2px);}
.wcard.on{background:#f0f9ff;border-color:var(--blue-soft);}
/* 掌握后右上角盖红蝴蝶结章 */
.wcard.on::after{content:"";position:absolute;right:10px;top:10px;width:24px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cg fill='%23e31b23'%3E%3Cellipse cx='9' cy='13' rx='8' ry='6'/%3E%3Cellipse cx='25' cy='13' rx='8' ry='6'/%3E%3Ccircle cx='17' cy='13' r='4.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.75;}
.wtop{display:flex;align-items:baseline;gap:10px;}
.wword{font-size:22px;font-weight:800;color:var(--blue-deep);
  font-family:"Baloo 2",sans-serif;}
.wlv{font-size:11px;font-weight:700;color:var(--ink-soft);background:var(--blue-bg2);
  border-radius:999px;padding:2px 9px;font-family:"Baloo 2",sans-serif;}
.wph{font-size:14px;color:var(--ink-soft);margin-top:4px;
  font-family:"Baloo 2",sans-serif;}
.wzh{font-size:15px;margin-top:8px;font-weight:600;}
.wen{font-size:12.5px;color:var(--ink-soft);margin-top:8px;line-height:1.55;
  font-family:"Baloo 2",sans-serif;}
.wen i{color:#7b8aa8;}
.wact{display:flex;gap:8px;margin-top:12px;}
.wact .spk{padding:8px 12px;border-radius:10px;font-size:13px;}
.mastr{border:none;background:var(--blue-bg2);color:var(--blue-deep);font-weight:700;
  border-radius:12px;padding:8px 14px;cursor:pointer;font-size:13px;flex:1;
  font-family:"ZCOOL KuaiLe","Baloo 2",sans-serif;transition:.12s;}
.mastr.on{background:var(--down);color:#fff;}

/* ===== 黄金监测 ===== */
.gold-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;}
@media(max-width:820px){.gold-wrap{grid-template-columns:1fr;}.stats{grid-template-columns:repeat(2,1fr);}}
.gcard{background:var(--card);border:2.5px solid var(--blue-mist);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
/* 金卡角落 Kitty 水印（官方线稿） */
.gcard:first-child::after{content:"";position:absolute;right:-10px;bottom:-12px;
  width:120px;height:120px;opacity:.07;pointer-events:none;
  background:url("assets/hello-kitty-2.svg") no-repeat center/contain;}
.gprice{font-size:46px;font-weight:800;font-family:"Baloo 2",sans-serif;
  color:var(--blue-deep);}
.gunit{font-size:15px;color:var(--ink-soft);}
.grow{display:flex;align-items:center;gap:14px;margin-top:10px;
  font-family:"Baloo 2",sans-serif;}
.gchg{font-size:16px;font-weight:700;}
.gmeta{font-size:12px;color:var(--ink-soft);margin-top:14px;line-height:1.8;
  font-family:"Baloo 2",sans-serif;}
.gbtn{border:none;background:var(--blue-deep);color:#fff;font-weight:700;
  border-radius:14px;padding:10px 18px;cursor:pointer;font-size:14px;
  margin-top:14px;font-family:"ZCOOL KuaiLe","Baloo 2",sans-serif;transition:.12s;
  box-shadow:0 4px 10px rgba(63,136,212,.3);}
.gbtn:hover{filter:brightness(1.08);}
.ghist{list-style:none;max-height:300px;overflow-y:auto;}
.ghist li{display:flex;justify-content:space-between;padding:9px 4px;
  border-top:1px solid var(--line);font-family:"Baloo 2",sans-serif;font-size:13.5px;}
.ghist li:first-child{border-top:none;}
.ghist .t{color:var(--ink-soft);}
.note{font-size:11.5px;color:var(--ink-soft);margin-top:10px;
  font-family:"Baloo 2",sans-serif;line-height:1.6;}
.empty{color:var(--ink-soft);font-size:13px;padding:10px 2px;
  font-family:"Baloo 2",sans-serif;}
.backup-row{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap;}
.backup-row .gbtn{margin-top:0;}
.binfo{font-size:12px;color:var(--ink-soft);font-family:"Baloo 2",sans-serif;}

/* 侧栏底部全身 Kitty 周围的漂浮小爱心 */
.heart-float{animation:floaty 3s ease-in-out infinite;}
.heart-float2{animation:floaty 3s ease-in-out 1.2s infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}