/* 小周爱航拍 · 番茄钟 V4.0 公共样式
   12 套主题（变量挂 .theme-*，html 上挂类首帧即生效，防白闪）
   新增：#boot 启动闪屏 / toast / 徽章墙 / 商店 / 报表组件 */

/* ============ 浅色 7 套 ============ */
:root, .theme-pro{
  --bg:#EFF2F6; --surface:#FFFFFF; --surface2:#F3F5F8;
  --text:#1B2733; --muted:#5A6B7C; --hint:#98A5B2;
  --accent:#2563EB; --accent-soft:#E7EEF9;
  --border:#D3D9E0; --border-soft:#E7EBF0;
  --radius:8px; --radius-lg:10px; --radius-pill:99px;
  --font:"Microsoft YaHei","PingFang SC",sans-serif;
  --shadow:0 2px 10px rgba(15,30,60,.06);
  color-scheme:light;
}
.theme-paper{
  --bg:#F7F3EB; --surface:#FFFDF8; --surface2:#F2ECDF;
  --text:#3D3226; --muted:#6E5F4B; --hint:#A3927A;
  --accent:#A0722F; --accent-soft:#F2E5CC;
  --border:#DCD2BE; --border-soft:#EBE4D4;
  --radius:4px; --radius-lg:6px;
  --shadow:0 2px 8px rgba(90,70,40,.08);
  color-scheme:light;
}
.theme-mint{
  --bg:#EDF7F1; --surface:#FFFFFF; --surface2:#E3F2E9;
  --text:#1D3A2C; --muted:#4E7A62; --hint:#8FB8A2;
  --accent:#10B981; --accent-soft:#D7F3E5;
  --border:#C5E5D4; --border-soft:#DFF0E7;
  --radius:12px; --radius-lg:14px;
  --shadow:0 2px 10px rgba(16,185,129,.10);
  color-scheme:light;
}
.theme-kids{
  --bg:#FFF4E3; --surface:#FFFFFF; --surface2:#FFF0DC;
  --text:#5A3A1B; --muted:#8A5A2B; --hint:#B3622B;
  --accent:#FF7A45; --accent-soft:#FFE0BE;
  --border:#FFD9AE; --border-soft:#FFE8CE;
  --radius:20px; --radius-lg:22px;
  --shadow:0 3px 12px rgba(255,122,69,.10);
  color-scheme:light;
}
.theme-sakura{
  --bg:#FBF0F3; --surface:#FFFAFC; --surface2:#F7E4EB;
  --text:#4A2B36; --muted:#8A5568; --hint:#BD8FA0;
  --accent:#E86A92; --accent-soft:#FADCE6;
  --border:#EFC9D6; --border-soft:#F7DFE8;
  --radius:14px; --radius-lg:16px;
  --shadow:0 2px 12px rgba(232,106,146,.12);
  color-scheme:light;
}
.theme-forest{
  --bg:#EAF2E4; --surface:#F9FCF6; --surface2:#DEEBD3;
  --text:#28361F; --muted:#5B7248; --hint:#93A884;
  --accent:#5C8A3C; --accent-soft:#DDEED0;
  --border:#C6DAB4; --border-soft:#DFEDD2;
  --radius:10px; --radius-lg:12px;
  --shadow:0 2px 10px rgba(92,138,60,.12);
  color-scheme:light;
}
.theme-ocean-l{ --bg:#E9F3F8; --surface:#FBFDFE; --surface2:#DDEDF6;
  --text:#17323F; --muted:#48748A; --hint:#8FB4C6;
  --accent:#0E8FB8; --accent-soft:#D4EBF5;
  --border:#C2DDEB; --border-soft:#DFEFF7;
  --radius:10px; --radius-lg:12px;
  --shadow:0 2px 10px rgba(14,143,184,.10);
  color-scheme:light;
} /* 预留浅海配色，未启用 */

