/* ============================================================
   养车小账单 · 共享样式
   双主题：默认浅色（日积月累），[data-theme=dark] 深色
   ============================================================ */

/* ---------- 浅色（默认） ---------- */
:root{
  --accent:#0071e3;
  --accent-deep:#0071e3;
  --accent-light:rgba(0,113,227,.08);
  --chip-text:#0071e3;

  --text:#1d1d1f;
  --text-2:#6e6e73;
  --text-3:#86868b;

  --bg:#fbfbfd;
  --card:#ffffff;
  --bg-subtle:#f5f5f7;
  --bg-subtle-2:#ececf0;
  --line:rgba(0,0,0,.06);
  --border:rgba(0,0,0,.10);

  --btn-bg:#1d1d1f;
  --btn-text:#f5f5f7;

  --danger:#d70015;
  --wechat:#07c160;

  /* 图标块：黑白灰 */
  --tile-bg:#f5f5f7;
  --tile-fg:#1d1d1f;

  /* 车型标签：中性灰 */
  --tag-bg:rgba(0,0,0,.06);
  --tag-fg:#6e6e73;

  --outer:#e9ebef;
  --phone-border:rgba(0,0,0,.05);

  --radius:10px;                 /* 卡片圆角（较前版减半） */
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-pop:0 10px 36px rgba(0,0,0,.18);
  --shadow-fab:0 6px 16px rgba(0,113,227,.30);

  /* 兼容旧变量 */
  --brand:var(--accent);
  --brand-deep:var(--accent-deep);
  --brand-light:var(--accent-light);
}

/* ---------- 深色 ---------- */
[data-theme="dark"]{
  --accent:#0a84ff;
  --accent-deep:#0a84ff;
  --accent-light:rgba(10,132,255,.16);
  --chip-text:#64d2ff;

  --text:#f5f5f7;
  --text-2:#98989f;
  --text-3:#6e6e73;

  --bg:#000;
  --card:#1c1c1e;
  --bg-subtle:#2c2c2e;
  --bg-subtle-2:#3a3a3c;
  --line:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);

  --btn-bg:#f5f5f7;
  --btn-text:#1d1d1f;

  --danger:#ff453a;

  --tile-bg:rgba(255,255,255,.10);
  --tile-fg:#e5e5ea;

  --tag-bg:rgba(255,255,255,.10);
  --tag-fg:#98989f;

  --outer:#0e0e10;
  --phone-border:rgba(255,255,255,.07);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-pop:0 10px 36px rgba(0,0,0,.6);
  --shadow-fab:0 6px 18px rgba(10,132,255,.45);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Microsoft YaHei",sans-serif;
  /* 移动端铺满视口时背景与容器同色（桌面端由媒体查询改为 --outer，露出两侧底色） */
  background:var(--bg);color:var(--text);
  display:flex;justify-content:center;
  /* 100dvh：跟随移动端浏览器地址栏的收放，避免底部 Tab 栏被地址栏吞掉。
     旧浏览器不支持 dvh 时回退到 100vh（下一行会被忽略）。 */
  height:100vh;height:100dvh;
  overflow:hidden;
  /* 阻止 iOS 横屏 / 系统大字号设置把文字放大导致错位 */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  transition:background .3s,color .3s;
}

/* ============================================================
   应用容器 .app
   移动端优先：默认就是「铺满视口」的普通移动端页面，
   宽度交给 100%，靠流式布局适配各种尺寸的手机，不写死任何宽度。
   桌面端再由下面的媒体查询覆盖为「固定宽度竖列居中」。
   ============================================================ */
.app{
  position:relative;
  width:100%;max-width:100%;
  height:100%;
  background:var(--bg);
  display:flex;flex-direction:column;
  overflow:hidden;
  /* 刘海 / 灵动岛 / 横屏左右安全区 / 底部 Home 指示条；桌面端这些值都是 0 */
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  transition:background .3s;
}

/* ---------- 桌面浏览器（Win/Mac 鼠标精确指针）：固定尺寸竖列 ----------
   固定 430px 宽、铺满窗口高度，不随窗口缩放；不做圆角、不做投影。
   四个条件缺一不可：
     · 窗口 ≥601px 宽、≥501px 高  —— 手机横屏（如 844×390）即使被误报成鼠标设备，
                                      也会因为「高度太矮」留在移动端分支，铺满显示
     · 悬停可用 + 精确指针（鼠标）—— 触屏手机/平板的粗指针不会进这个分支
   其余情况一律走上面的默认样式：铺满视口。 */
