/* ----------------------------------------------------------------------- *
 * TARA Practice Platform — styles
 * Two palettes: the app shell (clean light UI) and the exam portal, which is
 * a close clone of the real TARA test interface (two-tone blue chrome).
 * ----------------------------------------------------------------------- */
:root {
  --tara-blue: #1f63a8;
  --tara-blue-dark: #1a548f;
  --tara-blue-light: #3a7bc0;
  --ink: #1d2733;
  --muted: #5b6976;
  --line: #dde3ea;
  --bg: #f4f6f9;
  --accent: #1f63a8;
  --good: #1f9d5b;
  --bad: #d23a3a;
  --warn: #e8a13a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--ink); background: var(--bg);
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); }
.hidden { display: none !important; }

/* ----------------------------- app shell ------------------------------- */
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--tara-blue) 0%, var(--tara-blue-dark) 100%);
  color: #fff; padding: 11px 20px;
  box-shadow: 0 2px 8px rgba(15, 50, 90, .18);
}
.topbar #logout-btn { flex: 0 0 auto; }
@media (max-width: 820px) { .topbar .who { display: none; } .topbar .brand small { display: none; } }
.topbar .brand { font-weight: 700; font-size: 19px; color: #fff; letter-spacing: .3px;
  display: flex; align-items: center; gap: 8px; }
.topbar .brand::before {
  content: ""; width: 26px; height: 26px; border-radius: 7px;
  background: #fff; color: var(--tara-blue); display: inline-block;
  background-image: radial-gradient(circle at 50% 45%, var(--tara-blue) 0 5px, transparent 6px),
                    linear-gradient(var(--tara-blue), var(--tara-blue));
  background-size: 100% 100%, 100% 4px; background-position: center, center bottom 6px;
  background-repeat: no-repeat;
}
.topbar .brand small { color: rgba(255,255,255,.75); font-weight: 400; font-size: 12px; }
.topbar .spacer { flex: 1; }
.topbar .who { color: rgba(255,255,255,.85); font-size: 14px; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav button {
  border: 1px solid transparent; background: none; padding: 8px 14px;
  border-radius: 8px; color: rgba(255,255,255,.9); font-size: 14px; font-weight: 500;
}
.topbar nav button:hover { background: rgba(255,255,255,.14); }
.topbar nav button.active { background: #fff; color: var(--tara-blue); font-weight: 600; }
.topbar .btn.secondary { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.topbar .btn.secondary:hover { background: rgba(255,255,255,.26); }

.view { flex: 1; padding: 30px 26px; max-width: 1120px; width: 100%; margin: 0 auto; }
.view h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.2px; }
.view h2 { font-size: 18px; margin: 28px 0 12px; }
.subtle { color: var(--muted); margin: 0 0 18px; }

.btn {
  background: var(--tara-blue); color: #fff; border: none;
  padding: 10px 18px; border-radius: 8px; font-size: 15px; font-weight: 600;
}
.btn:hover { background: var(--tara-blue-dark); }
.btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--bg); }
.btn.danger { background: var(--bad); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px;
        box-shadow: 0 1px 3px rgba(20, 40, 70, .05); }
.grid { display: grid; gap: 16px; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tile { text-align: left; position: relative; overflow: hidden;
        transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; }
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
        background: var(--tara-blue); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(20, 50, 90, .14); }
.tile h3 { margin: 0 0 6px; font-size: 17px; color: var(--tara-blue-dark); }
.tile p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.tile .big { font-size: 30px; font-weight: 700; color: var(--tara-blue); }

/* course practice workbooks */
.wb-topic { margin-bottom: 20px; }
.wb-topic h2 { margin: 20px 0 10px; }
.wb-tile { min-height: 78px; }
.wb-tile h3 { font-size: 21px; letter-spacing: .5px; margin-bottom: 4px; }
.btn.secondary.ca.on { background: #eaf7ee; color: var(--good); border-color: #bfe6cc; }

/* stat row */
.stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px;
        padding: 16px 20px; min-width: 140px; box-shadow: 0 1px 3px rgba(20, 40, 70, .05);
        border-top: 3px solid var(--tara-blue); }
