/* 陪跑班進度儀表板 — 套用 Pacer 設計系統 */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--text-body);
  line-height: var(--leading-normal);
  font-size: var(--text-base);
}
.hidden { display: none !important; }
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ── 頂欄 AppShell ── */
.topbar {
  background: var(--color-surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--gutter); height: 64px;
  position: sticky; top: 0; z-index: 200;
}
.topbar-brand { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.topbar-brand img { height: 32px; display: block; flex: none; }
.topbar-brand .wm { font-size: var(--text-lg); font-weight: var(--weight-black);
  color: var(--text-strong); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.cohort-switch { flex: none; }
.cohort-switch .u-select { max-width: 150px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.topbar-week { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--brand-ink);
  background: var(--brand-tint-faint); border: 1px solid var(--green-200);
  padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.topbar-week .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px var(--green-100); flex: none; }
.topbar-week strong { color: var(--brand-ink); }
.user-pill { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.u-select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.u-select { appearance: none; font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: var(--weight-bold); color: var(--text-strong); background: var(--color-surface);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 8px 34px 8px 13px; cursor: pointer; max-width: 180px; min-height: 44px; }
.u-select-wrap :is(i, svg) { position: absolute; right: 10px; width: 15px; height: 15px;
  color: var(--text-muted); pointer-events: none; }

/* ── 分頁 ── */
.tabs { background: var(--color-surface); border-bottom: 1px solid var(--border);
  display: flex; gap: var(--space-1); padding: 0 var(--gutter); overflow-x: auto;
  position: sticky; top: 64px; z-index: 100; }
.tab { display: inline-flex; align-items: center; gap: 7px; background: none; border: none;
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-bold);
  color: var(--text-muted); padding: 15px 16px; cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out); }
.tab :is(i, svg) { width: 17px; height: 17px; flex: none; }
.tab:hover { color: var(--text-strong); }
.tab.on { color: var(--brand-ink); border-bottom-color: var(--brand); }
.tab-coach { margin-left: auto; }

@media (max-width: 560px) {
  .topbar {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    height: 64px;
    min-height: 64px;
    gap: var(--space-2);
    padding: 8px var(--space-3);
  }
  .topbar-brand { grid-column: 1; grid-row: 1; min-width: 32px; }
  .topbar-brand img { width: 32px; height: 32px; }
  .topbar-brand .wm { overflow: hidden; text-overflow: ellipsis; }
  .cohort-switch { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; }
  .cohort-switch .u-select { width: 100%; max-width: none; }
  .topbar-week { grid-column: 3; grid-row: 1; padding-left: 9px; padding-right: 9px; }
  .user-pill { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; margin: 0; }
  .user-pill .pds-avatar { display: none; }
  .user-pill .u-select-wrap { width: 100%; }
  .user-pill .u-select { width: 100%; max-width: none; }
  .topbar:has(.cohort-switch:not(.hidden)) {
    height: 116px;
    grid-template-rows: 48px 44px;
  }
  .tabs { top: 64px; }
  body:has(.cohort-switch:not(.hidden)) .tabs { top: 116px; }
  .tabs:not(:has(.tab-coach:not(.hidden))) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tabs:not(:has(.tab-coach:not(.hidden))) .tab {
    min-width: 0;
    justify-content: center;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

@media (max-width: 360px) {
  .cohort-switch .u-select { padding-left: 10px; padding-right: 28px; }
  .topbar-week { font-size: var(--text-xs); }
  .user-pill .u-select { padding-left: 10px; padding-right: 28px; }
}

/* ── 版面 ── */
.wrap { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-16); }
.view { display: none; }
.view.on { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .view.on { animation: fadeUp var(--dur-slow) var(--ease-out); }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.loading { text-align: center; color: var(--text-muted); padding: var(--space-16) 0; }
.error { background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-700);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }

/* ── 卡片 Card ── */
.card { background: var(--color-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--card-pad); margin-bottom: var(--space-4); }
.card--subtle { background: var(--color-surface-subtle); border-color: transparent; box-shadow: none; }
.card--accent { border-left: 4px solid var(--brand); }
.c-label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); }

