/* ==========================================================================
   Rockmah modern theme — layered after site.css on every ASP.NET host.
   Keeps the markup and class names; only re-skins tokens and the key surfaces
   (header, hero, cards, buttons, forms, tables, portal sidebar).
   ========================================================================== */
:root {
    --rm-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rm-bg: #f6f7fb;
    --rm-surface: #ffffff;
    --rm-ink: #0f172a;
    --rm-ink-2: #334155;
    --rm-muted: #64748b;
    --rm-line: #e2e8f0;
    --rm-accent: #4f46e5;
    --rm-accent-2: #7c3aed;
    --rm-accent-soft: #eef2ff;
    --rm-success: #059669;
    --rm-warn: #d97706;
    --rm-danger: #dc2626;
    --rm-radius: 16px;
    --rm-radius-sm: 10px;
    --rm-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .18);
    --rm-shadow-lg: 0 20px 50px -20px rgba(15, 23, 42, .3);
    --rm-ring: 0 0 0 4px rgba(79, 70, 229, .18);
    --background: var(--rm-bg);
    --text-dark: var(--rm-ink);
    --text-medium: var(--rm-ink-2);
    --text-light: var(--rm-muted);
    --border-light: var(--rm-line);
    --rockmah-green: var(--rm-accent);
    --rockmah-green-light: var(--rm-accent-2);
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--rm-font);
    background:
        radial-gradient(900px 420px at 0% -10%, rgba(79, 70, 229, .08), transparent 55%),
        radial-gradient(700px 380px at 100% 0%, rgba(124, 58, 237, .07), transparent 50%),
        var(--rm-bg);
    color: var(--rm-ink-2);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--rm-ink); letter-spacing: -.015em; line-height: 1.2; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
a { color: var(--rm-accent); }
code { background: var(--rm-accent-soft); color: var(--rm-accent); padding: .1em .4em; border-radius: 6px; font-size: .92em; }

/* --- Header ------------------------------------------------------------ */
header.site-header {
    background: rgba(15, 23, 42, .92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    padding: 12px 0;
}
.logo-text { font-weight: 800; letter-spacing: .12em; background: linear-gradient(90deg, #c7d2fe, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-portal-link, .nav-admin-link { padding: 8px 12px; border-radius: 999px; transition: background .15s, color .15s; }
.nav-portal-link:hover, .nav-admin-link:hover { background: rgba(255, 255, 255, .1); }
.btn-login { background: var(--rm-accent); border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 600; box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .7); }
.btn-login:hover { background: var(--rm-accent-2); }

/* --- Hero + home -------------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
    color: #fff;
    padding: 84px 0 72px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; inset: auto -10% -40% auto; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 60%); filter: blur(20px);
}
.hero-title { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.hero-highlight { background: linear-gradient(90deg, #a5b4fc, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-subtitle { color: #c7d2fe; max-width: 46rem; font-size: 1.1rem; }
.hero .btn-primary, .hero .btn-secondary { margin-top: 18px; }
.section-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.section-subtitle { color: var(--rm-muted); }
.course-card, .card, .entity-card, .stat-card, .admin-section, .auth-card, .info-box, .notice-item {
    background: var(--rm-surface);
    border: 1px solid var(--rm-line);
    border-radius: var(--rm-radius);
    box-shadow: var(--rm-shadow);
}
.course-card { transition: transform .2s ease, box-shadow .2s ease; }
.course-card:hover, .card:hover, .entity-card:hover { transform: translateY(-3px); box-shadow: var(--rm-shadow-lg); border-color: #c7d2fe; }
.course-badge { border-radius: 999px; font-weight: 600; letter-spacing: .02em; }
.course-badge-excel { background: #dcfce7; color: #166534; }
.course-badge-ai { background: #ede9fe; color: #5b21b6; }
.btn-course { border-radius: 12px; font-weight: 700; }
.btn-course-excel { background: var(--rm-ink); }
.btn-course-excel:hover { background: #1e293b; }
.btn-course-ai { background: var(--rm-accent); }
.btn-course-ai:hover { background: var(--rm-accent-2); }

/* --- Buttons, badges, forms -------------------------------------------- */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-sm, .google-btn {
    border-radius: 12px; font-weight: 600; letter-spacing: .005em; transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--rm-accent); border: 0; box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .8); }
