/* 组件样式。类名 = RN 组件名的 kebab-case，见 interaction-spec.md「组件表」。 */
*{box-sizing:border-box;margin:0;padding:0}
body{-webkit-font-smoothing:antialiased;font-family:var(--f-latin);color:var(--c-ink);background:var(--c-bg)}
.device{width:390px;height:844px;position:relative;overflow:hidden;background:var(--c-bg)}
.device.tall{height:auto;min-height:844px;padding-bottom:40px}
.device.white{background:var(--c-card)}
.ipad{width:1194px;height:834px;position:relative;overflow:hidden;background:var(--c-bg);display:flex}
.zh{font-family:var(--f-cjk)}
.ipa{font-family:var(--f-ipa);font-weight:400;letter-spacing:.1px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center}
.grow{flex:1;min-width:0}
.muted{color:var(--c-muted)}
.page{padding:0 var(--s-page)}

/* StatusBar / HomeIndicator */
.status-bar{height:47px;display:flex;justify-content:space-between;align-items:center;padding:4px 26px 0 34px;font:600 16px/1 Inter,sans-serif}
.status-bar .icons{display:flex;gap:6px;align-items:center}
.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--c-ink)}

/* NavBar（内页顶栏） */
.nav-bar{height:52px;display:flex;align-items:center;gap:var(--s-2);padding:0 12px}
.nav-bar .title{flex:1;text-align:center;font:600 var(--t-headline) var(--f-cjk)}
.icon-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-card);box-shadow:var(--sh-ring);flex:none}
.icon-btn.plain{background:transparent;box-shadow:none}
.icon-btn.sm{width:34px;height:34px}

/* LargeTitle 页头 */
.large-header{padding:6px var(--s-page) 12px}
.large-header h1{font:600 var(--t-title1) var(--f-latin);letter-spacing:-.3px}
.large-header p{font:400 var(--t-footnote) var(--f-cjk);color:var(--c-muted);margin-top:2px}

/* Card */
.card{background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--sh-ring)}
.card.pad{padding:16px}
.card-dark{background:var(--c-card-dark);color:var(--c-on-dark);border-radius:var(--r-xl)}
.pastel{border-radius:var(--r-lg)}
.pastel.lilac{background:var(--c-lilac)} .pastel.sky{background:var(--c-sky)} .pastel.mint{background:var(--c-mint)} .pastel.pink{background:var(--c-pink)}
.eyebrow{font:600 var(--t-caption) var(--f-cjk);letter-spacing:.3px;color:var(--c-on-pastel-2)}
.section-title{display:flex;justify-content:space-between;align-items:baseline;margin:22px 2px 10px}
.section-title h2{font:600 18px/24px var(--f-cjk)}
.section-title a{font:500 var(--t-footnote) var(--f-cjk);color:var(--c-muted);display:flex;align-items:center;gap:2px;text-decoration:none}

/* Buttons */
.btn{height:48px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--f-cjk);border:0;padding:0 20px;white-space:nowrap}
.btn-primary{background:var(--c-primary);color:var(--c-on-dark)}
.btn-secondary{background:var(--c-primary-tint);color:var(--c-primary-ink)}
.btn-ghost{background:var(--c-card);color:var(--c-ink);box-shadow:var(--sh-ring)}
.btn.sm{height:36px;font-size:14px;padding:0 14px}
.btn.block{display:flex;width:100%}