/* ── 按鈕 Button ── */
.btn { display: inline-flex; align-items: center; gap: 7px; background: var(--brand);
  color: var(--text-on-brand); border: 1.5px solid transparent; border-radius: var(--radius-md);
  padding: 9px 18px; font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: var(--weight-bold); cursor: pointer; min-height: 44px;
  transition: background var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--brand-strong); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn :is(i, svg) { width: 16px; height: 16px; flex: none; }
.btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--cream-100); color: var(--text-strong); }

/* ── 我的進度 hero ── */
.hero-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.hero-name { font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--text-strong);
  margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); }
.hero-encourage { font-size: var(--text-base); color: var(--text-body); margin-bottom: var(--space-5); }
.hero-encourage b { color: var(--brand-ink); }
.hero-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; }

/* ── 獎學金 banner ── */
.award-banner { background: linear-gradient(130deg, var(--gold-100), var(--gold-200));
  border: 1px solid var(--gold-500); border-radius: var(--radius-lg);
  padding: var(--space-6); margin-bottom: var(--space-4); }
.award-banner h3 { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--gold-700);
  flex-wrap: wrap; line-height: var(--leading-snug); }
.award-banner h3 svg { width: 22px; height: 22px; }
.award-banner p { font-size: var(--text-sm); color: var(--ink-700); margin-top: 6px; }
.award-banner b { color: var(--gold-700); font-weight: var(--weight-bold); }
.award-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.award-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 560px; }
.award-table th, .award-table td { padding: 10px 8px; border-bottom: 1px solid var(--hairline); text-align: center; }
.award-table thead th { font-family: var(--font-data); font-size: var(--text-xs);
  color: var(--text-muted); font-weight: var(--weight-bold); }
.award-table td:first-child, .award-table th:first-child { text-align: left;
  font-weight: var(--weight-bold); color: var(--text-strong); }
.award-table .wk-ok { color: var(--green-700); }
.award-table .wk-miss { color: var(--red-600); }
.award-table .wk-na { color: var(--text-faint); }
.award-table svg { width: 16px; height: 16px; vertical-align: middle; }

/* ── Toast 容器 ── */
.toast-wrap { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }

/* =========================================================================
   設計系統元件樣式（逐字取自各元件 useStyles / kit.css）
   ========================================================================= */

/* StatusPill */
.pds-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
  font-weight: var(--weight-bold); font-size: var(--text-sm); line-height: 1;
  padding: 6px 13px 6px 11px; border-radius: var(--radius-pill); white-space: nowrap;
  border: 1.5px solid transparent; }
.pds-status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pds-status--ontrack { background: var(--green-100); color: var(--green-800); border-color: var(--green-200); }
.pds-status--behind  { background: var(--amber-100); color: var(--amber-700); border-color: var(--amber-200); }
.pds-status--missed  { background: var(--red-100); color: var(--red-700); border-color: var(--red-200); }
.pds-status--lg { font-size: var(--text-base); padding: 8px 16px 8px 14px; }

/* ProgressBar */
.pds-prog { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pds-prog__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pds-prog__label { font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: var(--weight-medium); color: var(--text-muted); }
.pds-prog__val { font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold); color: var(--text-strong); }
.pds-prog__track { position: relative; width: 100%; background: var(--cream-200);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-inset); overflow: hidden; }
.pds-prog__track--sm { height: 6px; }
.pds-prog__track--md { height: 10px; }
.pds-prog__track--lg { height: 16px; }
.pds-prog__fill { height: 100%; border-radius: var(--radius-pill); background: var(--brand);
  transition: width var(--dur-bar) var(--ease-out), background var(--dur-base) var(--ease-out); min-width: 0; }
.pds-prog__fill--ontrack { background: var(--brand); }
.pds-prog__fill--behind { background: var(--amber-500); }
.pds-prog__fill--missed { background: var(--red-500); }

/* StatBlock */
.pds-stat { display: flex; flex-direction: column; gap: 2px; }
.pds-stat__label { font-family: var(--font-sans); font-size: var(--text-xs);
  font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.pds-stat__value { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-data);
  font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); color: var(--text-strong); line-height: 1; }
.pds-stat__unit { font-size: 0.5em; font-weight: var(--weight-bold); color: var(--text-muted); }
.pds-stat--sm .pds-stat__value { font-size: var(--text-xl); }
.pds-stat--md .pds-stat__value { font-size: var(--text-3xl); }
.pds-stat--brand .pds-stat__value { color: var(--brand-ink); }
.pds-stat--gold .pds-stat__value { color: var(--gold-700); }

