/* ============================================================ SIE Mastery — stylesheet Theme via [data-theme] on . Default: dark. ============================================================ */ :root { --sidebar-w: 312px; --maxw: 920px; --radius: 14px; --radius-sm: 10px; --shadow: 0 10px 30px -12px rgba(0,0,0,.45); --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --serif: 'Lora', Georgia, serif; --t: 180ms cubic-bezier(.4,0,.2,1); /* Vibrant per-section color system (used across sidebar, cards, badges) */ --sec1: #4f7bff; --sec1b: #6f5bff; /* Capital Markets — blue → indigo */ --sec2: #a855f7; --sec2b: #ec4899; /* Products & Risks — violet → pink */ --sec3: #10b9a6; --sec3b: #22c55e; /* Trading & Accounts — teal → green*/ --sec4: #f59e0b; --sec4b: #fb7185; /* Regulatory — amber → coral */ } /* section accent helpers — set --sc/--sc2 from the section index class */ .sec-1 { --sc: var(--sec1); --sc2: var(--sec1b); } .sec-2 { --sc: var(--sec2); --sc2: var(--sec2b); } .sec-3 { --sc: var(--sec3); --sc2: var(--sec3b); } .sec-4 { --sc: var(--sec4); --sc2: var(--sec4b); } /* ---- Dark theme (default) ---- */ [data-theme="dark"] { --bg: #0c1018; --bg-2: #121826; --panel: #161d2e; --panel-2: #1c2538; --border: #263149; --border-soft: #1d2638; --text: #e8edf7; --text-dim: #9aa7c0; --text-faint: #6c7894; --brand: #4f8cff; --brand-2: #6aa1ff; --brand-soft: rgba(79,140,255,.14); --accent: #2dd4bf; --gold: #f5b945; --green: #34d399; --red: #f87171; --amber: #fbbf24; --shadow: 0 14px 40px -16px rgba(0,0,0,.7); } /* ---- Light theme ---- */ [data-theme="light"] { --bg: #f4f6fb; --bg-2: #eaeef6; --panel: #ffffff; --panel-2: #f7f9fd; --border: #dde3ee; --border-soft: #e7ebf3; --text: #16203a; --text-dim: #586079; --text-faint: #8b93a8; --brand: #2f6bff; --brand-2: #1f5cf0; --brand-soft: rgba(47,107,255,.10); --accent: #0d9488; --gold: #d99405; --green: #15a866; --red: #e1483f; --amber: #d97706; --shadow: 0 14px 36px -18px rgba(40,60,110,.30); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand-2); text-decoration: none; } ::selection { background: var(--brand-soft); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } /* ============================================================ Layout */ .layout { display: flex; min-height: 100vh; } .topbar { display: none; position: sticky; top: 0; z-index: 50; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border); } .topbar-title { font-weight: 800; letter-spacing: -.02em; } .topbar-title span { color: var(--brand); } .icon-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; width: 38px; height: 38px; font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: var(--t); } .icon-btn:hover { border-color: var(--brand); color: var(--brand); } /* ============================================================ Sidebar */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); height: 100vh; position: sticky; top: 0; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px 14px; gap: 14px; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 2px 4px; } .brand-logo { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.03em; background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 6px 18px -6px var(--brand); } .brand-title { font-weight: 800; font-size: 16px; letter-spacing: -.02em; } .brand-sub { font-size: 11px; color: var(--text-faint); } .theme-desktop { margin-left: auto; width: 34px; height: 34px; font-size: 15px; } .progress-card { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .ring-wrap { position: relative; width: 64px; height: 64px; flex: 0 0 64px; } .ring { transform: rotate(-90deg); } .ring-bg { fill: none; stroke: var(--border); stroke-width: 7; } .ring-fg { fill: none; stroke: url(#g); stroke: var(--brand); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 213.6; transition: stroke-dashoffset .6s ease; } .ring-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; } .progress-label { font-size: 12px; color: var(--text-faint); } .progress-detail { font-weight: 600; font-size: 14px; } .search-wrap { position: relative; } #searchInput { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-family: var(--font); } #searchInput:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; } .search-results a { display: block; padding: 9px 12px; color: var(--text); border-bottom: 1px solid var(--border-soft); font-size: 13px; } .search-results a:last-child { border-bottom: none; } .search-results a:hover { background: var(--panel-2); } .search-results .sr-kind { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .search-results .sr-empty { padding: 12px; color: var(--text-faint); font-size: 13px; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-top { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-dim); font-weight: 600; font-size: 14px; transition: var(--t); } .nav-top:hover { background: var(--panel); color: var(--text); } .nav-top.active { background: var(--brand-soft); color: var(--brand); } .nav-ico { width: 18px; display: inline-grid; place-items: center; opacity: .9; } .chapter-nav { display: flex; flex-direction: column; gap: 10px; } .sec-group { } .sec-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sc, var(--text-faint)); border-left: 3px solid var(--sc, var(--border)); border-radius: 2px; margin-bottom: 2px; } .sec-weight { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 700; background: color-mix(in srgb, var(--sc, var(--brand)) 16%, transparent); color: var(--sc, var(--text-dim)); border: 1px solid color-mix(in srgb, var(--sc, var(--brand)) 35%, transparent); } .ch-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--text-dim); font-size: 13.5px; transition: var(--t); position: relative; } .ch-link:hover { background: var(--panel); color: var(--text); } .ch-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .ch-num { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--sc, var(--brand)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sc, var(--brand)) 32%, transparent); color: var(--sc, var(--text-dim)); } .ch-link:hover { background: color-mix(in srgb, var(--sc, var(--brand)) 9%, transparent); } .ch-link.active { background: color-mix(in srgb, var(--sc, var(--brand)) 15%, transparent); color: var(--sc, var(--brand)); } .ch-link.active .ch-num { background: linear-gradient(135deg, var(--sc, var(--brand)), var(--sc2, var(--brand-2))); color: #fff; border-color: transparent; } .ch-link.done .ch-num { background: linear-gradient(135deg, var(--green), #15a866); color: #04210f; border-color: transparent; } .ch-link.done .ch-check { color: var(--green); } .ch-title { line-height: 1.3; } .ch-check { margin-left: auto; color: var(--green); font-size: 13px; opacity: 0; } .ch-link.done .ch-check { opacity: 1; } .sidebar-foot { margin-top: auto; padding-top: 8px; } .ghost-btn { width: 100%; padding: 9px; border-radius: 9px; cursor: pointer; background: transparent; border: 1px dashed var(--border); color: var(--text-faint); font-size: 12.5px; transition: var(--t); font-family: var(--font); } .ghost-btn:hover { color: var(--red); border-color: var(--red); } .overlay { position: fixed; inset: 0; background: rgba(4,8,16,.55); z-index: 45; backdrop-filter: blur(2px); } /* ============================================================ Main */ .main { flex: 1 1 auto; min-width: 0; } .view { max-width: var(--maxw); margin: 0 auto; padding: 38px 30px 90px; } /* Loading splash for content not yet ready */ .boot { text-align: center; padding: 80px 20px; color: var(--text-dim); } .boot .spin { width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--brand); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Hero / Dashboard ---- */ .hero { border-radius: 22px; padding: 38px 34px; margin-bottom: 26px; background: radial-gradient(720px 340px at 88% -25%, rgba(168,85,247,.42), transparent 60%), radial-gradient(620px 320px at 6% 125%, rgba(16,185,166,.34), transparent 60%), radial-gradient(540px 300px at 55% 140%, rgba(245,158,11,.22), transparent 60%), linear-gradient(135deg, #2b3568 0%, #1b2347 52%, #271b44 100%); border: 1px solid rgba(255,255,255,.10); position: relative; overflow: hidden; box-shadow: var(--shadow); } [data-theme="light"] .hero { background: radial-gradient(720px 340px at 88% -25%, rgba(168,85,247,.30), transparent 60%), radial-gradient(620px 320px at 6% 125%, rgba(16,185,166,.26), transparent 60%), radial-gradient(540px 300px at 55% 140%, rgba(245,158,11,.20), transparent 60%), linear-gradient(135deg, #eef1ff 0%, #f3edff 52%, #eafff6 100%); border-color: var(--border); } .hero h1 { font-size: 32px; margin: 0 0 10px; letter-spacing: -.03em; background: linear-gradient(100deg, #fff, #c9d6ff 50%, #f0c9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="light"] .hero h1 { background: linear-gradient(100deg, var(--sec1), var(--sec2) 55%, var(--sec3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero p { color: rgba(232,237,247,.84); margin: 0 0 20px; max-width: 60ch; } [data-theme="light"] .hero p { color: var(--text-dim); } [data-theme="light"] .hero p strong { color: var(--text); } .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: 14px; border: 1px solid var(--border); background: var(--panel); color: var(--text); transition: var(--t); font-family: var(--font); } .btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); } .btn-primary { background: linear-gradient(135deg, #4f7bff, #7b5bff 55%, #a855f7); color: #fff; border-color: transparent; box-shadow: 0 9px 24px -10px #7b5bff; } .btn-primary:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); } .stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 26px; } .stat { background: linear-gradient(180deg, color-mix(in srgb, var(--sc, var(--brand)) 12%, transparent), transparent 70%), var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--sc, var(--brand)); border-radius: var(--radius); padding: 16px 18px; transition: var(--t); } .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat:nth-child(1) { --sc: var(--sec1); } .stat:nth-child(2) { --sc: var(--sec2); } .stat:nth-child(3) { --sc: var(--sec3); } .stat:nth-child(4) { --sc: var(--sec4); } .stat-num { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--sc, var(--text)); } .stat-lbl { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; } .section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin: 30px 0 12px; font-weight: 700; } /* Exam blueprint bars */ .blueprint { display: flex; flex-direction: column; gap: 12px; } .bp-row { display: grid; grid-template-columns: 1fr; gap: 6px; } .bp-top { display: flex; justify-content: space-between; font-size: 13.5px; } .bp-top b { font-weight: 600; } .bp-bar { height: 11px; border-radius: 99px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--border); } .bp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sc, var(--brand)), var(--sc2, var(--accent))); box-shadow: 0 0 14px -2px var(--sc, var(--brand)); } .bp-row:nth-of-type(1) { --sc: var(--sec1); --sc2: var(--sec1b); } .bp-row:nth-of-type(2) { --sc: var(--sec2); --sc2: var(--sec2b); } .bp-row:nth-of-type(3) { --sc: var(--sec3); --sc2: var(--sec3b); } .bp-row:nth-of-type(4) { --sc: var(--sec4); --sc2: var(--sec4b); } /* Chapter cards (dashboard) */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; } .ch-card { display: block; position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--sc, var(--brand)) 9%, transparent), transparent 55%), var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--sc, var(--brand)); border-radius: var(--radius); padding: 16px; transition: var(--t); color: var(--text); } .ch-card:hover { border-color: var(--sc, var(--brand)); transform: translateY(-3px); box-shadow: 0 16px 38px -18px var(--sc, var(--brand)); } .ch-card .cc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ch-card .cc-num { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--sc, var(--brand)), var(--sc2, var(--brand-2))); box-shadow: 0 5px 14px -5px var(--sc, var(--brand)); } .ch-card .cc-sec { color: var(--sc, var(--text-faint)); font-weight: 700; } .ch-card.done .cc-num { background: linear-gradient(135deg, var(--green), #15a866); color: #04210f; } .ch-card .cc-sec { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .ch-card h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: -.01em; } .ch-card .cc-meta { font-size: 12px; color: var(--text-faint); display: flex; gap: 12px; } /* ============================================================ Chapter view */ .ch-header { margin-bottom: 24px; } .crumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); } .badge.sec { background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border); } .ch-header h1 { font-size: 28px; letter-spacing: -.03em; margin: 6px 0 10px; } .ch-lead { color: var(--text-dim); font-size: 15.5px; max-width: 64ch; } .ch-facts { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; } .fact { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .fact b { color: var(--text); } .objectives { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); padding: 16px 20px; margin: 22px 0; } .objectives h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); } .objectives ul { margin: 0; padding-left: 20px; } .objectives li { margin: 5px 0; color: var(--text-dim); } /* Lessons */ .lesson { margin: 30px 0; } .lesson > h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; } .lesson > h2::before { content: ""; width: 8px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--brand), var(--accent)); } /* Content blocks */ .blk { margin: 14px 0; } .blk-text p { margin: 10px 0; } .blk-text ul { margin: 10px 0; padding-left: 22px; } .blk-text li { margin: 4px 0; } .blk-text strong { color: var(--text); } .blk-key { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; } .blk-key h4 { margin: 0 0 8px; font-size: 13px; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; } .blk-key ul { margin: 0; padding-left: 20px; } .blk-key li { margin: 6px 0; } .callout { border-radius: var(--radius); padding: 14px 16px 14px 18px; margin: 16px 0; border: 1px solid var(--border); border-left-width: 4px; background: var(--panel); position: relative; } .callout h4 { margin: 0 0 4px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; } .callout p { margin: 0; color: var(--text-dim); font-size: 14px; } .callout.exam { border-left-color: var(--brand); background: var(--brand-soft); } .callout.exam h4 { color: var(--brand); } .callout.tip { border-left-color: var(--green); } .callout.tip h4 { color: var(--green); } .callout.warning { border-left-color: var(--red); } .callout.warning h4 { color: var(--red); } .callout.note { border-left-color: var(--gold); } .callout.note h4 { color: var(--gold); } .tbl-wrap { margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .tbl-wrap .tbl-title { padding: 10px 14px; font-weight: 600; font-size: 13.5px; background: var(--panel-2); border-bottom: 1px solid var(--border); } table.blk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.blk-table th { text-align: left; padding: 10px 14px; background: var(--panel); color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border); } table.blk-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); vertical-align: top; } table.blk-table tr:last-child td { border-bottom: none; } table.blk-table tr:hover td { background: var(--panel); } .steps { margin: 16px 0; display: flex; flex-direction: column; gap: 2px; } .steps .steps-title { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; } .step { display: flex; gap: 14px; padding: 4px 0; } .step-dot { display: flex; flex-direction: column; align-items: center; } .step-num { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--brand); color: #fff; } .step-line { width: 2px; flex: 1; background: var(--border); margin: 4px 0; } .step:last-child .step-line { display: none; } .step-body { padding-bottom: 14px; } .step-label { font-weight: 600; font-size: 14px; } .step-desc { color: var(--text-dim); font-size: 13.5px; } .formula { margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); overflow: hidden; } .formula .f-title { padding: 9px 14px; font-weight: 600; font-size: 13px; background: var(--panel-2); border-bottom: 1px solid var(--border); } .formula .f-eq { padding: 16px; font-family: var(--serif); font-size: 18px; font-style: italic; text-align: center; color: var(--brand-2); background: var(--bg-2); } .formula .f-vars { padding: 10px 16px; display: grid; gap: 4px; } .formula .f-var { font-size: 13px; color: var(--text-dim); } .formula .f-var b { color: var(--text); font-style: normal; } .formula .f-ex { padding: 10px 16px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-dim); } .formula .f-ex b { color: var(--accent); } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } .compare .cmp-title { grid-column: 1/-1; font-weight: 600; font-size: 13.5px; } .cmp-col { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .cmp-col h5 { margin: 0 0 8px; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .cmp-col:first-of-type h5 { color: var(--brand); } .cmp-col:last-of-type h5 { color: var(--accent); } .cmp-col ul { margin: 0; padding-left: 18px; } .cmp-col li { margin: 5px 0; font-size: 13.5px; color: var(--text-dim); } .mnemonic { margin: 16px 0; border-radius: var(--radius); padding: 16px 18px; background: linear-gradient(135deg, var(--brand-soft), transparent); border: 1px dashed var(--brand); } .mnemonic .mn-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); font-weight: 700; } .mnemonic .mn-phrase { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 10px; font-family: var(--serif); font-style: italic; } .mnemonic ul { margin: 0; padding-left: 20px; } .mnemonic li { margin: 4px 0; font-size: 13.5px; } .mnemonic .mn-note { margin-top: 8px; font-size: 12.5px; color: var(--text-faint); } /* Glossary + cheat sheet (collapsible) */ .foldout { margin: 26px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel); } .foldout > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; user-select: none; } .foldout > summary::-webkit-details-marker { display: none; } .foldout > summary::after { content: "▾"; margin-left: auto; color: var(--text-faint); transition: var(--t); } .foldout[open] > summary::after { transform: rotate(180deg); } .foldout .fold-body { padding: 4px 18px 18px; } .gloss-item { padding: 9px 0; border-bottom: 1px solid var(--border-soft); } .gloss-item:last-child { border-bottom: none; } .gloss-item b { color: var(--text); } .gloss-item span { color: var(--text-dim); } .cheat-list { margin: 0; padding-left: 20px; } .cheat-list li { margin: 7px 0; color: var(--text-dim); } .cheat-list li::marker { color: var(--brand); } /* ============================================================ Quiz */ .quiz { margin: 30px 0; } .quiz-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; } .quiz-head h2 { margin: 0; font-size: 20px; } .quiz-progress { font-size: 13px; color: var(--text-faint); } .qcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; } .qcard .q-meta { display: flex; gap: 8px; margin-bottom: 10px; font-size: 11px; } .q-pill { padding: 2px 8px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .q-pill.easy { color: var(--green); } .q-pill.medium { color: var(--amber); } .q-pill.hard { color: var(--red); } .qcard .q-text { font-size: 16px; font-weight: 600; margin-bottom: 14px; line-height: 1.5; } .choices { display: flex; flex-direction: column; gap: 9px; } .choice { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--bg-2); transition: var(--t); font-size: 14.5px; } .choice:hover { border-color: var(--brand); } .choice .c-key { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); } .choice.correct { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); } .choice.correct .c-key { background: var(--green); color: #04210f; border-color: var(--green); } .choice.wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); } .choice.wrong .c-key { background: var(--red); color: #2a0606; border-color: var(--red); } .choice.disabled { cursor: default; pointer-events: none; opacity: .92; } .explain { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); display: none; } .explain.show { display: block; animation: fade .25s ease; } .explain b { color: var(--text); } .explain .ex-tag { color: var(--green); font-weight: 700; } .explain .ex-tag.bad { color: var(--red); } @keyframes fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; } } .complete-bar { position: sticky; bottom: 0; margin-top: 30px; padding: 14px 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: linear-gradient(0deg, var(--bg) 60%, transparent); } .chap-nav-btns { display: flex; gap: 10px; } /* Mock exam */ .exam-setup { display: grid; gap: 16px; max-width: 560px; } .exam-stat-banner { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; } .exam-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; } .exam-grid-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; } .eg-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; font-size: 12px; font-weight: 600; } .eg-btn.answered { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); } .eg-btn.current { outline: 2px solid var(--brand); } .eg-btn.flag { box-shadow: inset 0 -3px 0 var(--gold); } .score-hero { text-align: center; padding: 30px; } .score-num { font-size: 64px; font-weight: 800; letter-spacing: -.03em; } .score-num.pass { color: var(--green); } .score-num.fail { color: var(--red); } .score-sub { color: var(--text-dim); } /* Misc */ .empty { text-align: center; padding: 60px 20px; color: var(--text-faint); } .divider { height: 1px; background: var(--border-soft); margin: 30px 0; border: none; } /* ---- Section-colored chapter view + flashcard chips ---- */ .chapter .badge { background: color-mix(in srgb, var(--sc, var(--brand)) 18%, transparent); color: var(--sc, var(--brand)); } .chapter .lesson > h2::before { background: linear-gradient(180deg, var(--sc, var(--brand)), var(--sc2, var(--accent))); } .chapter .objectives { border-left-color: var(--sc, var(--brand)); } .chapter .objectives h4 { color: var(--sc, var(--brand)); } .chapter .crumb a { color: var(--sc, var(--brand-2)); } .fc-chip .fc-num { background: linear-gradient(135deg, var(--sc, var(--brand)), var(--sc2, var(--brand-2))); color: #fff; box-shadow: 0 5px 14px -6px var(--sc, var(--brand)); } .fc-chip:hover { border-color: var(--sc, var(--brand)); box-shadow: 0 14px 32px -18px var(--sc, var(--brand)); } /* ============================================================ Flashcards */ .fc-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; } .fc-chip { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: var(--t); cursor: pointer; } .fc-chip:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); } .fc-chip .fc-num { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; display: grid; place-items: center; font-weight: 700; background: var(--brand-soft); color: var(--brand); } .fc-chip h3 { margin: 0; font-size: 14.5px; } .fc-chip .fc-count { font-size: 12px; color: var(--text-faint); } .fc-stage { max-width: 640px; margin: 0 auto; } .fc-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .fc-progress-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; min-width: 140px; } .fc-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .3s ease; } .fc-counter { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .flashcard { perspective: 1600px; height: 340px; margin: 6px 0 18px; cursor: pointer; } .fc-inner { position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; } .flashcard.flipped .fc-inner { transform: rotateY(180deg); } .fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; border: 1px solid var(--border); padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow); } .fc-front { background: linear-gradient(135deg, var(--panel), var(--panel-2)); } .fc-back { background: linear-gradient(135deg, var(--brand-soft), var(--panel)); transform: rotateY(180deg); } .fc-kind { position: absolute; top: 14px; left: 16px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; } .fc-topic { position: absolute; top: 14px; right: 16px; font-size: 11px; color: var(--text-faint); } .fc-text { font-size: 20px; line-height: 1.45; font-weight: 600; } .fc-back .fc-text { font-size: 17px; font-weight: 500; color: var(--text); } .fc-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--text-faint); } .fc-actions { display: flex; gap: 10px; justify-content: center; } .fc-actions .btn { min-width: 130px; justify-content: center; } .fc-btn-again:hover { border-color: var(--amber); color: var(--amber); } .fc-btn-got:hover { border-color: var(--green); color: var(--green); } .fc-toolbar { display: flex; gap: 10px; justify-content: center; margin-top: 8px; } .fc-done { text-align: center; padding: 30px; } .fc-done .score-num { font-size: 52px; } /* ============================================================ Exam countdown */ .exam-countdown { display: block; text-align: center; border-radius: var(--radius); padding: 14px 12px; background: linear-gradient(135deg, var(--sec4), var(--sec4b)); color: #fff; box-shadow: 0 8px 20px -8px var(--sec4); } .exam-countdown .cd-num { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .exam-countdown .cd-lbl { font-size: 12.5px; opacity: .96; margin-top: 5px; font-weight: 600; } .exam-countdown .cd-date { font-size: 11px; opacity: .82; margin-top: 3px; } .exam-banner { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; text-align: center; border-radius: 12px; padding: 11px 16px; margin-bottom: 16px; font-size: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--sec4) 22%, transparent), color-mix(in srgb, var(--sec4b) 18%, transparent)); border: 1px solid color-mix(in srgb, var(--sec4) 40%, transparent); color: var(--text); } .exam-banner b { color: var(--gold); } .exam-banner span { color: var(--text-dim); } .exam-banner.urgent { border-color: var(--red); } .exam-banner.urgent b { color: var(--red); } /* ============================================================ Passcode lock */ .lock-screen { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px; background: radial-gradient(700px 340px at 80% -10%, rgba(168,85,247,.30), transparent 60%), radial-gradient(600px 320px at 10% 110%, rgba(16,185,166,.24), transparent 60%), linear-gradient(135deg, #0c1018, #161d2e); } html.unlocked .lock-screen { display: none; } .lock-screen.hide { opacity: 0; transition: opacity .4s ease; pointer-events: none; } .lock-card { width: 100%; max-width: 360px; text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 36px 28px; box-shadow: var(--shadow); } .lock-logo { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 18px; letter-spacing: -.03em; background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 8px 22px -6px var(--brand); } .lock-card h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; } .lock-card p { color: var(--text-dim); font-size: 14px; margin: 0 0 22px; } .lock-input { width: 100%; text-align: center; font-size: 26px; letter-spacing: .45em; font-family: var(--font); padding: 14px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); margin-bottom: 14px; } .lock-input::placeholder { letter-spacing: .35em; color: var(--text-faint); } .lock-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .lock-btn { width: 100%; justify-content: center; font-size: 15px; padding: 13px; } .lock-err { color: var(--red); font-size: 13px; margin-top: 12px; min-height: 18px; } .lock-card.shake { animation: shake .4s; } @keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} } /* ============================================================ Responsive */ @media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 860px) { .topbar { display: flex; } .theme-desktop { display: none; } .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform var(--t); box-shadow: var(--shadow); } .sidebar.open { transform: translateX(0); } .view { padding: 22px 18px 80px; } .compare { grid-template-columns: 1fr; } .hero h1 { font-size: 24px; } }