.stat .n { font-size: 28px; font-weight: 700; color: var(--ink); }
.stat .l { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* analytics — metric cards */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.metric { display: flex; align-items: center; gap: 15px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(20, 40, 70, .05); position: relative; overflow: hidden; }
.metric::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.metric .ic { width: 46px; height: 46px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.metric .n { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.metric .l { color: var(--muted); font-size: 13px; margin-top: 5px; }
.metric.m-blue::before { background: var(--tara-blue); } .metric.m-blue .ic { background: #e7f0fb; }
.metric.m-green::before { background: var(--good); } .metric.m-green .ic { background: #eaf7ee; }
.metric.m-amber::before { background: var(--warn); } .metric.m-amber .ic { background: #fdf1e3; }

/* strengths / weaknesses cards */
.card.sw h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; }
.sw-ico { font-size: 12px; }
.sw-ico.up { color: var(--good); } .sw-ico.down { color: var(--bad); }

/* progress-over-time trend chart */
.trend-card { margin-top: 18px; }
.trend-head { display: flex; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { background: #fff; border: none; padding: 6px 13px; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--tara-blue); color: #fff; font-weight: 600; }
.trend-svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.lg-h { font-size: 12px; color: var(--muted); margin-right: 2px; min-width: 42px; }
.lg { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
  background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--ink); }
.lg:hover { background: #f7f9fb; }
.lg.on { border-color: #c2ccd6; font-weight: 600; }
.lg .swatch { width: 12px; height: 12px; border-radius: 3px; border: 2px solid; box-sizing: border-box; }

/* collapsible "more detail" disclosure */
.disclose { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; padding: 16px 2px 6px; margin-top: 8px;
  font-size: 15px; font-weight: 600; color: var(--tara-blue-dark); }
.disclose .tri { font-size: 12px; transition: none; }
.disclose:hover { color: var(--tara-blue); }

/* teacher: course-mistakes type tabs + workbook blocks */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 6px; }
.tabs .tab { background: none; border: none; padding: 8px 15px; font-size: 14px; font-weight: 600;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; letter-spacing: .3px; }
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.on { color: var(--tara-blue); border-bottom-color: var(--tara-blue); }
.wb-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.wb-head { width: 100%; text-align: left; background: #fff; border: none; padding: 12px 14px;
  font-size: 15px; display: flex; align-items: center; gap: 8px; }
.wb-head:hover { background: #f7f9fb; }
.wb-head .tri { font-size: 12px; color: var(--muted); }
.wb-detail { padding: 2px 14px 14px; }

/* wrong-bank action buttons + choosers */
.wb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.btn.wb-rand { background: var(--good); } .btn.wb-rand:hover { background: #18844c; }
.btn.wb-topic { background: #7c3aed; } .btn.wb-topic:hover { background: #6a29d6; }
.wb-choose { max-width: 580px; margin-top: 12px; }
.wb-choose > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.topic-picks { display: flex; flex-direction: column; gap: 8px; }
.topic-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.topic-pick .check { font-size: 14px; }
.tp-countwrap { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.tp-count.rect { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 13px;
  background: #eef3f8; color: var(--tara-blue-dark); font-weight: 600; cursor: pointer; }
.tp-custom { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }

/* wrong-bank category bars (collapsible) */
.wb-list { display: flex; flex-direction: column; gap: 8px; }
.wb-cat { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.wb-bar { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: none; border-left: 5px solid var(--line); padding: 13px 16px; font-size: 15px; }
.wb-bar:hover { background: #f7f9fb; }
.wb-bar.ct { border-left-color: #1f63a8; }
.wb-bar.ps { border-left-color: #1f9d5b; }
.wb-bar.empty { opacity: .62; }
.wb-bar .tri { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.wb-bar .wb-name { flex: 1; font-weight: 500; }
.wb-recent { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.mini { width: 64px; height: 7px; border-radius: 4px; background: #eef1f5; overflow: hidden; display: inline-block; }
.mini i { display: block; height: 100%; background: var(--tara-blue); border-radius: 4px; }
.wb-bar.ps .mini i { background: var(--good); }
.wb-pct { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.wb-count { min-width: 30px; text-align: center; font-weight: 700; color: var(--ink);
  background: #eef1f5; border-radius: 999px; padding: 2px 10px; font-size: 14px; }
.wb-body { padding: 4px 16px 14px; }
.wb-body table.data { margin-top: 2px; }

/* bar chart (pure CSS, no external libs) */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 210px 1fr 56px; align-items: center; gap: 10px; }
.bar-row .lbl { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #eef1f5; border-radius: 6px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--tara-blue); }
.bar-fill.good { background: var(--good); }
.bar-fill.mid { background: var(--warn); }
.bar-fill.low { background: var(--bad); }
.bar-row .val { font-size: 13px; text-align: right; color: var(--muted); }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
       background: #eef1f5; color: var(--muted); margin-left: 6px; }
.tag.ct { background: #e7f0fb; color: #1f63a8; }
.tag.ps { background: #eaf7ee; color: #1f9d5b; }
.tag.da { background: #fdf1e3; color: #c87f1e; }

/* tables */
table.data { width: 100%; border-collapse: collapse; background: #fff;
             border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.data th, table.data td { text-align: left; padding: 11px 14px; font-size: 14px;
             border-bottom: 1px solid var(--line); }
table.data th { background: #f7f9fb; color: var(--muted); font-weight: 600; }
table.data tr:last-child td { border-bottom: none; }
table.data tr.clickable:hover { background: #f7f9fb; cursor: pointer; }

/* forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: inherit;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 13px; font-size: 13px; user-select: none;
}
.chip.on { background: var(--tara-blue); color: #fff; border-color: var(--tara-blue); }
.chip.ct.on { background: #1f63a8; }
.chip.ps.on { background: #1f9d5b; border-color: #1f9d5b; }
.chip.da.on { background: #c87f1e; border-color: #c87f1e; }

/* vertical question-type list (Custom Practice, full names) */
.type-list { display: flex; flex-direction: column; gap: 6px; }
.type-item { display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 14px; user-select: none; }
.type-item:hover { background: #f7f9fb; }
.type-item.ct { border-left-color: #1f63a8; }
.type-item.ps { border-left-color: #1f9d5b; }
.type-item input { width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer; }
.type-item .tname { flex: 1; }
.type-item .tag { margin-left: auto; }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--ink); cursor: pointer; }
.check input { width: 17px; height: 17px; cursor: pointer; }

.pill { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.ok { background: #eaf7ee; color: var(--good); }
.pill.no { background: #fdeaea; color: var(--bad); }
.pill.na { background: #eef1f5; color: var(--muted); }

.banner { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.banner.err { background: #fdeaea; color: #a02626; }
.banner.info { background: #e7f0fb; color: #1a548f; }

/* ----------------------------- login ----------------------------------- */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #e7f0fb 0%, var(--bg) 55%); }
.login-card { width: 370px; padding-top: 30px; position: relative; overflow: hidden; }
.login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--tara-blue), var(--tara-blue-light)); }
.login-card h1 { text-align: center; color: var(--tara-blue); margin-bottom: 2px; letter-spacing: 1px; }
.login-card .sub { text-align: center; color: var(--muted); margin-top: -2px; margin-bottom: 18px; }

/* ======================================================================= *
 *  EXAM PORTAL — clone of the real TARA interface
 * ======================================================================= */
.exam { position: fixed; inset: 0; display: flex; flex-direction: column;
        background: #fff; z-index: 50; }
.exam-head { background: var(--tara-blue); color: #fff; }
.exam-head .row1 { display: flex; align-items: flex-start; justify-content: space-between;
        padding: 10px 18px 6px; }
.exam-head .section-title { font-size: 26px; font-weight: 600; }
.exam-head .meta { text-align: right; line-height: 1.35; font-size: 15px; }
.exam-head .meta .time { font-weight: 600; }
.exam-head .meta .time::before { content: "🕐 "; }
.exam-head .meta .time.low { color: #ffe14d; }   /* warning when time is running out */
.exam-head .meta .time.crit { color: #ff7a7a; }  /* critical: under a minute */
.exam-head .row2 { background: var(--tara-blue-light); display: flex; justify-content: flex-end;
        align-items: stretch; gap: 0; }
.exam-head .row2 .flag {
  display: flex; align-items: center; gap: 7px; padding: 7px 16px; color: #fff;
  text-decoration: underline; background: none; border: none; font-size: 14px;
}
.exam-head .row2 .flag.on { color: #ffd34d; }
.exam-head .row2 .scheme {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12);
  padding: 7px 14px; border-left: 1px solid rgba(255,255,255,.25);
}
.exam-head .row2 .scheme select {
  background: #fff; border: none; border-radius: 3px; padding: 3px 6px; font-size: 13px;
}

.exam-body { flex: 1; display: flex; min-height: 0; }
.exam-pane { flex: 1; overflow: auto; padding: 18px 22px; }
.exam-pane.left { border-right: 2px solid #c9d2dc; }
.exam-pane.left img { width: 100%; max-width: 1100px; height: auto; display: block;
  cursor: zoom-in; margin: 0 auto; }
.exam-pane.right { flex: 0 0 360px; max-width: 360px; }

/* narrow screens: stack the question above the answers so it can use full width */
@media (max-width: 900px) {
  .exam-body { flex-direction: column; }
  .exam-pane.left { border-right: none; border-bottom: 2px solid #c9d2dc; }
  .exam-pane.right { flex: none; max-width: none; }
}

/* click-to-enlarge lightbox for the question image */
.zoom-back { position: fixed; inset: 0; background: rgba(10, 18, 26, .92); z-index: 80;
  overflow: auto; padding: 18px; cursor: zoom-out; }
.zoom-back img { display: block; margin: 0 auto; width: 100%; max-width: 1500px; height: auto; }
.zoom-hint { position: fixed; top: 14px; right: 18px; color: rgba(255,255,255,.8);
  font-size: 13px; z-index: 81; pointer-events: none; }
.exam-pane .q-prompt { font-size: 16px; margin-bottom: 18px; color: var(--muted); }
.exam-pane.intro { font-size: 16px; line-height: 1.5; }
.exam-pane.intro p { margin: 14px 0; }
.intro-table { border-collapse: collapse; margin: 18px 0; }
.intro-table th, .intro-table td { border: 1px solid #2b2b2b; padding: 7px 24px; text-align: center; }
.intro-table th { font-weight: 700; }
.options { display: flex; flex-direction: column; gap: 4px; }
.option {
  display: flex; align-items: center; gap: 14px; padding: 12px 10px;
  border-radius: 8px; border: 1px solid transparent; background: none;
  text-align: left; font-size: 16px; width: 100%;
}
.option:hover { background: #f2f6fb; }
.option .radio {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #7a8794;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.option.sel .radio { border-color: var(--tara-blue); }
.option.sel .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tara-blue); }
.option .letter { font-weight: 600; min-width: 18px; }
.option input.open { flex: 1; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 15px; }

.exam-foot { background: var(--tara-blue); color: #fff; display: flex;
        align-items: stretch; justify-content: space-between; }
.exam-foot button {
  background: none; border: none; color: #fff; font-size: 15px;
  display: flex; align-items: center; gap: 7px; padding: 12px 18px;
}
.exam-foot button:hover { background: var(--tara-blue-dark); }
.exam-foot .left, .exam-foot .right { display: flex; }
.exam-foot .end { font-weight: 600; }
.exam-foot .pause { font-weight: 600; background: rgba(255,255,255,.14); }
.exam-foot .pause:hover { background: rgba(255,255,255,.28); }

/* resume (paused session) cards on the home page */
.resume-wrap { margin: 4px 0 22px; }
.resume-list { display: flex; flex-direction: column; gap: 10px; }
.resume-card { display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--line); border-left: 5px solid var(--warn); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(20, 40, 70, .05); }
.resume-card .rc-body { flex: 1; }
.resume-card .rc-title { font-weight: 600; font-size: 15px; }
.resume-card .rc-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.resume-card .rc-x { border: none; background: none; color: var(--muted); font-size: 22px;
  line-height: 1; padding: 2px 8px; border-radius: 8px; }
.resume-card .rc-x:hover { background: #fdeaea; color: var(--bad); }

/* navigator modal — table style, matching the real TARA Navigator */
.modal-back { position: fixed; inset: 0; background: rgba(15,25,35,.5); z-index: 60;
        display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 12px; padding: 22px; max-width: 560px; width: 90%;
        max-height: 80vh; overflow: auto; }
.modal h3 { margin-top: 0; }
.nav-modal { padding: 0; overflow: hidden; }
.nav-title { background: var(--tara-blue); color: #fff; padding: 10px 16px; font-weight: 600; }
.nav-title span { font-weight: 400; opacity: .9; }
.nav-table { width: 100%; border-collapse: collapse; }
.nav-table th, .nav-table td { text-align: left; padding: 9px 16px; font-size: 14px;
  border-bottom: 1px solid var(--line); }
.nav-table th { background: #eef3f8; color: #444; font-weight: 600; }
.nav-table .nav-row { cursor: pointer; }
.nav-table .nav-row:hover { background: #f2f6fb; }
.nav-table .nav-row.current { background: #fff6c9; }
.nav-table .st.uns, .nav-table .st.inc { color: var(--bad); }
.nav-table .st.ok { color: var(--good); }
.nav-foot { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--line); font-size: 14px; }

/* exam colour schemes (accessibility, like the real test) */
.exam.scheme-sepia .exam-pane { background: #f4ecd8; }
.exam.scheme-dark .exam-body { background: #15202b; }
.exam.scheme-dark .exam-pane { background: #15202b; color: #e7eef5; }
.exam.scheme-dark .option:hover { background: #1f3140; }
.exam.scheme-blue .exam-pane { background: #e8f1fb; }

/* review list */
.review-item { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; margin-bottom: 8px; }
.review-item .meta { font-size: 13px; color: var(--muted); }
.review-thumb { margin-top: 10px; }
.review-thumb img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }