.portal-page { background: #020b1d; }
.portal-header { position: fixed; }
.portal-main { min-height: calc(100vh - 150px); padding-top: 88px; }
.portal-footer { margin-top: 72px; border-top: 1px solid var(--line); }
.portal-footer .footer-bottom { min-height: 88px; }
.nav-auth-form { margin: 0; }
.mobile-menu-auth { display: none; }
.mobile-menu-auth button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.primary-nav a[aria-current="page"] { color: var(--cyan-400); }
.flash-stack { position: fixed; top: 100px; left: 50%; z-index: 90; transform: translateX(-50%); }
.flash { margin-bottom: 8px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 12px; background: #0a234a; box-shadow: var(--shadow); }
.flash-success { border-color: rgba(50, 211, 144, .55); }
.flash-error { border-color: rgba(255, 94, 94, .6); }
.flash-info { border-color: rgba(40, 210, 255, .5); }

.portal-main h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.portal-main h2, .portal-main h3 { line-height: 1.15; letter-spacing: -.025em; }
.portal-main input, .portal-main textarea { width: 100%; border: 1px solid rgba(93, 151, 234, .3); border-radius: 10px; background: #051a39; color: var(--white); }
.portal-main input { min-height: 50px; padding: 0 14px; }
.portal-main textarea { padding: 12px 14px; resize: vertical; }
.portal-main input:focus, .portal-main textarea:focus { border-color: var(--blue-400); outline: 2px solid rgba(25, 165, 255, .2); }
.portal-main code { color: #d8efff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--muted); }

.auth-section { display: grid; place-items: center; padding: 72px 0 20px; }
.auth-card { width: min(100%, 560px); padding: clamp(28px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(10, 35, 74, .88), rgba(3, 20, 47, .92)); box-shadow: var(--shadow); }
.auth-card h1 { margin: 14px 0 12px; font-size: clamp(2.2rem, 7vw, 4rem); }
.form-intro, .form-switch { color: var(--muted); }
.form-stack { display: grid; gap: 18px; margin-top: 28px; }
.form-stack label, .admin-review-form label { display: grid; gap: 7px; color: #dce8fa; font-weight: 700; }
.form-stack label small { color: var(--muted); font-weight: 500; }
.form-errors { margin: 20px 0; padding: 14px 18px; border: 1px solid rgba(255, 100, 100, .55); border-radius: 12px; background: rgba(142, 28, 42, .18); color: #ffd8dc; }
.form-errors p, .form-errors ul { margin: 5px 0; }
.form-switch { margin: 24px 0 0; text-align: center; }
.form-switch a, .admin-payment a { color: var(--cyan-400); font-weight: 750; }

.catalogue-hero { padding: 84px 0 64px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 15%, rgba(7,125,246,.16), transparent 35%); }
.catalogue-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 70px; }
.catalogue-hero h1 { margin: 18px 0 24px; }
.catalogue-hero p { max-width: 650px; color: var(--muted); font-size: 1.15rem; }
.catalogue-search { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(7, 27, 59, .78); }
.catalogue-search > label { display: block; margin-bottom: 10px; font-weight: 800; }
.catalogue-search > div { display: flex; gap: 10px; }
.catalogue-results { padding-top: 64px; padding-bottom: 40px; }
.results-heading, .account-heading, .lesson-heading, .admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.results-heading h2, .account-heading h2, .lesson-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.3rem); }
.results-heading p, .account-heading p, .lesson-heading > p, .admin-heading > p { color: var(--muted); }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.catalogue-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.catalogue-card-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #09254f; }
.catalogue-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.catalogue-card:hover .catalogue-card-image img { transform: scale(1.025); }
.catalogue-card-body { display: grid; align-items: start; padding: 24px; }
.catalogue-card h3 { margin: 5px 0 12px; font-size: 1.45rem; }
.catalogue-card h3 a:hover { color: var(--cyan-400); }
.catalogue-card-body > p:not(.skill-category) { min-height: 78px; color: var(--muted); }
.catalogue-meta { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 22px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); }
.catalogue-meta strong { color: var(--white); font-size: 1.2rem; }
.catalogue-empty, .not-found, .review-state { margin: 32px auto; padding: 60px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; background: var(--card); }
.catalogue-empty > span, .review-state > span { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: var(--blue-500); font-size: 1.5rem; font-weight: 900; }
.not-found { margin-top: 70px; }
.not-found p { color: var(--muted); }

.skill-hero { padding: 72px 0; background: radial-gradient(circle at 15% 0, rgba(9,126,246,.16), transparent 32%); }
.skill-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: center; gap: clamp(40px, 8vw, 100px); }
.skill-hero-copy h1 { margin: 17px 0 24px; }
.skill-hero-copy > p:last-of-type { max-width: 700px; color: var(--muted); font-size: 1.12rem; }
.skill-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.skill-facts span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: #cbd9ee; }
.enrol-card { overflow: hidden; border: 1px solid rgba(70,153,255,.4); border-radius: var(--radius-lg); background: #061b3c; box-shadow: var(--shadow); }
.enrol-card > img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.enrol-card-body { padding: 26px; }
.enrol-card-body h2 { margin: 10px 0; }
.enrol-card-body p { color: var(--muted); }
.enrol-card-body .button { width: 100%; margin-top: 8px; }
.enrol-card-body small { display: block; margin-top: 12px; color: var(--muted); text-align: center; }
.price-label { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.skill-price { margin: 2px 0 8px; font-size: 2.5rem; font-weight: 900; }
.access-badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(35, 202, 132, .14); color: #79f1be; font-size: .76rem; font-weight: 850; text-transform: uppercase; }
.lesson-section { padding-top: 64px; }
.lesson-list { display: grid; gap: 18px; }
.lesson-card { display: grid; grid-template-columns: 74px 1fr; gap: 20px; padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(140deg, rgba(9,37,79,.74), rgba(3,20,47,.8)); }
.lesson-card.is-locked { background: rgba(4, 20, 45, .72); }
.lesson-number { color: var(--blue-400); font-size: 1.55rem; font-weight: 900; }
.lesson-title-row { display: flex; justify-content: space-between; gap: 20px; }
.lesson-title-row p { margin: 0 0 4px; color: var(--cyan-400); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.lesson-title-row h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.lesson-summary { color: var(--muted); }
.lesson-content { max-width: 820px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: #d7e2f3; }
.lesson-content p { margin: 0 0 18px; }
.exercise { margin-top: 26px; padding: 20px; border-left: 3px solid var(--orange-500); border-radius: 0 10px 10px 0; background: rgba(255,106,0,.08); }
.exercise p { margin: 5px 0 0; }
.lock-icon { font-size: 1.3rem; }
.locked-panel { margin-top: 22px; padding: 20px; border: 1px dashed rgba(98,145,211,.35); border-radius: 12px; color: var(--muted); }
.locked-panel p { margin: 5px 0 8px; }

.account-hero, .checkout-heading { padding-top: 70px; padding-bottom: 30px; }
.account-hero h1, .checkout-heading h1 { margin: 14px 0; }
.account-hero > p:last-child, .checkout-heading > p:last-child { color: var(--muted); }
.account-section { padding: 28px 0 40px; }
.owned-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.owned-card { display: grid; grid-template-columns: 190px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.owned-card img { width: 100%; height: 100%; object-fit: cover; }
.owned-card > div { padding: 22px; }
.owned-card h3 { margin: 10px 0 20px; }
.account-empty { padding: 32px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--muted); }
.account-empty h3 { margin-top: 0; color: var(--white); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; background: rgba(5,25,55,.7); }
th, td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: #cdd9ed; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
td { color: var(--muted); }
td a { color: var(--white); font-weight: 700; }
.status-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: rgba(39,129,240,.16); color: #8dccff; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.status-paid, .status-approved { background: rgba(35,202,132,.14); color: #75efba; }
.status-rejected { background: rgba(255,95,95,.12); color: #ff9ca3; }

.checkout-section { padding-bottom: 30px; }
.demo-warning { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 24px; padding: 15px 18px; border: 1px solid #ff9f43; border-radius: 12px; background: rgba(255,106,0,.1); color: #ffe1c5; }
.checkout-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: start; gap: 24px; }
.checkout-card, .checkout-help { padding: clamp(24px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.checkout-card h2, .checkout-help h2 { margin-top: 0; }
.checkout-help ol { display: grid; gap: 14px; padding-left: 22px; color: var(--muted); }
.summary-skill { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; }
.summary-skill img { border-radius: 10px; }
.summary-skill span { display: block; color: var(--muted); }
.summary-total { display: flex; justify-content: space-between; margin: 25px 0; padding: 20px 0; border-block: 1px solid var(--line); font-size: 1.25rem; }
.payment-card-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.payment-card-head p { margin: 0; color: var(--muted); }
.payment-card-head strong { font-size: 2.5rem; }
.payment-card-head > span { color: var(--muted); font-size: .8rem; }
.payment-details { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: center; margin: 28px 0; }
.dummy-qr { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; border: 12px solid #fff; background: repeating-conic-gradient(#061b3c 0 25%, #fff 0 50%) 0 / 28px 28px; color: #fff; text-align: center; }
.dummy-qr::before { position: absolute; inset: 38px 12px; content: ''; background: rgba(3,20,47,.96); }
.dummy-qr span, .dummy-qr small { position: relative; z-index: 1; }
.dummy-qr span { font-size: 1.35rem; font-weight: 950; }
.dummy-qr small { position: absolute; bottom: 42px; font-size: .58rem; font-weight: 850; }
.payment-details dl { margin: 0; }
.payment-details dl div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.payment-details dt { color: var(--muted); font-size: .78rem; }
.payment-details dd { margin: 2px 0 0; font-weight: 750; }
.copy-button { margin-left: 5px; border: 0; background: none; color: var(--cyan-400); cursor: pointer; }
.working-hours { padding: 14px; border-radius: 10px; background: rgba(25,165,255,.08); color: var(--muted); font-size: .88rem; }
.review-state { max-width: 760px; }

.admin-section { padding-top: 70px; }
.admin-heading h1 { margin-top: 12px; }
.admin-list { display: grid; gap: 18px; }
.admin-payment { padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.admin-payment h2 { margin: 12px 0 20px; }
.admin-payment dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 30px; }
.admin-payment dl div { min-width: 0; }
.admin-payment dt { color: var(--muted); font-size: .74rem; text-transform: uppercase; }
.admin-payment dd { margin: 4px 0; overflow-wrap: anywhere; }
.admin-review-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.admin-review-form > div { display: flex; gap: 10px; }
.button-danger { border-color: rgba(255,95,95,.65); background: rgba(152,30,44,.38); }
.review-note { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }

@media (max-width: 980px) {
    .catalogue-hero-grid, .skill-hero-grid, .checkout-grid { grid-template-columns: 1fr; }
    .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
    .enrol-card { width: min(100%, 480px); }
    .admin-payment dl { grid-template-columns: repeat(2, 1fr); }
    .admin-review-form { grid-template-columns: 1fr; }
    .primary-nav .mobile-menu-auth { display: block; width: 100%; margin: 0; padding: 12px 0; font-size: clamp(1.6rem, 7vw, 2.5rem); }
    .primary-nav form.mobile-menu-auth button { width: 100%; text-align: left; font-size: inherit; }
}

@media (max-width: 720px) {
    .portal-main { padding-top: 78px; }
    .nav-auth-form { display: none; }
    .catalogue-hero, .skill-hero { padding: 50px 0; }
    .catalogue-hero-grid { gap: 34px; }
    .catalogue-search > div { flex-direction: column; }
    .catalogue-grid, .owned-grid { grid-template-columns: 1fr; }
    .results-heading, .account-heading, .lesson-heading, .admin-heading { align-items: start; flex-direction: column; gap: 5px; }
    .lesson-card { grid-template-columns: 1fr; }
    .lesson-number { font-size: 1rem; }
    .owned-card { grid-template-columns: 120px 1fr; }
    .demo-warning { flex-direction: column; }
    .payment-details { grid-template-columns: 150px 1fr; }
    .admin-payment dl { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .payment-details, .summary-skill, .owned-card { grid-template-columns: 1fr; }
    .dummy-qr { width: 180px; }
    .owned-card img { aspect-ratio: 3 / 2; }
    .admin-review-form > div { align-items: stretch; flex-direction: column; }
}