nottri360/technical-study-notes-viewer
0
1/* ─── Variables & Theme Reset ─── */2:root {3 --bg-app: #080b11;4 --bg-sidebar: #0b0f19;5 --bg-surface: rgba(16, 22, 35, 0.65);6 --bg-surface-solid: #101623;7 --border-subtle: rgba(255, 255, 255, 0.08);8 --border-glow: rgba(0, 242, 254, 0.15);9 10 --color-primary: #00f2fe;11 --color-primary-dark: #00bcd4;12 --color-secondary: #6366f1;13 --color-text-main: #f8fafc;14 --color-text-sub: #cbd5e1;15 --color-text-muted: #64748b;16 17 --color-success: #10b981;18 --color-danger: #ef4444;19 20 --gradient-primary: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);21 --gradient-glow: linear-gradient(135deg, rgba(0, 242, 254, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);22 23 --font-sans: 'Inter', system-ui, sans-serif;24 --font-display: 'Outfit', sans-serif;25 --font-mono: 'JetBrains Mono', monospace;26 27 --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);28 --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);29}30 31* {32 box-sizing: border-box;33 margin: 0;34 padding: 0;35}36 37body {38 background-color: var(--bg-app);39 color: var(--color-text-main);40 font-family: var(--font-sans);41 min-height: 100vh;42 overflow-x: hidden;43}44 45/* ─── App Layout Structure ─── */46.app-layout {47 display: flex;48 min-height: 100vh;49}50 51/* ─── Sidebar Styles ─── */52.sidebar {53 width: 320px;54 min-width: 320px;55 background-color: var(--bg-sidebar);56 border-right: 1px solid var(--border-subtle);57 display: flex;58 flex-direction: column;59 height: 100vh;60 position: sticky;61 top: 0;62 z-index: 100;63 padding-bottom: 120px; /* Space for fixed sync panel */64}65 66.sidebar-header {67 padding: 30px 24px 20px;68 border-bottom: 1px solid var(--border-subtle);69}70 71.logo {72 display: flex;73 align-items: center;74 gap: 10px;75 font-family: var(--font-display);76 font-size: 1.8rem;77 font-weight: 800;78 letter-spacing: -0.02em;79}80 81.logo-icon {82 color: #ff0000;83 filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.5));84}85 86.logo-accent {87 background: var(--gradient-primary);88 -webkit-background-clip: text;89 -webkit-text-fill-color: transparent;90}91 92.logo-subtitle {93 font-size: 0.8rem;94 color: var(--color-text-muted);95 margin-top: 4px;96 font-weight: 500;97 letter-spacing: 0.05em;98 text-transform: uppercase;99}100 101.history-section {102 flex: 1;103 display: flex;104 flex-direction: column;105 padding: 24px;106 overflow: hidden;107}108 109.section-title-wrap {110 display: flex;111 justify-content: space-between;112 align-items: center;113 margin-bottom: 16px;114}115 116.section-title {117 font-family: var(--font-display);118 font-size: 0.95rem;119 font-weight: 700;120 text-transform: uppercase;121 letter-spacing: 0.05em;122 color: var(--color-text-sub);123 display: flex;124 align-items: center;125 gap: 8px;126}127 128.history-count {129 font-size: 0.75rem;130 background-color: var(--border-subtle);131 color: var(--color-text-sub);132 padding: 2px 8px;133 border-radius: 20px;134 font-weight: 600;135}136 137.history-list {138 flex: 1;139 overflow-y: auto;140 display: flex;141 flex-direction: column;142 gap: 12px;143 padding-right: 4px;144}145 146.history-list::-webkit-scrollbar {147 width: 5px;148}149 150.history-list::-webkit-scrollbar-thumb {151 background: var(--border-subtle);152 border-radius: 4px;153}154 155.empty-history {156 display: flex;157 flex-direction: column;158 align-items: center;159 justify-content: center;160 flex: 1;161 color: var(--color-text-muted);162 gap: 12px;163 opacity: 0.6;164 text-align: center;165}166 167.empty-history i {168 font-size: 2.2rem;169}170 171.empty-history p {172 font-size: 0.9rem;173}174 175/* History Card */176.history-item {177 background: rgba(255, 255, 255, 0.02);178 border: 1px solid var(--border-subtle);179 border-radius: 12px;180 padding: 12px;181 display: flex;182 gap: 12px;183 cursor: pointer;184 transition: var(--transition-smooth);185 position: relative;186}187 188.history-item:hover {189 background: rgba(255, 255, 255, 0.05);190 border-color: rgba(0, 242, 254, 0.3);191 transform: translateY(-2px);192}193 194.history-item.active {195 background: rgba(0, 242, 254, 0.05);196 border-color: var(--color-primary);197}198 199.history-thumb {200 width: 70px;201 height: 50px;202 object-fit: cover;203 border-radius: 6px;204 flex-shrink: 0;205}206 207.history-info {208 flex: 1;209 min-width: 0;210}211 212.history-title {213 font-size: 0.85rem;214 font-weight: 600;215 color: var(--color-text-main);216 line-height: 1.3;217 display: -webkit-box;218 -webkit-line-clamp: 2;219 -webkit-box-orient: vertical;220 overflow: hidden;221 margin-bottom: 4px;222}223 224.history-author {225 font-size: 0.75rem;226 color: var(--color-text-muted);227 overflow: hidden;228 text-overflow: ellipsis;229 white-space: nowrap;230}231 232.history-meta {233 display: flex;234 gap: 6px;235 margin-top: 6px;236}237 238.mini-badge {239 font-size: 0.65rem;240 font-weight: 700;241 padding: 1px 5px;242 border-radius: 4px;243 text-transform: uppercase;244}245 246.mini-badge-lang {247 background-color: rgba(99, 102, 241, 0.2);248 color: #a5b4fc;249}250 251.mini-badge-style {252 background-color: rgba(0, 242, 254, 0.2);253 color: #a5f3fc;254}255 256.btn-delete-history {257 position: absolute;258 top: 8px;259 right: 8px;260 background: transparent;261 border: none;262 color: var(--color-text-muted);263 cursor: pointer;264 opacity: 0;265 transition: var(--transition-smooth);266 padding: 4px;267 border-radius: 4px;268}269 270.history-item:hover .btn-delete-history {271 opacity: 1;272}273 274.btn-delete-history:hover {275 color: var(--color-danger);276 background: rgba(239, 68, 68, 0.1);277}278 279/* ─── Main Content Area ─── */280.main-content {281 flex: 1;282 padding: 40px 50px;283 height: 100vh;284 overflow-y: auto;285 display: flex;286 flex-direction: column;287 gap: 30px;288}289 290/* ─── Glassmorphism Panels ─── */291.glass-panel {292 background: var(--bg-surface);293 border: 1px solid var(--border-subtle);294 border-radius: 16px;295 padding: 30px;296 box-shadow: var(--shadow-glass);297 backdrop-filter: blur(12px);298 transition: var(--transition-smooth);299}300 301.glass-panel:hover {302 border-color: var(--border-glow);303}304 305/* ─── Auth Banner ─── */306.auth-banner {307 background: rgba(239, 68, 68, 0.1);308 border: 1px solid rgba(239, 68, 68, 0.25);309 border-radius: 12px;310 padding: 18px 24px;311 display: flex;312 justify-content: space-between;313 align-items: center;314 gap: 20px;315 animation: slideDown 0.4s ease;316}317 318.auth-banner-content {319 display: flex;320 align-items: center;321 gap: 16px;322}323 324.auth-icon {325 color: var(--color-danger);326 font-size: 1.6rem;327}328 329.auth-text h4 {330 font-size: 0.95rem;331 font-weight: 700;332 color: var(--color-text-main);333 margin-bottom: 2px;334}335 336.auth-text p {337 font-size: 0.85rem;338 color: var(--color-text-sub);339}340 341/* Button general */342.btn {343 display: inline-flex;344 align-items: center;345 justify-content: center;346 gap: 8px;347 padding: 10px 20px;348 font-size: 0.9rem;349 font-weight: 600;350 border-radius: 10px;351 border: none;352 cursor: pointer;353 transition: var(--transition-smooth);354 font-family: var(--font-sans);355}356 357.btn-primary {358 background: var(--gradient-primary);359 color: #000;360 box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);361}362 363.btn-primary:hover {364 box-shadow: 0 0 25px rgba(0, 242, 254, 0.5);365 transform: translateY(-1px);366}367 368.btn-secondary {369 background: rgba(255, 255, 255, 0.05);370 border: 1px solid var(--border-subtle);371 color: var(--color-text-sub);372}373 374.btn-secondary:hover {375 background: rgba(255, 255, 255, 0.1);376 color: #fff;377 border-color: rgba(255, 255, 255, 0.2);378}379 380.btn-auth {381 background: var(--color-danger);382 color: #fff;383 font-size: 0.85rem;384 padding: 8px 16px;385}386 387.btn-auth:hover {388 background: #dc2626;389 box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);390}391 392/* ─── Input Panel ─── */393.page-title {394 font-family: var(--font-display);395 font-size: 1.8rem;396 font-weight: 800;397 background: var(--gradient-primary);398 -webkit-background-clip: text;399 -webkit-text-fill-color: transparent;400 margin-bottom: 8px;401}402 403.page-desc {404 color: var(--color-text-sub);405 font-size: 0.95rem;406 margin-bottom: 24px;407}408 409.input-grid {410 display: grid;411 grid-template-columns: 1fr 1fr;412 gap: 20px;413}414 415.input-group {416 display: flex;417 flex-direction: column;418 gap: 8px;419}420 421.input-group.full-width {422 grid-column: span 2;423}424 425.input-group label {426 font-size: 0.85rem;427 font-weight: 700;428 color: var(--color-text-sub);429 text-transform: uppercase;430 letter-spacing: 0.05em;431 display: flex;432 align-items: center;433 gap: 6px;434}435 436.url-input-wrapper {437 display: flex;438 gap: 12px;439}440 441.url-input-wrapper input {442 flex: 1;443 background: rgba(0, 0, 0, 0.3);444 border: 1px solid var(--border-subtle);445 border-radius: 10px;446 padding: 14px 18px;447 color: #fff;448 font-size: 0.95rem;449 transition: var(--transition-smooth);450}451 452.url-input-wrapper input:focus {453 outline: none;454 border-color: var(--color-primary);455 box-shadow: 0 0 10px rgba(0, 242, 254, 0.15);456}457 458/* Segmented Control */459.segmented-control {460 display: flex;461 background: rgba(0, 0, 0, 0.3);462 border: 1px solid var(--border-subtle);463 padding: 4px;464 border-radius: 10px;465}466 467.segment-btn {468 flex: 1;469 background: transparent;470 border: none;471 color: var(--color-text-muted);472 padding: 10px;473 border-radius: 8px;474 cursor: pointer;475 font-weight: 600;476 font-size: 0.88rem;477 transition: var(--transition-smooth);478}479 480.segment-btn.active {481 background: rgba(99, 102, 241, 0.2);482 color: #fff;483 border: 1px solid rgba(99, 102, 241, 0.4);484}485 486.segment-btn:hover:not(.active) {487 color: var(--color-text-sub);488}489 490/* Select Wrapper */491.select-wrapper {492 position: relative;493}494 495.select-wrapper select {496 width: 100%;497 background: rgba(0, 0, 0, 0.3);498 border: 1px solid var(--border-subtle);499 border-radius: 10px;500 padding: 14px 18px;501 color: #fff;502 font-size: 0.95rem;503 cursor: pointer;504 appearance: none;505 transition: var(--transition-smooth);506}507 508.select-wrapper select:focus {509 outline: none;510 border-color: var(--color-primary);511}512 513.select-arrow {514 position: absolute;515 top: 50%;516 right: 18px;517 transform: translateY(-50%);518 color: var(--color-text-muted);519 pointer-events: none;520}521 522/* ─── Loading State ─── */523.loading-state {524 display: flex;525 justify-content: center;526 align-items: center;527 padding: 40px 0;528}529 530.loading-card {531 text-align: center;532 max-width: 450px;533}534 535.spinner {536 width: 50px;537 height: 50px;538 position: relative;539 margin: 0 auto 20px;540}541 542.double-bounce1, .double-bounce2 {543 width: 100%;544 height: 100%;545 border-radius: 50%;546 background-color: var(--color-primary);547 opacity: 0.6;548 position: absolute;549 top: 0;550 left: 0;551 animation: sk-bounce 2.0s infinite ease-in-out;552}553 554.double-bounce2 {555 animation-delay: -1.0s;556 background-color: var(--color-secondary);557}558 559@keyframes sk-bounce {560 0%, 100% { transform: scale(0.0); }561 50% { transform: scale(1.0); }562}563 564.loading-card h3 {565 font-family: var(--font-display);566 font-size: 1.15rem;567 margin-bottom: 8px;568}569 570.loading-card p {571 font-size: 0.85rem;572 color: var(--color-text-muted);573}574 575/* ─── Results Layout ─── */576.result-container {577 display: flex;578 flex-direction: column;579 gap: 24px;580}581 582/* Video Info Header */583.video-info-card {584 display: flex;585 align-items: center;586 gap: 24px;587 padding: 20px;588}589 590.video-thumb {591 width: 120px;592 height: 80px;593 object-fit: cover;594 border-radius: 8px;595 border: 1px solid var(--border-subtle);596 flex-shrink: 0;597}598 599.video-details {600 flex: 1;601}602 603.badge {604 font-size: 0.72rem;605 font-weight: 700;606 text-transform: uppercase;607 background-color: rgba(99, 102, 241, 0.2);608 color: #a5b4fc;609 padding: 3px 10px;610 border-radius: 20px;611 border: 1px solid rgba(99, 102, 241, 0.3);612 margin-right: 6px;613 margin-bottom: 8px;614 display: inline-block;615}616 617.badge-secondary {618 background-color: rgba(0, 242, 254, 0.2);619 color: #a5f3fc;620 border-color: rgba(0, 242, 254, 0.3);621}622 623.video-title {624 font-family: var(--font-display);625 font-size: 1.35rem;626 font-weight: 700;627 line-height: 1.3;628 margin-top: 4px;629}630 631.video-channel {632 font-size: 0.85rem;633 color: var(--color-text-muted);634 margin-top: 4px;635 display: flex;636 align-items: center;637 gap: 6px;638}639 640.video-channel i {641 color: var(--color-primary-dark);642}643 644/* ─── Tabs Controls & Header ─── */645.tabs-wrapper {646 display: flex;647 justify-content: space-between;648 align-items: center;649 border-bottom: 1px solid var(--border-subtle);650 padding-bottom: 12px;651 margin-bottom: 16px;652 position: relative;653}654 655.tabs-header {656 display: flex;657 gap: 4px;658 align-items: center;659 flex: 1;660 min-width: 0;661 overflow: hidden;662}663 664.tab-btn {665 background: transparent;666 border: none;667 color: var(--color-text-muted);668 padding: 9px 16px;669 font-weight: 600;670 font-size: 0.88rem;671 cursor: pointer;672 display: inline-flex;673 align-items: center;674 gap: 7px;675 border-radius: 8px;676 transition: var(--transition-smooth);677 white-space: nowrap;678 flex-shrink: 0;679}680 681.tab-btn.active {682 background: rgba(255, 255, 255, 0.06);683 color: #fff;684 box-shadow: inset 0 -2px 0 var(--color-primary);685}686 687.tab-btn:hover:not(.active) {688 color: var(--color-text-sub);689 background: rgba(255, 255, 255, 0.03);690}691 692/* Overflow More button */693.tabs-overflow-wrapper {694 position: relative;695 flex-shrink: 0;696 margin-left: 2px;697}698 699.tabs-more-btn {700 border: 1px solid var(--border-subtle) !important;701 gap: 5px !important;702}703 704.tabs-more-btn.active-overflow {705 background: rgba(0,242,254,0.08) !important;706 color: var(--color-primary) !important;707 border-color: rgba(0,242,254,0.25) !important;708}709 710.tabs-overflow-dropdown {711 display: none;712 position: absolute;713 top: calc(100% + 8px);714 left: 0;715 min-width: 180px;716 background: #0f172a;717 border: 1px solid var(--border-subtle);718 border-radius: 12px;719 box-shadow: 0 12px 30px rgba(0,0,0,0.6);720 z-index: 500;721 overflow: hidden;722 animation: dropdownFadeIn 0.18s ease;723}724 725.tabs-overflow-dropdown.open {726 display: block;727}728 729.tabs-overflow-dropdown .tab-overflow-item {730 width: 100%;731 padding: 11px 16px;732 background: transparent;733 border: none;734 color: var(--color-text-sub);735 font-size: 0.88rem;736 font-weight: 500;737 display: flex;738 align-items: center;739 gap: 10px;740 cursor: pointer;741 text-align: left;742 transition: var(--transition-smooth);743}744 745.tabs-overflow-dropdown .tab-overflow-item:hover {746 background: rgba(255,255,255,0.04);747 color: var(--color-primary);748}749 750.tabs-overflow-dropdown .tab-overflow-item.active {751 color: var(--color-primary);752 background: rgba(0,242,254,0.06);753}754 755.tab-actions {756 display: flex;757 gap: 8px;758 flex-shrink: 0;759}760 761.tabs-content-body {762 background: var(--bg-surface-solid);763 border: 1px solid var(--border-subtle);764 border-radius: 16px;765 padding: 28px;766 min-height: 400px;767}768 769.tab-pane {770 display: none;771}772 773.tab-pane.active {774 display: block;775 animation: fadeIn 0.3s ease;776}777 778@keyframes fadeIn {779 from { opacity: 0; transform: translateY(4px); }780 to { opacity: 1; transform: translateY(0); }781}782 783 784/* ─── PREMIUM BOOK-STYLE MARKDOWN NOTES ─── */785.markdown-body {786 line-height: 1.85;787 font-size: 1rem;788 color: #d4d8e8;789 font-family: var(--font-body);790}791 792/* H1 — Chapter Title */793.markdown-body h1 {794 font-family: var(--font-display);795 font-size: 1.9rem;796 font-weight: 800;797 background: linear-gradient(135deg, #00f2fe 0%, #a78bfa 50%, #f472b6 100%);798 -webkit-background-clip: text;799 -webkit-text-fill-color: transparent;800 background-clip: text;801 margin-top: 0;802 margin-bottom: 8px;803 padding-bottom: 12px;804 border-bottom: 2px solid rgba(0, 242, 254, 0.2);805 letter-spacing: -0.5px;806}807 808/* H2 — Section Heading */809.markdown-body h2 {810 font-family: var(--font-display);811 font-size: 1.45rem;812 font-weight: 700;813 color: #a78bfa;814 margin-top: 36px;815 margin-bottom: 10px;816 display: flex;817 align-items: center;818 gap: 10px;819}820 821.markdown-body h2::before {822 content: '';823 display: inline-block;824 width: 4px;825 height: 1.2em;826 background: linear-gradient(180deg, #a78bfa, #00f2fe);827 border-radius: 4px;828 flex-shrink: 0;829}830 831/* H3 — Sub-section */832.markdown-body h3 {833 font-family: var(--font-display);834 font-size: 1.15rem;835 font-weight: 700;836 color: #34d399;837 margin-top: 24px;838 margin-bottom: 8px;839}840 841/* H4 */842.markdown-body h4 {843 font-size: 1rem;844 font-weight: 700;845 color: #fbbf24;846 margin-top: 18px;847 margin-bottom: 6px;848}849 850.markdown-body p {851 margin-bottom: 16px;852 color: #c8cde0;853 line-height: 1.85;854}855 856/* Bold text = highlighted key term */857.markdown-body strong {858 color: #fff;859 font-weight: 700;860 background: rgba(167, 139, 250, 0.12);861 padding: 1px 5px;862 border-radius: 4px;863}864 865/* Italic = definition or annotation */866.markdown-body em {867 color: #94a3b8;868 font-style: italic;869}870 871.markdown-body ul, .markdown-body ol {872 margin-bottom: 16px;873 padding-left: 22px;874 color: #c8cde0;875}876 877.markdown-body li {878 margin-bottom: 8px;879 line-height: 1.75;880}881 882.markdown-body li::marker {883 color: #a78bfa;884}885 886/* Inline code */887.markdown-body code {888 background: rgba(0, 242, 254, 0.08);889 font-family: var(--font-mono);890 padding: 2px 7px;891 border-radius: 4px;892 font-size: 0.88rem;893 color: #00f2fe;894 border: 1px solid rgba(0, 242, 254, 0.15);895}896 897/* Code blocks */898.markdown-body pre {899 background: #080e1a;900 border: 1px solid rgba(0, 242, 254, 0.12);901 border-left: 3px solid #00f2fe;902 padding: 18px 20px;903 border-radius: 10px;904 overflow-x: auto;905 margin-bottom: 20px;906 position: relative;907}908 909.markdown-body pre code {910 background: transparent;911 padding: 0;912 color: #e2f0ff;913 font-size: 0.88rem;914 border: none;915}916 917/* ─── COLORFUL CALLOUT BOXES (blockquotes) ─── */918.markdown-body blockquote {919 border: none;920 border-radius: 10px;921 padding: 14px 18px 14px 52px;922 margin: 20px 0;923 position: relative;924 font-style: normal;925}926 927.markdown-body blockquote::before {928 position: absolute;929 left: 14px;930 top: 14px;931 font-size: 1.3rem;932 line-height: 1;933}934 935/* Default blockquote = blue info callout */936.markdown-body blockquote {937 background: rgba(0, 242, 254, 0.06);938 border-left: 4px solid #00f2fe;939}940.markdown-body blockquote::before { content: '\1F4A1'; }941 942/* Key Insight / Important */943.markdown-body blockquote:has(strong:first-child) {944 background: rgba(251, 191, 36, 0.07);945 border-left: 4px solid #fbbf24;946}947 948/* Example callouts — lines containing "Example" */949.markdown-body blockquote p strong:first-child {950 background: none;951 padding: 0;952 color: inherit;953}954 955/* Horizontal rule = elegant section divider */956.markdown-body hr {957 border: none;958 height: 1px;959 background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.4), rgba(0, 242, 254, 0.4), transparent);960 margin: 36px 0;961}962 963/* Tables */964.markdown-body table {965 width: 100%;966 border-collapse: collapse;967 margin-bottom: 20px;968 font-size: 0.92rem;969}970 971.markdown-body th {972 background: rgba(167, 139, 250, 0.12);973 color: #a78bfa;974 font-weight: 700;975 padding: 10px 14px;976 text-align: left;977 border-bottom: 2px solid rgba(167, 139, 250, 0.3);978}979 980.markdown-body td {981 padding: 9px 14px;982 border-bottom: 1px solid rgba(255,255,255,0.04);983 color: #c8cde0;984}985 986.markdown-body tr:hover td {987 background: rgba(255, 255, 255, 0.02);988}989 990/* ─── Quiz Styles ─── */991.quiz-intro, .interview-intro, .flashcards-intro {992 margin-bottom: 24px;993 padding-bottom: 12px;994 border-bottom: 1px solid var(--border-subtle);995}996 997.quiz-intro h3, .interview-intro h3, .flashcards-intro h3 {998 font-family: var(--font-display);999 font-size: 1.25rem;1000 display: flex;1001 align-items: center;1002 gap: 8px;1003}1004 1005.quiz-intro p, .interview-intro p, .flashcards-intro p {1006 font-size: 0.85rem;1007 color: var(--color-text-muted);1008 margin-top: 4px;1009}1010 1011.quiz-question-card {1012 background: rgba(255, 255, 255, 0.01);1013 border: 1px solid var(--border-subtle);1014 border-radius: 12px;1015 padding: 20px;1016 margin-bottom: 20px;1017}1018 1019.quiz-question-text {1020 font-size: 1.05rem;1021 font-weight: 600;1022 margin-bottom: 16px;1023 color: #fff;1024}1025 1026.quiz-options-list {1027 display: flex;1028 flex-direction: column;1029 gap: 10px;1030}1031 1032.quiz-option {1033 background: rgba(0, 0, 0, 0.2);1034 border: 1px solid var(--border-subtle);1035 border-radius: 8px;1036 padding: 12px 16px;1037 cursor: pointer;1038 display: flex;1039 align-items: center;1040 gap: 12px;1041 font-weight: 500;1042 transition: var(--transition-smooth);1043}1044 1045.quiz-option:hover {1046 border-color: rgba(255, 255, 255, 0.2);1047 background: rgba(255, 255, 255, 0.03);1048}1049 1050.quiz-option.selected {1051 border-color: var(--color-secondary);1052 background: rgba(99, 102, 241, 0.08);1053}1054 1055.option-marker {1056 width: 20px;1057 height: 20px;1058 border-radius: 50%;1059 border: 2px solid var(--color-text-muted);1060 display: flex;1061 align-items: center;1062 justify-content: center;1063 font-size: 0.65rem;1064 font-weight: 800;1065 flex-shrink: 0;1066}1067 1068.quiz-option.selected .option-marker {1069 border-color: var(--color-secondary);1070 background-color: var(--color-secondary);1071 color: #fff;1072}1073 1074.quiz-option.correct {1075 border-color: var(--color-success) !important;1076 background: rgba(16, 185, 129, 0.1) !important;1077 color: var(--color-success) !important;1078}1079 1080.quiz-option.correct .option-marker {1081 border-color: var(--color-success) !important;1082 background-color: var(--color-success) !important;1083 color: #fff !important;1084}1085 1086.quiz-option.incorrect {1087 border-color: var(--color-danger) !important;1088 background: rgba(239, 68, 68, 0.1) !important;1089 color: var(--color-danger) !important;1090}1091 1092.quiz-option.incorrect .option-marker {1093 border-color: var(--color-danger) !important;1094 background-color: var(--color-danger) !important;1095 color: #fff !important;1096}1097 1098.quiz-explanation {1099 margin-top: 14px;1100 padding-top: 12px;1101 border-top: 1px dashed var(--border-subtle);1102 font-size: 0.88rem;1103 color: var(--color-text-sub);1104 line-height: 1.5;1105}1106 1107.quiz-explanation strong {1108 color: var(--color-success);1109}1110 1111.quiz-footer {1112 display: flex;1113 align-items: center;1114 gap: 20px;1115 margin-top: 30px;1116}1117 1118.quiz-score {1119 font-family: var(--font-display);1120 font-size: 1.1rem;1121 font-weight: 700;1122}1123 1124#quiz-score-val {1125 color: var(--color-primary);1126}1127 1128/* ─── Interview Q&A Accordion ─── */1129.accordion-item {1130 background: rgba(255, 255, 255, 0.01);1131 border: 1px solid var(--border-subtle);1132 border-radius: 10px;1133 margin-bottom: 12px;1134 overflow: hidden;1135}1136 1137.accordion-header {1138 padding: 18px 24px;1139 cursor: pointer;1140 display: flex;1141 justify-content: space-between;1142 align-items: center;1143 font-weight: 600;1144 color: #fff;1145 gap: 20px;1146 transition: var(--transition-smooth);1147}1148 1149.accordion-header:hover {1150 background: rgba(255, 255, 255, 0.02);1151}1152 1153.accordion-icon {1154 transition: transform 0.3s ease;1155 color: var(--color-text-muted);1156}1157 1158.accordion-item.active .accordion-icon {1159 transform: rotate(180deg);1160 color: var(--color-primary);1161}1162 1163.accordion-content {1164 max-height: 0;1165 overflow: hidden;1166 transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);1167 background: rgba(0, 0, 0, 0.2);1168}1169 1170.accordion-item.active .accordion-content {1171 max-height: 1000px; /* Large enough threshold */1172 transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);1173}1174 1175.accordion-body {1176 padding: 20px 24px;1177 font-size: 0.95rem;1178 color: var(--color-text-sub);1179 line-height: 1.6;1180 border-top: 1px solid var(--border-subtle);1181}1182 1183/* ─── Flashcards Styles ─── */1184.flashcards-grid {1185 display: grid;1186 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));1187 gap: 20px;1188}1189 1190/* Card 3D Flip */1191.flashcard {1192 height: 180px;1193 perspective: 1000px;1194 cursor: pointer;1195}1196 1197.flashcard-inner {1198 position: relative;1199 width: 100%;1200 height: 100%;