@font-face { font-family:"CantoMore"; src:url("https://cdn.cantomore.com/font/v1.0.0/cantomore.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"CantoMore Local"; src:local("CantoMore"),local("CantoMore 廣多啲"); font-style:normal; font-weight:400; font-display:swap; }
:root { color-scheme: light; --ink:#102b43; --muted:#657b8f; --navy:#062942; --blue:#0966bd; --teal:#62cbc7; --paper:#f3f8fa; --surface:#fff; --line:#d8e4ea; --red:#a83943; --red-soft:#fff3f3; --brand-ink:#173f3b; --brand-muted:#56706c; --brand-cream:#f7f3ea; --radius:18px; --font-cantomore:"CantoMore","CantoMore Local","Noto Serif CJK TC","Songti TC",serif; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans CJK HK","PingFang HK","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 8% 0%,#dff3f4,transparent 30rem),var(--paper); line-height:1.55; }
button,input,select,textarea { color:inherit; font:inherit; }
button,select { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
.skip-link { position:fixed; z-index:10; top:.7rem; left:.7rem; padding:.6rem .8rem; color:#fff; background:var(--navy); border-radius:8px; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.hero { color:var(--brand-ink); background:var(--brand-cream); border-bottom:4px solid var(--teal); }
.hero__inner { width:min(1120px,calc(100% - 2rem)); margin:auto; padding:2rem 0 2.25rem; display:grid; grid-template-columns:1fr auto; gap:1.4rem 2rem; align-items:end; }
.brand-line { grid-column:1/-1; width:max-content; display:inline-flex; gap:.48rem; align-items:center; color:var(--brand-ink); }
.brand-symbol { width:auto; height:30px; display:block; object-fit:contain; }
.brand-name-zh { font-family:"Noto Serif HK","Noto Serif TC","Noto Serif CJK TC",serif; font-size:1.28rem; font-weight:800; line-height:1; letter-spacing:.02em; }
.brand-name-en { color:var(--brand-muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.62rem; font-weight:650; line-height:1; letter-spacing:.095em; text-transform:uppercase; }
.eyebrow,.section-kicker { margin:0 0 .45rem; color:#247570; font-size:.72rem; font-weight:850; letter-spacing:.13em; }
h1,h2,p { margin-top:0; }
.cantomore-font { font-family:var(--font-cantomore); font-weight:400; font-synthesis:none; font-feature-settings:"rclt" 1; }
.hero h1 { margin-bottom:0; font-size:clamp(2.3rem,6vw,3.8rem); }
.hero__copy > p:last-child { max-width:650px; margin:1rem 0 0; color:var(--brand-muted); }
.hero-count { min-width:10rem; padding:1rem 1.2rem; display:grid; gap:.1rem; color:var(--brand-ink); text-align:center; background:#ffffffa3; border:1px solid #bfd3ca; border-radius:var(--radius); }
.hero-count strong { font-size:2rem; line-height:1.1; }
.hero-count span { color:var(--brand-muted); font-size:.85rem; }
.page-shell { width:min(1120px,calc(100% - 2rem)); margin:auto; padding:1.65rem 0 3.5rem; }
.notice { margin-bottom:1rem; padding:.9rem 1rem; display:flex; gap:.6rem; color:#7b2028; background:var(--red-soft); border:1px solid #e8aeb3; border-radius:12px; }
.toolbar { padding:1.35rem 1.45rem 1.45rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 44px #082a4510; }
.section-heading h2 { margin:0 0 1.1rem; font-size:1.55rem; }
.section-heading--split { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.view-tabs { display:flex; gap:.35rem; margin:0 0 1rem; padding:.28rem; background:#eef4f6; border:1px solid #dce7eb; border-radius:12px; }
.view-tab { min-height:2.5rem; padding:.48rem .8rem; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:9px; font-weight:750; }
.view-tab span { margin-left:.25rem; color:inherit; font-size:.78rem; font-variant-numeric:tabular-nums; }
.view-tab:hover { color:var(--ink); background:#ffffffaa; }
.view-tab.is-active { color:var(--navy); background:#fff; border-color:#cddde5; box-shadow:0 3px 12px #082a4510; }
.filters { display:grid; grid-template-columns:14rem minmax(0,1fr) 8rem 7rem auto; gap:.75rem; align-items:end; }
.field { display:grid; gap:.3rem; }
.field > span,.field small { font-size:.8rem; font-weight:700; }
.field small { color:var(--muted); font-weight:400; }
input,select,textarea { width:100%; min-height:2.8rem; padding:.68rem .8rem; background:#fff; border:1px solid #b8cbd6; border-radius:10px; }
input:focus,select:focus,textarea:focus,button:focus-visible { outline:3px solid #5fc4c166; outline-offset:2px; border-color:var(--blue); }
.field--small { width:auto; }
.button { min-height:2.65rem; padding:.55rem .9rem; border:1px solid transparent; border-radius:9px; font-weight:700; }
.button--quiet { background:#eef3f6; border-color:#ccd7de; }
.button--quiet:hover { background:#e2ebf0; }
.button--primary { color:#fff; background:var(--blue); }
.button--primary:hover { background:#064d99; }
.result-bar { min-height:2.8rem; padding:1.05rem .2rem .65rem; display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.9rem; }
.copy-status { color:var(--blue); text-align:right; }
.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 44px #082a4510; }
table { width:100%; border-collapse:collapse; }
th,td { padding:1rem 1.1rem; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); }
th { color:var(--muted); background:#f7fafb; font-size:.78rem; letter-spacing:.04em; }
tbody tr:last-child td { border-bottom:0; }
.term-with-action { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.term-labels { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }
.term { display:inline-flex; min-width:0; gap:0; align-items:center; font-size:1.9rem; line-height:1.2; letter-spacing:.03em; }
.content-warning { padding:.15rem .42rem; color:var(--red); background:var(--red-soft); border:1px solid #edc1c5; border-radius:999px; font-size:.7rem; font-weight:850; white-space:nowrap; }
.reading-with-play { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }
.reading-with-play .text-button { margin:0; }
.candidate-list { display:flex; flex-wrap:wrap; gap:.35rem; }
.candidate-chip { padding:.2rem .45rem; color:#164f7a; background:#eef7ff; border:1px solid #c8dff0; border-radius:999px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.8rem; }
.jyutping-list,.audio-preview { display:inline-flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.jyutping-token { display:inline-flex; min-height:2rem; align-items:center; padding:.25rem .5rem; color:#07589f; background:#eef7ff; border:1px solid #b9d8ef; border-radius:999px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:750; }
.jyutping-token.is-invalid { color:var(--red); background:var(--red-soft); border-color:#edc1c5; text-decoration:line-through; }
.default-badge { padding:.13rem .38rem; color:#286b65; background:#e9f8f5; border-radius:999px; font-size:.68rem; font-weight:850; }
.audio-preview { min-height:2.4rem; margin:-.35rem 0 .9rem; padding:.45rem; background:#f5fafb; border:1px dashed #bfd2dc; border-radius:10px; }
.audio-preview:empty::before { content:"輸入粵拼後，格式檢查會在此顯示"; color:var(--muted); font-size:.78rem; }
.gloss-with-report { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }
.gloss-with-report .text-button { margin:0; }
.text-button { min-height:2rem; margin:.15rem .25rem 0 0; padding:.3rem .58rem; color:var(--blue); background:#edf6ff; border:1px solid #bfdaf1; border-radius:8px; font-size:.78rem; font-weight:750; white-space:nowrap; }
.text-button:hover { background:#dfefff; }
.text-button--report { color:var(--red); background:var(--red-soft); border-color:#edc1c5; }
.pagination { padding:1rem 0; display:flex; justify-content:center; align-items:center; gap:1rem; }
.pagination span { min-width:7rem; text-align:center; color:var(--muted); font-size:.9rem; }
footer { padding:1.4rem 1rem 2.5rem; color:var(--muted); text-align:center; font-size:.82rem; }
footer p { max-width:72rem; margin:.35rem auto; }
dialog { width:min(92vw,540px); padding:0; color:var(--ink); background:var(--surface); border:0; border-radius:var(--radius); box-shadow:0 24px 70px #082a4540; }
dialog::backdrop { background:#082a4570; backdrop-filter:blur(3px); }
.font-inspector,.error-dialog { padding:1.3rem; }
.dialog-heading { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.dialog-heading h2 { margin:0; font-size:1.35rem; }
.dialog-close { width:2.2rem; height:2.2rem; flex:0 0 auto; padding:0; color:var(--muted); background:transparent; border:0; border-radius:8px; font-size:1.7rem; line-height:1; }
.dialog-close:hover { background:#edf3f6; }
.font-specimen { min-height:min(13rem,35vw); margin:1.2rem 0 .75rem; display:grid; place-items:center; color:var(--navy); background:#f5fafb; border:1px solid var(--line); border-radius:12px; }
.font-specimen__text { font-size:clamp(4rem,16vw,8rem); line-height:1.15; }
.dialog-reading { margin:0 0 1rem; color:var(--muted); font-family:ui-monospace,SFMono-Regular,monospace; }
.report-term { margin:1rem 0; padding:.7rem; color:var(--navy); background:#f5fafb; border-radius:9px; overflow-wrap:anywhere; font-size:1.35rem; }
fieldset { margin:0 0 1rem; padding:.75rem; border:1px solid var(--line); border-radius:10px; }
legend { padding:0 .35rem; font-size:.82rem; font-weight:750; }
.radio-option { display:inline-flex; gap:.45rem; align-items:center; margin-right:1rem; font-weight:650; }
.radio-option input { width:auto; }
.report-field { margin-bottom:1rem; }
.dialog-intro { margin:.9rem 0 1rem; color:var(--muted); }
.add-entry-grid { display:grid; grid-template-columns:9rem minmax(0,1fr); gap:.85rem; }
.add-entry-grid .field--wide { grid-column:1/-1; }
.honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.form-status { min-height:1.5rem; margin:.4rem 0; color:var(--blue); font-size:.9rem; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
@media (max-width:700px) {
  .hero__inner { width:min(100% - 1.5rem,1120px); grid-template-columns:1fr; gap:1rem; padding:1.25rem 0 1.45rem; }
  .brand-symbol { height:25px; }
  .brand-name-zh { font-size:1.08rem; }
  .brand-name-en { font-size:.58rem; }
  .hero h1 { font-size:clamp(2.15rem,12vw,3.2rem); }
  .hero__copy > p:last-child { margin-top:.75rem; font-size:.9rem; }
  .hero-count { width:max-content; min-width:0; grid-template-columns:auto auto; gap:.5rem; align-items:baseline; text-align:left; }
  .hero-count strong { font-size:1.5rem; }
  .page-shell { width:min(100% - 1.25rem,1120px); padding-top:1rem; }
  .toolbar { padding:1.05rem; border-radius:16px; }
  .section-heading h2 { margin-bottom:0; font-size:1.35rem; }
  .section-heading--split { align-items:flex-start; }
  .section-heading--split > .button { min-height:2.35rem; padding:.42rem .65rem; font-size:.8rem; }
  .view-tabs { margin-top:.9rem; }
  .view-tab { flex:1; padding-inline:.45rem; }
  .filters { grid-template-columns:minmax(0,1fr) 7rem auto; gap:.7rem; }
  .field--edition,.field--search { grid-column:1/-1; }
  .field--small { width:7rem; }
  .button--reset { width:auto; align-self:end; padding-inline:1rem; }
  .result-bar { align-items:start; flex-direction:column; gap:.2rem; }
  .copy-status { text-align:left; }
  .table-wrap { overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; }
  table,thead,tbody,tr,th,td { display:block; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  tbody { display:grid; gap:.75rem; }
  tbody tr { padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:0 9px 28px #082a450b; }
  tbody tr:last-child { border-bottom:1px solid var(--line); }
  td { display:grid; grid-template-columns:3.7rem minmax(0,1fr); gap:.65rem; align-items:center; padding:.36rem 0; border:0; }
  td::before { content:attr(data-label); color:var(--muted); font-size:.74rem; font-weight:800; letter-spacing:.06em; }
  .term-cell { display:block; padding:0 0 .75rem; margin-bottom:.4rem; border-bottom:1px solid #e8eef2; }
  .term-cell::before { display:none; }
  .term-with-action { justify-content:flex-start; gap:.75rem; }
  .term { font-size:2rem; }
  .reading-with-play,.gloss-with-report { min-width:0; gap:.5rem; }
  .gloss-with-report > span:first-child { min-width:0; overflow-wrap:anywhere; }
  .pagination { gap:.55rem; }
  .pagination .button { padding-inline:.72rem; }
  .pagination span { min-width:6.5rem; }
}
@media (max-width:420px) { .page-shell,.hero__inner { width:min(100% - 1rem,1120px); } .toolbar { padding:.9rem; } .radio-option { margin:0 .7rem .35rem 0; } .add-entry-grid { grid-template-columns:1fr; } .add-entry-grid .field--wide { grid-column:auto; } }