/* Chip / Segmented */
.chip{height:32px;border-radius:var(--r-pill);padding:0 12px;display:inline-flex;align-items:center;gap:6px;font:500 var(--t-footnote) var(--f-cjk);background:var(--c-card);box-shadow:var(--sh-ring);color:var(--c-ink-2);white-space:nowrap}
.chip.on{background:var(--c-ink);color:#fff;box-shadow:none}
.chip.tint{background:var(--c-primary-tint);color:var(--c-primary-ink);box-shadow:none}
.chip .count{font:600 12px/1 var(--f-num);opacity:.85}
.segmented{display:flex;background:#E9EAF1;border-radius:var(--r-pill);padding:3px;gap:2px}
.segmented span{flex:1;height:34px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font:600 var(--t-callout) var(--f-cjk);color:var(--c-ink-2)}
.segmented span.on{background:var(--c-card);color:var(--c-ink);box-shadow:0 1px 3px rgba(20,20,40,.10)}

/* Tags */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font:600 var(--t-micro) var(--f-cjk);letter-spacing:.2px;white-space:nowrap}
.tag.pos{background:#EFEFF4;color:var(--c-ink-2)}
.tag.m{background:var(--c-masc-tint);color:var(--c-masc)}
.tag.f{background:var(--c-fem-tint);color:var(--c-fem)}
.tag.freq{background:var(--c-mint-50);color:var(--c-good)}
.tag.exam{background:var(--c-primary-tint);color:var(--c-primary-ink)}
.tag.due{background:var(--c-again-tint);color:var(--c-again)}
.tag.new{background:var(--c-lilac-50);color:var(--c-primary-ink)}
.tag.learning{background:var(--c-hard-tint);color:var(--c-hard)}
.tag.review{background:var(--c-good-tint);color:var(--c-good)}

/* AudioPill：音标 + 喇叭合一（沿用 v1 规范） */
.audio-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--c-primary-tint);color:var(--c-primary-ink);font:500 14px/1 var(--f-ipa)}
.audio-pill .g{font:600 11px/1 var(--f-cjk);color:var(--c-primary-ink);opacity:.9}
.audio-pill.playing{background:var(--c-primary);color:#fff}
.audio-pill.playing .g{color:#fff}
.audio-btn{width:36px;height:36px;border-radius:50%;background:var(--c-primary-tint);display:flex;align-items:center;justify-content:center;flex:none}
.audio-btn.sm{width:30px;height:30px}

/* SearchField */
.search-field{height:48px;border-radius:var(--r-md);background:var(--c-card);box-shadow:var(--sh-ring);display:flex;align-items:center;gap:10px;padding:0 8px 0 14px;font:400 16px/1 var(--f-latin)}
.search-field.focus{box-shadow:0 0 0 2px var(--c-primary)}
.search-field .ph{color:var(--c-muted);font-family:var(--f-cjk);font-size:15px}
.search-field .caret{display:inline-block;width:2px;height:20px;background:var(--c-primary);margin-left:1px;vertical-align:middle}

/* ListRow */
.list{background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--sh-ring);overflow:hidden}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:56px;position:relative}
.list-row + .list-row::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--c-line)}
.list-row .lead{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.list-row .w{font:600 17px/22px var(--f-latin)}
.list-row .sub{font:400 var(--t-footnote) var(--f-cjk);color:var(--c-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .trail{font:500 var(--t-caption) var(--f-cjk);color:var(--c-muted);text-align:right;flex:none}

/* ProgressBar */
.progress{height:6px;border-radius:3px;background:#E6E6EE;overflow:hidden;display:flex}
.progress i{display:block;height:100%}

/* TabBar */
.tab-bar{position:absolute;left:0;right:0;bottom:0;height:83px;background:var(--c-card);border-top:1px solid var(--c-line);display:flex;padding:6px 12px 0}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10px/1.2 var(--f-cjk);color:var(--c-muted)}
.tab .pill{width:54px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.tab.on{color:var(--c-primary-ink)} .tab.on .pill{background:var(--c-primary-tint)}

/* Sheet / Popover */
.scrim{position:absolute;inset:0;background:var(--c-scrim)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--c-card);border-radius:24px 24px 0 0;box-shadow:var(--sh-sheet);padding:8px var(--s-page) 34px}
.grabber{width:36px;height:5px;border-radius:3px;background:var(--c-line-strong);margin:0 auto 12px}
.popover{position:absolute;background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--sh-float),var(--sh-ring);padding:14px}
.popover .arrow{position:absolute;width:14px;height:14px;background:var(--c-card);transform:rotate(45deg);box-shadow:2px 2px 0 0 rgba(0,0,0,0)}

/* Toast */
.toast{position:absolute;left:50%;transform:translateX(-50%);background:var(--c-ink);color:#fff;border-radius:var(--r-pill);height:40px;padding:0 8px 0 16px;display:flex;align-items:center;gap:12px;font:500 14px/1 var(--f-cjk);white-space:nowrap;box-shadow:var(--sh-float)}
.toast b{color:#C9C8F8;font-weight:600;padding:0 8px}

/* Skeleton */
.sk{background:#E9EAF0;border-radius:8px}
.sk.shimmer{background:linear-gradient(90deg,#E9EAF0 0%,#F3F4F8 50%,#E9EAF0 100%)}

/* Annotation（只在设计稿里出现的标注，不实现） */
.anno{position:absolute;font:500 11px/14px var(--f-cjk);color:#fff;background:#E2483D;border-radius:6px;padding:3px 6px;white-space:nowrap;z-index:50}