/* =========================================================
   api26 淡水生物研究院 · 共享主题系统
   四套风格：a 湖光青绿 / b 深海夜航 / c 碧波水感 / d 墨白极简
   所有页面只需 <body class="theme-X"> 即整套生效。
   以后微调只改这个文件，不会影响其它风格。
   ========================================================= */

:root{
  --tab-height:64px;
  --container-max-width:720px;
  --container-side-padding:16px;
}

/* 页面底纹：跟着主题变 */
body{
  background-color:var(--bg-page);
  background-image:var(--bg-glow);
  color:var(--text-main);
}
select option{background:var(--card-white);color:var(--text-main);}

/* ---------------- A · 湖光青绿 ---------------- */
.theme-a{
  --primary:#14776a;
  --primary-dark:#0f5d53;
  --primary-light:#e8f4f1;
  --header-bg:#d5efe8;
  --profit:#1a9e6a;
  --loss:#e0533d;
  --bg-page:#eef5f3;
  --bg-glow:radial-gradient(130% 80% at 100% 0%, rgba(51,183,157,.20), transparent 58%), radial-gradient(130% 80% at 0% 100%, rgba(20,119,106,.12), transparent 55%);
  --card-white:#ffffff;
  --text-main:#15242a;
  --text-secondary:#6c7c85;
  --border:#e3ecea;
  --shadow:0 10px 24px rgba(20,119,106,.10);
  --on-primary:#ffffff;
  --pri-grad:linear-gradient(140deg,#14776a,#33b79d);
  --soft-grad:linear-gradient(140deg,#f0faf7,#e3f5ef);
  --soft-solid:#e3f3ee;
  --head-text:#31514a;
  --rec-head-bg:#f5fbf9;
  --tab-bg:#ffffff;
  --input-bg:#f4faf8;
  --input-bg-focus:#ffffff;
  --footer-bg:#f7fbfa;
  --version-fg:#14776a;
  --version-bg:#e0f3ed;
  --badge-ok-bg:#dcf5e9;  --badge-ok-bg2:#bff0d7;
  --badge-bad-bg:#fdecea; --badge-bad-bg2:#fbd9d4;
  --badge-normal-bg:#e6f7ef; --badge-normal-bg2:#cdf0de;
  --ok-soft:#dcf5e9;  --bad-soft:#ffe9e9;
  --warn-bg:#fff4e0; --warn-fg:#a15c00; --warn-bd:#f3c67a;
  --notice-bg:#fff4e0; --notice-fg:#a15c00; --notice-bd:#f3c67a;
  --dim:#6c7c85;
  --danger-grad:linear-gradient(140deg,#ef5350,#e24545);
  --soft-active:#bfe0d8;
}
.theme-a .brand-mark{border-radius:50%;}

/* ---------------- B · 深海夜航 ---------------- */
.theme-b{
  --primary:#2ee6d6;
  --primary-dark:#19b8ab;
  --primary-light:#123049;
  --header-bg:#101f38;
  --profit:#34d399;
  --loss:#ff6b6b;
  --bg-page:#070d18;
  --bg-glow:radial-gradient(120% 90% at 85% 0%, rgba(46,230,214,.20), transparent 55%), radial-gradient(110% 80% at 0% 100%, rgba(245,165,36,.12), transparent 55%);
  --card-white:#111d33;
  --text-main:#e9f2ff;
  --text-secondary:#7f96b8;
  --border:rgba(120,180,255,.16);
  --shadow:0 14px 34px rgba(0,0,0,.55);
  --on-primary:#04231f;
  --pri-grad:linear-gradient(140deg,#2ee6d6,#1b9bf0);
  --soft-grad:linear-gradient(140deg,#0e2038,#0c1b30);
  --soft-solid:#0e2038;
  --head-text:#cfe0f5;
  --rec-head-bg:#0d1830;
  --tab-bg:#0a1324;
  --input-bg:#0d1730;
  --input-bg-focus:#12203c;
  --footer-bg:#0c1526;
  --version-fg:#2ee6d6;
  --version-bg:rgba(46,230,214,.14);
  --badge-ok-bg:rgba(52,211,153,.16);  --badge-ok-bg2:rgba(52,211,153,.26);
  --badge-bad-bg:rgba(255,107,107,.16); --badge-bad-bg2:rgba(255,107,107,.26);
  --badge-normal-bg:rgba(46,230,214,.14); --badge-normal-bg2:rgba(46,230,214,.24);
  --ok-soft:rgba(52,211,153,.16);  --bad-soft:rgba(255,107,107,.16);
  --warn-bg:rgba(245,165,36,.14); --warn-fg:#ffcf87; --warn-bd:rgba(245,165,36,.38);
  --notice-bg:rgba(245,165,36,.14); --notice-fg:#ffcf87; --notice-bd:rgba(245,165,36,.38);
  --dim:#7f96b8;
  --danger-grad:linear-gradient(140deg,#ff6b6b,#e24545);
  --soft-active:#18305a;
}
.theme-b .stat-card,.theme-b .record-card,.theme-b .month-select-box,.theme-b .rank-item,
.theme-b .form-card,.theme-b .user-card,.theme-b .select-box,.theme-b .login-box,.theme-b .reg-box{
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.theme-b .stat-num{text-shadow:0 0 14px rgba(52,211,153,.40);}
.theme-b .btn-submit,.theme-b .btn-login,.theme-b .add-record-btn{box-shadow:0 12px 26px rgba(0,0,0,.45);}
.theme-b .rank-1,.theme-b .rank-2{color:#101418;}

/* ---------------- C · 碧波水感 ---------------- */
.theme-c{
  --primary:#0e7490;
  --primary-dark:#0b5c73;
  --primary-light:#dff1f7;
  --header-bg:#cfecf6;
  --profit:#16a34a;
  --loss:#ef4444;
  --bg-page:#dff0f7;
  --bg-glow:linear-gradient(180deg,#eaf9fd 0%,#d4eef7 55%,#c2e6f2 100%);
  --card-white:rgba(255,255,255,.92);
  --text-main:#0c2b34;
  --text-secondary:#547c88;
  --border:#cbe7ef;
  --shadow:0 14px 28px rgba(20,116,148,.16);
  --on-primary:#ffffff;
  --pri-grad:linear-gradient(140deg,#0e7490,#25b4cf);
  --soft-grad:linear-gradient(140deg,rgba(255,255,255,.92),rgba(230,246,252,.92));
  --soft-solid:rgba(255,255,255,.82);
  --head-text:#28545f;
  --rec-head-bg:rgba(255,255,255,.60);
  --tab-bg:rgba(255,255,255,.94);
  --input-bg:rgba(255,255,255,.72);
  --input-bg-focus:#ffffff;
  --footer-bg:rgba(243,251,254,.85);
  --version-fg:#0e7490;
  --version-bg:rgba(255,255,255,.75);
  --badge-ok-bg:rgba(22,163,74,.14);  --badge-ok-bg2:rgba(22,163,74,.24);
  --badge-bad-bg:rgba(239,68,68,.14); --badge-bad-bg2:rgba(239,68,68,.24);
  --badge-normal-bg:rgba(14,116,144,.12); --badge-normal-bg2:rgba(14,116,144,.20);
  --ok-soft:rgba(22,163,74,.14);  --bad-soft:rgba(239,68,68,.14);
  --warn-bg:rgba(255,255,255,.92); --warn-fg:#0b6b83; --warn-bd:#9adbec;
  --notice-bg:rgba(255,255,255,.92); --notice-fg:#0b6b83; --notice-bd:#9adbec;
  --dim:#547c88;
  --danger-grad:linear-gradient(140deg,#f0625a,#ef4444);
  --soft-active:#b6dfec;
}
.theme-c .brand-mark{border-radius:50%;}
.theme-c .header-card{background-image:linear-gradient(180deg,rgba(255,255,255,.55),transparent);}

/* ---------------- D · 墨白极简 ---------------- */
.theme-d{
  --primary:#15181b;
  --primary-dark:#000000;
  --primary-light:#f2f2ee;
  --header-bg:#f0f0ec;
  --profit:#177a4c;
  --loss:#d94f34;
  --bg-page:#f5f5f2;
  --bg-glow:repeating-linear-gradient(0deg, transparent 0 38px, rgba(20,30,25,.035) 38px 39px);
  --card-white:#ffffff;
  --text-main:#15181b;
  --text-secondary:#8b9096;
  --border:#e6e6e1;
  --shadow:0 1px 0 rgba(0,0,0,.03), 0 10px 22px rgba(0,0,0,.05);
  --on-primary:#f7f7f4;
  --pri-grad:linear-gradient(140deg,#2b3034,#101315);
  --soft-grad:#f4f4f0;
  --soft-solid:#f2f2ee;
  --head-text:#3a3f44;
  --rec-head-bg:#fafaf7;
  --tab-bg:#ffffff;
  --input-bg:#f7f7f4;
  --input-bg-focus:#ffffff;
  --footer-bg:#fafaf7;
  --version-fg:#15181b;
  --version-bg:#efefeb;
  --badge-ok-bg:rgba(23,122,76,.10);  --badge-ok-bg2:rgba(23,122,76,.16);
  --badge-bad-bg:rgba(217,79,52,.10); --badge-bad-bg2:rgba(217,79,52,.16);
  --badge-normal-bg:rgba(21,24,27,.06); --badge-normal-bg2:rgba(21,24,27,.10);
  --ok-soft:rgba(23,122,76,.10);  --bad-soft:rgba(217,79,52,.10);
  --warn-bg:#ffffff; --warn-fg:#15181b; --warn-bd:#15181b;
  --notice-bg:#ffffff; --notice-fg:#15181b; --notice-bd:#15181b;
  --dim:#8b9096;
  --danger-grad:linear-gradient(140deg,#d94f34,#c23f27);
  --soft-active:#e2e2dd;
}
.theme-d .header-card,.theme-d .stat-card,.theme-d .record-card,.theme-d .month-select-box,
.theme-d .rank-item,.theme-d .form-card,.theme-d .user-card,.theme-d .select-box,
.theme-d .login-box,.theme-d .reg-box,.theme-d .record-header,.theme-d .stat-head{
  border-radius:10px;
}
.theme-d .section-title{border-radius:8px;text-transform:uppercase;letter-spacing:2px;font-size:12px;}
.theme-d .btn-submit,.theme-d .btn-login,.theme-d .btn-logout,.theme-d .btn-danger,
.theme-d .add-record-btn,.theme-d .rank-tab{border-radius:8px;}
.theme-d .profit-badge,
.theme-d .record-profit-tag.text-loss .profit-badge,
.theme-d .record-profit-tag.text-normal .profit-badge{
  background:transparent;border:1px solid currentColor;
}

/* ================= 底部导航 · 方案C（圆角方块 + 切换动效） ================= */
.tab-bar{padding:7px 4px 10px;}
/* 软键盘弹出时隐藏底部导航，避免被顶到键盘上方 */
html.kb-open .tab-bar{display:none !important;}
.tab-bar .tab-item{
  gap:4px;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease;
}
.tab-bar .tab-item:active{transform:scale(.9);}
.tab-bar .tab-item>span:last-child{line-height:1.12;}
.tab-bar .tab-sq{
  width:31px;height:31px;border-radius:10px;
  display:grid;place-items:center;flex:none;
  color:var(--text-secondary);
  transition:background .26s ease,color .26s ease,box-shadow .26s ease,transform .26s ease;
}
.tab-bar .tab-item.active{color:var(--primary);font-weight:700;}
.tab-bar .tab-item.active .tab-sq{
  background:var(--pri-grad);
  color:var(--on-primary);
  box-shadow:0 8px 16px rgba(0,0,0,.18);
}
.tab-bar .tab-item.active .tab-sq svg{animation:sqPop .46s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes sqPop{
  0%{transform:scale(.5) rotate(-10deg);opacity:.15;}
  55%{transform:scale(1.15) rotate(3deg);opacity:1;}
  100%{transform:scale(1) rotate(0);}
}
/* 页面切换过渡：内容淡出 → 新页淡入上滑 */
.scroll-container{transition:opacity .17s ease,transform .17s ease;}
.scroll-container.page-in{animation:pageIn .34s cubic-bezier(.22,1,.36,1) both;}
@keyframes pageIn{0%{opacity:0;transform:translateY(13px);}100%{opacity:1;transform:none;}}
.scroll-container.page-out{opacity:0;transform:translateY(-9px);}
@media (prefers-reduced-motion: reduce){
  .tab-bar .tab-item,.tab-bar .tab-sq,.tab-bar .tab-item.active .tab-sq svg,.scroll-container{
    animation:none !important;transition:none !important;
  }
}

/* ================== 视觉增强层 v2：渐变高级感 ================== */
.theme-a{
  --shadow:0 14px 30px rgba(20,119,106,.15);
  --head-g1:#0f6b5c; --head-g2:#3fc7a9; --head-fg:#ffffff;
  --head-sub:rgba(255,255,255,.86); --head-shadow:0 18px 38px rgba(20,119,106,.32);
  --head-blob:rgba(255,255,255,.16);
  --num-grad:linear-gradient(135deg,#14776a,#2fb39a);
  --num-profit:linear-gradient(135deg,#0f9a5c,#37cc8d);
  --num-loss:linear-gradient(135deg,#dd4c37,#f08a72);
  --ver-fg:#ffffff; --ver-bg:rgba(255,255,255,.22);
  --bg-glow:radial-gradient(130% 70% at 100% 0%, rgba(51,183,157,.38), transparent 62%), radial-gradient(120% 70% at 0% 100%, rgba(20,119,106,.22), transparent 60%);
  --soft-grad:linear-gradient(135deg,#e6f8f2,#d3f0e8);
  --rec-head-bg:linear-gradient(135deg,#f7fcfa,#ecf7f4);
  --radius:22px;
}
.theme-b{
  --shadow:0 16px 38px rgba(0,0,0,.60);
  --head-g1:#08182c; --head-g2:#16456e; --head-fg:#e6f7ff;
  --head-sub:rgba(150,215,255,.80); --head-shadow:0 18px 44px rgba(0,0,0,.66);
  --head-blob:rgba(46,230,214,.16);
  --num-grad:linear-gradient(135deg,#2ee6d6,#3aa8ff);
  --num-profit:linear-gradient(135deg,#34d399,#7ef0c0);
  --num-loss:linear-gradient(135deg,#ff6b6b,#ffa08a);
  --ver-fg:#2ee6d6; --ver-bg:rgba(46,230,214,.16);
  --bg-glow:radial-gradient(120% 80% at 85% 0%, rgba(46,230,214,.30), transparent 60%), radial-gradient(110% 70% at 0% 100%, rgba(27,110,240,.24), transparent 60%);
  --soft-grad:linear-gradient(135deg,#0f2540,#0b1c34);
  --rec-head-bg:linear-gradient(135deg,#0d1b33,#0b172c);
  --radius:18px;
}
.theme-c{
  --shadow:0 16px 32px rgba(14,116,144,.20);
  --head-g1:#0a6a84; --head-g2:#49cbe2; --head-fg:#ffffff;
  --head-sub:rgba(255,255,255,.90); --head-shadow:0 18px 38px rgba(14,116,144,.32);
  --head-blob:rgba(255,255,255,.20);
  --num-grad:linear-gradient(135deg,#0e7490,#35bcd6);
  --num-profit:linear-gradient(135deg,#12a05f,#3ecf8e);
  --num-loss:linear-gradient(135deg,#ef4444,#f78a8a);
  --ver-fg:#ffffff; --ver-bg:rgba(255,255,255,.28);
  --bg-glow:linear-gradient(180deg,#e9f9ff 0%,#cdeefb 45%,#a7ddf2 100%);
  --soft-grad:linear-gradient(135deg,rgba(255,255,255,.95),rgba(214,240,250,.95));
  --rec-head-bg:rgba(255,255,255,.66);
  --radius:20px;
}
.theme-d{
  --shadow:0 10px 24px rgba(0,0,0,.09);
  --head-g1:#ffffff; --head-g2:#ececE6; --head-fg:#15181b;
  --head-sub:#8b9096; --head-shadow:0 10px 24px rgba(0,0,0,.07);
  --head-blob:rgba(0,0,0,.03);
  --num-grad:linear-gradient(135deg,#15181b,#4a5057);
  --num-profit:linear-gradient(135deg,#177a4c,#31a86e);
  --num-loss:linear-gradient(135deg,#d94f34,#e8795f);
  --ver-fg:#15181b; --ver-bg:#efefeb;
  --bg-glow:repeating-linear-gradient(0deg, transparent 0 38px, rgba(20,30,25,.05) 38px 39px);
  --radius:10px;
}

/* 1) 顶部标题卡 → 主题渐变 + 白字 + 光斑 */
.theme-a .header-card,.theme-b .header-card,.theme-c .header-card,.theme-d .header-card{
  background-image:linear-gradient(135deg,var(--head-g1),var(--head-g2));
  background-color:transparent;
  color:var(--head-fg);
  border:none;
  border-radius:26px;
  box-shadow:var(--head-shadow);
  overflow:hidden;
  position:relative;
}
.theme-a .header-card::after,.theme-b .header-card::after,.theme-c .header-card::after,.theme-d .header-card::after{
  content:""; position:absolute; right:-46px; top:-58px; width:170px; height:170px; border-radius:50%;
  background:var(--head-blob); pointer-events:none;
}
.theme-a .header-card::before,.theme-b .header-card::before,.theme-c .header-card::before,.theme-d .header-card::before{
  content:""; position:absolute; left:-30px; bottom:-70px; width:140px; height:140px; border-radius:50%;
  background:var(--head-blob); opacity:.7; pointer-events:none;
}
.theme-a .header-card .main-title,.theme-b .header-card .main-title,.theme-c .header-card .main-title,.theme-d .header-card .main-title{
  color:var(--head-fg); position:relative; z-index:1; text-shadow:0 2px 10px rgba(0,0,0,.14);
}
.theme-a .header-card .sub-desc,.theme-b .header-card .sub-desc,.theme-c .header-card .sub-desc,.theme-d .header-card .sub-desc{
  color:var(--head-sub); position:relative; z-index:1;
}
.theme-a .header-card .version-tag,.theme-b .header-card .version-tag,
.theme-c .header-card .version-tag,.theme-d .header-card .version-tag{
  color:var(--ver-fg); background:var(--ver-bg); z-index:1;
}
.theme-d .header-card{border:1px solid var(--border);}
.theme-d .header-card .main-title{text-shadow:none;}

/* 2) 卡片：更大圆角 + 立体阴影 */
.stat-card,.record-card,.month-select-box,.select-box,.form-card,.user-card,.rank-item,.login-box,.reg-box{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* 3) 统计数字：渐变字（@supports 保护，老内核优雅降级） */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat-num{
    background-image:var(--num-grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .stat-num.text-profit{background-image:var(--num-profit);}
  .stat-num.text-loss{background-image:var(--num-loss);}
}

/* 4) 「新增记录」按钮 → 渐变胶囊 */
.add-record-btn{
  background-color:transparent;
  background-image:var(--pri-grad);
  color:var(--on-primary);
  border:none;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.add-record-btn:active{opacity:.88;}

/* 5) 主按钮加深阴影，浮起来 */
.btn-submit,.btn-login{
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

/* 6) 记录/列表卡片顶部来一点主题色描边，避免"糊成一片白" */
.record-card,.stat-card{border:1px solid var(--line);}
.theme-b .record-card,.theme-b .stat-card{border-color:rgba(120,180,255,.18);}

/* ================= 兼容修复：iOS 上 <input type="date"> 内容会居中 ================= */
input[type="date"]{
  text-align:left;
  direction:ltr;
}
input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
  margin-left:0;
}
input[type="date"]::-webkit-datetime-edit{
  text-align:left;
  padding:0;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper{
  text-align:left;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:auto;
}
/* 只在 iOS 生效（-webkit-touch-callout 是 Safari 专有）：
   去掉原生外观，让 text-align:left 真正起作用；安卓/桌面不受影响 */
@supports (-webkit-touch-callout: none){
  input[type="date"]{
    -webkit-appearance:none;
    appearance:none;
    min-height:46px;
    line-height:1.3;
  }
}

/* ================= 墨白极简：顶部卡片改为墨黑 ================= */
.theme-d{
  --head-g1:#1b1f24;
  --head-g2:#343b42;
  --head-fg:#f7f7f4;
  --head-sub:rgba(247,247,244,.62);
  --head-shadow:0 14px 30px rgba(17,20,24,.28);
  --head-blob:rgba(255,255,255,.07);
  --ver-fg:#f7f7f4;
  --ver-bg:rgba(255,255,255,.14);
}
.theme-d .header-card{border:none;}
.theme-d .header-card .main-title{color:var(--head-fg);text-shadow:none;}
.theme-d .header-card .sub-desc{color:var(--head-sub);}
.theme-d .header-card .version-tag{color:var(--ver-fg);background:var(--ver-bg);}

/* ================= 头像组件 ================= */
.avatar{
  display:inline-block;width:34px;height:34px;border-radius:12px;overflow:hidden;flex:none;
  object-fit:cover;vertical-align:middle;color:var(--soft-solid);
  box-shadow:0 0 0 1px var(--border);
}
.avatar svg{display:block;width:100%;height:100%;}
.avatar-lg{width:40px;height:40px;border-radius:14px;}
.avatar-xl{width:58px;height:58px;border-radius:19px;}
.header-card .avatar{color:#ffffff;position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:3;box-shadow:none;}
.rank-item{gap:10px;}