/* v4 外觀 (我的) and 班別顏色與符號 (班型與班別時間), from assets/meow-v4-theme.js. Prefix v4th-; tokens from meow-v4.css. */

/* ── 外觀: three tiles with a tiny paper preview each ── */
.v4th-look{gap:10px}
.v4th-look .v4-note{margin:0}
.v4th-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.v4th-mode{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 6px;border-radius:12px;border:1px solid var(--v4-tile-line);background:var(--v4-field);cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.v4th-mode.on{padding:7px 5px;border:2px solid var(--v4-pick-line);background:var(--v4-pick-bg)}
.v4th-mode:focus-visible{outline:2px solid var(--v4-brown);outline-offset:2px}
/* The previews always show both papers, whatever the current theme is. */
.v4th-prev{position:relative;display:block;width:100%;height:46px;border-radius:8px;overflow:hidden;border:1px solid rgba(59,36,23,.18);background:linear-gradient(180deg,#eadfcb,#e1d1b6)}
.v4th-prev.dark{background:linear-gradient(180deg,#2b2019,#1e1611)}
.v4th-prev.system{background:linear-gradient(90deg,#e6d8c0 0 50%,#251b15 50% 100%)}
.v4th-prev i{position:absolute;left:8px;right:8px;height:13px;border-radius:4px;border:1px solid #8a6a4f;background:#f6eee1}
.v4th-prev i::before{content:"";position:absolute;inset:1.5px;border:1px dashed rgba(168,132,100,.6);border-radius:2.5px}
.v4th-prev i:first-child{top:7px}
.v4th-prev i:last-child{top:25px;right:22px}
.v4th-prev.dark i{border-color:#7a5c43;background:#35281f}
.v4th-prev.dark i::before{border-color:rgba(224,186,142,.34)}
/* 跟隨系統: each card is half paper, half walnut, split where the preview is. */
.v4th-prev.system i,.v4th-prev.system i:last-child{right:8px;background:linear-gradient(90deg,#f6eee1 0 50%,#35281f 50% 100%)}
.v4th-prev.system i::before{border-color:rgba(168,132,100,.6)}
.v4th-mode-name{display:flex;align-items:center;gap:4px;font-size:13px;line-height:18px;font-weight:700;color:var(--v4-sub);white-space:nowrap}
.v4th-mode-name .v4-ic{font-size:14px}
.v4th-mode.on .v4th-mode-name{font-family:var(--v4-serif);font-weight:900;color:var(--v4-pick-ink)}

/* ── 班別顏色與符號 ── */
.v4-sub-page>.v4th-extra{margin-top:12px}
.v4th-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0;padding:8px 0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.v4th-row>b{flex:1;min-width:0}
.v4th-row>em{flex:none;font-style:normal;font-size:13px;line-height:18px;font-weight:500;color:var(--v4-muted);white-space:nowrap}
.v4-chip.v4th-chip{max-width:58%;padding:3px 9px;font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis}
.v4-chip.v4th-chip .v4-emo{font-size:13px}
.v4th-edit{display:flex;flex-direction:column;gap:8px;padding:0 0 12px}
.v4th-lbl{margin:0;font-size:12px;line-height:16px;font-weight:700;color:var(--v4-muted)}
.v4th-sws{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.v4th-sw{display:grid;place-items:center;height:40px;min-width:0;margin:0;padding:0;border-radius:10px;border:1.5px solid;font-family:var(--v4-sans);font-size:15px;line-height:20px;font-weight:900;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v4th-sw .v4-ic{font-size:18px;stroke-width:2.6}
.v4th-sw.on{box-shadow:0 0 0 2px var(--v4-card),0 0 0 4px var(--v4-ink)}
.v4th-ems{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.v4th-em{height:40px;min-width:0;margin:0;padding:0;border-radius:10px;border:1px solid var(--v4-tile-line);background:var(--v4-field);font-size:20px;line-height:1;cursor:pointer;color:var(--v4-ink);-webkit-tap-highlight-color:transparent}
.v4th-em.none{font-family:var(--v4-sans);font-size:13px;font-weight:700;color:var(--v4-sub)}
.v4th-em.on{border:2px solid var(--v4-pick-line);background:var(--v4-pick-bg)}
.v4th-em.none.on{color:var(--v4-pick-ink)}
.v4-page .v4-link.v4th-reset{align-self:flex-start;margin-top:2px}
.v4th-desc{padding:0 4px}