/* ============ 深色 5 套 ============ */
.theme-space{
  --bg:#0B1226; --surface:rgba(56,189,248,.08); --surface2:rgba(56,189,248,.14);
  --text:#DCECFF; --muted:#9FD8FF; --hint:#5F86AD;
  --accent:#38BDF8; --accent-soft:rgba(56,189,248,.18);
  --border:#38BDF844; --border-soft:#1E3A5F;
  --radius:16px; --radius-lg:18px;
  --shadow:0 0 18px rgba(56,189,248,.10);
  color-scheme:dark;
}
.theme-night{
  --bg:#0A0A0B; --surface:#131315; --surface2:#17171A;
  --text:#C9C9CE; --muted:#8A8A92; --hint:#6A6A72;
  --accent:#5B6B7B; --accent-soft:#2F3A45;
  --border:#26262A; --border-soft:#1C1C1F;
  --radius:6px; --radius-lg:8px;
  --shadow:none;
  color-scheme:dark;
}
.theme-cyber{
  --bg:#0D0A1A; --surface:rgba(168,85,247,.08); --surface2:rgba(168,85,247,.15);
  --text:#F3E8FF; --muted:#C4A5F5; --hint:#7C6399;
  --accent:#A855F7; --accent-soft:rgba(168,85,247,.20);
  --border:#A855F755; --border-soft:#2E1F4D;
  --radius:8px; --radius-lg:10px;
  --shadow:0 0 18px rgba(168,85,247,.14);
  color-scheme:dark;
}
.theme-galaxy{
  --bg:#0F0B21; --surface:rgba(99,102,241,.10); --surface2:rgba(99,102,241,.18);
  --text:#E6E4FF; --muted:#B0ACF5; --hint:#6F6AA8;
  --accent:#818CF8; --accent-soft:rgba(129,140,248,.20);
  --border:#818CF855; --border-soft:#272348;
  --radius:14px; --radius-lg:16px;
  --shadow:0 0 20px rgba(129,140,248,.14);
  color-scheme:dark;
}
.theme-ocean{
  --bg:#04141F; --surface:rgba(14,165,183,.08); --surface2:rgba(14,165,183,.15);
  --text:#D7F4FA; --muted:#8AD4E4; --hint:#4E8291;
  --accent:#0EA5B8; --accent-soft:rgba(14,165,183,.20);
  --border:#0EA5B855; --border-soft:#0D3242;
  --radius:12px; --radius-lg:14px;
  --shadow:0 0 18px rgba(14,165,184,.12);
  color-scheme:dark;
}
.theme-ink{
  --bg:#141414; --surface:#1D1D1D; --surface2:#232323;
  --text:#E4E0D8; --muted:#A8A399; --hint:#6E6A62;
  --accent:#C9A86A; --accent-soft:#3A3223;
  --border:#33302B; --border-soft:#262421;
  --radius:4px; --radius-lg:6px;
  --shadow:none;
  color-scheme:dark;
}

/* ============ 基础 ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  min-height:100vh; padding:18px 14px 40px;
  transition:background .5s ease,color .5s ease;
  animation:pageIn .38s cubic-bezier(.2,.7,.3,1) both;
  overflow-x:hidden;
}
body.no-motion{ animation:none !important; }
body.no-motion *{ animation:none !important; transition:none !important; }
body.theme-space, body.theme-galaxy{ position:relative; }
body.theme-space::before, body.theme-galaxy::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),
    radial-gradient(1px 1px at 70px 90px,#9FD8FF,transparent),
    radial-gradient(1.6px 1.6px at 140px 50px,#fff,transparent),
    radial-gradient(1px 1px at 180px 160px,#9FD8FF,transparent);
  background-repeat:repeat;background-size:200px 200px;opacity:.45;
  animation:starMove 90s linear infinite;
}
@keyframes starMove{from{background-position:0 0}to{background-position:-400px 400px}}
@keyframes pageIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
body.leaving{animation:pageOut .18s ease forwards}
@keyframes pageOut{to{opacity:0;transform:translateX(-22px)}}

/* ============ 启动闪屏（防白闪 + 开屏动画） ============ */
#boot{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:var(--bg);color:var(--muted);font-size:13px;
  transition:opacity .45s ease;
}
#boot .boot-logo{ font-size:44px; animation:bootFloat 1.2s ease-in-out infinite alternate; }
#boot.bye{ opacity:0; pointer-events:none; }
@keyframes bootFloat{from{transform:translateY(-4px)}to{transform:translateY(6px)}}

/* ============ 布局组件 ============ */
.wrap{max-width:860px;margin:0 auto}
body.compact .wrap{max-width:980px}
body.compact .card{padding:10px;margin-bottom:8px}