@media (min-width:601px) and (min-height:501px) and (hover:hover) and (pointer:fine){
  body{background:var(--outer);}
  .app{
    width:430px;max-width:430px;
    border-left:1px solid var(--phone-border);
    border-right:1px solid var(--phone-border);
  }
}

.icon-svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* 主题切换按钮（浮在导航栏右侧；状态栏已移除，故改为贴顶） */
.theme-toggle{
  position:absolute;top:10px;top:calc(10px + env(safe-area-inset-top,0px));right:14px;z-index:60;
  width:34px;height:34px;border-radius:50%;
  background:var(--bg-subtle);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text-2);
  transition:background .2s,color .2s;
}
.theme-toggle:active{transform:scale(.92);}
.theme-toggle .icon-svg{width:18px;height:18px;}
[data-theme="light"] .ic-moon{display:block;}
[data-theme="light"] .ic-sun{display:none;}
[data-theme="dark"] .ic-moon{display:none;}
[data-theme="dark"] .ic-sun{display:block;}

/* 导航栏 */
.navbar{height:50px;padding:0 14px;display:flex;align-items:center;gap:4px;flex-shrink:0;position:relative;}
.navbar .back{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-2);border-radius:50%;transition:background .15s,color .15s;
}
.navbar .back:active{background:var(--bg-subtle);color:var(--text);}
.navbar .nav-title{font-size:17px;font-weight:600;letter-spacing:.2px;}

/* 内容区：左右留白随屏幕宽度轻微流动（小屏更紧凑，大屏更舒展） */
.content{flex:1;overflow-y:auto;padding:0 clamp(14px,4.4vw,20px) 24px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.content::-webkit-scrollbar{display:none;}

/* 卡片 */
.card{
  background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);
  transition:background .3s;
}

/* 主按钮：胶囊 */
.btn-primary{
  background:var(--btn-bg);color:var(--btn-text);border-radius:980px;
  padding:14px;text-align:center;font-size:16px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .2s,transform .12s;border:none;width:100%;
}
.btn-primary:active{transform:scale(.98);opacity:.88;}
.btn-primary .icon-svg{width:20px;height:20px;stroke:var(--btn-text);stroke-width:2.2;}
.btn-outline{
  background:transparent;color:var(--text);border:1px solid var(--border);
  border-radius:980px;padding:14px;text-align:center;font-size:16px;font-weight:500;cursor:pointer;width:100%;
}
.btn-danger-text{color:var(--danger);background:none;border:none;font-size:15px;cursor:pointer;padding:8px;}

/* 区块标题 */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 12px;}
.section-head .t{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--text);}
.section-head .t .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.section-head .more{font-size:13px;color:var(--text-3);cursor:pointer;}