.btn-primary:hover { background: var(--rm-accent-2); transform: translateY(-1px); }
.btn-secondary { background: var(--rm-surface); color: var(--rm-ink); border: 1px solid var(--rm-line); }
.btn-secondary:hover { border-color: #c7d2fe; background: var(--rm-accent-soft); color: var(--rm-accent); }
.btn-sm { background: var(--rm-accent-soft); color: var(--rm-accent); border: 0; }
.btn-sm:hover { background: #e0e7ff; }
.btn-link { color: var(--rm-accent); }
.badge { border-radius: 999px; font-weight: 600; font-size: .75rem; padding: 3px 10px; letter-spacing: .02em; }
.form-control { border: 1px solid var(--rm-line); border-radius: var(--rm-radius-sm); padding: 11px 13px; background: #fff; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.form-control:focus { border-color: var(--rm-accent); box-shadow: var(--rm-ring); outline: none; }
.form-group label { font-weight: 600; color: var(--rm-ink-2); font-size: .9rem; }
.validation-summary-errors { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: var(--rm-radius-sm); padding: 12px 14px; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* --- Tables ------------------------------------------------------------ */
.table-scroll { border: 1px solid var(--rm-line); border-radius: var(--rm-radius); background: var(--rm-surface); box-shadow: var(--rm-shadow); }
.table, .data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .data-table th { background: #f8fafc; color: var(--rm-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--rm-line); }
.table td, .data-table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.table tbody tr:hover td, .data-table tbody tr:hover td { background: #fafbff; }

/* --- Stats + cards ------------------------------------------------------ */
.stat-card { padding: 20px 22px; }
.stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--rm-ink); }
.stat-label { color: var(--rm-muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }
.card h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.card p { color: var(--rm-muted); }
.admin-section { padding: 22px 24px; margin-bottom: 20px; }
.admin-section h2 { font-size: 1.15rem; margin-bottom: 12px; }
.page-lead { color: var(--rm-muted); font-size: 1.05rem; }

/* --- Portal shell ------------------------------------------------------- */
body.is-portal { --background: var(--rm-bg); }
body.is-portal .site-header { background: rgba(15, 23, 42, .96); }
.portal-sidebar { background: #0b1120; border-right: 1px solid rgba(255, 255, 255, .06); }
.portal-kicker { color: #818cf8; letter-spacing: .14em; font-weight: 700; }
.portal-nav-group { color: #64748b; font-size: .68rem; letter-spacing: .12em; font-weight: 700; }
.portal-nav-link { color: #cbd5e1; border-radius: 12px; transition: background .15s, color .15s; }
.portal-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.portal-nav-link.is-active, body.is-admin .portal-nav-link.is-active, body.is-instructor .portal-nav-link.is-active {
    background: linear-gradient(90deg, rgba(79, 70, 229, .35), rgba(124, 58, 237, .2)); color: #fff; box-shadow: inset 3px 0 0 #818cf8;
}
.portal-icon-btn { border-radius: 10px; }
.portal-main { padding: 28px 28px 48px; }
body.is-portal .portal-main h1 { font-size: 1.75rem; }
.lesson-row { background: var(--rm-surface); border: 1px solid var(--rm-line); border-radius: var(--rm-radius-sm); padding: 12px 14px; margin-bottom: 8px; transition: border-color .15s, transform .12s; }
.lesson-row:hover { border-color: #c7d2fe; transform: translateX(2px); }
.lesson-row-link { font-weight: 600; color: var(--rm-ink); }
.module-block h2 { font-size: 1.1rem; margin: 22px 0 10px; }
.progress-chip { background: var(--rm-accent-soft); color: var(--rm-accent); border-radius: 999px; font-weight: 700; }
.player-16x9 { border-radius: var(--rm-radius); overflow: hidden; box-shadow: var(--rm-shadow-lg); background: #000; }
.lesson-tools { margin: 6px 0 18px; }
.community-post .community-body, .tutor-msg .community-body { white-space: pre-wrap; line-height: 1.65; }
.tutor-thread { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; }
.tutor-msg { padding: 12px 16px; border-radius: 14px; max-width: 85%; }
.tutor-msg-user { align-self: flex-end; background: var(--rm-accent); color: #fff; }
.tutor-msg-user strong { color: #e0e7ff; }
.tutor-msg-assistant { align-self: flex-start; background: #f1f5f9; }
.quiz-correct { background: #ecfdf5; border-radius: 8px; padding: 4px 8px; }
.quiz-wrong { background: #fef2f2; border-radius: 8px; padding: 4px 8px; }
.inline-form { display: inline-block; margin: 0 4px 0 0; }
.inline-form .form-group { display: inline-block; margin: 0 8px 8px 0; vertical-align: bottom; }
.inline-form .form-actions { display: inline-block; vertical-align: bottom; }

/* --- Auth cards --------------------------------------------------------- */
.auth-card { padding: 34px; }
.auth-title { font-weight: 800; letter-spacing: -.02em; }
.google-btn { border: 1px solid var(--rm-line); background: #fff; }
.google-btn:hover { border-color: #c7d2fe; background: var(--rm-accent-soft); }

/* --- Footer ------------------------------------------------------------- */
footer { background: #0b1120; color: #94a3b8; border-top: 1px solid rgba(255, 255, 255, .06); }
.footer-main { color: #e2e8f0; }

@media (max-width: 768px) {
    .hero { padding: 56px 0 48px; }
    .portal-main { padding: 20px 16px 40px; }
}

/* --- Education home extras --------------------------------------------- */
.hero-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 700; color: #a5b4fc; margin-bottom: 12px; }
.hero-stats { list-style: none; display: flex; gap: 28px; margin: 34px 0 0; padding: 0; flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.hero-stats span { color: #a5b4fc; font-size: .85rem; }
.course-card { display: flex; flex-direction: column; overflow: hidden; }
.course-card-image { width: calc(100% + 48px); margin: -24px -24px 16px; aspect-ratio: 16 / 9; object-fit: cover; }
.course-price { font-weight: 800; font-size: 1.25rem; color: var(--rm-ink); margin: 8px 0 14px; }
.course-price .price-was { margin-left: 8px; }
.pillars-section { padding-top: 0; }
.pillars-section .card h3 { font-size: 1.1rem; }
.pillars-section .card .btn-sm { display: inline-block; margin-top: 10px; }