/* RankBadge */
.pds-rank { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--radius-sm); font-family: var(--font-data);
  font-weight: var(--weight-bold); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  background: var(--cream-200); color: var(--text-muted); }
.pds-rank--1 { background: var(--gold-200); color: var(--gold-700); box-shadow: inset 0 0 0 1.5px var(--gold-500); }
.pds-rank--2 { background: var(--cream-200); color: var(--ink-700); box-shadow: inset 0 0 0 1.5px var(--ink-300); }
.pds-rank--3 { background: var(--coral-100); color: var(--coral-700); box-shadow: inset 0 0 0 1.5px var(--coral-400); }

/* TaskRow */
.pds-task { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--hairline); }
.pds-task:last-child { border-bottom: none; }
.pds-task__mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; margin-top: 1px; }
.pds-task__mark svg { width: 13px; height: 13px; stroke-width: 3.5; stroke-linecap: round;
  stroke-linejoin: round; fill: none; }
.pds-task__mark--done { background: var(--brand); }
.pds-task__mark--done svg { stroke: #fff; }
.pds-task__mark--todo { background: var(--color-surface); border: 2px solid var(--border-strong); }
.pds-task__mark--missed { background: var(--red-100); border: 2px solid var(--red-200); }
.pds-task__mark--missed svg { stroke: var(--red-600); }
.pds-task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pds-task__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pds-task__name { font-family: var(--font-sans); font-size: var(--text-base);
  font-weight: var(--weight-medium); color: var(--text-strong); }
.pds-task--done .pds-task__name { color: var(--text-muted); }
.pds-task__opt { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-bold);
  color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; }
.pds-task__ask { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-size: var(--text-sm); color: var(--accent-ink); background: var(--accent-tint);
  padding: 3px 10px 3px 8px; border-radius: var(--radius-pill); align-self: flex-start;
  max-width: 100%; flex-wrap: wrap; }
.pds-task__ask svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.pds-task__ask b { font-weight: var(--weight-bold); overflow-wrap: anywhere; }

/* WeekChip */
.pds-week { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-data);
  font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  background: var(--cream-200); color: var(--text-body); border: 1px solid var(--border); }
.pds-week__num { font-variant-numeric: tabular-nums; }
.pds-week--current { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--green-200); }
.pds-week--current .pds-week__pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.pds-week--past { opacity: 0.8; }
.pds-week--future { background: transparent; color: var(--text-faint); border-style: dashed; }

/* Avatar */
.pds-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: var(--weight-bold);
  color: #fff; overflow: hidden; user-select: none; line-height: 1;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.25); }
.pds-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.pds-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.pds-avatar--md { width: 40px; height: 40px; font-size: 15px; }
.pds-avatar--lg { width: 56px; height: 56px; font-size: 21px; }
.pds-avatar--ring { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--brand); }

/* Badge */
.pds-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans);
  font-weight: var(--weight-bold); font-size: var(--text-xs); line-height: 1; padding: 4px 9px;
  border-radius: var(--radius-pill); background: var(--cream-200); color: var(--text-body); white-space: nowrap; }
.pds-badge--ontrack { background: var(--status-ontrack-tint); color: var(--green-800); }
.pds-badge--behind { background: var(--status-behind-tint); color: var(--amber-700); }
.pds-badge--missed { background: var(--status-missed-tint); color: var(--red-700); }
.pds-badge--gold { background: var(--status-scholarship-tint); color: var(--gold-700); }
.pds-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Toast */
.pds-toast { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-sans);
  background: var(--color-surface); color: var(--text-body); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px 16px 12px 14px;
  font-size: var(--text-sm); max-width: 360px; }
.pds-toast__icon { display: inline-flex; flex: none; width: 22px; height: 22px; align-items: center;
  justify-content: center; border-radius: 50%; }
