:root {
    --blue: #1266f1;
    --blue-dark: #0b3f9f;
    --blue-soft: #eaf2ff;
    --black: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --white: #ffffff;
    --bg: #f5f8fc;
    --green: #118a55;
    --red: #d83a52;
    --orange: #d97706;
    --radius: 18px;
    --shadow: 0 14px 35px rgba(17, 24, 39, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Tahoma, Arial, sans-serif; background: var(--bg); color: var(--black); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { background: #08152f; color: var(--white); padding: 24px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 28px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 1px rgba(18,102,241,.18); overflow: hidden; }
.brand-mark img { width: 76%; height: 76%; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: 1px; }
.brand small { color: #9eb4de; margin-top: 4px; font-size: 11px; }
.sidebar nav { display: grid; gap: 8px; }
.sidebar nav a, .logout-link { padding: 13px 15px; border-radius: 12px; color: #d9e5ff; transition: .2s; }
.sidebar nav a:hover, .logout-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.logout-link { margin-top: auto; }
.main-content { min-width: 0; padding: 28px; }
.topbar { display: flex; align-items: center; gap: 15px; margin-bottom: 24px; }
.topbar h1 { margin: 0; font-size: 27px; }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.menu-button { display: none; border: 0; background: var(--white); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
.grid { display: grid; gap: 18px; }
.grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--white); border: 1px solid rgba(229,231,235,.8); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.stat-card strong { display: block; font-size: 30px; margin-top: 10px; }
.stat-card span { color: var(--muted); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title h2 { margin: 0; font-size: 19px; }
.btn { border: 0; border-radius: 12px; padding: 11px 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-light { background: var(--blue-soft); color: var(--blue-dark); }
.btn-danger { background: #ffe8ec; color: var(--red); }
.btn-success { background: #dcfce7; color: var(--green); }
.btn-sm { padding: 8px 11px; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: grid; gap: 7px; font-weight: 700; font-size: 14px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; background: #fff; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,102,241,.12); }
textarea { min-height: 110px; resize: vertical; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: right; padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: 13px; }
.badge { display: inline-flex; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 800; background: var(--blue-soft); color: var(--blue-dark); }
.badge.present, .badge.open { background: #dcfce7; color: var(--green); }
.badge.late { background: #fff3d6; color: var(--orange); }
.badge.absent, .badge.closed { background: #ffe8ec; color: var(--red); }
.badge.scheduled { background: #eef2ff; color: #5146a8; }
.alert { padding: 14px 16px; border-radius: 13px; margin-bottom: 18px; background: var(--blue-soft); color: var(--blue-dark); }
.alert.success { background: #dcfce7; color: #166534; }
.alert.error { background: #ffe8ec; color: #9f1239; }
.empty { text-align: center; padding: 28px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.search-panel { max-width: 760px; margin: 35px auto; }
.search-box { position: relative; }
.search-box input { padding: 20px; font-size: 20px; border-width: 2px; }
.search-results { margin-top: 12px; display: grid; gap: 9px; }
.student-result { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 15px; padding: 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: right; }
.student-result:hover { border-color: var(--blue); background: var(--blue-soft); }
.student-result small { color: var(--muted); display: block; margin-top: 4px; }
.session-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #08152f; color: #fff; padding: 20px; border-radius: var(--radius); }
.session-banner p { color: #b9caeb; margin: 6px 0 0; }
.attendance-message { margin-top: 15px; padding: 15px; border-radius: 13px; display: none; }
.attendance-message.show { display: block; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #061124, #1266f1); }
.login-card { width: min(440px, 100%); background: #fff; border-radius: 26px; padding: 34px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.login-card h1 { margin: 0 0 8px; font-size: 34px; }
.login-card > p { color: var(--muted); margin-bottom: 25px; }
.login-card form { display: grid; gap: 15px; }
.login-card .btn { width: 100%; padding: 14px; }
.notice-list { display: grid; gap: 10px; }
.notice-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; }
.notice-item p { margin: 0; }
.notice-item small { color: var(--muted); }
.kpi-note { font-size: 12px; color: var(--muted); margin-top: 7px; }
@media (max-width: 1050px) {
    .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; right: -270px; z-index: 20; width: 250px; transition: .25s; }
    .sidebar.open { right: 0; }
    .main-content { padding: 18px; }
    .menu-button { display: inline-block; }
    .grid.two, .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .session-banner, .notice-item { align-items: stretch; flex-direction: column; }
}
@media (max-width: 520px) {
    .grid.cards { grid-template-columns: 1fr; }
    .topbar h1 { font-size: 22px; }
    .card { padding: 17px; }
    .search-box input { font-size: 17px; padding: 16px; }
}

/* ==============================
   Public landing page
   ============================== */
html { scroll-behavior: smooth; }
.landing-page { background: #fff; color: #0d1728; overflow-x: hidden; }
.landing-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.landing-header { position: absolute; inset: 0 0 auto; z-index: 10; padding: 22px 0; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.landing-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.landing-brand-mark { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 25px rgba(18,102,241,.18); overflow: hidden; }
.landing-brand-mark img { width: 80%; height: 80%; object-fit: contain; }
.landing-brand strong, .landing-brand small { display: block; }
.landing-brand strong { letter-spacing: 1.8px; font-size: 17px; }
.landing-brand small { color: #9eb1cf; margin-top: 3px; font-size: 9px; letter-spacing: .5px; }
.landing-links { display: flex; gap: 28px; color: #c8d5e8; font-size: 14px; }
.landing-links a { transition: .2s; }
.landing-links a:hover { color: #fff; }
.landing-login { min-width: 126px; }
.landing-hero { position: relative; min-height: 790px; display: flex; align-items: center; padding: 145px 0 90px; color: #fff; background:
    radial-gradient(circle at 78% 24%, rgba(18,102,241,.28), transparent 24%),
    linear-gradient(122deg, #061020 0%, #091a37 56%, #0b2d67 100%); }
.landing-hero::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; }
.hero-copy { max-width: 620px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.06); color: #bdd2f6; font-size: 13px; }
.hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #54a0ff; box-shadow: 0 0 0 5px rgba(84,160,255,.13); }
.hero-copy h1 { margin: 25px 0 20px; font-size: clamp(43px, 5.2vw, 70px); line-height: 1.12; letter-spacing: -2.5px; }
.hero-copy h1 em { display: block; color: #5da0ff; font-style: normal; }
.hero-copy > p { max-width: 590px; margin: 0; color: #b8c7de; font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.btn-lg { padding: 15px 23px; border-radius: 14px; }
.btn-outline { color: #fff; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; color: #a9bad2; font-size: 12px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust span::before { content: "✓"; color: #65a8ff; font-weight: 900; }
.hero-visual { position: relative; min-height: 510px; display: grid; place-items: center; }
.visual-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: rgba(18,102,241,.25); filter: blur(70px); }
.dashboard-preview { position: relative; z-index: 2; width: min(560px, 100%); border: 1px solid rgba(255,255,255,.15); border-radius: 24px; overflow: hidden; background: #f7f9fd; box-shadow: 0 40px 90px rgba(0,0,0,.45); transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.preview-topbar { height: 54px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e9edf3; color: #111827; }
.preview-logo { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: .8px; }
.preview-logo span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(18,102,241,.18); }
.preview-logo span img { width: 78%; height: 78%; object-fit: contain; }
.preview-dot { width: 28px; height: 28px; border-radius: 50%; background: #e7edf6; }
.preview-body { min-height: 340px; display: grid; grid-template-columns: 76px 1fr; }
.preview-sidebar { background: #08152f; padding: 30px 18px; display: flex; flex-direction: column; gap: 18px; }
.preview-sidebar i { height: 8px; border-radius: 8px; background: rgba(255,255,255,.16); }
.preview-sidebar i:first-child { background: #1266f1; }
.preview-content { padding: 24px; color: #111827; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.preview-heading span { width: 110px; height: 13px; border-radius: 8px; background: #172033; }
.preview-heading b { width: 54px; height: 24px; border-radius: 8px; background: #e8f0ff; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preview-stats article { padding: 13px; border: 1px solid #e8edf5; border-radius: 13px; background: #fff; }
.preview-stats small { display: block; color: #7b8494; font-size: 8px; }
.preview-stats strong { display: block; margin-top: 7px; font-size: 19px; }
.preview-panel { margin-top: 13px; border: 1px solid #e8edf5; border-radius: 14px; background: #fff; padding: 14px; }
.preview-panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.preview-panel-title b { width: 82px; height: 9px; background: #1a2333; border-radius: 7px; }
.preview-panel-title span { width: 40px; height: 17px; background: #e8f0ff; border-radius: 6px; }
.preview-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #eef1f5; }
.preview-row i { width: 22px; height: 22px; border-radius: 50%; background: #e5eaf2; }
.preview-row span { width: 70%; height: 7px; border-radius: 7px; background: #dfe5ed; }
.preview-row em { font-size: 8px; font-style: normal; font-weight: 800; color: #118a55; padding: 4px 7px; border-radius: 999px; background: #dcfce7; }
.preview-row em.late { color: #bd6800; background: #fff3d6; }
.floating-card { position: absolute; z-index: 3; border: 1px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(9,25,52,.88); backdrop-filter: blur(14px); box-shadow: 0 18px 45px rgba(0,0,0,.3); }
.floating-code { top: 45px; left: -15px; padding: 13px 18px; }
.floating-code small, .floating-status small { display: block; color: #9fb1cc; font-size: 10px; }
.floating-code strong { display: block; margin-top: 4px; color: #fff; font-size: 24px; letter-spacing: 3px; }
.floating-status { right: -15px; bottom: 58px; display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.floating-status > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #1266f1; font-weight: 900; }
.floating-status strong { display: block; font-size: 11px; margin-bottom: 4px; }
.landing-strip { background: #fff; border-bottom: 1px solid #e8edf5; }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-grid > div { min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border-left: 1px solid #e8edf5; }
.strip-grid > div:last-child { border-left: 0; }
.strip-grid strong { font-size: 25px; color: #1266f1; }
.strip-grid span { color: #6e7786; font-size: 13px; }
.landing-section { padding: 105px 0; }
.landing-section-head { max-width: 740px; margin: 0 auto 55px; text-align: center; }
.landing-section-head > span, .workflow-copy > span { color: #1266f1; font-size: 13px; font-weight: 900; }
.landing-section-head h2, .workflow-copy h2 { margin: 13px 0 14px; font-size: clamp(31px, 4vw, 47px); line-height: 1.25; letter-spacing: -1.4px; }
.landing-section-head p, .workflow-copy p { margin: 0; color: #6b7483; font-size: 16px; line-height: 1.9; }
.landing-section-head.compact { margin-bottom: 42px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 280px; padding: 29px; border: 1px solid #e6ebf2; border-radius: 22px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; overflow: hidden; }
.feature-card:hover { transform: translateY(-5px); border-color: #cfe0ff; box-shadow: 0 20px 50px rgba(22,45,80,.1); }
.feature-card.featured { color: #fff; border-color: #1266f1; background: linear-gradient(145deg, #1266f1, #0c439f); }
.feature-number { position: absolute; top: 24px; left: 26px; color: #a5afbd; font-size: 12px; font-weight: 900; }
.feature-card.featured .feature-number { color: rgba(255,255,255,.55); }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #1266f1; background: #eaf2ff; font-size: 23px; font-weight: 900; }
.feature-card.featured .feature-icon { color: #fff; background: rgba(255,255,255,.15); }
.feature-card h3 { margin: 25px 0 12px; font-size: 19px; }
.feature-card p { margin: 0; color: #6d7685; line-height: 1.85; font-size: 14px; }
.feature-card.featured p { color: #d5e4ff; }
.workflow-section { background: #f5f8fc; }
.workflow-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 90px; }
.workflow-copy h2 { max-width: 430px; }
.workflow-copy p { max-width: 460px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 27px; color: #1266f1; font-weight: 900; }
.workflow-steps { display: grid; gap: 12px; }
.workflow-steps article { display: grid; grid-template-columns: 52px 1fr; gap: 17px; align-items: start; padding: 23px; border: 1px solid #e3e9f1; border-radius: 18px; background: #fff; }
.workflow-steps article > strong { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #1266f1; background: #eaf2ff; font-size: 16px; }
.workflow-steps h3 { margin: 1px 0 7px; font-size: 17px; }
.workflow-steps p { margin: 0; color: #717a89; font-size: 13px; line-height: 1.7; }
.roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.role-card { min-height: 420px; padding: 38px; border-radius: 25px; overflow: hidden; }
.admin-role { color: #fff; background: linear-gradient(145deg, #07152e, #0d2d63); }
.operator-role { border: 1px solid #dfe6ef; background: #f8faff; }
.role-label { display: inline-flex; padding: 7px 11px; border-radius: 999px; color: #1266f1; background: #eaf2ff; font-size: 12px; font-weight: 900; }
.admin-role .role-label { color: #c9ddff; background: rgba(255,255,255,.1); }
.role-card h3 { margin: 24px 0 12px; font-size: 28px; }
.role-card > p { max-width: 500px; margin: 0; color: #697381; line-height: 1.85; }
.admin-role > p { color: #b8c9e4; }
.role-card ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; list-style: none; padding: 0; margin: 30px 0 0; }
.role-card li { position: relative; padding-right: 20px; color: #d8e4f7; font-size: 13px; }
.role-card li::before { content: "✓"; position: absolute; right: 0; color: #57a0ff; font-weight: 900; }
.operator-search { margin-top: 38px; padding: 18px; display: flex; justify-content: space-between; align-items: center; border: 2px solid #1266f1; border-radius: 15px; background: #fff; color: #9aa3b1; font-size: 14px; }
.operator-search b { color: #1266f1; font-size: 22px; }
.operator-button { width: 100%; margin-top: 12px; padding: 16px; border: 0; border-radius: 14px; background: #1266f1; color: #fff; font-weight: 900; }
.landing-cta { padding: 0 0 105px; }
.cta-card { min-height: 225px; padding: 45px 55px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: 28px; color: #fff; background: linear-gradient(125deg, #1266f1, #083985); box-shadow: 0 25px 60px rgba(18,102,241,.22); }
.cta-card span { color: #c6ddff; font-size: 13px; font-weight: 900; }
.cta-card h2 { max-width: 620px; margin: 11px 0 0; font-size: 32px; }
.btn-white { background: #fff; color: #0b3f9f; }
.landing-footer { padding: 40px 0; color: #99a9c2; background: #071225; }
.landing-footer .landing-container { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-brand { color: #fff; }
.landing-footer p { margin: 0; font-size: 13px; }
.landing-footer > div > span { font-size: 12px; }

/* ==============================
   Friendly system error pages
   ============================== */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background:
    radial-gradient(circle at 70% 20%, rgba(18,102,241,.2), transparent 30%),
    linear-gradient(135deg, #061020, #0a1d3f); color: #fff; }
.error-shell { width: min(640px, 100%); text-align: center; }
.error-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; color: #fff; letter-spacing: 1px; }
.error-brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(18,102,241,.18); }
.error-brand-mark img { width: 78%; height: 78%; object-fit: contain; }
.error-card { padding: 48px 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 27px; background: rgba(255,255,255,.07); backdrop-filter: blur(16px); box-shadow: 0 35px 90px rgba(0,0,0,.28); }
.error-code { display: block; color: #5fa2ff; font-size: clamp(74px, 15vw, 125px); font-weight: 900; line-height: .9; letter-spacing: -6px; }
.error-card h1 { margin: 24px 0 12px; font-size: 31px; }
.error-card > p { max-width: 480px; margin: 0 auto; color: #c2cfe2; line-height: 1.85; }
.error-hint { margin: 22px 0 0; padding: 13px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; color: #aebed5; background: rgba(0,0,0,.15); font-size: 13px; line-height: 1.75; }
.error-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.error-footer { color: #7f93b0; font-size: 12px; margin: 18px 0 0; }

.login-home-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px; color: #0b3f9f; font-size: 13px; font-weight: 800; }
.login-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.login-brand-mark { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(18,102,241,.18); overflow: hidden; flex-shrink: 0; }
.login-brand-mark img { width: 82%; height: 82%; object-fit: contain; }
.login-brand h1 { margin: 0 0 6px; }
.login-brand-sub { margin: 0; color: #5e6b7f; font-size: 14px; }

@media (max-width: 980px) {
    .landing-links { display: none; }
    .hero-grid, .workflow-grid { grid-template-columns: 1fr; }
    .landing-hero { padding-top: 155px; }
    .hero-copy { max-width: none; text-align: center; margin-inline: auto; }
    .hero-copy > p { margin-inline: auto; }
    .hero-actions, .hero-trust { justify-content: center; }
    .hero-visual { margin-top: 15px; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .workflow-grid { gap: 50px; }
    .workflow-copy { text-align: center; }
    .workflow-copy h2, .workflow-copy p { margin-inline: auto; }
}
@media (max-width: 720px) {
    .landing-container { width: min(100% - 28px, 1180px); }
    .landing-header { padding: 16px 0; }
    .landing-brand small { display: none; }
    .landing-login { min-width: auto; padding: 10px 13px; font-size: 12px; }
    .landing-hero { min-height: auto; padding: 125px 0 70px; }
    .hero-copy h1 { font-size: 43px; letter-spacing: -1.6px; }
    .hero-copy > p { font-size: 15px; }
    .hero-actions .btn { flex: 1 1 150px; }
    .hero-trust { gap: 10px 16px; }
    .hero-visual { min-height: 370px; }
    .dashboard-preview { transform: none; }
    .preview-body { grid-template-columns: 55px 1fr; min-height: 275px; }
    .preview-sidebar { padding-inline: 12px; }
    .preview-content { padding: 15px; }
    .floating-code { left: -5px; top: 10px; }
    .floating-status { right: -4px; bottom: 18px; }
    .strip-grid { grid-template-columns: repeat(2, 1fr); }
    .strip-grid > div { min-height: 105px; border-bottom: 1px solid #e8edf5; }
    .landing-section { padding: 75px 0; }
    .feature-grid, .roles-grid { grid-template-columns: 1fr; }
    .role-card { min-height: auto; padding: 29px; }
    .role-card ul { grid-template-columns: 1fr; }
    .cta-card { padding: 38px 27px; flex-direction: column; text-align: center; }
    .cta-card h2 { font-size: 26px; }
    .landing-footer .landing-container { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .landing-brand-mark { width: 38px; height: 38px; }
    .hero-copy h1 { font-size: 37px; }
    .hero-trust { display: grid; justify-content: start; text-align: right; max-width: 250px; margin-inline: auto; }
    .hero-visual { min-height: 315px; }
    .floating-card { display: none; }
    .preview-stats article { padding: 9px; }
    .preview-stats strong { font-size: 16px; }
    .feature-card { min-height: auto; }
    .error-page { padding: 16px; }
    .error-card { padding: 38px 20px; }
    .error-code { letter-spacing: -3px; }
    .error-actions .btn { width: 100%; }
}

/* ==============================
   ELEVAT v5 — stages, filters and privacy
   ============================== */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.stage-filter-card { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.stage-filter-card > div:first-child { display:grid; gap:5px; }
.stage-filter-card small, .section-heading-row p, .security-settings-card .section-title p { color:var(--muted); margin:0; line-height:1.6; }
.stage-pills { display:flex; flex-wrap:wrap; gap:8px; }
.stage-pill { padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#475467; font-size:13px; font-weight:800; transition:.2s; }
.stage-pill:hover, .stage-pill.active { color:#fff; border-color:var(--blue); background:var(--blue); box-shadow:0 8px 20px rgba(18,102,241,.2); }

.stage-overview-section { margin-bottom:18px; }
.section-heading-row { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:15px; }
.section-heading-row h2 { margin:0 0 5px; font-size:21px; }
.stage-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.stage-overview-card { min-height:168px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:20px; border-radius:20px; color:#fff; background:linear-gradient(145deg,#1266f1,#0b3f9f); box-shadow:0 16px 34px rgba(18,102,241,.18); transition:transform .2s,box-shadow .2s; }
.stage-overview-card:nth-child(2n) { background:linear-gradient(145deg,#7c3aed,#4c1d95); }
.stage-overview-card:nth-child(3n) { background:linear-gradient(145deg,#0f9f78,#075d49); }
.stage-overview-card:nth-child(4n) { background:linear-gradient(145deg,#f07a25,#9a3b0d); }
.stage-overview-card::after { content:""; position:absolute; width:130px; height:130px; border-radius:50%; top:-50px; left:-30px; background:rgba(255,255,255,.12); }
.stage-overview-card:hover { transform:translateY(-4px); box-shadow:0 22px 44px rgba(17,24,39,.2); }
.stage-overview-card.selected { outline:4px solid rgba(18,102,241,.18); outline-offset:3px; }
.stage-overview-card > span { position:absolute; top:16px; right:18px; font-weight:900; opacity:.65; }
.stage-overview-card strong { font-size:22px; position:relative; z-index:1; }
.stage-overview-card small { margin-top:6px; color:rgba(255,255,255,.78); position:relative; z-index:1; }
.stage-overview-card b { margin-top:16px; font-size:12px; position:relative; z-index:1; }
.stage-overview-card.add-stage-card { color:#1849a9; border:1px dashed #84adff; background:#eef4ff; box-shadow:none; }
.stage-overview-card.add-stage-card small { color:#667085; }
.stage-overview-card.add-stage-card::after { background:rgba(18,102,241,.08); }

.dashboard-context-bar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:18px 0; padding:14px 17px; border:1px solid #d6e4ff; border-radius:16px; background:#f4f8ff; }
.dashboard-context-bar > div:first-child { display:flex; align-items:center; gap:9px; }
.dashboard-context-bar span { color:var(--muted); font-size:13px; }

.alert-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.alert-action-card { width:100%; min-height:155px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:17px; padding:22px; border:0; border-radius:22px; text-align:right; cursor:pointer; color:#fff; box-shadow:0 18px 42px rgba(17,24,39,.15); transition:.2s; }
.alert-action-card:hover { transform:translateY(-3px); }
.payment-alert-card { background:linear-gradient(135deg,#155eef,#073a93); }
.absence-alert-card { background:linear-gradient(135deg,#e34d68,#9c1736); }
.alert-action-icon { width:55px; height:55px; display:grid; place-items:center; border-radius:17px; background:rgba(255,255,255,.16); font-size:26px; font-weight:900; }
.alert-action-card small { color:rgba(255,255,255,.7); }
.alert-action-card strong { display:block; margin:5px 0; font-size:22px; }
.alert-action-card p { margin:0; color:rgba(255,255,255,.78); font-size:13px; }
.alert-action-card > b { min-width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:#fff; color:#101828; font-size:23px; }

.protected-revenue { min-height:130px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; border:1px solid #dbe5f2; border-radius:18px; background:linear-gradient(135deg,#f8fbff,#eef4ff); }
.protected-revenue > div { display:grid; gap:5px; }
.protected-revenue span, .protected-revenue small { color:var(--muted); }
.revenue-value { display:block; font-size:34px; letter-spacing:.5px; transition:filter .2s; }
.revenue-value.blurred { filter:blur(5px); user-select:none; }
.revenue-eye { width:52px; height:52px; display:grid; place-items:center; border:0; border-radius:16px; color:#fff; background:var(--blue); cursor:pointer; box-shadow:0 12px 25px rgba(18,102,241,.25); }
.revenue-eye svg { width:25px; fill:none; stroke:currentColor; stroke-width:1.8; }
.compact-session-list { display:grid; gap:10px; }
.compact-session-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; }
.compact-session-list span { display:grid; gap:4px; }
.compact-session-list small { color:var(--muted); }

body.modal-open { overflow:hidden; }
.modal { display:none; position:fixed; inset:0; z-index:100; padding:20px; align-items:center; justify-content:center; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(4,12,28,.68); backdrop-filter:blur(6px); }
.modal-panel { width:min(520px,100%); max-height:calc(100vh - 40px); overflow:auto; position:relative; z-index:1; padding:26px; border:1px solid rgba(255,255,255,.3); border-radius:24px; background:#fff; box-shadow:0 35px 90px rgba(0,0,0,.3); animation:modalIn .18s ease-out; }
.modal-panel.modal-wide { width:min(760px,100%); }
@keyframes modalIn { from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:none} }
.modal-close { position:absolute; top:14px; left:14px; width:36px; height:36px; border:0; border-radius:11px; background:#f2f4f7; color:#344054; font-size:24px; cursor:pointer; }
.modal-head, .person-detail-head { display:flex; align-items:center; gap:13px; padding-left:40px; margin-bottom:20px; }
.modal-head h2, .person-detail-head h2 { margin:0 0 5px; font-size:21px; }
.modal-head p, .person-detail-head p { margin:0; color:var(--muted); }
.modal-icon, .person-avatar { width:50px; height:50px; flex:0 0 auto; display:grid; place-items:center; border-radius:16px; font-size:22px; font-weight:900; }
.modal-icon.payment { color:#155eef; background:#eaf2ff; }
.modal-icon.absence { color:#c1153e; background:#ffe8ec; }
.modal-icon.lock { color:#6840c6; background:#f1ebff; }
.person-avatar { color:#fff; background:var(--blue); }
.modal-person-list { display:grid; gap:9px; }
.modal-person { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--line); border-radius:15px; background:#fff; text-align:right; cursor:pointer; transition:.2s; }
.modal-person:hover { border-color:#9dbcf8; background:#f6f9ff; }
.modal-person span { display:grid; gap:5px; }
.modal-person small { color:var(--muted); }
.modal-person b { color:var(--blue); font-size:12px; white-space:nowrap; }
.person-meta-box { margin-bottom:14px; padding:13px; border-radius:13px; color:#344054; background:#f2f4f7; }
.modal-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.full-button { width:100%; margin-top:14px; }
.inline-message { min-height:20px; margin-top:10px; color:var(--green); font-size:13px; }
.inline-message.error { color:var(--red); }

.pattern-lock { width:250px; max-width:100%; aspect-ratio:1; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:19px; margin:18px auto 8px; padding:18px; border-radius:24px; background:#f5f8fc; touch-action:none; user-select:none; }
.pattern-lock canvas { position:absolute; inset:0; z-index:1; pointer-events:none; }
.pattern-lock button { position:relative; z-index:2; display:grid; place-items:center; border:0; background:transparent; cursor:crosshair; }
.pattern-lock button span { width:24px; height:24px; border:4px solid #9aa9bd; border-radius:50%; background:#fff; transition:.15s; }
.pattern-lock button.active span { border-color:var(--blue); background:var(--blue); box-shadow:0 0 0 8px rgba(18,102,241,.13); }
.pattern-reset { display:block; margin:0 auto; border:0; background:transparent; color:var(--blue-dark); cursor:pointer; font-weight:800; }
.pattern-setup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; text-align:center; }
.security-lock-form { display:grid; gap:17px; }
.lock-fields[hidden], [data-filter-field][hidden] { display:none !important; }

.analytics-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; }
.analytics-submit { align-self:end; }
.period-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:12px 16px; border-radius:13px; color:#1849a9; background:#eef4ff; }

.stage-management-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.stage-management-card { display:grid; gap:12px; padding:17px; border:1px solid var(--line); border-radius:17px; background:#fbfcfe; }
.stage-management-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stage-management-head strong { color:var(--muted); font-size:12px; }
.account-disabled { opacity:.72; border-style:dashed; }
.session-picker { margin-bottom:18px; }
.stage-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.session-choice { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.session-choice span, .session-choice small { color:var(--muted); }
.session-choice.active { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 0 3px rgba(18,102,241,.1); }

@media (max-width:1100px) {
    .stage-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .analytics-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .stage-management-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
    .stage-filter-card, .dashboard-context-bar, .section-heading-row { align-items:stretch; flex-direction:column; }
    .alert-action-grid { grid-template-columns:1fr; }
    .alert-action-card { min-height:130px; }
    .analytics-filter-grid, .pattern-setup-grid { grid-template-columns:1fr; }
    .stage-choice-grid { grid-template-columns:1fr; }
    .modal { padding:12px; }
    .modal-panel { max-height:calc(100vh - 24px); padding:22px 18px; }
}
@media (max-width:560px) {
    .stage-overview-grid, .stage-management-grid { grid-template-columns:1fr; }
    .stage-overview-card { min-height:145px; }
    .alert-action-card { grid-template-columns:auto 1fr; }
    .alert-action-card > b { grid-column:1/-1; width:100%; height:38px; }
    .protected-revenue, .compact-session-list > div { align-items:stretch; flex-direction:column; }
    .revenue-eye { width:100%; }
    .modal-person { align-items:stretch; flex-direction:column; }
    .modal-person b { align-self:flex-start; }
    .pattern-lock { width:225px; }
}

/* V6: فلاتر الفترة وصلاحيات موظف الحضور */
.analytics-range-grid { margin-top:14px; }
.analytics-quick-ranges { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; color:var(--muted); font-size:13px; }
.analytics-quick-ranges a { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--blue-dark); font-weight:800; }
.analytics-quick-ranges a:hover { border-color:#9dbcf8; background:var(--blue-soft); }
.analytics-kpis .stat-card strong { font-variant-numeric:tabular-nums; }
.operator-session-note { border-inline-start:4px solid var(--blue); background:#f8faff; }
.muted { color:var(--muted); font-size:13px; }

@media (max-width:800px) {
    .analytics-quick-ranges { align-items:stretch; flex-direction:column; }
    .analytics-quick-ranges a { width:100%; text-align:center; }
    .period-summary { align-items:flex-start; flex-direction:column; }
}

/* V8: تبسيط صفحة الإحصائيات وترتيب الطلاب */
.analytics-simple-title { margin-bottom:18px; }
.analytics-simple-title small { display:block; margin-top:6px; color:var(--muted); font-weight:400; }
.analytics-period-note { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.analytics-period-note strong { color:var(--black); }
.analytics-simple-kpis { margin-top:18px; }
.analytics-simple-kpis .stat-card { box-shadow:none; }
.analytics-simple-kpis .stat-card strong { margin-top:8px; }
.analytics-log-card { margin-top:18px; }
.analytics-ranking-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.ranking-card { padding:20px; }
.ranking-title { margin-bottom:12px; }
.ranking-title small { display:block; margin-top:5px; color:var(--muted); font-weight:400; }
.ranking-list { display:grid; }
.ranking-item { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.ranking-item:last-child { border-bottom:0; }
.ranking-number { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:var(--blue-dark); background:var(--blue-soft); font-size:13px; font-weight:900; }
.ranking-number.absence-rank { color:var(--red); background:#ffe8ec; }
.ranking-person { min-width:0; }
.ranking-person strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.ranking-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:5px; color:var(--muted); font-size:12px; }
.ranking-value { white-space:nowrap; font-size:14px; }
.commitment-value { color:var(--green); }
.absence-value { color:var(--red); }
.ranking-empty { padding:24px 8px; }

@media (max-width:900px) {
    .analytics-ranking-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .analytics-period-note { align-items:flex-start; flex-direction:column; }
}
@media (max-width:520px) {
    .ranking-card { padding:17px; }
    .ranking-item { grid-template-columns:34px minmax(0,1fr); gap:10px; }
    .ranking-value { grid-column:2; justify-self:start; margin-top:-2px; }
}

/* ==============================
   Groups & monthly attendance v8
   ============================== */
.group-management-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.group-management-card { --group-color:#1266f1; display:grid; gap:15px; padding:18px; border:1px solid var(--line); border-top:5px solid var(--group-color); border-radius:18px; background:#fff; }
.group-card-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; }
.group-card-head strong,.group-card-head small { display:block; }
.group-card-head small { margin-top:4px; color:var(--muted); }
.group-color-dot { width:14px; height:14px; flex:0 0 14px; border-radius:50%; background:var(--group-color,#1266f1); box-shadow:0 0 0 4px color-mix(in srgb,var(--group-color,#1266f1) 18%,transparent); }
.group-summary { display:flex; justify-content:space-between; gap:12px; padding:11px 13px; border-radius:12px; background:#f7f9fc; color:var(--muted); font-size:13px; }
.group-summary strong { color:var(--black); }
.compact-grid { gap:11px; }
.weekday-fieldset { margin:0; padding:13px; border:1px solid var(--line); border-radius:14px; }
.weekday-fieldset legend { padding:0 7px; font-weight:800; }
.weekday-grid { display:flex; flex-wrap:wrap; gap:8px; }
.weekday-option { display:block; cursor:pointer; }
.weekday-option input { position:absolute; opacity:0; pointer-events:none; }
.weekday-option span { display:inline-flex; padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.weekday-option input:checked + span { color:#fff; border-color:var(--blue); background:var(--blue); }
.group-inline-badge { --group-color:#1266f1; display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; color:var(--group-color); background:color-mix(in srgb,var(--group-color) 12%,white); font-size:12px; font-weight:900; }
.group-inline-badge::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--group-color); }
.session-choice { border-right:5px solid var(--group-color,#1266f1); }
.session-banner { border-right:7px solid var(--group-color,#1266f1); }
.attendance-roster-panel { margin-top:18px; }
.attendance-roster-panel .section-title small { display:block; margin-top:6px; color:var(--muted); }
.attendance-roster { margin-top:16px; }
.group-student-card { --group-color:#1266f1; border-right:5px solid var(--group-color); cursor:default; gap:18px; }
.group-student-card:hover { border-color:var(--line); border-right-color:var(--group-color); background:#fff; }
.student-progress-info { min-width:0; display:grid; gap:12px; flex:1; }
.student-name-row { display:flex; align-items:center; gap:11px; }
.student-name-row > span:last-child { min-width:0; }
.student-name-row strong,.student-name-row small { display:block; }
.student-name-row small { margin-top:4px; color:var(--muted); }
.attendance-dots { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:7px; direction:rtl; }
.attendance-dot { width:20px; height:20px; border-radius:50%; border:2px solid #cbd5e1; background:#fff; box-shadow:inset 0 0 0 3px #fff; }
.attendance-dot.present { border-color:#118a55; background:#22c55e; }
.attendance-dot.absent { border-color:#d83a52; background:#ef4444; }
.attendance-dot.pending, .attendance-dot.empty { border-color:#cbd5e1; background:#fff; }
.student-roster-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:9px; }
.payment-toggle { min-width:94px; border:0; border-radius:11px; padding:9px 12px; font-weight:900; cursor:pointer; }
.payment-toggle.paid { color:#166534; background:#dcfce7; cursor:default; }
.payment-toggle.unpaid { color:#9f1239; background:#ffe4e8; }
.payment-toggle.unpaid:hover { background:#fecdd3; }
.attendance-mark-button:disabled { opacity:.68; cursor:default; }

@media (max-width:900px) {
    .group-management-grid { grid-template-columns:1fr; }
    .group-student-card { align-items:flex-start; }
}
@media (max-width:620px) {
    .group-student-card { display:grid; }
    .student-roster-actions { justify-content:stretch; }
    .student-roster-actions > * { flex:1; }
    .attendance-dot { width:18px; height:18px; }
    .group-summary { display:grid; }
}

/* ==============================
   V8 — simpler stage/group flow
   ============================== */
.simple-switcher,
.dashboard-stage-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; box-shadow:none; }
.simple-switcher > div:first-child,
.dashboard-stage-bar > div:first-child { display:grid; gap:5px; }
.simple-switcher small,
.dashboard-stage-bar small,
.section-title small { color:var(--muted); }
.stage-pill small { margin-inline-start:5px; color:inherit; opacity:.82; }
.stage-pill.manage { border-style:dashed; }

.groups-page-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr); gap:18px; align-items:start; }
.groups-list-card { min-width:0; }
.simple-groups-list { display:grid; gap:12px; }
.simple-group-card { --group-color:#1266f1; position:relative; display:grid; grid-template-columns:6px minmax(0,1fr) auto; gap:16px; align-items:center; overflow:visible; border:1px solid var(--line); border-radius:16px; background:#fff; }
.simple-group-card.is-disabled { opacity:.62; }
.simple-group-accent { align-self:stretch; background:var(--group-color); border-radius:0 16px 16px 0; }
.simple-group-main { min-width:0; padding:16px 0; }
.simple-group-title { display:flex; align-items:center; gap:10px; }
.simple-group-title strong,.simple-group-title small { display:block; }
.simple-group-title small { margin-top:4px; color:var(--muted); }
.simple-group-meta { display:flex; flex-wrap:wrap; gap:8px 15px; margin-top:11px; color:#526070; font-size:12px; }
.simple-group-actions { display:flex; align-items:center; gap:8px; padding:14px 14px 14px 0; }
.inline-edit-panel { position:relative; }
.inline-edit-panel > summary { list-style:none; }
.inline-edit-panel > summary::-webkit-details-marker { display:none; }
.inline-edit-panel[open] > summary { background:#dbeafe; }
.group-edit-form { position:absolute; z-index:8; top:44px; left:0; width:min(720px,calc(100vw - 330px)); padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 22px 70px rgba(17,24,39,.2); }
.edit-actions { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.add-group-card-simple { position:sticky; top:18px; box-shadow:none; }
.simple-form-stack { display:grid; gap:13px; }
.mini-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.clean-weekdays { margin:0; padding:12px; border:1px solid var(--line); border-radius:13px; }
.clean-weekdays legend { padding:0 7px; color:#475467; font-weight:800; }
.clean-weekday-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.clean-weekday-grid label { display:block; cursor:pointer; }
.clean-weekday-grid input { position:absolute; opacity:0; pointer-events:none; }
.clean-weekday-grid span { display:grid; place-items:center; min-height:38px; padding:6px; border:1px solid var(--line); border-radius:10px; color:#475467; background:#fff; font-size:12px; }
.clean-weekday-grid input:checked + span { color:#fff; border-color:var(--blue); background:var(--blue); box-shadow:0 5px 13px rgba(18,102,241,.18); }

.dashboard-groups-card { margin-bottom:18px; box-shadow:none; }
.dashboard-group-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.dashboard-group-card { --group-color:#1266f1; min-width:0; padding:15px; border:1px solid var(--line); border-top:4px solid var(--group-color); border-radius:15px; background:#fff; }
.dashboard-group-card.is-disabled { opacity:.6; }
.dashboard-group-head { display:flex; align-items:center; gap:10px; }
.dashboard-group-head div { min-width:0; }
.dashboard-group-head strong,.dashboard-group-head small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-group-head small { margin-top:3px; color:var(--muted); }
.dashboard-group-card p { margin:13px 0 6px; color:#344054; font-size:13px; }
.dashboard-group-card > small { display:block; color:var(--muted); font-size:11px; line-height:1.6; }
.dashboard-group-card .actions { margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.dashboard-group-card .actions a { color:var(--blue-dark); font-size:12px; font-weight:800; }
.dashboard-simple-stats { margin-bottom:18px; }
.dashboard-simple-stats .card { box-shadow:none; }

.group-filter-strip { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.group-filter-chip { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#475467; font-size:13px; font-weight:800; }
.group-filter-chip span { width:9px; height:9px; border-radius:50%; background:var(--group-color,#94a3b8); }
.group-filter-chip.active { color:var(--group-color,var(--blue-dark)); border-color:var(--group-color,var(--blue)); background:color-mix(in srgb,var(--group-color,var(--blue)) 10%,white); }
.schedule-summary-card { --group-color:#1266f1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; margin-bottom:18px; border-right:5px solid var(--group-color); box-shadow:none; }
.schedule-summary-card > div { display:flex; align-items:center; gap:9px; }
.schedule-summary-card strong,.schedule-summary-card small { display:block; }
.schedule-summary-card p { margin:0; color:#475467; font-size:13px; }
.optional-create-session { margin-bottom:18px; box-shadow:none; }
.optional-create-session > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }
.optional-create-session > summary::-webkit-details-marker { display:none; }
.optional-create-session > summary small { color:var(--muted); }
.optional-form { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.sessions-simple-table { box-shadow:none; }

.session-picker-simple { margin-bottom:18px; box-shadow:none; }
.attendance-session-tabs { display:flex; flex-wrap:wrap; gap:9px; }
.attendance-session-tab { --group-color:#1266f1; display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.attendance-session-tab > span { width:10px; height:10px; border-radius:50%; background:var(--group-color); }
.attendance-session-tab strong,.attendance-session-tab small { display:block; }
.attendance-session-tab small { margin-top:3px; color:var(--muted); }
.attendance-session-tab.active { border-color:var(--group-color); background:color-mix(in srgb,var(--group-color) 9%,white); }
.attendance-header-card { --group-color:#1266f1; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; padding:18px 20px; border:1px solid var(--line); border-right:7px solid var(--group-color); border-radius:17px; background:#fff; }
.attendance-header-card > div { display:flex; align-items:center; gap:12px; }
.attendance-header-card strong,.attendance-header-card small { display:block; }
.attendance-header-card strong { margin-top:3px; font-size:20px; }
.attendance-header-card p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.attendance-search-card { max-width:920px; margin-inline:auto; box-shadow:none; }
.attendance-search-box { position:relative; }
.attendance-search-box > span { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:24px; }
.attendance-search-box input { padding:17px 52px 17px 16px; border-width:2px; font-size:18px; }
.attendance-search-hint { padding:24px; border:1px dashed #cbd5e1; border-radius:14px; color:var(--muted); text-align:center; background:#fafcff; }
.attendance-student-card { --group-color:#1266f1; display:grid; gap:16px; padding:18px; border:1px solid var(--line); border-right:6px solid var(--group-color); border-radius:16px; background:#fff; }
.attendance-student-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.attendance-student-top .student-name-row strong { font-size:17px; }
.progress-block { display:grid; gap:9px; padding:13px; border-radius:13px; background:#f8fafc; }
.attendance-dot { position:relative; display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; min-width:34px; min-height:34px; padding:0 !important; margin:0; border-radius:50%; box-sizing:border-box; line-height:1; box-shadow:none; }
.attendance-dot b { display:block; color:#94a3b8; font-size:11px; line-height:1; }
.attendance-dot.present b,.attendance-dot.absent b { color:#fff; }
.progress-counts { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); }
.attendance-student-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.payment-status-wrap { display:flex; align-items:center; gap:10px; }
.payment-status-wrap small { color:var(--muted); }
.student-file-link { color:var(--blue-dark); font-size:13px; font-weight:800; }

.analytics-flex-filter { box-shadow:none; }
.analytics-flex-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:end; }
.analytics-flex-grid .btn { min-height:44px; }
.analytics-session-field { grid-column:span 1; }
.filter-help { margin:13px 0 0; color:var(--muted); font-size:12px; }
.analytics-simple-stats { margin:18px 0; }
.analytics-simple-stats .card { box-shadow:none; }
.analytics-primary-table,.analytics-log-card { box-shadow:none; }
.analytics-primary-table { margin-bottom:18px; }
.demo-main-card,.demo-links-grid,.demo-students-card { margin-top:18px; }

@media (max-width:1100px) {
    .groups-page-layout { grid-template-columns:1fr; }
    .add-group-card-simple { position:static; }
    .dashboard-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .group-edit-form { position:fixed; inset:70px 24px auto; width:auto; max-height:calc(100vh - 95px); overflow:auto; }
}
@media (max-width:800px) {
    .simple-switcher,.dashboard-stage-bar,.attendance-header-card,.attendance-student-top,.attendance-student-bottom { align-items:stretch; flex-direction:column; }
    .dashboard-group-grid { grid-template-columns:1fr; }
    .simple-group-card { grid-template-columns:5px minmax(0,1fr); }
    .simple-group-actions { grid-column:2; padding:0 0 14px; justify-content:flex-start; }
    .schedule-summary-card { grid-template-columns:1fr; }
    .analytics-flex-grid { grid-template-columns:1fr; }
    .clean-weekday-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .payment-status-wrap { align-items:stretch; flex-direction:column; }
}
@media (max-width:520px) {
    .mini-two { grid-template-columns:1fr; }
    .clean-weekday-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .group-edit-form { inset:55px 10px auto; max-height:calc(100vh - 70px); }
    .attendance-mark-button,.payment-toggle { width:100%; }
    .attendance-dot { flex-basis:30px; width:30px; height:30px; min-width:30px; min-height:30px; }
    .attendance-dots { gap:6px; }
}

/* V8 simplified sidebar */
.sidebar nav { gap:5px; }
.sidebar nav a.active { color:#fff; background:rgba(18,102,241,.34); box-shadow:inset -3px 0 0 #6ea8ff; }
.nav-section-label { margin:11px 13px 3px; color:#7892bc; font-size:10px; font-weight:900; letter-spacing:.7px; }
.sidebar-tools { margin-top:5px; border-top:1px solid rgba(255,255,255,.08); padding-top:7px; }
.sidebar-tools > summary { list-style:none; padding:12px 15px; border-radius:12px; color:#b9cae8; cursor:pointer; font-size:13px; font-weight:800; }
.sidebar-tools > summary::-webkit-details-marker { display:none; }
.sidebar-tools > summary::after { content:'⌄'; float:left; transition:.2s; }
.sidebar-tools[open] > summary::after { transform:rotate(180deg); }
.sidebar-tools > a { display:block; margin:3px 9px; padding:10px 12px !important; font-size:13px; }

.stage-simple-page { box-shadow:none; }
.simple-stage-list { display:grid; gap:10px; }
.simple-stage-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.simple-stage-row.is-disabled { opacity:.62; }
.simple-stage-info strong,.simple-stage-info small { display:block; }
.simple-stage-info small { margin-top:5px; color:var(--muted); }
.inline-stage-edit { position:relative; }
.inline-stage-edit > summary { list-style:none; }
.inline-stage-edit > summary::-webkit-details-marker { display:none; }
.inline-stage-edit form { position:absolute; z-index:7; top:42px; left:0; width:310px; display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 18px 55px rgba(17,24,39,.18); }
.add-stage-simple { margin-top:18px; box-shadow:none; }
.stage-add-inline { display:grid; grid-template-columns:minmax(0,1fr) 160px auto; align-items:end; gap:12px; }
@media(max-width:800px){.simple-stage-row{grid-template-columns:1fr}.simple-stage-row>.actions{justify-content:flex-start}.stage-add-inline{grid-template-columns:1fr}.inline-stage-edit form{position:fixed;inset:70px 16px auto;width:auto}}

/* ==============================
   Analytics print & Excel actions
   ============================== */
.print-only { display:none; }
.analytics-report-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:18px 0;
    padding:15px 17px;
    border:1px solid #dbe7fb;
    border-radius:16px;
    background:linear-gradient(135deg,#f8fbff,#eef5ff);
}
.analytics-report-toolbar strong,
.analytics-report-toolbar small { display:block; }
.analytics-report-toolbar small { margin-top:5px; color:var(--muted); }
.analytics-print-header { margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid #111827; }
.analytics-print-header h1,
.analytics-print-header p { margin:0; }
.analytics-print-header p { margin-top:5px; color:#64748b; }
.analytics-print-header > div:last-child { text-align:left; }
.analytics-print-header strong,
.analytics-print-header small { display:block; }
.analytics-print-header small { margin-top:5px; color:#64748b; }

@media(max-width:700px){
    .analytics-report-toolbar { align-items:stretch; flex-direction:column; }
    .analytics-report-toolbar .actions { display:grid; grid-template-columns:1fr 1fr; }
}

@media print {
    @page { size:A4 landscape; margin:10mm; }
    body { background:#fff !important; color:#111827; font-size:10pt; }
    .sidebar,.topbar,.analytics-flex-filter,.no-print,.alert { display:none !important; }
    .print-only { display:flex !important; align-items:flex-end; justify-content:space-between; gap:20px; }
    .app-shell { display:block; min-height:0; }
    .main-content { padding:0 !important; }
    .analytics-print-area { display:block; }
    .analytics-simple-stats { grid-template-columns:repeat(4,1fr) !important; gap:8px; margin:0 0 12px; }
    .analytics-simple-stats .card { padding:12px; border:1px solid #d8dee8; border-radius:10px; background:#f8fafc !important; }
    .analytics-simple-stats .stat-card strong { font-size:20px; margin-top:5px; }
    .card,.analytics-primary-table,.analytics-log-card { box-shadow:none !important; border:0; border-radius:0; padding:0; }
    .analytics-primary-table,.analytics-log-card { margin-top:14px; break-inside:auto; }
    thead { display:table-header-group; }
    tr { break-inside:avoid; }
    .section-title { margin-bottom:8px; }
    .section-title h2 { font-size:14pt; }
    .section-title .badge { border:1px solid #cbd5e1; background:#fff !important; color:#111827 !important; }
    .table-wrap { overflow:visible; }
    table { min-width:0 !important; width:100%; font-size:8.5pt; table-layout:fixed; }
    th,td { padding:6px 5px; border:1px solid #d8dee8; overflow-wrap:anywhere; }
    th { background:#1266f1 !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .badge { padding:3px 6px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    a { text-decoration:none; }
}

/* =========================================================
   ELEVAT v10 — professional UI & UX system
   Visual-only layer. Business logic and database stay intact.
   ========================================================= */
:root {
    color-scheme: light;
    --blue: #4f46e5;
    --blue-dark: #3730a3;
    --blue-soft: #eef2ff;
    --black: #172033;
    --muted: #667085;
    --muted-2: #98a2b3;
    --line: #e4e7ec;
    --line-strong: #d0d5dd;
    --white: #ffffff;
    --bg: #f4f6fa;
    --surface-soft: #f8fafc;
    --green: #079455;
    --green-soft: #ecfdf3;
    --red: #d92d20;
    --red-soft: #fef3f2;
    --orange: #dc6803;
    --orange-soft: #fffaeb;
    --purple: #7f56d9;
    --sidebar: #101828;
    --sidebar-soft: #1d2939;
    --radius: 20px;
    --radius-sm: 13px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .055);
    --shadow-lg: 0 24px 70px rgba(16, 24, 40, .16);
    --ring: 0 0 0 4px rgba(79, 70, 229, .12);
}

html { background: var(--bg); }
body {
    min-width: 320px;
    font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--black);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.app-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 82% -8%, rgba(79, 70, 229, .09), transparent 28%),
        radial-gradient(circle at 8% 104%, rgba(14, 165, 233, .06), transparent 28%);
}
::selection { color: #fff; background: var(--blue); }
:focus-visible { outline: 3px solid rgba(79, 70, 229, .35); outline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .58; transform: none !important; box-shadow: none !important; }

/* Shell & sidebar */
.app-shell { min-height: 100vh; grid-template-columns: 278px minmax(0, 1fr); }
.sidebar {
    height: 100vh;
    padding: 18px 14px 14px;
    background:
        radial-gradient(circle at 80% 0, rgba(99, 102, 241, .19), transparent 28%),
        linear-gradient(180deg, #101828 0%, #0c1423 100%);
    border-left: 1px solid rgba(255,255,255,.055);
    box-shadow: -8px 0 30px rgba(16,24,40,.08);
    overflow: hidden;
    z-index: 40;
}
.sidebar-top { flex: 0 0 auto; }
.brand {
    min-height: 68px;
    gap: 12px;
    padding: 8px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
    width: 47px;
    height: 47px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,.2), inset 0 0 0 1px rgba(79,70,229,.12);
}
.brand-mark img { width: 78%; height: 78%; }
.brand-copy { min-width: 0; }
.brand strong { font-size: 18px; letter-spacing: .8px; color: #fff; }
.brand small {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #98a2b3;
    font-size: 11px;
}
.primary-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 13px 3px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar nav { display: block; }
.nav-section-label {
    display: block;
    margin: 15px 13px 7px;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}
.sidebar nav > a,
.sidebar-subnav a,
.sidebar-tools > summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    margin: 3px 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: #b8c2d1;
    font-size: 13.5px;
    font-weight: 650;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.sidebar nav > a:hover,
.sidebar-subnav a:hover,
.sidebar-tools > summary:hover {
    color: #fff;
    background: rgba(255,255,255,.065);
    transform: translateX(-2px);
}
.sidebar nav a.active,
.sidebar-subnav a.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(99,102,241,.32), rgba(79,70,229,.19));
    box-shadow: inset -3px 0 0 #818cf8, 0 8px 20px rgba(0,0,0,.1);
}
.sidebar nav a.active::after {
    content: "";
    position: absolute;
    left: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(165,180,252,.1);
}
.nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-grid;
    place-items: center;
}
.nav-icon svg,
.menu-button svg,
.summary-arrow svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-tools {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.075);
}
.sidebar-tools > summary { list-style: none; cursor: pointer; }
.sidebar-tools > summary::-webkit-details-marker { display: none; }
.summary-arrow { width: 16px; height: 16px; margin-right: auto; transition: transform .2s; }
.sidebar-tools[open] .summary-arrow { transform: rotate(90deg); }
.sidebar-subnav {
    position: relative;
    margin: 4px 19px 7px 0;
    padding-right: 15px;
}
.sidebar-subnav::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 0;
    width: 1px;
    background: rgba(255,255,255,.1);
}
.sidebar-subnav a { min-height: 40px; padding-block: 8px; font-size: 12.5px; }
.sidebar-footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 3px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-user, .topbar-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-user > span:last-child,
.topbar-user > span:last-child { min-width: 0; }
.sidebar-user strong, .sidebar-user small,
.topbar-user strong, .topbar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: #f2f4f7; font-size: 12.5px; }
.sidebar-user small { margin-top: 2px; color: #7d899b; font-size: 10.5px; }
.user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #6366f1, #4338ca);
    box-shadow: 0 8px 18px rgba(49,46,129,.28);
    font-size: 14px;
    font-weight: 800;
}
.logout-link {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border-radius: 11px;
    color: #98a2b3;
    background: rgba(255,255,255,.045);
}
.logout-link span:last-child { display: none; }
.logout-link:hover { color: #fff; background: rgba(240,68,56,.18); }
.sidebar-backdrop { display: none; }

/* Header & page canvas */
.main-content { min-width: 0; padding: 0 30px 44px; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    min-height: 102px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 -30px 26px;
    padding: 18px 30px;
    border-bottom: 1px solid rgba(228,231,236,.85);
    background: rgba(244,246,250,.88);
    backdrop-filter: blur(16px) saturate(140%);
}
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 15px; }
.topbar-copy { min-width: 0; }
.topbar-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .4px;
}
.topbar h1 { margin: 0; color: #101828; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.35px; }
.topbar p { max-width: 620px; margin: 4px 0 0; color: #667085; font-size: 12.5px; }
.topbar-user {
    max-width: 220px;
    padding: 7px 9px 7px 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 1px 2px rgba(16,24,40,.02);
}
.topbar-user .user-avatar { width: 37px; height: 37px; flex-basis: 37px; border: 0; }
.topbar-user strong { color: #344054; font-size: 12px; }
.topbar-user small { margin-top: 1px; color: #98a2b3; font-size: 10px; }
.quick-action {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid #d9d6fe;
    border-radius: 13px;
    color: var(--blue-dark);
    background: #f4f3ff;
    font-size: 12.5px;
    font-weight: 750;
    transition: .18s;
}
.quick-action:hover { border-color: #bdb4fe; background: #ebe9fe; transform: translateY(-1px); }
.menu-button {
    width: 43px;
    height: 43px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: #344054;
    background: #fff;
    box-shadow: 0 2px 6px rgba(16,24,40,.05);
}
.content-container { width: min(100%, 1540px); margin-inline: auto; }

/* Core components */
.card {
    padding: 22px;
    border: 1px solid rgba(228,231,236,.96);
    border-radius: var(--radius);
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow);
}
.card:hover { border-color: #d8dde6; }
.grid { gap: 18px; }
.grid.cards { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.section-title { margin-bottom: 18px; }
.section-title > div { min-width: 0; }
.section-title h2 { color: #101828; font-size: 18px; letter-spacing: -.15px; }
.section-title small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }

.btn {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16,24,40,.09); }
.btn-primary { border-color: #4f46e5; background: linear-gradient(180deg, #5b53e8, #4f46e5); color: #fff; }
.btn-primary:hover { background: linear-gradient(180deg, #5148df, #4338ca); }
.btn-dark { border-color: #1d2939; background: #1d2939; color: #fff; }
.btn-light { border-color: #e0e7ff; background: #f4f3ff; color: #4338ca; }
.btn-light:hover { border-color: #c7d2fe; background: #eef2ff; }
.btn-success { border-color: #abefc6; background: var(--green-soft); color: #067647; }
.btn-danger { border-color: #fecdca; background: var(--red-soft); color: #b42318; }
.btn-sm { min-height: 34px; padding: 7px 11px; border-radius: 10px; font-size: 11.5px; }
.full-button { margin-top: 8px; }
.actions { gap: 8px; }

label { gap: 7px; color: #344054; font-size: 12.5px; font-weight: 700; }
input, select, textarea {
    min-height: 45px;
    padding: 10px 13px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    color: #101828;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.035);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: #98a2b3; }
input:hover, select:hover, textarea:hover { border-color: #aeb7c4; }
input:focus, select:focus, textarea:focus { border-color: #8176ef; box-shadow: var(--ring); }
select { cursor: pointer; }
textarea { min-height: 120px; line-height: 1.7; }
input[type="color"] { min-height: 45px; padding: 5px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { min-height: 0; box-shadow: none; }
.form-grid { gap: 16px; }
fieldset { min-width: 0; }

.table-wrap {
    margin-inline: -4px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: #d0d5dd transparent;
}
table { min-width: 760px; border-collapse: separate; border-spacing: 0; background: #fff; }
th, td { padding: 13px 14px; border-bottom: 1px solid #eaecf0; }
th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #475467;
    background: #f8fafc;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}
tbody tr { transition: background .14s; }
tbody tr:hover { background: #fafbff; }
tbody tr:last-child td { border-bottom: 0; }
td { color: #344054; font-size: 12.5px; }

.badge {
    min-height: 27px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #d9d6fe;
    color: #4338ca;
    background: #f4f3ff;
    font-size: 10.5px;
    font-weight: 800;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge.present, .badge.open { border-color: #abefc6; color: #067647; background: #ecfdf3; }
.badge.late { border-color: #fedf89; color: #b54708; background: #fffaeb; }
.badge.absent, .badge.closed { border-color: #fecdca; color: #b42318; background: #fef3f2; }
.badge.scheduled { border-color: #c7d7fe; color: #3538cd; background: #eef4ff; }
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #c7d7fe;
    border-radius: 13px;
    color: #3538cd;
    background: #eef4ff;
    box-shadow: 0 4px 14px rgba(53,56,205,.05);
    font-size: 12.5px;
}
.alert-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px currentColor; opacity: .18; }
.alert.success { border-color: #abefc6; color: #067647; background: #ecfdf3; }
.alert.error { border-color: #fecdca; color: #b42318; background: #fef3f2; }
.empty {
    min-height: 130px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 30px 18px;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
    color: #667085;
    background: #fafbfc;
}
.empty::before {
    content: "";
    width: 36px;
    height: 36px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: radial-gradient(circle, #98a2b3 2px, transparent 3px) center/9px 9px, #f2f4f7;
}
.empty h2, .empty p { margin: 0; }
.empty h2 { color: #344054; font-size: 18px; }
.empty .btn { margin-top: 8px; }

/* Dashboard */
.dashboard-stage-bar,
.simple-switcher,
.stage-filter-card {
    align-items: flex-start;
    padding: 19px 21px;
    border-color: #e0e7ff;
    background: linear-gradient(135deg, #fff 0%, #f8f8ff 100%);
    box-shadow: var(--shadow);
}
.dashboard-stage-bar > div:first-child strong,
.simple-switcher > div:first-child strong { color: #101828; font-size: 15px; }
.stage-pills { gap: 7px; }
.stage-pill {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-color: #e4e7ec;
    border-radius: 11px;
    color: #475467;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.025);
    font-size: 11.5px;
}
.stage-pill:hover { color: #4338ca; border-color: #c7d2fe; background: #f5f3ff; box-shadow: none; }
.stage-pill.active { color: #fff; border-color: #4f46e5; background: #4f46e5; box-shadow: 0 6px 14px rgba(79,70,229,.18); }
.stage-pill.manage { color: #475467; border-color: #cfd4dc; background: transparent; }
.dashboard-groups-card { padding: 22px; box-shadow: var(--shadow); }
.dashboard-group-grid { gap: 14px; }
.dashboard-group-card {
    position: relative;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-top: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.025);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.dashboard-group-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--group-color);
}
.dashboard-group-card::after {
    content: "";
    position: absolute;
    top: -42px;
    left: -36px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--group-color) 7%, transparent);
}
.dashboard-group-card:hover { transform: translateY(-2px); border-color: #d0d5dd; box-shadow: 0 12px 26px rgba(16,24,40,.08); }
.group-color-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: var(--group-color, var(--blue)); box-shadow: 0 0 0 4px color-mix(in srgb,var(--group-color,var(--blue)) 13%,transparent); }
.dashboard-group-head strong { color: #101828; font-size: 14px; }
.dashboard-group-head small { font-size: 11px; }
.dashboard-group-card p { margin-top: 16px; color: #475467; }
.dashboard-group-card .actions { margin-top: 16px; gap: 13px; }
.dashboard-group-card .actions a { color: #4f46e5; font-size: 11.5px; }
.dashboard-group-card .actions a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dashboard-simple-stats .card,
.analytics-simple-stats .card,
.grid.cards > .stat-card {
    position: relative;
    min-height: 128px;
    overflow: hidden;
    padding: 20px;
    border-color: #e4e7ec;
    box-shadow: var(--shadow);
}
.grid.cards > .stat-card::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #4f46e5;
}
.grid.cards > .stat-card:nth-child(2)::before { background: #079455; }
.grid.cards > .stat-card:nth-child(3)::before { background: #dc6803; }
.grid.cards > .stat-card:nth-child(4)::before { background: #d92d20; }
.stat-card span { color: #667085; font-size: 12px; }
.stat-card strong { margin-top: 9px; color: #101828; font-size: 31px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-card .kpi-note { color: #98a2b3; }
.alert-action-grid { gap: 18px; }
.alert-action-card {
    min-height: 142px;
    padding: 21px;
    border: 1px solid transparent;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(16,24,40,.11);
}
.payment-alert-card { background: linear-gradient(135deg,#4f46e5,#312e81); }
.absence-alert-card { background: linear-gradient(135deg,#e11d48,#9f1239); }
.alert-action-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(16,24,40,.15); }
.alert-action-icon { width: 50px; height: 50px; border-radius: 15px; }
.alert-action-card strong { font-size: 18px; }
.alert-action-card > b { min-width: 46px; height: 46px; border-radius: 14px; font-size: 20px; }
.revenue-card { overflow: hidden; }
.protected-revenue {
    min-height: 136px;
    padding: 19px;
    border-color: #e0e7ff;
    border-radius: 16px;
    background: linear-gradient(135deg,#fafaff,#f4f3ff);
}
.revenue-value { color: #1d2939; font-size: clamp(27px,3vw,36px); }
.revenue-eye { width: 48px; height: 48px; border-radius: 14px; background: #4f46e5; box-shadow: 0 8px 18px rgba(79,70,229,.22); }
.compact-session-list > div { padding: 13px 14px; border-radius: 13px; background: #fff; }

/* Stages and groups */
.stage-simple-page, .add-stage-simple,
.groups-list-card, .add-group-card-simple,
.sessions-simple-table, .optional-create-session,
.analytics-flex-filter, .analytics-primary-table, .analytics-log-card { box-shadow: var(--shadow); }
.simple-stage-list { gap: 9px; }
.simple-stage-row {
    min-height: 76px;
    padding: 15px 17px;
    border-color: #e4e7ec;
    border-radius: 14px;
    background: #fff;
    transition: .16s;
}
.simple-stage-row:hover { border-color: #c7d2fe; background: #fafaff; }
.simple-stage-info strong { color: #101828; font-size: 14px; }
.inline-stage-edit form { border-color: #d0d5dd; border-radius: 16px; box-shadow: var(--shadow-lg); }
.stage-add-inline { gap: 13px; }
.groups-page-layout { gap: 20px; }
.simple-groups-list { gap: 11px; }
.simple-group-card {
    grid-template-columns: 5px minmax(0,1fr) auto;
    border-color: #e4e7ec;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.025);
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.simple-group-card:hover { transform: translateY(-1px); border-color: #d0d5dd; box-shadow: 0 9px 22px rgba(16,24,40,.06); }
.simple-group-accent { border-radius: 0 16px 16px 0; }
.simple-group-main { padding: 17px 0; }
.simple-group-title strong { color: #101828; font-size: 14px; }
.simple-group-meta { gap: 8px 13px; color: #667085; }
.simple-group-meta span { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 8px; border-radius: 8px; background: #f8fafc; }
.simple-group-actions { padding-left: 16px; }
.inline-edit-panel[open] > summary { color: #4338ca; background: #eef2ff; }
.group-edit-form {
    padding: 21px;
    border-color: #d0d5dd;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}
.add-group-card-simple { top: 118px; }
.clean-weekdays { padding: 13px; border-color: #d0d5dd; border-radius: 13px; background: #fafbfc; }
.clean-weekdays legend { color: #344054; font-size: 12px; }
.clean-weekday-grid { gap: 7px; }
.clean-weekday-grid span {
    min-height: 39px;
    border-color: #e4e7ec;
    color: #475467;
    background: #fff;
    font-size: 11.5px;
    transition: .15s;
}
.clean-weekday-grid label:hover span { border-color: #aeb7c4; }
.clean-weekday-grid input:checked + span { border-color: #4f46e5; background: #4f46e5; box-shadow: 0 5px 12px rgba(79,70,229,.16); }

/* Filters, students and sessions */
.group-filter-strip { gap: 7px; }
.group-filter-chip {
    min-height: 34px;
    padding: 7px 11px;
    border-color: #e4e7ec;
    border-radius: 11px;
    color: #475467;
    background: #fff;
    font-size: 11.5px;
}
.group-filter-chip:hover { border-color: #c7d2fe; background: #fafaff; }
.group-filter-chip.active { box-shadow: 0 0 0 3px color-mix(in srgb,var(--group-color,var(--blue)) 9%,transparent); }
.group-inline-badge { display: inline-flex; align-items: center; gap: 7px; }
.schedule-summary-card {
    padding: 18px 20px;
    border-right-width: 4px;
    border-color: #e4e7ec;
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow);
}
.optional-create-session > summary { min-height: 44px; }
.optional-create-session > summary::after { content: "+"; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #4338ca; background: #eef2ff; font-size: 20px; }
.optional-create-session[open] > summary::after { content: "−"; }

/* Attendance experience */
.session-picker-simple { padding: 19px; }
.attendance-session-tabs { gap: 9px; }
.attendance-session-tab {
    min-width: 180px;
    padding: 11px 13px;
    border-color: #e4e7ec;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.03);
    transition: .16s;
}
.attendance-session-tab:hover { transform: translateY(-1px); border-color: var(--group-color); }
.attendance-session-tab.active { box-shadow: 0 0 0 3px color-mix(in srgb,var(--group-color) 10%,transparent); }
.attendance-header-card {
    min-height: 96px;
    padding: 20px 22px;
    border: 1px solid #e4e7ec;
    border-right-width: 5px;
    border-radius: 19px;
    background: linear-gradient(135deg,#fff,#fbfcff);
    box-shadow: var(--shadow);
}
.attendance-header-card strong { color: #101828; font-size: 20px; }
.attendance-search-card { max-width: 1080px; padding: 24px; box-shadow: var(--shadow); }
.attendance-search-box > span { right: 17px; color: #667085; font-size: 21px; }
.attendance-search-box input {
    min-height: 58px;
    padding: 14px 49px 14px 16px;
    border: 1px solid #cfd4dc;
    border-radius: 15px;
    background: #fff;
    font-size: 16px;
}
.attendance-search-box input:focus { border-color: #8176ef; box-shadow: 0 0 0 5px rgba(79,70,229,.1); }
.attendance-search-hint { min-height: 120px; border-color: #d0d5dd; background: #fafbfc; }
.attendance-roster { gap: 11px; margin-top: 14px; }
.attendance-student-card {
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid #e4e7ec;
    border-right-width: 4px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(16,24,40,.035);
    transition: .16s;
}
.attendance-student-card:hover { border-color: #d0d5dd; box-shadow: 0 10px 24px rgba(16,24,40,.07); }
.student-name-row { min-width: 0; display: flex; align-items: center; gap: 11px; }
.student-name-row > span:last-child { min-width: 0; }
.student-name-row strong, .student-name-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-student-top .student-name-row strong { color: #101828; font-size: 15.5px; }
.student-name-row small { margin-top: 3px; color: #667085; font-size: 11.5px; }
.attendance-mark-button { min-width: 145px; }
.progress-block {
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid #eaecf0;
    border-radius: 13px;
    background: #f8fafc;
}
.attendance-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    direction: rtl;
}
.attendance-dot {
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    transition: transform .15s, box-shadow .15s;
}
.attendance-dot:hover { transform: translateY(-1px); box-shadow: 0 5px 10px rgba(16,24,40,.08); }
.attendance-dot.present { border-color: #079455; background: #12b76a; box-shadow: inset 0 -2px 0 rgba(0,0,0,.09); }
.attendance-dot.absent { border-color: #d92d20; background: #f04438; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.attendance-dot.pending { border-color: #cbd5e1; background: #fff; }
.attendance-dot b { color: #98a2b3; font-size: 10px; font-variant-numeric: tabular-nums; }
.attendance-dot.present b, .attendance-dot.absent b { color: #fff; }
.progress-counts { gap: 8px; color: #667085; font-size: 11px; }
.progress-counts span { padding: 3px 8px; border-radius: 7px; background: #fff; }
.attendance-student-bottom { padding-top: 1px; }
.payment-status-wrap { gap: 9px; }
.payment-toggle {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
}
.payment-toggle.paid { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.payment-toggle.unpaid { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.payment-toggle.unpaid:hover { background: #fee4e2; }
.student-file-link { color: #4338ca; font-size: 11.5px; }
.student-file-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.attendance-message { margin-top: 14px; }

/* Analytics */
.analytics-flex-filter { padding: 21px; }
.analytics-flex-grid { gap: 13px; }
.filter-help { padding: 10px 12px; border-radius: 10px; background: #f8fafc; }
.analytics-report-toolbar {
    padding: 15px 17px;
    border-color: #e0e7ff;
    border-radius: 14px;
    background: linear-gradient(135deg,#fff,#f5f3ff);
    box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
.analytics-primary-table, .analytics-log-card { padding: 21px; }
.analytics-period-note, .period-summary { border-radius: 11px; }
.ranking-card { border: 1px solid #e4e7ec; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.ranking-number { border-radius: 9px; color: #4338ca; background: #eef2ff; }

/* Accounts, settings, demo */
.account-card { transition: transform .16s, box-shadow .16s; }
.account-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(16,24,40,.08); }
.security-settings-card { border-top: 3px solid #7f56d9; }
.pattern-lock { border: 1px solid #e4e7ec; background: #f8fafc; }
.pattern-lock button span { border-color: #98a2b3; }
.pattern-lock button.active span { border-color: #4f46e5; background: #4f46e5; box-shadow: 0 0 0 8px rgba(79,70,229,.12); }
.demo-main-card { border-top: 3px solid #4f46e5; }

/* Modal polish */
.modal { padding: 18px; }
.modal-backdrop { background: rgba(16,24,40,.62); backdrop-filter: blur(7px); }
.modal-panel {
    padding: 25px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 21px;
    box-shadow: 0 30px 90px rgba(16,24,40,.26);
}
.modal-close { width: 34px; height: 34px; border: 1px solid #e4e7ec; border-radius: 10px; color: #475467; background: #fff; }
.modal-close:hover { color: #101828; background: #f2f4f7; }
.modal-icon, .person-avatar { border-radius: 14px; }
.modal-person { padding: 13px 14px; border-radius: 13px; }
.modal-person:hover { border-color: #c7d2fe; background: #fafaff; }
.person-meta-box { border: 1px solid #eaecf0; background: #f8fafc; }

/* Login */
.login-page {
    position: relative;
    overflow: hidden;
    padding: 32px;
    background:
        radial-gradient(circle at 20% 18%, rgba(129,140,248,.26), transparent 24%),
        radial-gradient(circle at 85% 82%, rgba(14,165,233,.18), transparent 25%),
        linear-gradient(135deg,#0b1220 0%,#18213a 55%,#27245e 100%);
}
.login-page::before,
.login-page::after {
    content: "";
    position: fixed;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    pointer-events: none;
}
.login-page::before { top: -230px; right: -100px; box-shadow: 0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012); }
.login-page::after { bottom: -270px; left: -120px; box-shadow: 0 0 0 85px rgba(255,255,255,.014); }
.login-card {
    position: relative;
    z-index: 1;
    width: min(465px,100%);
    padding: 38px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 25px;
    box-shadow: 0 34px 90px rgba(0,0,0,.32);
}
.login-card::after {
    content: "نظام إدارة متكامل للحضور والمجموعات والاشتراكات";
    display: block;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #eaecf0;
    color: #98a2b3;
    text-align: center;
    font-size: 11px;
}
.login-home-link { color: #4f46e5; }
.login-brand { margin-bottom: 22px; }
.login-brand-mark { width: 58px; height: 58px; border-radius: 17px; box-shadow: 0 8px 22px rgba(79,70,229,.14), inset 0 0 0 1px rgba(79,70,229,.11); }
.login-brand h1 { color: #101828; font-size: 28px; letter-spacing: .8px; }
.login-brand-sub { color: #667085; }
.login-card form { gap: 17px; }
.login-card .btn { min-height: 48px; margin-top: 3px; }

/* Landing refresh */
.landing-page { background: #fff; }
.landing-header { padding-top: 20px; }
.landing-hero {
    min-height: 800px;
    background:
        radial-gradient(circle at 78% 20%, rgba(99,102,241,.28), transparent 25%),
        radial-gradient(circle at 18% 88%, rgba(14,165,233,.11), transparent 24%),
        linear-gradient(125deg,#090f1d 0%,#111c33 55%,#25215c 100%);
}
.landing-hero::before { opacity: .1; background-size: 64px 64px; }
.hero-eyebrow { border-color: rgba(165,180,252,.22); color: #c7d2fe; background: rgba(99,102,241,.08); }
.hero-copy h1 em { color: #a5b4fc; }
.hero-copy > p { color: #c3cce0; }
.btn-outline { border-color: rgba(255,255,255,.18); }
.dashboard-preview { border-color: rgba(255,255,255,.2); border-radius: 25px; box-shadow: 0 45px 100px rgba(0,0,0,.45); }
.preview-sidebar { background: #101828; }
.feature-card { border-radius: 20px; }
.feature-card.featured { border-color: #4f46e5; background: linear-gradient(145deg,#5b53e8,#3730a3); }
.feature-icon { color: #4f46e5; background: #eef2ff; }
.workflow-section { background: #f7f8fb; }
.landing-cta { background: #fff; }
.cta-card { background: linear-gradient(125deg,#111827,#312e81); }
.landing-footer { background: #0b1220; }

/* Friendly error pages */
.error-page {
    background:
        radial-gradient(circle at 70% 20%, rgba(99,102,241,.24), transparent 30%),
        linear-gradient(135deg,#0b1220,#1f2450);
}
.error-card { border-radius: 24px; background: rgba(255,255,255,.075); }
.error-code { color: #a5b4fc; }

/* Loading & micro interactions */
.btn.is-loading, button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after, button.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: elevatSpin .65s linear infinite;
}
@keyframes elevatSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Responsive behavior */
@media (max-width: 1180px) {
    .app-shell { grid-template-columns: 250px minmax(0,1fr); }
    .sidebar { padding-inline: 11px; }
    .dashboard-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .topbar-user > span:last-child { display: none; }
    .topbar-user { padding: 5px; border: 0; background: transparent; }
    .analytics-flex-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar {
        position: fixed;
        top: 0;
        right: -290px;
        width: 278px;
        transition: right .24s cubic-bezier(.2,.8,.2,1);
        box-shadow: -20px 0 50px rgba(16,24,40,.28);
    }
    .sidebar.open { right: 0; }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 35;
        display: block;
        visibility: hidden;
        opacity: 0;
        border: 0;
        background: rgba(16,24,40,.42);
        backdrop-filter: blur(3px);
        transition: opacity .2s, visibility .2s;
    }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar-backdrop { visibility: visible; opacity: 1; }
    .main-content { padding-inline: 20px; }
    .topbar { margin-inline: -20px; padding-inline: 20px; }
    .menu-button { display: grid; place-items: center; }
    .quick-action span:last-child { display: none; }
    .quick-action { width: 43px; padding: 10px; justify-content: center; }
    .grid.cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .grid.two, .groups-page-layout { grid-template-columns: 1fr; }
    .add-group-card-simple { position: static; }
    .group-edit-form { inset: 78px 20px auto; width: auto; max-height: calc(100vh - 100px); }
    .analytics-flex-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .main-content { padding: 0 14px 28px; }
    .topbar {
        min-height: 85px;
        margin: 0 -14px 18px;
        padding: 12px 14px;
    }
    .topbar p, .topbar-kicker { display: none; }
    .topbar h1 { font-size: 21px; }
    .topbar-actions { gap: 6px; }
    .topbar-user { display: none; }
    .menu-button, .quick-action { width: 40px; height: 40px; min-height: 40px; border-radius: 11px; }
    .card { padding: 17px; border-radius: 16px; }
    .section-title { align-items: flex-start; }
    .section-title h2 { font-size: 16px; }
    .dashboard-stage-bar, .simple-switcher, .stage-filter-card { padding: 16px; }
    .stage-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .stage-pill { flex: 0 0 auto; }
    .dashboard-group-grid { grid-template-columns: 1fr; }
    .grid.cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .grid.cards > .stat-card { min-height: 108px; padding: 16px; }
    .stat-card strong { font-size: 26px; }
    .alert-action-grid { gap: 11px; }
    .alert-action-card { min-height: 118px; padding: 17px; }
    .alert-action-card strong { font-size: 16px; }
    .alert-action-card p { font-size: 11px; }
    .form-grid, .mini-two { grid-template-columns: 1fr; }
    .simple-group-card { grid-template-columns: 5px minmax(0,1fr); }
    .simple-group-actions { grid-column: 2; padding: 0 0 15px; justify-content: flex-start; }
    .simple-group-meta span { flex: 1 1 140px; }
    .clean-weekday-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .schedule-summary-card { grid-template-columns: 1fr; }
    .attendance-header-card { align-items: stretch; padding: 17px; }
    .attendance-search-card { padding: 17px; }
    .attendance-student-top, .attendance-student-bottom { align-items: stretch; flex-direction: column; }
    .attendance-mark-button { width: 100%; }
    .payment-status-wrap { align-items: stretch; flex-direction: column; }
    .student-file-link { align-self: flex-start; padding-block: 5px; }
    .analytics-report-toolbar { align-items: stretch; flex-direction: column; }
    .modal-panel { padding: 21px 17px; border-radius: 18px; }
    .login-page { padding: 18px; }
    .login-card { padding: 27px 22px; border-radius: 21px; }
}
@media (max-width: 470px) {
    .grid.cards { grid-template-columns: 1fr; }
    .topbar-copy { max-width: calc(100vw - 130px); }
    .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn { width: 100%; }
    .actions .btn { flex: 1 1 130px; }
    .section-title { flex-direction: column; }
    .section-title > .btn, .section-title > a.btn { width: 100%; }
    .clean-weekday-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .attendance-dots { gap: 6px; }
    .attendance-dot { flex-basis: 29px; width: 29px; height: 29px; min-width: 29px; min-height: 29px; }
    .attendance-search-box input { font-size: 15px; }
    .modal-actions .btn, .error-actions .btn { width: 100%; }
}

/* Keep print output clean after the v10 visual layer. */
@media print {
    body { background: #fff !important; }
    body.app-page::before, .sidebar-backdrop, .topbar-actions { display: none !important; }
    .content-container { width: 100%; }
    .card { background: #fff !important; }
    .table-wrap { border: 0; border-radius: 0; }
}

/* v10 semantic metadata and search icon */
.simple-group-meta span { gap: 6px; }
.simple-group-meta span b { color: #344054; font-size: 10px; font-weight: 800; }
.simple-group-meta span b::after { content: ":"; }
.attendance-search-box > span { width: 21px; height: 21px; display: grid; place-items: center; }
.attendance-search-box > span svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.btn-light.is-loading::after,.btn-danger.is-loading::after,.btn-success.is-loading::after { color: var(--blue); }

/* v10.2 — centered co-branding + login co-branding */
.brand-cobrand {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding-inline: 4px;
}
.brand-cobrand .brand-mark-elevat {
    flex: 0 0 auto;
}
.brand-x {
    flex: 0 0 auto;
    color: rgba(255,255,255,.78);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}
.partner-brand-mark {
    width: 104px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.partner-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.login-brand-cobrand {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 22px;
    text-align: center;
}
.login-cobrand-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.login-brand-cobrand .login-brand-mark {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
}
.login-brand-word {
    color: #101828;
    font-size: 28px;
    line-height: 1;
    letter-spacing: .8px;
}
.login-brand-x {
    color: #667085;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}
.login-partner-brand-mark {
    width: 104px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 1 104px;
}
.login-partner-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.login-brand-cobrand .login-brand-sub {
    margin: 0;
}
.dashboard-powered-footer {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    padding: 18px 12px 2px;
    border-top: 1px solid #eaecf0;
}
.dashboard-powered-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    transition: color .18s ease, opacity .18s ease;
}
.dashboard-powered-footer a:hover {
    color: #667085;
}
.dashboard-powered-footer img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
@media (max-width: 900px) {
    .partner-brand-mark { width: 96px; }
}
@media (max-width: 470px) {
    .login-cobrand-row { gap: 7px; }
    .login-brand-cobrand .login-brand-mark { width: 50px; height: 50px; flex-basis: 50px; }
    .login-brand-word { font-size: 23px; }
    .login-brand-x { font-size: 20px; }
    .login-partner-brand-mark { width: 84px; height: 44px; flex-basis: 84px; }
}

/* v11 — attendance corrections, makeup attendance, daily operations, payment corrections */
.attendance-mode-switch { display:flex; gap:8px; margin:14px 0 8px; padding:5px; border:1px solid var(--line); border-radius:14px; background:#f8fafc; }
.attendance-mode-button { flex:1 1 0; min-height:42px; border:0; border-radius:10px; background:transparent; color:#475467; font-weight:850; cursor:pointer; }
.attendance-mode-button.active { background:#fff; color:#3538cd; box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05); }
.attendance-mode-button.makeup.active { color:#b54708; background:#fffaeb; }
.attendance-mode-note { margin-bottom:12px; color:#667085; font-size:12px; }
.attendance-current-status { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:7px; }
.makeup-badge { border-color:#fedf89 !important; color:#b54708 !important; background:#fffaeb !important; }
.attendance-edit-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px dashed #c7d7fe; border-radius:12px; background:#f8faff; }
.attendance-edit-controls > span { color:#475467; font-size:12px; font-weight:800; }
.attendance-status-actions { display:flex; flex-wrap:wrap; gap:7px; }
.attendance-student-links { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.daily-ops-card { margin-top:18px; }
.daily-ops-grid { margin-top:14px; }
.daily-absence-table .phone-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.daily-absence-table .guardian-phone { direction:ltr; unicode-bidi:plaintext; font-weight:800; }
.payment-row-voided { opacity:.62; background:#fafafa; }
.payment-row-voided td { text-decoration-color:#98a2b3; }
.payment-edit-card { scroll-margin-top:110px; }
.payment-inline-actions { display:flex; flex-wrap:wrap; gap:7px; }
.audit-note { margin-top:10px; padding:10px 12px; border-radius:10px; background:#f8fafc; color:#667085; font-size:12px; }
@media (max-width:700px) {
    .attendance-mode-switch,.attendance-edit-controls { flex-direction:column; align-items:stretch; }
    .attendance-status-actions { display:grid; grid-template-columns:1fr 1fr 1fr; }
    .attendance-status-actions .btn { width:100%; }
}


/* v11.1 — Student archive / permanent delete */
.student-delete-modal { width:min(620px,100%); }
.student-delete-counts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:-4px 0 18px; }
.student-delete-counts span { display:flex; align-items:baseline; justify-content:center; gap:6px; padding:11px 12px; border:1px solid #e4e7ec; border-radius:12px; background:#f8fafc; color:#475467; font-size:12px; font-weight:700; }
.student-delete-counts b { color:#101828; font-size:18px; }
.student-delete-options { display:grid; gap:13px; }
.student-delete-option { display:grid; gap:12px; padding:16px; border:1px solid #e4e7ec; border-radius:15px; background:#fff; }
.student-delete-option.keep-data { border-color:#c7d2fe; background:#fafaff; }
.student-delete-option.delete-all { border-color:#fecdca; background:#fffafa; }
.student-delete-option > div { display:grid; gap:5px; }
.student-delete-option strong { color:#101828; font-size:14px; }
.student-delete-option small { color:#667085; line-height:1.75; }
.student-delete-option.delete-all strong { color:#b42318; }
.student-delete-confirm { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; border:1px dashed #fda29b; border-radius:11px; color:#912018; background:#fff; font-size:12px; font-weight:700; cursor:pointer; }
.student-delete-confirm input { width:17px; height:17px; min-height:auto; margin-top:1px; flex:0 0 auto; accent-color:#d92d20; }
.student-delete-option .btn { width:100%; }
@media(max-width:600px){
    .student-delete-counts { grid-template-columns:1fr; }
}

/* v12 — manual monthly cycles / preserved month history */
.current-cycle-banner,
.cycle-current-hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    border-color:#c7d7fe;
    background:linear-gradient(135deg,#f8faff 0%,#ffffff 62%,#f4f3ff 100%);
}
.current-cycle-copy,
.cycle-current-main {
    display:flex;
    align-items:flex-start;
    gap:12px;
}
.current-cycle-copy > div,
.cycle-current-main > div { display:grid; gap:3px; }
.current-cycle-copy small,
.cycle-current-main small { color:#475467; font-weight:800; }
.current-cycle-copy strong,
.cycle-current-main h2 { color:#3538cd; font-size:22px; margin:0; }
.current-cycle-copy p,
.cycle-current-main p { margin:2px 0 0; color:#667085; line-height:1.7; }
.cycle-live-dot {
    width:11px;
    height:11px;
    margin-top:7px;
    border-radius:999px;
    background:#12b76a;
    box-shadow:0 0 0 5px rgba(18,183,106,.12);
    flex:0 0 auto;
}
.cycle-filter-card { margin-top:14px; }
.cycle-current-stats { margin-top:18px; }
.cycle-card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;
}
.cycle-archive-card {
    position:relative;
    display:grid;
    gap:7px;
    padding:15px;
    border:1px solid #e4e7ec;
    border-radius:15px;
    background:#fff;
    color:#344054;
    text-decoration:none;
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.cycle-archive-card:hover { transform:translateY(-1px); border-color:#c7d7fe; box-shadow:0 5px 18px rgba(16,24,40,.06); }
.cycle-archive-card.active { border-color:#6172f3; box-shadow:0 0 0 3px rgba(97,114,243,.09); }
.cycle-archive-card.is-current { background:#f8faff; }
.cycle-archive-card strong { color:#101828; font-size:16px; }
.cycle-archive-card small { color:#667085; }
.cycle-archive-card > div { display:flex; justify-content:space-between; gap:10px; color:#475467; font-size:12px; font-weight:800; }
.cycle-card-status {
    width:max-content;
    padding:4px 8px;
    border-radius:999px;
    background:#f2f4f7;
    color:#475467;
    font-size:11px;
    font-weight:850;
}
.cycle-archive-card.is-current .cycle-card-status { background:#ecfdf3; color:#027a48; }
.cycle-details { scroll-margin-top:100px; }
.cycle-detail-stats { margin:14px 0 18px; }
.cycle-data-section { border-top:1px solid #eaecf0; padding-top:4px; }
.cycle-data-section + .cycle-data-section { margin-top:12px; }
.cycle-data-section summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 2px;
    cursor:pointer;
    color:#344054;
}
.cycle-data-section summary span { min-width:28px; text-align:center; padding:3px 8px; border-radius:999px; background:#f2f4f7; font-size:11px; }
.cycle-rollover-card { scroll-margin-top:100px; border-color:#fecdca; }
.cycle-rollover-warning { padding:15px; border:1px solid #fedf89; border-radius:14px; background:#fffaeb; }
.cycle-rollover-warning strong { color:#93370d; font-size:17px; }
.cycle-rollover-warning p { margin:7px 0 0; color:#7a2e0e; line-height:1.8; }
.cycle-rollover-form { display:grid; gap:12px; margin-top:14px; }
.cycle-rollover-form .btn { width:100%; }
@media(max-width:760px){
    .current-cycle-banner,.cycle-current-hero { align-items:stretch; flex-direction:column; }
    .current-cycle-banner .actions { width:100%; }
    .current-cycle-banner .actions .btn { flex:1; }
}
.topbar-cycle-chip { display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid #d9d6fe; border-radius:12px; background:#f9f8ff; color:#344054; text-decoration:none; }
.topbar-cycle-chip .cycle-live-dot { width:8px; height:8px; margin:0; box-shadow:0 0 0 4px rgba(18,183,106,.10); }
.topbar-cycle-chip > span:last-child { display:grid; gap:1px; line-height:1.15; }
.topbar-cycle-chip small { color:#667085; font-size:10px; font-weight:750; }
.topbar-cycle-chip strong { color:#3538cd; font-size:12px; white-space:nowrap; }
@media(max-width:760px){ .topbar-cycle-chip { display:none; } }

/* v13 — Quiz grades workflow */
.quiz-alert-card { background:linear-gradient(135deg,#16a34a,#087a35); }
.modal-icon.quiz { color:#087a35; background:#eafaf0; }
.quiz-grade-person { cursor:pointer; }
.quiz-grade-actions { display:flex !important; grid-auto-flow:column; align-items:center; gap:10px !important; }
.quiz-grade-value { min-width:58px; padding:8px 12px; border-radius:12px; background:#ecfdf3; color:#067647 !important; text-align:center; font-size:18px !important; }
.quiz-entry-modal { z-index:130; }
.quiz-entry-panel { width:min(820px,100%); }
.quiz-entry-tip { margin:-6px 0 14px; padding:10px 13px; border:1px solid #d1fadf; border-radius:12px; background:#f0fdf4; color:#166534; font-size:13px; }
.quiz-entry-rows { display:grid; gap:9px; max-height:50vh; overflow:auto; padding-left:4px; }
.quiz-entry-row { display:grid; grid-template-columns:38px minmax(0,1fr) 130px; align-items:center; gap:12px; padding:11px 12px; border:1px solid #e4e7ec; border-radius:14px; background:#fff; }
.quiz-entry-row:focus-within { border-color:#86efac; box-shadow:0 0 0 3px rgba(34,197,94,.10); }
.quiz-entry-index { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#f2f4f7; color:#475467; font-size:12px; font-weight:900; }
.quiz-entry-student { display:grid; gap:3px; min-width:0; }
.quiz-entry-student strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#101828; }
.quiz-entry-student small { color:#667085; font-size:11px; }
.quiz-grade-input { width:100%; min-height:44px; border:1px solid #d0d5dd; border-radius:11px; background:#fff; text-align:center; font-size:19px; font-weight:900; color:#067647; direction:ltr; }
.quiz-grade-input:focus { outline:0; border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.quiz-entry-actions { display:flex; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid #eaecf0; }
.quiz-entry-actions .btn { min-width:160px; }
@media(min-width:901px){ .alert-action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:640px){
    .quiz-entry-row { grid-template-columns:32px minmax(0,1fr) 95px; gap:8px; padding:10px 8px; }
    .quiz-entry-actions { flex-direction:column-reverse; }
    .quiz-entry-actions .btn { width:100%; }
    .quiz-grade-actions { width:100%; justify-content:space-between; }
}

@media(min-width:641px){ .student-delete-counts { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* =========================================================
   V14 — continuous groups + safe responsive group editor
   ========================================================= */
.group-edit-modal { z-index:140; }
.group-edit-modal .modal-panel { overflow-x:hidden; }
.group-edit-modal-form { display:grid; gap:0; }
.group-edit-modal-form .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.group-edit-modal-form .edit-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.group-edit-icon { color:#1d4ed8; background:#eff6ff; }
.continuous-group-note { min-height:44px; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:10px 12px; border:1px solid #bbf7d0; border-radius:12px; background:#f0fdf4; }
.continuous-group-note strong { color:#166534; font-size:13px; }
.continuous-group-note small { color:#4b5563; font-size:11px; line-height:1.5; }
.simple-group-meta span b { margin-left:5px; }

@media (max-width:800px) {
    .group-edit-modal { padding:10px; align-items:flex-start; }
    .group-edit-modal .modal-panel { width:100%; max-height:calc(100dvh - 20px); margin-top:0; padding:22px 16px 16px; border-radius:18px; }
    .group-edit-modal-form .form-grid { grid-template-columns:1fr; }
    .group-edit-modal-form .form-grid .full { grid-column:auto; }
    .group-edit-modal-form .edit-actions { flex-direction:column; }
    .group-edit-modal-form .edit-actions .btn { width:100%; }
}