/* =========================================================
   方案 C · 轻量清爽风
   清新绿 #1FB47A / 薄荷 #E7F7EF / 暖橙点缀 #FF8A3D
   大圆角 + 大留白 + 大触控区，简单直观易上手
   ========================================================= */
:root{
  --c-green:#1FB47A;
  --c-green-d:#159463;
  --c-mint:#E7F7EF;
  --c-orange:#FF8A3D;
  --c-bg:#F2F6F4;
  --c-card:#FFFFFF;
  --c-ink:#19302A;
  --c-sub:#7C8C86;
  --c-line:#EBF0ED;
  --c-blue:#3D9BFF;
  --c-shadow:0 6px 18px rgba(31,180,122,.10), 0 2px 6px rgba(25,48,42,.04);
}
body{ background:var(--c-bg); color:var(--c-ink); }
.screen{ background:var(--c-bg); }
.statusbar{ color:var(--c-ink); }

/* ---------- 顶部 ---------- */
.c-appbar{
  background:
    radial-gradient(130% 90% at 88% -25%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(160deg,#2BC78D 0%,#1FB47A 58%,#159463 100%);
  padding:16px 20px 26px; flex-shrink:0; color:#fff; position:relative;
  border-radius:0 0 28px 28px; overflow:hidden;
  box-shadow:0 10px 26px rgba(21,148,99,.22);
}
.c-appbar::before{ content:""; position:absolute; right:-26px; bottom:-40px; width:120px; height:120px; background:rgba(255,255,255,.10); border-radius:50%; }
.c-appbar::after{ content:""; position:absolute; right:36px; top:-30px; width:70px; height:70px; background:rgba(255,255,255,.08); border-radius:50%; }
.c-appbar .hi{ font-size:13px; color:rgba(255,255,255,.85); }
.c-appbar .name{ font-size:20px; font-weight:800; margin-top:2px; }

/* ---------- 卡片 ---------- */
.c-card{ background:var(--c-card); border-radius:20px; box-shadow:var(--c-shadow); border:1px solid rgba(31,180,122,.06); }
.c-card-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.c-card-head .h{ font-size:15px; font-weight:800; }
.c-card-head .more{ font-size:12px; color:var(--c-green); font-weight:600; }

/* ---------- 按钮 ---------- */
.c-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:52px; border-radius:16px; font-size:16px; font-weight:700; width:100%; transition:transform .12s ease, box-shadow .2s ease, filter .15s ease; }
.c-btn:active{ transform:translateY(1px); filter:brightness(.97); }
.c-btn-primary{ background:linear-gradient(135deg,#2BC78D,#1FB47A); color:#fff; box-shadow:0 10px 22px rgba(31,180,122,.30); }
.c-btn-orange{ background:linear-gradient(135deg,#FF9F57,#FF8A3D); color:#fff; box-shadow:0 10px 22px rgba(255,138,61,.30); }
.c-btn-soft{ background:var(--c-mint); color:var(--c-green-d); }
.c-btn-ghost{ background:#fff; color:var(--c-ink); border:1.5px solid var(--c-line); }
.c-btn-sm{ height:38px; padding:0 18px; width:auto; font-size:14px; border-radius:12px; }

/* ---------- 状态标签（药丸） ---------- */
.c-tag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px; }
.c-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.c-tag.wait{ background:#FFF1E4; color:#E07423; box-shadow:inset 0 0 0 1px rgba(224,116,35,.14); }
.c-tag.doing{ background:#E6F1FF; color:#2A7FE0; box-shadow:inset 0 0 0 1px rgba(42,127,224,.14); }
.c-tag.done{ background:var(--c-mint); color:var(--c-green-d); box-shadow:inset 0 0 0 1px rgba(21,148,99,.14); }
.c-tag.paid{ background:#EFEAFF; color:#6B57C9; box-shadow:inset 0 0 0 1px rgba(107,87,201,.14); }

/* ---------- 列表 ---------- */
.c-row{ display:flex; align-items:center; gap:13px; padding:15px 18px; border-bottom:1px solid var(--c-line); }
.c-row:last-child{ border-bottom:none; }
.c-row .ava{ width:48px; height:48px; border-radius:16px; background:linear-gradient(135deg,#EAF8F0,#D6EFE2); color:var(--c-green-d); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; }
.c-row .main{ flex:1; min-width:0; }
.c-row .main .t{ font-size:15px; font-weight:700; }
.c-row .main .s{ font-size:12.5px; color:var(--c-sub); margin-top:3px; }

/* ---------- 底部导航 ---------- */
.tabbar{ background:#fff; border-top:1px solid var(--c-line); height:68px; }
.tabbar .tab{ color:var(--c-sub); font-size:11px; }
.tabbar .tab.on{ color:var(--c-green); font-weight:700; }
.tabbar .tab.on svg{ stroke:var(--c-green); }
.tabbar .tab.fab{ position:relative; }
.tabbar .tab.fab .fab-btn{ width:54px; height:54px; border-radius:19px; background:linear-gradient(135deg,#2BC78D,#1FB47A); display:flex; align-items:center; justify-content:center; margin-top:-24px; box-shadow:0 12px 24px rgba(31,180,122,.42), 0 0 0 5px rgba(31,180,122,.08); transition:transform .14s ease; }
.tabbar .tab.fab .fab-btn:active{ transform:scale(.94); }

.muted{ color:var(--c-sub); }
.green{ color:var(--c-green); }
.orange{ color:var(--c-orange); }