.topbar{
  display:flex;align-items:center;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--border-soft);margin-bottom:14px;
}
.avatar{width:34px;height:34px;border-radius:var(--radius);flex:none;object-fit:cover}
.brand{font-size:15px;font-weight:500;letter-spacing:.2px}
.sub{font-size:11px;color:var(--hint);margin-top:1px}
.topbar .spacer{flex:1}

.btn{
  border:1px solid var(--border); background:transparent; color:var(--muted);
  border-radius:var(--radius); padding:6px 12px; font-size:12px; cursor:pointer;
  font-family:var(--font); transition:transform .15s,background .2s,color .2s;
}
.btn:hover{background:var(--surface2)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.theme-night .btn.primary,.theme-ink .btn.primary{color:#E7ECF2}
.btn.sm{padding:4px 9px;font-size:11px}

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:14px; margin-bottom:12px;
  box-shadow:var(--shadow); animation:fadeUp .45s both;
}
.card .card-title{font-size:13px;font-weight:500;margin-bottom:10px}
.muted{color:var(--muted)}
.hint{color:var(--hint);font-size:11px}

.row{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border-soft);
}
.row:last-child{border-bottom:none}
.row .grow{flex:1}

.pill{
  display:inline-block;padding:4px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--border);font-size:12px;color:var(--muted);cursor:pointer;
  transition:all .2s;
}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.theme-night .pill.on,.theme-ink .pill.on{color:#E7ECF2}

.nav-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.nav-item{
  display:flex;align-items:center;padding:11px 12px;font-size:13px;cursor:pointer;
  border-bottom:1px solid var(--border-soft);transition:background .2s;
}
.nav-item:last-child{border-bottom:none}
.nav-item:hover{background:var(--surface2)}
.nav-item.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);font-weight:500}
.nav-item .chev{margin-left:auto;color:var(--hint)}

.back{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  cursor:pointer;margin-bottom:10px;
}
.back:hover{color:var(--accent)}

.foot{
  margin-top:18px;padding-top:12px;border-top:1px solid var(--border-soft);
  font-size:11px;color:var(--hint);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.metric{background:var(--surface2);border-radius:var(--radius);padding:10px}
.metric .k{font-size:11px;color:var(--muted)}
.metric .v{font-size:20px;font-weight:500;margin-top:2px}

.bar{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}
.bar-in{height:100%;background:var(--accent);border-radius:99px;transition:width .5s ease;min-width:0}

.switch{
  width:42px;height:22px;border-radius:99px;background:var(--border);position:relative;
  cursor:pointer;transition:background .2s;flex:none;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(20px)}

input[type=text],input[type=number],input[type=date],select,textarea{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius);padding:7px 10px;font-size:13px;font-family:var(--font);width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input[type=range]{accent-color:var(--accent);width:100%}

.modal-mask{
  position:fixed;inset:0;background:rgba(5,12,25,.62);display:flex;align-items:center;justify-content:center;
  z-index:99;padding:20px;animation:popIn .25s both;
}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;max-width:380px;width:100%;text-align:center;animation:popIn .3s both;
  max-height:84vh;overflow-y:auto;
}
.modal img{width:100%;border-radius:var(--radius);margin:10px 0}

/* ============ 轻提示 toast ============ */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:12px;padding:8px 16px;
  border-radius:99px;z-index:300;box-shadow:0 4px 16px rgba(0,0,0,.2);
  animation:popIn .25s both;pointer-events:none;max-width:80vw;text-align:center;
}
.toast.out{opacity:0;transition:opacity .4s}

