/* ===== 基础重置 & 平板适配 ===== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;padding:0;}
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-sm);
  color:var(--kc-ink);
  background:var(--kc-bg);
  overflow:hidden;
  /* 禁用长按选中 / 复制 / 弹出菜单（防儿童误触） */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}
input,textarea{
  -webkit-user-select:text;user-select:text;
  font-family:inherit;font-size:var(--fs-md);
}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;border:0;background:none;color:inherit;font-size:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}

/* ===== 布局骨架 ===== */
#app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  padding:calc(var(--safe-t)) var(--safe-r) var(--safe-b) var(--safe-l);
  overflow:hidden;
}
.page{
  flex:1;display:flex;flex-direction:column;
  min-height:0;
  animation:pageIn var(--dur) var(--ease);
}
@keyframes pageIn{from{opacity:0;transform:translateY(18px) scale(.99);}to{opacity:1;transform:none;}}

/* 页面滚动区 */
.scroll{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:16px 24px 32px;
}
.scroll::-webkit-scrollbar{width:0;height:0;}

/* 通用容器 */
.wrap{width:100%;max-width:1120px;margin:0 auto;}
.row{display:flex;align-items:center;}
.row-center{display:flex;align-items:center;justify-content:center;}
.col{display:flex;flex-direction:column;}
.gap-s{gap:12px}.gap-m{gap:20px}.gap-l{gap:32px}
.between{display:flex;align-items:center;justify-content:space-between;}
.grow{flex:1;}
.center{text-align:center;}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}
.mb-s{margin-bottom:12px}.mb-m{margin-bottom:24px}

/* 隐藏 */
.hidden{display:none !important;}

/* 顶部栏 */
.topbar{
  display:flex;align-items:center;gap:16px;
  padding:12px 24px;
  flex:0 0 auto;
}
.topbar .title{font-size:var(--fs-lg);font-weight:900;letter-spacing:1px;}
.topbar .sub{font-size:var(--fs-sm);color:var(--kc-ink2);font-weight:600;}

/* 底部导航 */
.tabbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-around;
  padding:8px 16px calc(8px + var(--safe-b));
  background:var(--kc-card);
  border-top:3px solid var(--kc-line);
  box-shadow:0 -4px 16px rgba(120,95,60,.08);
}
.tabbar .tab{
  min-width:96px;min-height:var(--tap);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:var(--r-m);color:var(--kc-ink3);font-size:var(--fs-xs);font-weight:800;
  transition:transform var(--dur-fast) var(--ease);
}
.tabbar .tab.on{color:var(--kc-blue);background:var(--kc-blue-l);}
.tabbar .tab:active{transform:scale(.92);}
.tabbar .tab svg{width:32px;height:32px;}

/* 减少动效 */
body.reduce-motion *{animation-duration:1ms !important;transition-duration:1ms !important;}

/* 启动屏 */
#splash{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(180deg,#FFF6E3,#FFE9C7);
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--dur-slow) ease;
}
#splash.out{opacity:0;pointer-events:none;}
.splash-inner{text-align:center;}
.splash-logo{animation:float 2.2s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-14px) rotate(2deg);}}
.splash-title{font-size:56px;font-weight:900;color:var(--kc-orange);letter-spacing:6px;margin-top:8px;
  text-shadow:0 4px 0 #fff,0 8px 12px rgba(0,0,0,.08);}
.splash-sub{font-size:var(--fs-md);color:var(--kc-ink2);font-weight:700;margin-top:8px;}
.splash-dots{margin-top:26px;display:flex;gap:12px;justify-content:center;}
.splash-dots i{width:14px;height:14px;border-radius:50%;background:var(--kc-orange);opacity:.35;animation:dot 1.2s infinite;}
.splash-dots i:nth-child(2){animation-delay:.2s}.splash-dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,100%{transform:scale(.7);opacity:.3}50%{transform:scale(1.15);opacity:1}}

/* 横屏 / 竖屏 断点 */
@media (orientation:portrait){
  :root{--fs-hanzi:150px;}
  .scroll{padding:12px 16px 28px;}
  .topbar{padding:8px 16px;}
}
@media (min-width:1400px){
  :root{--fs-hanzi:210px;--fs-2xl:68px;}
  .wrap{max-width:1280px;}
}