/* HSK5-Einführung · eigenständiges Layout, nutzt Tokens aus reader.css + pack.css */

.hsk-cert-note{
  display:flex;align-items:flex-start;gap:8px;
  background:color-mix(in srgb, var(--red) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius:10px;padding:10px 14px;margin:0 0 24px;
  font-size:12px;color:var(--muted);line-height:1.5;max-width:640px;margin-left:auto;margin-right:auto;
}
.hsk-cert-note .ico{flex:0 0 auto}

.hsk-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;max-width:900px;margin:0 auto}
.hsk-cat-card{display:block;text-align:center;border:2px solid var(--line);border-radius:14px;padding:18px 14px;background:var(--paper-deep);color:inherit;text-decoration:none;transition:transform .15s}
.hsk-cat-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.hsk-cat-emoji{font-size:28px}
.hsk-cat-name{font-family:Georgia,serif;font-size:14.5px;margin-top:6px}
.hsk-cat-count{font-size:11px;color:var(--muted);margin-top:4px}
.hsk-cat-bar{height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:10px}
.hsk-cat-bar i{display:block;height:100%;background:var(--accent)}
.hsk-cat-pct{font-size:10px;color:var(--muted);margin-top:5px}

.hsk-word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:30px}
.hsk-word-card{position:relative;border:2px solid var(--skin,var(--line));border-radius:12px;padding:12px 8px;background:var(--paper-deep);text-align:center;font:inherit;color:inherit;cursor:pointer;display:block;width:100%;transition:transform .18s ease,box-shadow .18s ease}
.hsk-word-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hsk-word-card .hint{position:absolute;bottom:5px;right:6px;font-size:9px;opacity:.32;pointer-events:none}
.hsk-word-card:hover .hint,.hsk-word-card:focus-visible .hint{opacity:.7}
.hsk-word-card .emoji{font-size:18px}
.hsk-word-card .zh{font-family:Wenkai,serif;font-size:26px;line-height:1.2;margin-top:2px}
.hsk-word-card .py{color:var(--accent);font-size:11px;margin-top:2px}
.hsk-word-card .de{color:var(--muted);font-size:10.5px;margin-top:2px;min-height:2.2em}
.hsk-word-card .skin{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--skin,var(--muted));font-weight:700;margin-top:4px}

.hsk-dialog-list{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto 30px}
.hsk-dialog-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper-deep)}
.hsk-dialog-zh{font-family:Wenkai,serif;font-size:20px;line-height:1.6}
.hsk-dialog-zh .kw{color:var(--accent);font-weight:700}
.hsk-dialog-py{color:var(--muted);font-size:12px;margin-top:4px}
.hsk-dialog-de{color:var(--ink);font-size:13px;margin-top:6px}
.hsk-dialog-listen{margin-top:10px;border:1px solid var(--line);border-radius:99px;padding:5px 14px;background:none;cursor:pointer;font-size:11.5px;color:inherit}
.hsk-dialog-listen:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.hsk-dialog-gap{color:var(--muted);font-size:10.5px;margin-top:6px}

.hsk-section-title{font-family:Georgia,serif;font-size:17px;text-align:center;margin:36px 0 4px}
.hsk-section-sub{text-align:center;color:var(--muted);font-size:12.5px;max-width:50ch;margin:0 auto 18px}