/* ============ 表单 ============ */
.field{margin-bottom:11px;text-align:left}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.field .tip{font-size:11px;color:var(--hint);margin-top:5px;line-height:1.6}
.err{font-size:12px;color:#D64545;min-height:16px;margin-top:2px}
.ok{font-size:12px;color:#2E9E5B;min-height:16px;margin-top:2px}
.theme-space .err,.theme-night .err,.theme-cyber .err,.theme-galaxy .err,.theme-ocean .err,.theme-ink .err{color:#FF8080}
.theme-space .ok,.theme-night .ok,.theme-cyber .ok,.theme-galaxy .ok,.theme-ocean .ok,.theme-ink .ok{color:#7BD88F}

.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs .tab{flex:1;text-align:center;padding:8px 0;font-size:13px;border-radius:var(--radius);
  border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .2s;min-width:64px}
.tabs .tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.theme-night .tabs .tab.on,.theme-ink .tabs .tab.on{color:#E7ECF2}
.panel{display:none;animation:fadeUp .35s both}
.panel.on{display:block}

/* ============ 列表 / 表格 ============ */
.list-item{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-bottom:1px solid var(--border-soft);
}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1;min-width:0}
.list-item .t{font-size:13px}
.list-item .s{font-size:11px;color:var(--hint);margin-top:2px}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th,.tbl td{padding:9px 8px;text-align:left;border-bottom:1px solid var(--border-soft);white-space:nowrap}
.tbl th{color:var(--muted);font-weight:500;font-size:11px}
.tbl-wrap{overflow-x:auto}

/* ============ 徽章墙 ============ */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.badge-cell{
  background:var(--surface2);border-radius:var(--radius);padding:12px 6px;text-align:center;
  transition:transform .2s;
}
.badge-cell:hover{transform:translateY(-2px)}
.badge-cell .bi{font-size:26px}
.badge-cell .bn{font-size:11px;margin-top:5px;font-weight:500}
.badge-cell .bd{font-size:10px;color:var(--hint);margin-top:2px;line-height:1.4}
.badge-cell.locked{opacity:.38;filter:grayscale(.9)}
.badge-cell.on{border:1px solid var(--accent);background:var(--accent-soft)}

/* ============ 主题卡（外观页） ============ */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tcard{
  display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--border);
  border-radius:var(--radius-lg);cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;
}
.tcard:hover{transform:translateY(-2px)}
.tcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tcard .preview{width:44px;height:30px;border-radius:6px;flex:none;border:1px solid var(--border)}
.tcard .preview.pro{background:linear-gradient(135deg,#EFF2F6 55%,#2563EB 55%)}
.tcard .preview.paper{background:linear-gradient(135deg,#F7F3EB 55%,#A0722F 55%)}
.tcard .preview.mint{background:linear-gradient(135deg,#EDF7F1 55%,#10B981 55%)}
.tcard .preview.kids{background:linear-gradient(135deg,#FFF4E3 55%,#FF7A45 55%)}
.tcard .preview.sakura{background:linear-gradient(135deg,#FBF0F3 55%,#E86A92 55%)}
.tcard .preview.forest{background:linear-gradient(135deg,#EAF2E4 55%,#5C8A3C 55%)}
.tcard .preview.space{background:linear-gradient(135deg,#0B1226 55%,#38BDF8 55%)}
.tcard .preview.night{background:linear-gradient(135deg,#0A0A0B 55%,#5B6B7B 55%)}
.tcard .preview.cyber{background:linear-gradient(135deg,#0D0A1A 55%,#A855F7 55%)}
.tcard .preview.galaxy{background:linear-gradient(135deg,#0F0B21 55%,#818CF8 55%)}
.tcard .preview.ocean{background:linear-gradient(135deg,#04141F 55%,#0EA5B8 55%)}
.tcard .preview.ink{background:linear-gradient(135deg,#141414 55%,#C9A86A 55%)}
.tcard .nm{font-size:12px;font-weight:500}
.tcard .ds{font-size:10px;color:var(--hint);margin-top:2px}
.tcard .badge{
  position:absolute;top:-7px;right:-5px;background:var(--accent);color:#fff;
  font-size:10px;padding:2px 8px;border-radius:99px;
}

/* ============ 空状态 / 骨架 ============ */
.empty-state{text-align:center;padding:34px 10px;color:var(--hint);font-size:12px}
.empty-state .e{font-size:38px;display:block;margin-bottom:8px}
.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--border-soft) 50%,var(--surface2) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--radius);height:14px;margin:8px 0}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ 彩带庆祝 ============ */
.confetti-host{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.confetti{position:absolute;width:8px;height:14px;animation:confFall linear both}
@keyframes confFall{from{transform:translateY(-10vh) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}

/* ============ 打印（月结/年结报告） ============ */
@media print{
  body{background:#fff !important;color:#111 !important;padding:0}
  .topbar,.foot,.no-print,.btn,.pill,.switch{display:none !important}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}

@media (max-width:640px){
  .grid4{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr 1fr 1fr}
  .topbar{flex-wrap:wrap}
}