/* notion-design 토큰 */
:root {
  --background: #f9f9f8;
  --text-primary: #000000;
  --text-muted: #a39e98;
  --text-sub: #615d59;
  --accent: #0075de;
  --line: #dfdcd9;
  --shadow-card: 0 1px 3px #00000003, 0 3px 7px #00000005, 0 7px 15px #00000005, 0 14px 28px #0000000a, 0 23px 52px #0000000d;
  --ease: cubic-bezier(.16,1,.3,1);
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--background);
  color: var(--text-primary);
  font: 400 16px/1.5 "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
main { max-width: 1057px; margin: 0 auto; padding: 32px 16px 48px; }

.brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 24px 16px 0;
}
.brand .app-icon { width: 32px; height: 32px; border-radius: 8px; }
.brand .wordmark { height: 24px; width: auto; }

.section-title {
  display: flex; align-items: center; gap: 4px;
  font-size: 28px; font-weight: 700; line-height: 1.2;
  margin-bottom: 32px;
}
.section-title svg { width: 24px; height: 24px; }

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px);
  gap: 32px 24px;
  list-style: none; padding: 0;
}
.book { color: inherit; text-decoration: none; display: block; animation: popIn 500ms var(--ease) both; }
.book:nth-child(2) { animation-delay: 80ms; }
.book:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* 표지 */
.cover {
  position: relative; overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 4px 8px 8px 4px;
  padding: 24px 20px;
  color: #fff;
  box-shadow: var(--shadow-card), inset 8px 0 0 #00000014;
  transition: transform 300ms var(--ease);
}
.book:hover .cover { transform: translateY(-8px); }
.cover .kicker { font-size: 12px; letter-spacing: .08em; opacity: .85; }
.cover .name { font-size: 32px; font-weight: 800; line-height: 1.2; margin-top: 12px; word-break: keep-all; }
.cover .rank {
  position: absolute; left: 16px; bottom: 4px;
  font-size: 72px; font-weight: 800; line-height: 1;
  text-shadow: 0 4px 16px #00000029;
}
.cover .icon { position: absolute; right: -24px; bottom: -24px; width: 140px; height: 140px; opacity: .18; }
.elec  { background: linear-gradient(160deg, #097fe8, #1313ba); }
.arch  { background: linear-gradient(160deg, #1aae39, #005bab); }

/* 책 정보 */
.title { font-size: 20px; font-weight: 700; margin-top: 16px; }
.meta  { color: var(--text-muted); font-size: 16px; }
.count { font-size: 20px; font-weight: 700; margin-top: 8px; }
.count small { font-size: 16px; font-weight: 400; color: var(--text-sub); }

@keyframes popIn { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .book, .cover { animation: none; transition: none; } }

/* 과목 페이지 */
.brand a { display: flex; align-items: center; gap: 8px; }
.back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-sub); text-decoration: none; font-size: 14px;
  padding: 4px 8px; margin-left: -8px; border-radius: 6px;
}
.back:hover { background: #e6f3fe; color: var(--accent); }

.hero {
  margin-top: 16px; padding: 32px; border-radius: 12px; color: #fff;
  box-shadow: var(--shadow-card);
  animation: popIn 500ms var(--ease) both;
}
.hero .kicker { font-size: 14px; opacity: .85; }
.hero h1 { font-size: 32px; line-height: 1.2; margin-top: 8px; }
.hero p { margin-top: 8px; opacity: .9; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hbtn {
  padding: 8px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none;
}
.hbtn:hover { opacity: .9; }
.hbtn:disabled { background: #ffffff29; color: #ffffffa6; cursor: default; }
.hbtn[aria-expanded="true"] { background: #e6f3fe; color: var(--accent); }
.wrong-subs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 10px; background: #0000001f; }
.wrong-subs[hidden] { display: none; }
.wrong-subs .hbtn { font-size: 13px; padding: 6px 12px; }
.ywrong {
  width: 100%; margin-top: 12px; padding: 8px; border: 0; border-radius: 8px; cursor: pointer;
  background: #fdd3cd; color: #f64932; font: inherit; font-size: 14px; font-weight: 700;
}
.ywrong:hover { background: #f64932; color: #fff; }
.qsrc { font-size: 12px; color: var(--text-muted); margin: 0 0 8px 4px; }
.qsrc b { color: var(--accent); }
.oldtag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #fff5e0; box-shadow: inset 0 0 0 1px #ffb110; color: var(--text-primary); font-size: 12px; font-weight: 700; }
.resume { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 8px 12px;
  border-radius: 10px; background: #e6f3fe; color: var(--accent); font-size: 14px; font-weight: 700; }
.mockform { padding: 24px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.mockform .range { display: flex; align-items: center; gap: 8px; }
.mockform select { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.mockform p { max-width: 480px; font-size: 14px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check small { font-weight: 400; color: var(--text-muted); }
.acts { white-space: nowrap; }
.acts .btn-ghost { margin-left: 4px; }
.stats span { padding: 4px 12px; border-radius: 999px; background: #ffffff29; font-size: 14px; font-weight: 700; }

.years {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 16px; margin-top: 32px;
}
.year {
  background: #fff; border-radius: 10px; padding: 16px;
  box-shadow: inset 0 0 0 1px #0f0f0f1a;
  animation: popIn 500ms var(--ease) both;
}
.year h2 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
.rounds { list-style: none; padding: 0; display: grid; gap: 8px; }
.rounds li { display: flex; gap: 8px; }
.round {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--background); box-shadow: inset 0 0 0 1px #0f0f0f1a;
  color: inherit; text-decoration: none;
  transition: background 150ms, color 150ms, transform 150ms var(--ease);
}
.round b { font-size: 16px; }
.round span { font-size: 14px; color: var(--text-muted); }
.round:hover { background: #e6f3fe; color: var(--accent); transform: translateX(4px); }
.year h2 { display: flex; align-items: baseline; justify-content: space-between; }
.year h2 small { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-left: auto; }
/* 연도별 접기: 처음엔 모두 접힘, 연도 줄을 누르면 펼침 */
.years { align-items: start; }
.year summary { list-style: none; cursor: pointer; }
.year summary::-webkit-details-marker { display: none; }
.year summary h2 { margin: 0; }
.year summary h2::after {
  content: ""; width: 8px; height: 8px; margin: 0 4px 0 12px; align-self: center;
  border: solid var(--text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 150ms var(--ease);
}
.year[open] summary h2 { margin-bottom: 12px; }
.year[open] summary h2::after { transform: rotate(225deg); }

/* 풀이 횟수: 다 풀면 한 번 누름 */
.cnt {
  flex: none; width: 48px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: var(--background); box-shadow: inset 0 0 0 1px #0f0f0f1a;
  font: inherit; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums;
  transition: background 150ms, transform 150ms var(--ease);
}
li.done .cnt { background: #1aae391a; box-shadow: inset 0 0 0 1px #1aae3966; color: #1aae39; font-weight: 700; }
.round:focus-visible, .back:focus-visible, .go:focus-visible, .choice:focus-visible, .opt:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hero, .year { animation: none; } }

/* 회차 페이지 */
.subjects { margin-top: 16px; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.subjects b { display: inline-block; min-width: 52px; }
.subjects small { opacity: .75; }
.pdf { padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.panel { margin-top: 24px; background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px #0f0f0f1a; overflow-x: auto; }
.sheet { width: 100%; border-collapse: collapse; min-width: 560px; }
.sheet th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.sheet td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet td small { display: block; font-size: 14px; color: var(--text-sub); }
.muted { color: var(--text-muted); }
.pass { color: #1aae39; }
.fail { color: #f64932; }
.go {
  display: inline-block; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px;
  background: #e6f3fe; color: var(--accent); transition: background 150ms, color 150ms;
}
.go:hover { background: var(--accent); color: #fff; }
.sheet tr.total td { background: var(--background); }
.sheet tr.total small { display: inline; font-size: 14px; }
.switch { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.switch small { font-weight: 400; color: var(--text-muted); }

/* 버튼 */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-width: 96px;
  padding: 8px 16px; border-radius: 10px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: opacity 150ms;
}
.btn-primary { background: var(--accent); color: #fff; border: 0; }
.btn-ghost { background: #fff; color: var(--text-primary); border: 1px solid var(--line); }
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled, .btn-ghost:disabled { background: var(--line); color: var(--text-muted); border-color: var(--line); cursor: default; }

/* 풀이 화면: 상단바 + 문제(2단) + OMR 답안지 */
.exambar {
  position: sticky; top: 0; z-index: 10; background: #fff;
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}
.etitle { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etitle span { color: var(--text-sub); margin-left: 4px; }
.mode { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e6f3fe; color: var(--accent); margin-left: 8px; }
.timer {
  font-size: 14px; color: var(--text-sub); font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; background: var(--background); box-shadow: inset 0 0 0 1px #0f0f0f1a;
}
.timer.done { color: var(--accent); }

.exam {
  display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 24px; align-items: start;
  max-width: 1280px; margin: 0 auto; padding: 24px 24px 48px;
}
.exam main { max-width: none; margin: 0; padding: 0; }
.qgrid { columns: 2 360px; column-gap: 16px; }
.qgrid.single { columns: 1; max-width: 920px; margin: 0 auto; }  /* 1문제씩: 문제를 크게 */
.qgrid.single .qcard { padding: 24px; }

.qcard {
  break-inside: avoid; background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px #0f0f0f1a; animation: popIn 300ms var(--ease) both; scroll-margin-top: 88px;
}
.qcard.flash { box-shadow: inset 0 0 0 2px var(--accent); }
/* 문제 글자: 수식·그림 조각은 글자 크기(em)에 맞춰 커짐 */
.qtext, .opts { font-size: calc(16px * var(--qfs, 1)); line-height: 1.65; }
.qgrid.single .qtext, .qgrid.single .opts { font-size: calc(19px * var(--qfs, 1)); }
.qtext img, .opts img { vertical-align: middle; max-width: 100%; object-fit: contain; }
.qtext sup, .qtext sub, .opts sup, .opts sub { font-size: .65em; }
.qno { position: relative; font-weight: 700; }
.opts { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; }
.opts.half { grid-template-columns: 1fr 1fr; }
.opt {
  display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.opt:hover:not(:disabled) { background: #0075de14; }
.opt:disabled { cursor: default; }
.om { position: relative; flex: none; }

/* 선택 표시(파랑) · 채점 표시(빨강 동그라미/빗금): 번호 글자 가운데에 겹침 */
.mk { position: absolute; pointer-events: none; left: 50%; top: 50%; width: 1.5em; height: 1.5em; transform: translate(-50%, -50%); }
.qno .mk { width: 2em; height: 2em; left: 40%; }
.sel { border: 2.5px solid var(--accent); border-radius: 50%; background: #0075de14; }
.ring { border: 2.5px solid #f64932; border-radius: 50%; }
.tick { overflow: visible; }
.tick path { fill: none; stroke: #f64932; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.qact { display: flex; justify-content: flex-end; margin-top: 8px; }

/* 보기 위치를 못 찾은 문제용 버튼 */
.choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.choice {
  height: 48px; border: 0; border-radius: 10px; cursor: pointer; font-size: 24px;
  background: var(--background); box-shadow: inset 0 0 0 1px #0f0f0f1a; color: var(--text-primary);
}
.choice:hover:not(:disabled) { background: #e6f3fe; color: var(--accent); }
.choice:disabled { cursor: default; color: var(--text-muted); }
.choice.sel { border: 0; border-radius: 10px; background: var(--accent); color: #fff; }
.choice.ans { background: #1aae39; color: #fff; box-shadow: none; }
.choice.miss { background: #f64932; color: #fff; box-shadow: none; }

.qnav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.btn-ghost.small { min-width: 0; padding: 4px 12px; font-size: 14px; }
.omr-toggle { display: none; white-space: nowrap; }
.omr-toggle[aria-pressed="true"] { background: #e6f3fe; color: var(--accent); border-color: #e6f3fe; }
.btn-primary.block { width: 100%; }

/* OMR 답안지: 종이 답안지처럼 — 고른 칸은 칠하고, 채점 후 정답 칸에 파란 동그라미 */
.omr {
  position: sticky; top: 72px; display: flex; flex-direction: column;
  max-height: calc(100vh - 96px); padding: 12px;
  background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px #0f0f0f1a;
}
.omr-head { text-align: center; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.omr-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.omr-rows li { display: grid; grid-template-columns: 36px repeat(4, 1fr); align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.omr-rows li.here .omr-n { color: var(--accent); }
.omr-rows li.skip .omr-n { color: #f64932; background: #f649321a; border-radius: 6px; }
.omr-n { position: relative; border: 0; background: none; padding: 4px 0; font: inherit; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.nring, .xmark { left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); }
.nring { border: 2px solid #f64932; border-radius: 50%; }
.xmark { width: 22px; height: 22px; }
.xmark path { fill: none; stroke: #f64932; stroke-width: 2; stroke-linecap: round; }
.bub {
  width: 28px; height: 28px; margin: auto; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none;
  font: inherit; font-size: 20px; line-height: 1; color: var(--text-sub); cursor: pointer;
}
.bub:hover:not(:disabled) { color: var(--accent); }
.bub:disabled { cursor: default; }
.bub.fill { background: #615d59; color: #fff; }
.bub.right { box-shadow: 0 0 0 2px var(--accent); }
.omr-foot { padding-top: 12px; text-align: center; }
.omr-count { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.omr-score { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.omr-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.omr-links { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: 14px; }
.omr-links a { color: var(--text-sub); }
.omr-warn { margin-top: 8px; font-size: 12px; color: #f64932; }


/* 모바일(서재·회차·과목표): 표지 2열, 제목·표 글자는 줄여서 한 줄로 */
@media (max-width: 600px) {
  main { padding: 16px 12px 32px; }
  .brand { padding-top: 16px; }
  .section-title { font-size: 20px; margin-bottom: 16px; }
  .section-title svg { width: 18px; height: 18px; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .cover { padding: 12px; }
  .cover .kicker { font-size: 10px; letter-spacing: 0; }
  .cover .name { font-size: 20px; margin-top: 8px; }
  .cover .rank { left: 12px; font-size: 44px; }
  .cover .icon { width: 88px; height: 88px; right: -16px; bottom: -16px; }
  .title, .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .title { font-size: 14px; margin-top: 8px; }
  .meta, .count small { font-size: 12px; }
  .count { font-size: 14px; margin-top: 4px; }

  .hero { padding: 20px 16px; }
  .hero .kicker { font-size: 12px; }
  .hero h1 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero p, .subjects { font-size: 14px; }
  .stats span, .pdf { font-size: 12px; padding: 4px 10px; }

  .sheet { min-width: 0; font-size: 13px; }
  .sheet th, .sheet td { padding: 8px 6px; white-space: nowrap; }
  .sheet th { font-size: 11px; }
  .sheet th:first-child, .sheet td:first-child { padding-left: 12px; }
  .sheet td small { font-size: 12px; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; }
  .sheet tr.total td { white-space: normal; font-size: 12px; }
  .go { padding: 6px 8px; font-size: 12px; }
  .m-hide { display: none; }
  .switch { font-size: 14px; }
  .switch small { font-size: 12px; }
}

/* 모바일: 문제 1단 + 오른쪽 좁은 답안지 (참고: CBT 모바일 화면), 답안지는 버튼으로 켜고 끔 */
@media (max-width: 900px) {
  .exambar { padding: 8px; gap: 6px; }
  .exambar .btn-ghost.small { padding: 4px 8px; font-size: 12px; }
  .omr-toggle { display: inline-flex; gap: 4px; }
  .etitle { line-height: 1.3; text-align: left; }
  .etitle b, .etitle span { display: block; overflow: hidden; text-overflow: ellipsis; }
  .etitle b { font-size: 13px; }
  .etitle span { margin: 0; font-size: 11px; }
  #omrCnt { display: none; }
  .mode { display: none; }
  .timer { padding: 4px 6px; font-size: 11px; }
  .exam { grid-template-columns: minmax(0, 1fr) 96px; gap: 4px; padding: 4px 4px 32px; }
  body.omr-off .exam { grid-template-columns: 1fr; }
  body.omr-off .omr { display: none; }
  .qgrid { columns: 1; }
  .qgrid.single .qcard, .qcard { padding: 10px 8px; margin-bottom: 4px; border-radius: 6px; }
  .qtext, .opts, .qgrid.single .qtext, .qgrid.single .opts { font-size: calc(15px * var(--qfs, 1)); }
  .opts.half { grid-template-columns: 1fr; }
  .opts.tiny { grid-template-columns: 1fr 1fr; }  /* 숫자처럼 아주 짧은 보기는 모바일에서도 2개씩 */
  .omr { top: 56px; max-height: calc(100vh - 60px); padding: 2px; border-radius: 6px; }
  .omr-head { padding: 2px 0 4px; font-size: 12px; }
  .omr-rows li { grid-template-columns: 18px repeat(4, 1fr); padding: 1px 0; }
  .omr-n { font-size: 11px; padding: 2px 0; }
  .bub { width: 17px; height: 17px; font-size: 13px; }
  .nring { width: 17px; height: 17px; border-width: 1.5px; }
  .xmark { width: 14px; height: 14px; }
  .omr-foot { padding-top: 6px; }
  .omr-foot .btn-primary { min-width: 0; padding: 6px 4px; font-size: 12px; border-radius: 8px; }
  .omr-count, .omr-sub, .omr-warn { font-size: 11px; }
  .omr-score { font-size: 14px; }
  .omr-links { flex-direction: column; gap: 2px; font-size: 12px; }
  .qnav { gap: 8px; margin-top: 4px; }
  .qnav .btn-ghost { min-width: 64px; padding: 4px 12px; font-size: 13px; border-radius: 8px; }
  .qnav .muted { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .qcard { animation: none; } }

/* 로그인 · 비밀번호 변경 (server.py 가 만드는 화면) */
body.gate { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.gatebox {
  width: min(360px, 100%); display: grid; gap: 12px; padding: 32px 24px;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-card); text-align: center;
}
.gatebox .brand { padding: 0 0 8px; }
.gatemsg { color: var(--text-sub); font-size: 14px; }
.gatein {
  width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 20px; text-align: center; letter-spacing: .2em; background: var(--background);
}
.gatein:focus { outline: none; border-color: var(--accent); }
.gatebox .btn-primary { padding: 12px; }
.gatelink, .foot a { color: var(--text-muted); font-size: 14px; }
.foot { display: flex; justify-content: center; gap: 16px; padding: 32px 16px; }

/* 앱: 당겨서 새로고침 막기 · 종료 안내 */
html, body { overscroll-behavior-y: none; }
.toast {
  position: fixed; left: 50%; bottom: 48px; z-index: 1000; transform: translate(-50%, 16px);
  padding: 12px 20px; border-radius: 999px; background: #191918; color: #fff; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }