/* V4 · Clinic —— 白底灰绿、方正网格、等宽数字：像专业护肤实验室的工具 */
:root {
  --canvas: #F4F5F2; --surface: #FFFFFF; --ink: #1C2420; --ink-2: #3E4A44; --muted: #7A857F; --faint: #B4BDB8;
  --champagne: #5E7D6A; --champagne-2: #CFE0D4; --sage: #5E7D6A; --line: rgba(28, 36, 32, .09); --line-2: rgba(28, 36, 32, .16); --tint: rgba(28, 36, 32, .04);
  --on-ink: #F4F7F4; --img-bg: #EEF0EC; --soft: #F3F6F2; --soft-2: #E7EEE8; --dark: #1C2420; --ok-bg: #E8F0EA; --ink-hover: #2C3832;
  --glass: rgba(255, 255, 255, .82); --tab-bg: rgba(255, 255, 255, .92); --frame: linear-gradient(145deg, #DDE2DE, #AEB7B1);
  --desk-bg: linear-gradient(90deg, #F4F5F2 50%, #E9EDE9 50%); --grain: 0;
  --serif: "SF Mono", "JetBrains Mono", "Menlo", "Noto Sans Mono", monospace;
  --r-xl: 14px; --r-lg: 12px; --r: 10px; --r-sm: 8px;
  --shadow: 0 1px 2px rgba(28, 36, 32, .06); --shadow-lg: 0 12px 30px -16px rgba(28, 36, 32, .25);
  --spring: cubic-bezier(.2, .8, .2, 1);
}
.wordmark { font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: -.02em; }
.look-name, .look__title { font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: -.03em; font-size: 38px; }
.num { letter-spacing: -.04em; font-weight: 500; }
.mark { border-radius: 10px; font-family: var(--sans); font-style: normal; font-weight: 700; background: var(--champagne); color: #fff; }
.switch, .tabs, .who, .chip, .chip--btn, .btn, .cta, .cta i, .tabbar, .tabbar button, .pill, .search, .select, .tag, .fab, .iconbtn { border-radius: 10px; }
.tabbar { box-shadow: 0 0 0 1px var(--line-2), 0 10px 24px -14px rgba(28, 36, 32, .3); }
.tabbar button { color: var(--muted); } .tabbar button.is-on { color: var(--ink); background: var(--soft-2); } .tabbar button.is-on .ico { color: var(--champagne); }
.shell { padding: 0; background: none; box-shadow: none; } .core { border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--line); }
.hero { aspect-ratio: 1 / 1; }
.hero__veil { background: linear-gradient(180deg, transparent 40%, rgba(16, 24, 20, .82)); }
.stats { gap: 8px; } .stat, .stat + .stat { background: var(--surface); box-shadow: 0 0 0 1px var(--line); border-radius: 10px; }
.look__head { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.look__head::before, .look__head::after { display: none; }
.look__title { color: var(--ink); } .look__intro { color: var(--ink-2); } .look__meta li { background: var(--soft-2); color: var(--ink-2); }
.look__sum { box-shadow: 0 -1px 0 var(--line); } .look__sum .num { color: var(--champagne); } .look__sum small { color: var(--muted); }
.look__thumbs span { box-shadow: 0 0 0 2px var(--surface); }
.kicker--light { color: var(--muted); }
.title { letter-spacing: -.01em; }
.device { border-radius: 44px; } .device::before, .screen, .drawer, .modal { border-radius: 36px; }
.drawer__panel { border-radius: 16px 16px 0 0; }
.intro__tag { font-family: var(--sans); font-style: normal; color: var(--champagne); font-size: 14px; letter-spacing: .08em; }