/* MedFluent — base.css
   多邻国式主题 · 亮绿主色 · 圆体字 · 粗边扁平卡片
*/

:root{
  /* 主色：多邻国绿（按下/边框用深绿） */
  --blue:#58CC02;
  --blue-d:#46A302;
  --blue-l:#E8F8DD;
  --blue-l2:#D7FFB8;

  /* 多邻国辅助色 */
  --sky:#1CB0F6;
  --sky-l:#DDF4FF;
  --purple:#CE82FF;
  --purple-l:#F7E8FF;
  --yellow:#FFC800;
  --red:#EA2B2B;
  --red-l:#FFDFE0;

  --green:#58CC02;
  --green-l:#E8F8DD;
  --orange:#FF9600;
  --orange-l:#FFEBD6;
  --yellow-l:#FFF4CC;
  --yellow-b:#F5DFA0;

  --bg:#FCFCFC;
  --card:#FFFFFF;
  --line:#E5E5E5;
  --line-d:#D3D3D3;

  --t1:#3C3C3C;
  --t2:#777777;
  --t3:#AFAFAF;

  --shadow:0 1px 2px rgba(0,0,0,.03);
  --shadow-lg:0 12px 32px rgba(0,0,0,.14);
  --r:16px;
  --r-sm:12px;
  --r-lg:20px;

  --ab-h:54px;
  --tab-h:62px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:ui-rounded,-apple-system,"SF Pro Rounded","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--t1);
  font-size:15px;
  line-height:1.5;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}

#app{
  max-width:640px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---------- 顶栏 ---------- */
.appbar{
  position:sticky; top:0; z-index:50;
  height:calc(var(--ab-h) + var(--safe-t));
  padding-top:var(--safe-t);
  display:flex; align-items:center; gap:8px;
  padding-left:16px; padding-right:16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.ab-title{
  font-size:17.5px; font-weight:800; letter-spacing:-.2px;
  flex:1; min-width:0;
  font-variant-numeric:tabular-nums;
}
.ab-title span{color:var(--blue)}
.ab-title .sub{
  display:block; font-size:11px; font-weight:500; color:var(--t3);
  letter-spacing:.1px; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ab-btn{
  width:34px;height:34px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  font-size:18px;color:var(--t2);flex:none;
  transition:background .15s;
}
.ab-btn:active{background:var(--blue-l)}

/* ---------- 内容区 ---------- */
.screen{
  flex:1;
  padding:16px 16px calc(var(--tab-h) + var(--safe-b) + 24px);
  overflow-x:hidden;
}
.screen.no-tabbar{padding-bottom:calc(var(--safe-b) + 24px)}

.loading{
  text-align:center;color:var(--t3);font-size:13px;padding:60px 0;
}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:640px;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  z-index:60;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--t3);transition:color .15s;padding-bottom:3px;
}
.tab-ico{
  font-size:19px;line-height:1;filter:grayscale(1);opacity:.55;
  width:44px;height:27px;display:grid;place-items:center;
  border-radius:14px;transition:.18s;
}
.tab-lb{font-size:9.5px;font-weight:700;letter-spacing:.3px}
.tab.on{color:var(--blue)}
.tab.on .tab-ico{filter:none;opacity:1;background:var(--blue-l)}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tab-h) + 30px);
  transform:translate(-50%,20px);
  background:rgba(18,29,40,.94); color:#fff;
  padding:10px 18px; border-radius:99px;
  font-size:13px; font-weight:500;
  opacity:0; pointer-events:none; transition:.25s;
  z-index:200; max-width:88vw; text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(18,29,40,.45);
  backdrop-filter:blur(3px);
  z-index:150;display:grid;place-items:center;padding:20px;
}
.modal{
  background:var(--card);border-radius:var(--r-lg);
  padding:24px;width:100%;max-width:400px;
  box-shadow:var(--shadow-lg);
  max-height:80vh;overflow-y:auto;
}

/* ---------- 工具类 ---------- */
.mb0{margin-bottom:0!important}
.mt8{margin-top:8px}
.mt14{margin-top:14px}
.mt20{margin-top:20px}
.center{text-align:center}
.muted{color:var(--t3)}
.small{font-size:12.5px}
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{display:flex;flex-wrap:wrap;gap:8px}
.grow{flex:1;min-width:0}
.hidden{display:none!important}

/* hidden 属性必须永远生效（作者 display 不能压过它，否则 modal 遮罩常驻全屏） */
[hidden]{display:none!important}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view-anim{animation:fadeUp .22s ease}