.ov-wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
.ov-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ov-head h1 { margin: 0; }
.ov-nav { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }      /* on the left, also when the title takes the first line */
.ov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.ov-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 10px 14px; }
.ov-card b { display: block; font-size: 1.5rem; }
.ov-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ov-table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; }
.ov-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.ov-table th, .ov-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: start; white-space: nowrap; }
.ov-chip { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: .85rem; font-weight: 600; }
.ov-online { background: #d8f5e4; color: #0f5a2d; }
.ov-today { background: #e6edff; color: #20308a; }
.ov-earlier { background: #fff1d6; color: #6a4300; }
.ov-never { background: #fde0e0; color: #7a1c1c; }
.ov-flag { background: #fde0e0; color: #7a1c1c; margin-inline-end: 4px; }
.ov-feed { margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ov-feed li { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 6px 12px; }
.ov-feed time { color: var(--ink-2); margin-inline-end: 8px; font-size: .85rem; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.ov-bars { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 10px 14px; }
.ov-bars h3 { margin: 0 0 4px; font-size: 1rem; }
.ov-note { margin: 0 0 8px; color: var(--ink-2); font-size: .85rem; }
.ov-bar { display: grid; grid-template-columns: 7.5em 1fr 2.5em; align-items: center; gap: 8px; padding: 3px 0; }
.ov-bar-label { font-size: .85rem; color: var(--ink-2); }
.ov-track { height: 12px; }
.ov-fill { display: block; height: 100%; min-width: 2px; background: #3a3fd1; border-radius: 4px 0 0 4px; }
.ov-bar-value { font-weight: 600; font-size: .9rem; }

/* ---- week 2: the pupil cards and the report on one pupil ---- */
.ov-card small { display: block; color: var(--ink-2); font-size: .8rem; }
.ov-tabs .seg-b.on, .ov-section.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ov-sections { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.ov-check { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: .9rem; color: var(--ink-2); }
.ov-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ov-pupils { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ov-pupil { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--rule); color: inherit; text-decoration: none; transition: box-shadow .15s; }
.ov-pupil:hover { box-shadow: 0 4px 14px rgba(27, 33, 64, .12); border-color: #c8cdea; }
.ov-pupil.ov-st-never { opacity: .7; }
.ov-pupil-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ov-pupil-name { display: grid; }
.ov-pupil-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-pupil-station { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
.ov-strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; direction: rtl; }
.ov-strip i { height: 8px; border-radius: 3px; background: #e3e1ef; }
.ov-strip i.done { background: #1f9d63; }
.ov-strip i.here { background: #f0b400; }
.ov-pupil-req, .ov-pupil-nums { margin: 0; font-size: .82rem; color: var(--ink-2); }
.ov-att { display: flex; flex-wrap: wrap; gap: 4px; }
.ov-att-stuck, .ov-att-flags { background: #fde0e0; color: #7a1c1c; }
.ov-att-weak { background: #fff1d6; color: #6a4300; }
.ov-att-question { background: #e6edff; color: #20308a; }
.ov-att-away { background: #eceaf3; color: #4b4a60; }
.ov-core { background: #ffe9a8; color: #5c4300; margin-inline-start: 6px; }
.ov-never-list { margin-top: 14px; line-height: 2; }
.ov-fill.mark { background: #f0b400; }

.ov-p-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.ov-p-head h2 { margin: 0; }
.ov-p-head p { margin: 2px 0; }
.ov-live { display: flex; gap: 6px; align-items: center; }
.ov-diag { background: #fff8e6; border: 1px solid #f3dc9c; border-radius: 14px; padding: 8px 16px; }
.ov-diag h3 { margin: 6px 0; }
.ov-diag li { line-height: 1.9; margin: 2px 0; }
.ov-days { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 8px 14px; margin: 10px 0; }
.ov-days h3 { margin: 4px 0 8px; font-size: 1rem; }
.ov-days-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 120px; align-items: end; }
.ov-day { display: grid; grid-template-rows: auto 1fr auto; height: 100%; justify-items: center; align-items: end; }
.ov-day-bar { width: 70%; max-width: 26px; background: #3a3fd1; border-radius: 5px 5px 1px 1px; }
.ov-day-n, .ov-day-x { font-size: .7rem; color: var(--ink-2); }
.ov-station { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 6px 14px; margin: 6px 0; }
.ov-station > summary { cursor: pointer; padding: 6px 0; }
.ov-station.ov-current { border-color: #f0b400; }
.ov-station.ov-done > summary b { color: #0f5a2d; }
.ov-small { min-width: 560px; }
.ov-dots { display: inline-flex; gap: 2px; flex-wrap: wrap; max-width: 160px; }
.ov-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e08a4b; }
.ov-dots i.ok { background: #1f9d63; }
.ov-dots i.rule { background: #f0b400; }
.ov-tasks { line-height: 2.2; }
.ov-tasks .ov-chip { margin-inline-end: 4px; }
.ov-note-box { background: #f7f6ff; border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.ov-note-box h3 { margin: 0 0 4px; font-size: 1rem; }
.ov-quote { margin: 4px 0; padding-inline-start: 10px; border-inline-start: 3px solid #3a3fd1; white-space: pre-wrap; line-height: 1.9; }
.ov-comment-box { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.ov-comment { flex: 1; min-width: 220px; min-height: 52px; font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--rule); }
.ov-map { margin: 12px 0; }
.ov-map .ov-chip { margin-inline-end: 4px; }
.ov-skill-strong { background: #d8f5e4; color: #0f5a2d; }
.ov-skill-learning { background: #fff1d6; color: #6a4300; }
.ov-skill-weak { background: #fde0e0; color: #7a1c1c; }
.ov-day-head { background: transparent !important; border: 0 !important; font-weight: 700; padding-top: 10px !important; }
.ov-overlay { position: fixed; inset: 0; background: rgba(15, 18, 45, .6); z-index: 60; display: grid; place-items: center; padding: 12px; }
.ov-sheet { width: min(860px, 100%); max-height: 92vh; background: #fff; border-radius: 16px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.ov-sheet header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.ov-code-body { overflow-y: auto; padding: 10px 14px; }
.ov-pre { direction: ltr; text-align: left; background: #151a34; color: #e8ecff; border-radius: 10px; padding: 10px 12px; white-space: pre; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
@media (max-width: 640px) {
  .ov-wrap { padding: 10px; }
  .ov-head { flex-wrap: wrap; }
  .ov-wrap .ov-head h1 { font-size: 1.25rem; flex: 1 1 100%; }
  .ov-table-wrap::after { content: "جدول را به چپ بکش تا بقیهٔ ستون‌ها را ببینی"; display: block; padding: 6px 12px; color: var(--ink-2); font-size: .85rem; }
  .ov-check { margin-inline-start: 0; }
}
.ov-card-text b { font-size: 1rem; line-height: 1.6; }
.ov-mark { font-size: .85rem; color: #0f5a2d; font-weight: 600; }
.ov-question { background: #fff8e6; border-radius: 10px; padding: 8px 12px; line-height: 1.9; }
.ov-tools .seg-b { min-width: 2.6em; }

/* ---- the same design language as the pupil app: soft paper, indigo, big numbers ---- */
.ov-body { background: #f5f4f0; }
.ov-card { border-radius: 18px; border: 0; box-shadow: 0 1px 2px rgba(27, 33, 64, .06), 0 5px 16px rgba(58, 63, 209, .08); padding: 14px 18px; text-align: center; }
.ov-card b { font-size: 2.1rem; line-height: 1.2; color: #2a2ca3; }
.ov-card > span { color: var(--ink-2); font-size: .9rem; }
.ov-tabs .seg-b, .ov-section, .ov-tools button, .ov-tools .button { border-radius: 12px; border: 1px solid #e2ded3; background: #fff; min-height: 42px; padding: 6px 14px; }
.ov-pupil { border-radius: 18px; border: 0; box-shadow: 0 1px 2px rgba(27, 33, 64, .06), 0 5px 16px rgba(58, 63, 209, .08); }
.ov-table-wrap, .ov-bars, .ov-station, .ov-days { border-radius: 18px; border: 0; box-shadow: 0 1px 2px rgba(27, 33, 64, .06), 0 4px 14px rgba(58, 63, 209, .07); }
.ov-head h1 { font-size: 1.7rem; }
.ov-fill { background: #3a3fd1; border-radius: 6px; }

.ov-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 6px 0 10px; }      /* buttons on the left */

/* ---- the suggestion to walk the road again (attention) ---- */
.ov-suggest { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fff3d1; color: #4a2f00; }
.ov-suggest-why { font-size: .9rem; }
.ov-pupil-plus { display: flex; flex-direction: column; }
.ov-suggest button { margin-inline-start: auto; }
.ov-redo-on { margin: 6px 0 0; font-size: .88rem; color: #2a2f9a; font-weight: 600; }
.ov-suggest-note { font-weight: 500; }
.ov-legend { margin: 6px 0 10px; padding: 6px 12px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.08)); }
.ov-legend > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.ov-legend .ov-note { margin: 4px 0; }
.ov-warn { background: #fff3d1; color: #4a2f00; border: 2px solid #e0a400; }
.ov-suggest.ov-own { background: transparent; border: 0; padding: 4px 0 0; justify-content: flex-end; }
.ov-rollback { font-size: .95rem; }