/* ═══ الاختبارات النهائية — styles for the finals module only (assets/js/modules/finals.js).
   Everything here starts with .finals / .fx / .ftile / .hourglass, so editing it never changes another page. ═══ */
.finals-hero { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 34px 20px 30px; border-radius: var(--r-xl); background: var(--lav-soft); }
.finals-hero h2 { max-width: 420px; font-size: 19px; line-height: 1.6; }
.hourglass svg { width: 92px; height: 122px; animation: flip 6s var(--ease) infinite; }
.hourglass .sand-top { transform-origin: 60px 68px; animation: drain 3s linear infinite; }
.hourglass .sand-bottom { transform-origin: 60px 134px; animation: fill 3s linear infinite; }
.hourglass .sand-fall { animation: fall 3s linear infinite; }
.finals-count { display: grid; justify-items: center; margin-top: 4px; }
.finals-count b { font-size: 46px; line-height: 1.1; color: var(--primary); }
.finals-count span { font-size: 13px; color: var(--ink-2); }
/* finals: tiles · exam timetable */
.finals-cd { display: grid; justify-items: center; gap: 4px; margin-top: 8px; }
.finals-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ftile { display: grid; justify-items: start; gap: 6px; padding: 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); background: color-mix(in srgb, var(--c) 9%, var(--surface)); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: transform .15s var(--ease); }
.ftile:active { transform: scale(.98); }
.ftile .ico-tile { --c: inherit; }
.fx-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--c, var(--peri)); cursor: pointer; }
.fx-card.next { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.fx-card.past { opacity: .6; }
.fx-card.example { opacity: .75; border-style: dashed; cursor: default; --c: #B8BCD6; }
.fx-card .date-block { flex: none; }
.fx-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.fx-grid span { display: inline-flex; align-items: center; gap: 5px; }
.fx-grid .i { color: color-mix(in srgb, var(--c, var(--peri)) 70%, var(--ink-3)); }
.ftile.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.fx-grip { display: grid; place-items: center; width: 28px; align-self: stretch; margin-inline-start: -6px; color: var(--ink-3); cursor: grab; touch-action: none; }
.fx-card.dragging { opacity: .85; box-shadow: var(--shadow-3); transform: scale(1.01); }
.fx-actions { display: grid; gap: 10px; margin-bottom: 12px; }
.fx-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 14px 0; }
.fx-sum > div { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 14px 8px; border-radius: 18px; background: var(--lav-soft); color: var(--ink-2); font-size: 12.5px; }
.fx-sum b { font-size: 26px; color: var(--ink); line-height: 1.2; }
.fx-card__t { display: block; font-size: 16px; line-height: 1.5; }
.fx-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.fx-card .fx-grid { margin-top: 8px; }
.fx-card.example { margin-top: 4px; }