/* ===== 幼小衔接工作台 · 基础样式 ===== */
:root{
  --purple:#7c5cff; --pink:#ff6fa5; --yellow:#ffc93c; --teal:#2ec9b8;
  --orange:#ff9145; --blue:#4aa8ff; --green:#57cc7d; --red:#ff5d5d;
  --ink:#3a3357; --ink-2:#6c6591; --ink-3:#9a94b8;
  --bg:#fdf6ec; --card:#ffffff; --line:#efe9fb;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --sh:0 8px 22px rgba(124,92,255,.10);
  --sh-hi:0 12px 30px rgba(124,92,255,.20);
  --sidebar-w:228px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Yuanti SC","Segoe UI",system-ui,sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 8% 6%, #ffe3ef 0, transparent 42%),
    radial-gradient(circle at 92% 4%, #dcefff 0, transparent 40%),
    radial-gradient(circle at 88% 92%, #e6ffe9 0, transparent 42%),
    radial-gradient(circle at 6% 94%, #fff3d0 0, transparent 40%);
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#dcd4f5;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#c8bdf0}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;height:100vh;height:100dvh;overflow:hidden}

/* ===== 侧边栏 ===== */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(170deg,#ffffff 0%,#fbf7ff 100%);
  border-right:2px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px;gap:12px;z-index:60;
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px}
.brand-logo{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(140deg,var(--purple),var(--pink));box-shadow:var(--sh);
  animation:floaty 3.4s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.brand-text b{display:block;font-size:17px;letter-spacing:1px}
.brand-text span{font-size:11px;color:var(--ink-3)}

.kid-card{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-md);
  background:linear-gradient(135deg,#fff2d8,#ffe6f0);border:2px dashed #ffd08a;cursor:pointer;
}
.kid-card:active{transform:scale(.98)}
.kid-avatar{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.kid-name{font-weight:700;font-size:14px}
.kid-meta{font-size:11px;color:var(--ink-2);margin-top:2px}

.nav{display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;padding-right:2px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:16px;
  font-size:15px;font-weight:600;color:var(--ink-2);transition:.18s;text-align:left;
}
.nav-item .ni-icon{font-size:20px;width:24px;text-align:center}
.nav-item:hover{background:#f4efff;color:var(--purple);transform:translateX(3px)}
.nav-item.active{background:linear-gradient(120deg,var(--purple),#9b7bff);color:#fff;box-shadow:var(--sh)}
.nav-item.active .ni-icon{animation:pop .4s}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

.side-foot{display:flex;flex-direction:column;gap:6px}
.side-btn{
  padding:9px;border-radius:13px;background:#f4f0ff;color:var(--ink-2);
  font-size:13px;font-weight:600;transition:.15s;
}
.side-btn:hover{background:#e9e1ff;color:var(--purple)}

/* ===== 主区 ===== */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{
  display:flex;align-items:center;gap:12px;padding:14px 22px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);flex:0 0 auto;
}
.topbar-title{flex:1;min-width:0}
.topbar-title h1{font-size:21px;font-weight:800;letter-spacing:.5px}
.topbar-title p{font-size:12px;color:var(--ink-3);margin-top:2px}
.topbar-right{display:flex;gap:8px}
.pill{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:20px;font-size:14px;font-weight:800}
.pill-star{background:linear-gradient(120deg,#fff0c2,#ffe08a);color:#a06a00}
.pill-fire{background:linear-gradient(120deg,#ffe0e0,#ffc9c9);color:#c53b3b}
.icon-btn{width:38px;height:38px;border-radius:12px;font-size:19px;display:grid;place-items:center;background:#f4f0ff;color:var(--ink-2)}
.icon-btn:hover{background:#e9e1ff}

.views{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 22px 40px;scroll-behavior:smooth}
.view{display:none;animation:fadeUp .32s ease}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.tabbar{display:none}
.scrim{display:none}
.only-mobile{display:none!important}