/* ============================================================
   SSC Revision Engine — v3.5 Phase 1
   Dual-hub catalogue + medal-ready progress UI
============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
html { background: #dde5ed; overflow-y: scroll; }
body { background: #dde5ed; color: #222; padding: 8px; }
.container { width: 96%; max-width: 1700px; margin: 20px auto; padding: 10px; }
header { text-align: center; margin-bottom: 18px; }
header h1 { font-size: 27px; margin-bottom: 8px; color: #1f4e79; }
header p { color: #607080; font-size: 14px; }
.card { background: #d8e1e8; border: 1px solid #cbd6df; border-radius: 12px; padding: 24px; box-shadow: 0 5px 18px rgba(0,0,0,.07); text-align: left; }
.hidden { display: none !important; }
button { cursor: pointer; padding: 10px 18px; border: none; border-radius: 8px; font-size: 14px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.home-message { min-height: 22px; margin-top: 14px; color: #8a1c1c; font-weight: 700; }

/* ---------- Level 1: GK PYQs / GK Revision ---------- */
.portal-card { max-width: 1100px; margin: 0 auto; }
.portal-heading { text-align: center; margin-bottom: 24px; }
.portal-heading h2 { color: #173f63; font-size: 25px; }
.portal-heading p { margin-top: 8px; color: #58697a; line-height: 1.5; }
.hub-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.hub-card { min-height: 245px; padding: 26px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #bfcfdd; background: #eef5fb; color: #173f63; box-shadow: 0 5px 14px rgba(31,78,121,.09); transition: transform .16s, box-shadow .16s, border-color .16s; }
.hub-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31,78,121,.14); border-color: #8fb0cd; }
.hub-revision { background: #f3f1e9; border-color: #d7cfb9; color: #5b4b1f; }
.hub-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; opacity: .72; margin-bottom: 14px; }
.hub-card strong { font-size: 31px; line-height: 1.05; }
.hub-description { margin-top: 16px; line-height: 1.5; color: #536678; }
.hub-revision .hub-description { color: #685f47; }
.hub-meta { margin-top: auto; padding-top: 24px; font-size: 12px; font-weight: 700; opacity: .72; }
.hub-open { margin-top: 10px; font-size: 14px; font-weight: 800; }

/* ---------- Level 2 / 3 catalogue ---------- */
.catalogue-card { max-width: 1280px; margin: 0 auto; }
.screen-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; align-items: start; margin-bottom: 20px; }
.back-btn { background: #e8eff5; border: 1px solid #bfd0df; color: #1f4e79; font-weight: 800; padding: 8px 12px; }
.back-btn:hover { background: #dce9f3; }
.screen-heading h2 { color: #173f63; font-size: 24px; }
.screen-heading p { color: #596a79; margin-top: 6px; line-height: 1.45; }
.breadcrumb { color: #6b7a87; font-size: 12px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }
.count-pill { white-space: nowrap; background: #e7f0f8; border: 1px solid #c5d5e4; border-radius: 999px; padding: 8px 12px; color: #1f4e79; font-size: 13px; font-weight: 700; }
.subject-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.subject-select-card { width: 100%; min-height: 88px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; text-align: left; background: #edf3f8; border: 1px solid #c8d7e3; color: #173f63; padding: 13px 14px; transition: transform .14s, background .14s; }
.subject-select-card:hover { transform: translateY(-1px); background: #e5eff7; }
.subject-status-pending { background: #eef0f2; color: #4e5963; border-color: #d3dade; }
.subject-status-partial { background: #f0f4f7; }
.subject-order { width: 34px; height: 34px; border-radius: 9px; background: #d9e7f2; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.subject-card-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.subject-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; }
.subject-name-row strong { min-width: 0; }
.subject-status-text { color: #697987; font-size: 12px; font-weight: 600; }
.subject-chevron { font-size: 30px; color: #7890a4; }
.topic-list { border: 1px solid #c8d5df; border-radius: 10px; overflow: hidden; background: #eef4f8; }
.topic-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #d7e1e8; }
.topic-row:last-child { border-bottom: none; }
.topic-row-label { min-width: 0; display: flex; align-items: center; gap: 8px; line-height: 1.35; }
.topic-number { color: #1f4e79; font-size: 13px; font-weight: 800; }
.topic-name { font-size: 14px; font-weight: 700; }
.topic-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.start-quiz-btn { min-width: 72px; padding: 8px 12px; color: #fff; background: #1976d2; font-size: 12px; font-weight: 800; }
.start-quiz-btn:hover { background: #145ca4; }
.start-revision { background: #75621c; }
.start-revision:hover { background: #5f5018; }
.pending-chip { white-space: nowrap; padding: 6px 9px; border-radius: 999px; background: #e0e3e6; color: #68727b; font-size: 11px; font-weight: 800; }
.pending-panel { padding: 30px; text-align: center; background: #eef1f3; color: #58636d; }
.pending-panel strong { display: block; font-size: 17px; color: #45515c; margin-bottom: 8px; }
.pending-panel p { line-height: 1.5; }

/* ---------- Attempt medal ----------
   Custom CSS medal inspired by the uploaded reference.
   Ribbons are above the disc (180°-style inversion of the reference layout).
--------------------------------------------------------------- */
.attempt-medal { position: relative; width: 38px; height: 43px; flex: 0 0 38px; display: inline-block; vertical-align: middle; }
.medal-disc { position: absolute; left: 5px; bottom: 0; width: 28px; height: 28px; border-radius: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #ffe99a 0 22%, #e2ad31 55%, #a96f13 100%); border: 2px solid #8b5c10; box-shadow: inset 0 0 0 2px #f8d66e, 0 2px 5px rgba(73,45,4,.28); }
.medal-count { color: #4c3207; font-size: 12px; font-weight: 900; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.medal-ribbon { position: absolute; top: 0; width: 11px; height: 20px; z-index: 1; background: linear-gradient(90deg,#8d1717,#e35252 48%,#971b1b); border: 1px solid #7d1616; }
.medal-ribbon::after { content: ""; position: absolute; top: -1px; width: 100%; height: 100%; border-left: 1px solid #efc35d; border-right: 1px solid #efc35d; opacity: .9; }
.medal-ribbon-left { left: 8px; transform: rotate(-17deg); transform-origin: bottom center; clip-path: polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }
.medal-ribbon-right { right: 8px; transform: rotate(17deg); transform-origin: bottom center; clip-path: polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }

/* ---------- Importance badges ---------- */
.importance-badge { display: inline-block; white-space: nowrap; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.importance-very_high { background: #f4d7d7; color: #842828; }
.importance-high { background: #f6e2bd; color: #78500d; }
.importance-medium { background: #dbe9f4; color: #285d86; }
.importance-low { background: #e2e6e9; color: #59636b; }

/* ---------- Quiz ---------- */
#next-btn, #prev-btn, #restart-btn { background: #1976d2; color: white; }
#next-btn:hover, #prev-btn:hover, #restart-btn:hover { background: #145ca4; }
#question-counter { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: #1f4e79; }
#question-text { font-size: 22px; margin-bottom: 18px; line-height: 1.4; }
.option-btn { width: 100%; text-align: left; margin-bottom: 10px; padding: 13px; background: #e0bfdf; border: 1px solid #c8d2ef; font-size: 14px; transition: background .2s, transform .2s; }
.option-btn:hover:not(:disabled) { background: #dff1f2; }
.correct { background: #16a34a !important; color: #fff !important; }
.wrong { background: #b91c1c !important; color: #fff !important; }
.option-btn.correct:disabled, .option-btn.wrong:disabled { opacity: 1; }
.navigation { display: flex; justify-content: flex-start; align-items: center; gap: 12px; margin-top: 18px; }
.quiz-layout { display: grid; grid-template-columns: minmax(0,70fr) minmax(0,30fr); gap: 26px; align-items: start; }
.question-panel { min-width: 0; background: #e1edf7; border: 1px solid #d8e1e8; border-radius: 10px; padding: 20px; }
.status-panel { min-width: 0; background: #d9e6f1; border: 1px solid #ccd8e2; border-radius: 10px; padding: 14px; position: sticky; top: 12px; }
.active-quiz-heading { margin-bottom: 12px; }
.active-quiz-heading h2 { color: #173f63; font-size: 20px; }
.active-quiz-heading p { margin-top: 5px; color: #62717e; font-size: 12px; line-height: 1.4; }
#explanation-box { width: 100%; margin-top: 22px; background: #d1e4f9; border-left: 5px solid #4c8ed9; padding: 18px; border-radius: 8px; font-size: 18px; line-height: 1.48; }
#explanation-box h3 { margin-bottom: 9px; color: #1f4e79; }
#explanation-box p, #explanation-box li { margin-bottom: 9px; }
#explanation-box ul { padding-left: 20px; }
#explanation-box hr { border: none; border-top: 1px solid #c7ddf4; margin: 16px 0; }
#question-status { display: grid; grid-template-columns: repeat(auto-fit,minmax(40px,1fr)); gap: 8px; }
.status-dot { width: 100%; min-width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; color: white; display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; }
.status-dot:hover { transform: scale(1.05); }
.status-unanswered { background: #9ca3af; }
.status-correct { background: #16a34a; }
.status-wrong { background: #b91c1c; }
.status-current { outline: 3px solid #1f4e79; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
#result-summary { margin: 20px 0; line-height: 1.8; }
.question-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.question-meta-row #question-counter { margin-bottom: 0; }
.pyq-badge { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #1f6f43; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.pyq-badge.pyq-concept { background: #6b5d1f; }

/* ---------- Leave-test modal ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(22,34,45,.58); display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal-card { width: min(440px,100%); background: #eef4f8; border: 1px solid #bacbd8; border-radius: 12px; padding: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.modal-card h2 { color: #173f63; font-size: 20px; line-height: 1.35; }
.modal-card p { margin-top: 10px; color: #5b6771; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.modal-btn { font-weight: 800; }
.modal-stay { background: #dbe8f2; color: #174a72; }
.modal-leave { background: #a52c2c; color: #fff; }

@media (max-width: 900px) {
    .hub-grid, .subject-grid { grid-template-columns: 1fr; }
    .screen-toolbar { grid-template-columns: auto minmax(0,1fr); }
    .screen-toolbar .count-pill { grid-column: 1 / -1; width: fit-content; }
}
@media (max-width: 720px) {
    .quiz-layout { grid-template-columns: 1fr; gap: 18px; }
    .status-panel { order: 2; position: static; }
    #question-status { grid-template-columns: repeat(auto-fit,minmax(38px,44px)); }
}
@media (max-width: 600px) {
    body { padding: 4px; }
    .container { width: 100%; margin: 8px auto; padding: 4px; }
    .card { padding: 15px; border-radius: 9px; }
    header h1 { font-size: 23px; }
    .portal-heading h2 { font-size: 22px; }
    .hub-card { min-height: 205px; padding: 20px; }
    .hub-card strong { font-size: 27px; }
    .screen-toolbar { grid-template-columns: 1fr; gap: 10px; }
    .back-btn { width: fit-content; }
    .subject-select-card { grid-template-columns: 38px minmax(0,1fr) auto; min-height: 82px; }
    .topic-row { grid-template-columns: 1fr; gap: 9px; }
    .topic-actions { justify-content: flex-start; padding-left: 25px; }
    #question-text { font-size: 19px; }
    #explanation-box { font-size: 17px; padding: 15px; }
    .status-dot { min-width: 36px; height: 36px; font-size: 13px; border-radius: 9px; }
    .question-meta-row { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Phase 2 — authenticated cloud progress
============================================================ */
.auth-screen { min-height: calc(100vh - 40px); display: flex; align-items: center; justify-content: center; padding: 18px 0; }
.auth-card { width: min(460px,100%); background: #e7eef4; padding: 28px; }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand h1 { color: #1f4e79; font-size: 27px; }
.auth-brand p { color: #5d6e7c; margin-top: 9px; line-height: 1.5; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 6px; color: #344c60; font-size: 13px; font-weight: 800; }
.auth-form input { width: 100%; padding: 12px 13px; border: 1px solid #b9c9d5; border-radius: 8px; background: #fff; color: #1f2933; font-size: 15px; outline: none; }
.auth-form input:focus { border-color: #4f8dbc; box-shadow: 0 0 0 3px rgba(79,141,188,.14); }
.auth-primary-btn { width: 100%; background: #1f6fa9; color: #fff; font-weight: 800; padding: 12px; }
.auth-primary-btn:hover { background: #195c8d; }
.auth-link-btn { padding: 8px 0; background: transparent; color: #1f5f8e; font-weight: 800; text-decoration: underline; }
.signup-area { margin-top: 13px; text-align: center; }
.signup-area .auth-form { margin-top: 12px; text-align: left; }
.auth-message { min-height: 22px; margin-top: 15px; color: #8a1c1c; font-weight: 700; font-size: 13px; line-height: 1.4; }
.auth-privacy-note { margin-top: 17px; padding-top: 15px; border-top: 1px solid #c9d5de; color: #647481; font-size: 12px; line-height: 1.5; }
.setup-panel { margin-bottom: 18px; padding: 14px; border: 1px solid #d1a95f; border-radius: 9px; background: #fff4d8; color: #65480d; }
.setup-panel strong { display: block; margin-bottom: 6px; }
.setup-panel p { font-size: 13px; line-height: 1.45; }
.setup-panel code { font-family: Consolas, monospace; font-size: 12px; }

.password-setup-area { margin-top: 4px; }
.invite-panel { margin-bottom: 18px; padding: 14px; border: 1px solid #9fc8aa; border-radius: 9px; background: #e8f6ec; color: #28583a; }
.invite-panel strong { display: block; margin-bottom: 6px; font-size: 14px; }
.invite-panel p { font-size: 13px; line-height: 1.45; }
.invite-panel #invite-email { font-weight: 800; overflow-wrap: anywhere; }

.account-strip { max-width: 1280px; margin: 0 auto 12px; padding: 9px 12px; border: 1px solid #c5d3dd; border-radius: 10px; background: rgba(238,244,248,.9); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.account-identity { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.account-label { color: #71808c; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.account-identity strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #24485f; font-size: 13px; }
.account-actions { display: flex; align-items: center; gap: 9px; }
.logout-btn { padding: 6px 9px; background: #e1e8ed; color: #4c5c68; border: 1px solid #c7d2da; font-size: 12px; font-weight: 800; }
.logout-btn:hover { background: #d6e0e7; }
.sync-state { padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.sync-ready { background: #d9efdf; color: #23613a; }
.sync-working { background: #dceaf5; color: #275f88; }
.sync-caution { background: #f7e4bc; color: #74500c; }

.sync-warning { position: fixed; z-index: 1200; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(680px,calc(100% - 24px)); padding: 11px 13px; border: 1px solid #d3a64c; border-radius: 10px; background: #fff2ce; color: #62450e; box-shadow: 0 7px 24px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; }
.sync-warning button { flex: 0 0 auto; padding: 6px 10px; background: #8a651c; color: #fff; font-size: 12px; font-weight: 800; }

@media (max-width: 600px) {
    .auth-screen { min-height: calc(100vh - 16px); padding: 6px 0; }
    .auth-card { padding: 21px 17px; }
    .account-strip { margin-bottom: 8px; padding: 8px 9px; }
    .account-label { display: none; }
    .account-identity strong { max-width: 190px; }
    .sync-warning { bottom: 10px; align-items: flex-start; }
}