/* 记录行 */
.record{
  background:var(--card);border-radius:var(--radius-sm);padding:14px 15px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .12s,background .2s;
}
.record:active{transform:scale(.99);background:var(--bg-subtle);}
.record .left{display:flex;align-items:center;gap:13px;min-width:0;flex:1;}
.record .icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--tile-bg);color:var(--tile-fg);}
.record .icon .icon-svg{width:21px;height:21px;}
.record .meta{min-width:0;}
.record .meta .date{font-size:12px;color:var(--text-3);margin-bottom:2px;font-weight:500;}
.record .meta .name{font-size:15px;font-weight:600;color:var(--text);}
.record .meta .sub{font-size:12px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.record .meta .note{font-size:12px;color:var(--text-3);margin-top:2px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.record .money{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0;margin-left:10px;}

/* 分类图标块：统一黑白灰（不再按分类上色） */
.ic-oil,.ic-charge,.ic-insure,.ic-maintain,.ic-repair,.ic-park,.ic-other{
  background:var(--tile-bg);color:var(--tile-fg);
}

/* 车型标签：配色 */
.car-tag{font-size:11px;padding:2px 8px;border-radius:5px;font-weight:600;}
.car-tag.ev{background:rgba(48,209,88,.16);color:#1fa971;}
.car-tag.fuel{background:rgba(255,159,10,.16);color:#d9930d;}
.car-tag.hybrid{background:rgba(10,132,255,.16);color:#3b82f6;}
[data-theme="dark"] .car-tag.ev{color:#30d158;}
[data-theme="dark"] .car-tag.fuel{color:#ff9f0a;}
[data-theme="dark"] .car-tag.hybrid{color:#64d2ff;}

/* 底部 Tab */
.tabbar{
  height:70px;background:var(--bg);border-top:1px solid var(--line);
  display:flex;flex-shrink:0;padding-bottom:6px;
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text-3);font-size:11px;text-decoration:none;}
.tab .icon-svg{width:23px;height:23px;}
.tab.active{color:var(--accent);font-weight:600;}

.tab-add{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;position:relative;top:-14px;}
.tab-add .fab{
  width:52px;height:52px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-fab);
  border:4px solid var(--bg);transition:transform .12s;
}
.tab-add .fab:active{transform:scale(.94);}
.tab-add .fab .icon-svg{width:24px;height:24px;stroke:#fff;stroke-width:2.4;}

/* 弹窗 */
.mask{position:absolute;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.mask.show{display:flex;}
/* 弹窗：宽度自适应——窄屏（如 320px 的 SE）不会顶到边 */
.dialog{width:min(320px,calc(100% - 44px));background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-pop);animation:pop .18s cubic-bezier(.22,1,.36,1);}
@keyframes pop{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.dialog .d-title{padding:22px 20px 6px;font-size:17px;font-weight:600;text-align:center;color:var(--text);}
.dialog .d-body{padding:10px 20px 20px;color:var(--text-2);}
.dialog .d-foot{display:flex;border-top:1px solid var(--line);}
.dialog .d-foot button{flex:1;padding:14px;font-size:15px;border:none;background:none;cursor:pointer;font-weight:500;}
.dialog .d-foot .cancel{color:var(--text-2);border-right:1px solid var(--line);}
.dialog .d-foot .ok{color:var(--accent);font-weight:600;}
.dialog .d-foot .danger{color:var(--danger);font-weight:600;}

/* 表单 */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:8px;font-weight:600;}
.field .f-input{
  width:100%;padding:12px 14px;border:1px solid transparent;border-radius:10px;
  font-size:15px;outline:none;color:var(--text);background:var(--bg-subtle);
  transition:border-color .15s;
}
.field .f-input::placeholder{color:var(--text-3);}
.field .f-input:focus{border-color:var(--accent);}
.field input[type=date].f-input{color:var(--text);}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.5);}

/* 分段单选 */
.type-radio{display:flex;gap:10px;flex-wrap:wrap;}
.type-radio .opt{
  padding:9px 18px;border:none;border-radius:980px;font-size:14px;cursor:pointer;
  color:var(--text-2);background:var(--bg-subtle);transition:all .15s;
}
.type-radio .opt.on{background:var(--accent);color:#fff;font-weight:600;}

/* 选择器 */
.selector{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg-subtle);border-radius:10px;cursor:pointer;font-size:15px;}
.selector .val{color:var(--text);font-weight:500;}
.selector .arrow{color:var(--text-3);display:flex;}

/* 空状态 */
.empty{text-align:center;padding:56px 20px;color:var(--text-3);}
.empty .icon-svg{width:56px;height:56px;stroke:var(--text-3);stroke-width:1.2;margin:0 auto 14px;display:block;opacity:.6;}
.empty .t{font-size:15px;color:var(--text);font-weight:600;margin-bottom:6px;}
.empty .d{font-size:13px;color:var(--text-3);line-height:1.6;margin-bottom:18px;}
.empty .btn{display:inline-block;padding:8px 20px;border-radius:18px;background:var(--brand);color:#fff;font-size:13px;}
.empty[hidden]{display:none;}

/* 必填红星 */
.req-star{color:var(--danger);margin-left:3px;font-weight:600;}
.req{color:var(--danger);font-size:11px;margin-left:6px;font-weight:500;}

/* ===== iOS 专属细节：输入框字号提到 16px，避免聚焦时 Safari 自动放大整页 ===== */
@supports (-webkit-touch-callout:none){
  .field .f-input,
  .field input,
  .field select,
  .field textarea{font-size:16px;}
}

/* ===== 设备兜底（由 assets/api.js 给 <html> 打 is-mobile 类）=====
   手机/平板浏览器若把指针误报成 fine，会被上面的桌面媒体查询判成电脑。
   JS 检测到移动设备时加这个类，强制回到铺满布局。
   特异性高于媒体查询里的 .app，且与规则顺序无关；JS 未执行时本段不生效。 */
html.is-mobile body{background:var(--bg);}
html.is-mobile .app{width:100%;max-width:100%;border-left:none;border-right:none;}

/* ===== 被官网以 iframe 嵌入时（?embed=1）：撑满 iframe，隐藏主题按钮 ===== */
body.embed{background:var(--bg);}
body.embed .app{width:100%;max-width:none;border-left:none;border-right:none;}
body.embed .theme-toggle{display:none!important;}