.pds-toast__icon svg { width: 14px; height: 14px; }
.pds-toast__msg { font-weight: var(--weight-medium); color: var(--text-strong); }
.pds-toast--success .pds-toast__icon { background: var(--green-100); color: var(--green-700); }
.pds-toast--error .pds-toast__icon { background: var(--red-100); color: var(--red-600); }
@media (prefers-reduced-motion: no-preference) {
  .pds-toast--enter { animation: pds-toast-in var(--dur-base) var(--ease-out); }
}
@keyframes pds-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 版面 kit-*（取自 ui_kits/dashboard/kit.css，僅取本專案用到者） */
.kit-stats { display: flex; gap: var(--space-8); }
.kit-weekblock { margin-bottom: var(--space-4); }
.kit-weekhead { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.kit-weekhead .due { font-size: var(--text-xs); color: var(--text-faint); }
.kit-matrixwrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.kit-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.kit-matrix__task { width: 136px; }
.kit-matrix__student { width: 56px; }
.kit-matrix th, .kit-matrix td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--hairline); }
.kit-matrix thead th { font-weight: 700; color: var(--text-muted); font-size: var(--text-xs);
  white-space: nowrap; vertical-align: bottom; }
.kit-matrix .namecell { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.kit-matrix tbody tr:hover { background: var(--cream-50); }
.kit-matrix svg { width: 16px; height: 16px; vertical-align: middle; }
.kit-cell-done { color: var(--brand); }
.kit-cell-miss { color: var(--ink-300); }
.kit-grouphead th { background: var(--cream-100); font-family: var(--font-data);
  font-size: var(--text-2xs); letter-spacing: 0.04em; color: var(--text-muted); padding: 6px 8px; }
.kit-lb { display: flex; flex-direction: column; }
.kit-lbrow { display: flex; align-items: center; gap: var(--space-3); padding: 12px 8px;
  border-bottom: 1px solid var(--hairline); }
.kit-lbrow:last-child { border-bottom: none; }
.kit-lbrow.me { background: var(--green-50); border-radius: var(--radius-md); }
.kit-lbrow .nm { font-weight: 700; color: var(--text-strong); min-width: 96px; }
.kit-lbrow .bar { flex: 1; min-width: 80px; }
.kit-lbrow .pct { font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-weight: 700; width: 46px; text-align: right; color: var(--text-strong); }
.kit-login { max-width: 380px; margin: 60px auto; }
.kit-input { width: 100%; font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-strong);
  background: var(--color-surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 11px 14px; }
.kit-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.kit-flexbetween { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.kit-muted { color: var(--text-muted); font-size: var(--text-sm); }
.matrix-check { width: 24px; height: 24px; accent-color: var(--brand); cursor: pointer; }
.matrix-check:disabled { cursor: wait; opacity: 0.4; }

@media (max-width: 760px) {
  :root { --gutter: var(--space-3); --card-pad: var(--space-4); }
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar-brand .wm { display: none; }
  .tabs { padding: 0 var(--space-2); }
  .wrap { padding: var(--space-5) var(--space-3) var(--space-12); }
  .kit-stats { width: 100%; justify-content: space-between; gap: var(--space-4); }
  .kit-weekhead { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .toast-wrap { left: var(--space-3); right: var(--space-3); transform: none; align-items: stretch; }
  .pds-toast { max-width: none; width: 100%; }
}

@media (max-width: 560px) {
  .kit-matrix th, .kit-matrix td { padding-left: 5px; padding-right: 5px; }
  .kit-matrix thead th:not(.namecell) { white-space: normal; overflow-wrap: anywhere; }
  .kit-lbrow {
    display: grid;
    grid-template-columns: 30px 32px minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: 12px 4px;
  }
  .kit-lbrow .nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kit-lbrow .bar {
    grid-column: 3 / -1;
    grid-row: 2;
    min-width: 0;
  }
  .kit-lbrow .pds-status {
    grid-column: 3 / -1;
    grid-row: 3;
    justify-self: start;
  }
  .kit-lbrow .pct {
    grid-column: 4;
    grid-row: 1;
    width: auto;
    min-width: 42px;
  }
}

@media (max-width: 420px) {
  .topbar-week { padding: 5px 9px; font-size: var(--text-xs); gap: 5px; }
  .topbar-week .pulse { width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--green-100); }
  .u-select-wrap { flex: 1 1 auto; }
  .u-select { width: 100%; max-width: 112px; padding-left: 10px; padding-right: 30px; }
  .user-pill .pds-avatar { width: 28px; height: 28px; font-size: 12px; }
}