@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg:#0b0f19;--bg-gradient:radial-gradient(circle at 50% 0%, #1a1535 0%, #0b0f19 70%);--surface:#111827b3;--surface-hover:#1f2937cc;--surface-card:#141a2a99;--border:#ffffff14;--border-hover:#ffffff29;--accent:#8b5cf6;--accent-hover:#a78bfa;--accent-glow:#8b5cf640;--accent-bg:#8b5cf61a;--accent-border:#8b5cf64d;--success:#10b981;--success-bg:#10b9811a;--success-border:#10b9814d;--success-glow:#10b98133;--warning:#f59e0b;--warning-bg:#f59e0b1a;--warning-border:#f59e0b4d;--danger:#f43f5e;--danger-bg:#f43f5e1a;--danger-border:#f43f5e4d;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--sans:"Outfit", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);background-color:var(--bg);background-image:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0b0f1980}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}#root{flex-direction:column;min-height:100vh;display:flex}.bg-glow-container{pointer-events:none;z-index:-1;position:fixed;inset:0;overflow:hidden}.bg-glow-1{filter:blur(80px);background:radial-gradient(circle,#8b5cf626 0%,#0000 70%);width:40vw;height:40vw;animation:20s infinite alternate float-glow;position:absolute;top:-10%;right:10%}.bg-glow-2{filter:blur(100px);background:radial-gradient(circle,#10b98114 0%,#0000 70%);width:45vw;height:45vw;animation:25s infinite alternate-reverse float-glow;position:absolute;bottom:-10%;left:10%}@keyframes float-glow{0%{transform:translate(0)scale(1)}to{transform:translate(5%,5%)scale(1.1)}}.landingPage{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:40px 24px;display:flex}.landingHeader{text-align:center;max-width:600px;margin-bottom:40px}.landingHeader .logo{letter-spacing:-2px;background:linear-gradient(135deg, var(--accent) 0%, #d8b4fe 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px #8b5cf64d);-webkit-background-clip:text;justify-content:center;align-items:center;gap:12px;margin-bottom:16px;font-size:56px;font-weight:800;display:flex}.landingTagline{color:var(--text-secondary);font-size:18px;font-weight:400;line-height:1.6}.authWrapper{background:var(--surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:24px;width:100%;max-width:450px;animation:.5s cubic-bezier(.16,1,.3,1) fade-in-up;overflow:hidden;box-shadow:0 20px 40px #0006,inset 0 1px #ffffff1a}.authTabSwitch{border-bottom:1px solid var(--border);background:#0003;gap:6px;padding:6px;display:flex}.authTabSwitch .tabBtn{color:var(--text-secondary);cursor:pointer;font-size:15px;font-weight:600;font-family:var(--sans);background:0 0;border:none;border-radius:18px;flex:1;padding:12px;transition:all .25s cubic-bezier(.4,0,.2,1)}.authTabSwitch .tabBtn:hover{color:var(--text-primary);background:#ffffff08}.authTabSwitch .tabBtn.active{color:var(--text-primary);background:#ffffff1a;border:1px solid #ffffff0d;box-shadow:0 4px 12px #0000001a}.authContainer{padding:36px}.authCard h2{color:var(--text-primary);letter-spacing:-.5px;margin:0 0 8px;font-size:26px;font-weight:700}.authSubtitle{color:var(--text-secondary);margin-bottom:28px;font-size:14px}.authForm{flex-direction:column;gap:20px;display:flex}.inputGroup{text-align:left;flex-direction:column;gap:8px;display:flex}.inputGroup label{color:var(--text-primary);letter-spacing:.5px;text-transform:uppercase;font-size:13px;font-weight:600}.inputGroup .inputWrapper{align-items:center;display:flex;position:relative}.inputGroup .inputIcon{color:var(--text-muted);width:18px;height:18px;position:absolute;left:14px}.inputGroup input{border:1px solid var(--border);width:100%;color:var(--text-primary);font-size:15px;font-family:var(--sans);background:#00000040;border-radius:12px;padding:14px 16px 14px 44px;transition:all .2s}.inputGroup input::placeholder{color:var(--text-muted)}.inputGroup input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#0006;outline:none}.authError{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);text-align:left;border-radius:12px;margin-bottom:20px;padding:14px;font-size:14px;font-weight:500;animation:.4s ease-in-out shake}.authSuccess{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success);text-align:left;border-radius:12px;margin-bottom:20px;padding:14px;font-size:14px;font-weight:500}.authSwitchText{color:var(--text-secondary);text-align:center;margin-top:28px;font-size:14px}.linkBtn{color:var(--accent-hover);cursor:pointer;font-weight:600;font-family:var(--sans);background:0 0;border:none;padding:0 4px;text-decoration:none;transition:color .2s}.linkBtn:hover{color:var(--text-primary);text-decoration:underline}.btn-primary,.btn-success{color:#fff;cursor:pointer;font-size:15px;font-weight:600;font-family:var(--sans);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 24px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 12px #0003}.btn-primary{background:linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);box-shadow:0 4px 15px #8b5cf640}.btn-primary:hover:not(:disabled){transform:translateY(-2px)scale(1.02);box-shadow:0 8px 25px #8b5cf673}.btn-primary:active:not(:disabled){transform:translateY(0)scale(.98)}.btn-success{background:linear-gradient(135deg, var(--success) 0%, #059669 100%);box-shadow:0 4px 15px #10b98140}.btn-success:hover:not(:disabled){transform:translateY(-2px)scale(1.02);box-shadow:0 8px 25px #10b98173}.btn-success:active:not(:disabled){transform:translateY(0)scale(.98)}.dashboardPage{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:40px 24px;animation:.4s ease-out fade-in}.dashboardHeader{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);background:#11182799;border-radius:20px;justify-content:space-between;align-items:center;margin-bottom:32px;padding:18px 28px;display:flex;box-shadow:0 8px 32px #0003}.dashboardHeader .logo{color:var(--text-primary);letter-spacing:-1px;background:linear-gradient(135deg, var(--accent) 0%, #d8b4fe 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:8px;font-size:24px;font-weight:800;display:flex}.navButtonGroup{align-items:center;gap:10px;display:flex}.btnNav{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:600;font-family:var(--sans);background:#ffffff08;border-radius:12px;align-items:center;gap:8px;padding:10px 18px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.btnNav:hover{color:var(--text-primary);border-color:var(--accent-border);background:#8b5cf614;transform:translateY(-1px);box-shadow:0 0 12px #8b5cf626}.btnNav.active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent-hover);box-shadow:0 0 18px #8b5cf640}.btnLogout{color:#f43f5e;cursor:pointer;font-size:14px;font-weight:600;font-family:var(--sans);background:#f43f5e14;border:1px solid #f43f5e33;border-radius:10px;align-items:center;gap:8px;padding:10px 16px;transition:all .2s;display:flex}.btnLogout:hover{color:#fda4af;background:#f43f5e26;border-color:#f43f5e59}.dashboardGrid{grid-template-columns:340px 1fr;align-items:start;gap:32px;display:grid}@media (width<=900px){.dashboardGrid{grid-template-columns:1fr;gap:24px}}.sidebarColumn,.mainColumn{flex-direction:column;gap:24px;display:flex}.glassCard{background:var(--surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:20px;padding:28px;transition:border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #0003}.glassCard:hover{border-color:var(--accent-border);transform:translateY(-2px);box-shadow:0 16px 48px #00000059,0 0 15px #8b5cf61a}.statsCard{text-align:left}.statsCard h2{color:var(--text-primary);margin-bottom:20px;font-size:20px;font-weight:700}.progressContainer{align-items:center;gap:24px;margin-bottom:24px;display:flex}.progressCircleWrapper{width:90px;height:90px;position:relative}.progressCircleSvg{transform:rotate(-90deg)}.progressCircleBg{fill:none;stroke:#ffffff0d;stroke-width:8px}.progressCircleFill{fill:none;stroke:url(#accentGradient);stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}.progressCircleText{color:var(--text-primary);font-size:20px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.progressLabelWrapper{flex:1}.progressLabelText{color:var(--text-secondary);font-size:15px;line-height:1.5}.progressLabelText strong{color:var(--text-primary)}.difficultyStats{border-top:1px solid var(--border);flex-direction:column;gap:12px;padding-top:20px;display:flex}.diffStatRow{justify-content:space-between;align-items:center;font-size:14px;display:flex}.diffStatLabel{align-items:center;gap:8px;font-weight:500;display:flex}.diffDot{border-radius:50%;width:8px;height:8px}.diffDot.easy{background-color:var(--success);box-shadow:0 0 8px var(--success-glow)}.diffDot.medium{background-color:var(--warning);box-shadow:0 0 8px #f59e0b66}.diffDot.hard{background-color:var(--danger);box-shadow:0 0 8px #f43f5e66}.diffStatValue{color:var(--text-primary);font-weight:600}.diffStatValue span{color:var(--text-muted);font-weight:400}.quickNavCard{text-align:left}.quickNavCard h3{color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;font-size:16px;font-weight:700}.quickNavList{flex-direction:column;gap:6px;display:flex}.quickNavBtn{width:100%;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:600;font-family:var(--sans);background:0 0;border:1px solid #0000;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;transition:all .2s;display:flex}.quickNavBtn:hover{color:var(--text-primary);border-color:var(--border);background:#ffffff08}.quickNavBtn.active{color:var(--accent-hover);background:#8b5cf614;border-color:#8b5cf633}.quickNavBtn .badgeCount{color:var(--text-secondary);background:#ffffff0d;border-radius:20px;padding:2px 8px;font-size:11px}.quickNavBtn.active .badgeCount{background:var(--accent-bg);color:var(--accent-hover)}.actionsCard{text-align:left}.actionsCard h3{color:var(--text-primary);margin:0 0 16px;font-size:18px;font-weight:700}.questionInput{gap:12px;margin-bottom:24px;display:flex}@media (width<=600px){.questionInput{flex-direction:column}}.questionInput input,.questionInput select{border:1px solid var(--border);color:var(--text-primary);font-size:15px;font-family:var(--sans);background:#0003;border-radius:12px;padding:12px 16px;transition:all .25s cubic-bezier(.4,0,.2,1)}.questionInput input{flex:3}.questionInput select{cursor:pointer;flex:1.2}.questionInput input:focus,.questionInput select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow), 0 0 12px #8b5cf61a;background:#00000059;outline:none}.btnAdd{background:var(--text-primary);color:var(--bg);cursor:pointer;font-size:14px;font-weight:700;font-family:var(--sans);border:none;border-radius:12px;padding:12px 24px;transition:all .2s}.btnAdd:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px)}.searchFilterRow{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding-top:20px;display:flex}@media (width<=600px){.searchFilterRow{flex-direction:column;align-items:stretch}}.searchBar{flex:1.5;align-items:center;display:flex;position:relative}.searchIcon{color:var(--text-muted);pointer-events:none;width:16px;height:16px;position:absolute;left:14px}.searchBar input{border:1px solid var(--border);width:100%;color:var(--text-primary);font-size:14px;font-family:var(--sans);box-sizing:border-box;background:#00000040;border-radius:10px;padding:11px 16px 11px 40px;transition:all .2s}.searchBar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#00000059;outline:none}.filters{color:var(--text-secondary);align-items:center;gap:10px;font-size:14px;font-weight:500;display:flex}.filters select{border:1px solid var(--border);color:var(--text-primary);cursor:pointer;font-family:var(--sans);background:#0003;border-radius:10px;outline:none;padding:10px 14px;transition:all .2s}.filters select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.questionListSection{text-align:left}.questionListHeader{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.questionListHeader h3{color:var(--text-primary);margin:0;font-size:20px;font-weight:700}.questionCount{color:var(--text-muted);background:#ffffff0d;border-radius:20px;padding:4px 10px;font-size:13px;font-weight:600}.emptyState{border:2px dashed var(--border);text-align:center;color:var(--text-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff03;border-radius:20px;padding:60px 40px;font-size:15px;font-weight:500}.emptyStateSvg{width:48px;height:48px;color:var(--text-muted);margin-bottom:16px}.questionList{flex-direction:column;gap:16px;width:100%;display:flex}.questionCard{-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-left:4px solid var(--accent);background:#1118278c;border-radius:14px;flex-direction:column;gap:16px;padding:18px 24px;transition:all .25s cubic-bezier(.16,1,.3,1);animation:.3s ease-out slide-up-fade;display:flex;box-shadow:0 4px 20px #0000001a}.questionCard:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 30px #0003}.card-solved{border-left-color:var(--success);background:#1118274d}.card-easy{border-left-color:var(--success)}.card-medium{border-left-color:var(--warning)}.card-hard{border-left-color:var(--danger)}.cardMain{justify-content:space-between;align-items:center;gap:20px;display:flex}.checkboxContainer{cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;width:24px;height:24px;display:block;position:relative}.checkboxContainer input{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.checkmark{background-color:#0000004d;border:2px solid #ffffff26;border-radius:8px;width:24px;height:24px;transition:all .2s;position:absolute;top:0;left:0}.checkboxContainer:hover input~.checkmark{border-color:var(--accent);background-color:#ffffff0d}.checkboxContainer input:checked~.checkmark{background-color:var(--success);border-color:var(--success);box-shadow:0 0 10px var(--success-glow)}.checkmark:after{content:"";display:none;position:absolute}.checkboxContainer input:checked~.checkmark:after{display:block}.checkboxContainer .checkmark:after{border:2.5px solid #fff;border-width:0 2.5px 2.5px 0;width:5px;height:10px;top:4px;left:8px;transform:rotate(45deg)}.questionTextDetails{flex:1;align-items:center;gap:14px;display:flex}.questionText{color:var(--text-primary);letter-spacing:-.2px;font-size:16px;font-weight:600;transition:all .2s}.text-solved{color:var(--text-muted);text-decoration:line-through}.badge{letter-spacing:.8px;text-transform:uppercase;border-radius:8px;align-items:center;gap:4px;padding:5px 10px;font-size:11px;font-weight:700;display:inline-flex}.badge-easy{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}.badge-medium{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning-border)}.badge-hard{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)}.cardButtons{flex-shrink:0;gap:8px;margin-left:auto;display:flex}.btn-icon{border:1px solid var(--border);cursor:pointer;color:var(--text-secondary);background:#ffffff08;border-radius:10px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:inline-flex}.btn-icon svg{width:16px;height:16px}.btn-icon:hover{color:var(--text-primary);border-color:var(--border-hover);background:#ffffff14}.btn-icon.btn-edit:hover{color:var(--accent-hover);background:var(--accent-bg);border-color:var(--accent-border)}.btn-icon.btn-delete:hover{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}.editInputRow{flex:1;align-items:center;gap:12px;display:flex}.editTextField{border:2px solid var(--accent);color:var(--text-primary);font-size:15px;font-family:var(--sans);background:#0000004d;border-radius:10px;flex:1;padding:10px 14px}.editTextField:focus{outline:none}.editActions{gap:8px;display:flex}.btn-save,.btn-cancel,.btn-save-note,.btn-cancel-note{cursor:pointer;font-size:13px;font-weight:600;font-family:var(--sans);border:none;border-radius:10px;padding:10px 16px;transition:all .2s}.btn-save,.btn-save-note{background:var(--accent);color:#fff}.btn-save:hover,.btn-save-note:hover{background:var(--accent-hover)}.btn-cancel,.btn-cancel-note{color:var(--text-secondary);border:1px solid var(--border);background:#ffffff0d}.btn-cancel:hover,.btn-cancel-note:hover{color:var(--text-primary);background:#ffffff1a}.cardNoteSection{border-top:1px dashed #ffffff0f;margin-top:4px;padding-top:14px}.btn-add-note{color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--sans);background:0 0;border:none;align-items:center;gap:6px;padding:0;transition:color .2s;display:inline-flex}.btn-add-note svg{width:14px;height:14px}.btn-add-note:hover{color:var(--accent-hover)}.noteDisplayContainer{border:1px solid var(--border);background:#0003;border-radius:10px;padding:14px 18px;font-size:13.5px}.noteContent{flex-direction:column;gap:8px;display:flex}.noteLabel{color:var(--accent-hover);text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:700}.noteText{color:var(--text-secondary);white-space:pre-wrap;line-height:1.6;font-family:var(--mono);margin:0 0 10px}.noteActions{gap:14px;display:flex}.btn-note-action{color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--sans);background:0 0;border:none;align-items:center;gap:4px;padding:0;transition:color .2s;display:flex}.btn-note-action:hover{color:var(--text-primary)}.btn-note-action.btn-delete-note:hover{color:var(--danger)}.noteEditContainer{flex-direction:column;gap:12px;display:flex}.noteTextarea{border:2px solid var(--accent);color:var(--text-primary);font-family:var(--mono);resize:vertical;background:#0000004d;border-radius:10px;min-height:80px;padding:12px;font-size:13.5px;line-height:1.5}.noteTextarea:focus{outline:none}.noteEditActions{justify-content:flex-end;gap:8px;display:flex}.toast-container{z-index:1000;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;right:24px}.toast{-webkit-backdrop-filter:blur(12px);color:#fff;border:1px solid #ffffff1a;border-left:4px solid var(--accent);background:#111827e6;border-radius:12px;align-items:center;gap:12px;min-width:250px;padding:14px 20px;font-size:14px;font-weight:500;animation:.3s cubic-bezier(.16,1,.3,1) slide-in-right;display:flex;box-shadow:0 10px 25px #0000004d}.toast-success{border-left-color:var(--success)}.toast-error{border-left-color:var(--danger)}.toast-info{border-left-color:var(--accent)}.toast-icon{flex-shrink:0;width:18px;height:18px}.toast-success .toast-icon{color:var(--success)}.toast-error .toast-icon{color:var(--danger)}.toast-info .toast-icon{color:var(--accent-hover)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up-fade{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.donateCard{background:var(--surface);border:1px solid var(--border);text-align:left;border-radius:20px;margin-top:10px;transition:all .3s;padding:24px!important}.donateCard h3{color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:16px;font-weight:700}.donateText{color:var(--text-secondary);margin-bottom:16px;font-size:13px;line-height:1.5}.donateInputGroup{align-items:center;gap:8px;display:flex;position:relative}.currencySymbol{color:var(--text-muted);pointer-events:none;font-size:15px;font-weight:600;position:absolute;left:12px}.donateInput{border:1px solid var(--border);box-sizing:border-box;width:100%;color:var(--text-primary)!important;font-size:14px!important;font-family:var(--sans)!important;background:#00000040!important;border-radius:10px!important;padding:10px 12px 10px 24px!important;transition:all .2s!important}.donateInput:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-glow)!important;background:#0006!important}.donateInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.donateInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.btnDonate{background:linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%)!important;color:#fff!important;cursor:pointer!important;font-size:14px!important;font-weight:700!important;font-family:var(--sans)!important;border:none!important;border-radius:10px!important;padding:10px 20px!important;transition:all .25s cubic-bezier(.4,0,.2,1)!important;box-shadow:0 4px 12px #8b5cf633!important}.btnDonate:hover{transform:translateY(-1px)scale(1.02);background:linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%)!important;box-shadow:0 6px 18px #8b5cf659!important}.btnDonate:active{transform:translateY(0)scale(.98)}.receiptModalOverlay{-webkit-backdrop-filter:blur(8px);z-index:2000;background:#0b0f19d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.receiptModalCard{text-align:center;box-sizing:border-box;width:100%;max-width:480px;border:1px solid var(--border)!important;background:#111827f2!important;border-radius:24px!important;padding:36px!important;box-shadow:0 25px 50px -12px #00000080,0 0 25px #8b5cf626!important}.animate-receipt{animation:.4s cubic-bezier(.34,1.56,.64,1) receipt-zoom}@keyframes receipt-zoom{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.receiptHeart{margin-bottom:12px;font-size:40px;animation:1.5s infinite alternate pulse-heart}@keyframes pulse-heart{0%{transform:scale(1)}to{transform:scale(1.15)}}.receiptHeader h2{color:var(--text-primary);margin-bottom:6px;font-size:24px;font-weight:800}.receiptHeader p{color:var(--text-secondary);margin:0;font-size:14px}.receiptDivider{background:linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);height:1px;margin:24px 0}.receiptDetailsTable{text-align:left;background:#0003;border:1px solid #ffffff0a;border-radius:16px;flex-direction:column;gap:14px;margin-bottom:28px;padding:20px;display:flex}.receiptRow{justify-content:space-between;align-items:center;font-size:14px;display:flex}.receiptLabel{color:var(--text-secondary);font-weight:500}.receiptValue{color:var(--text-primary);word-break:break-all;text-align:right;margin-left:10px;font-weight:600}.successText{color:var(--success)}.font-mono{font-family:var(--mono)}.receiptFooter{gap:12px;display:flex}.btnPrint{flex:1.3;background:linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%)!important;color:#fff!important;cursor:pointer!important;font-size:14px!important;font-weight:700!important;font-family:var(--sans)!important;border:none!important;border-radius:12px!important;padding:12px 20px!important;transition:all .2s!important;box-shadow:0 4px 12px #8b5cf633!important}.btnPrint:hover{transform:translateY(-1px);box-shadow:0 6px 18px #8b5cf659!important}.btnCloseReceipt{flex:1;color:var(--text-secondary)!important;border:1px solid var(--border)!important;cursor:pointer!important;font-size:14px!important;font-weight:600!important;font-family:var(--sans)!important;background:#ffffff0d!important;border-radius:12px!important;padding:12px 20px!important;transition:all .2s!important}.btnCloseReceipt:hover{color:var(--text-primary)!important;background:#ffffff1a!important}@media print{body *{visibility:hidden}.receiptModalOverlay,.receiptModalOverlay *{visibility:visible}.receiptModalOverlay{width:100%;margin:0;padding:0;position:absolute;top:0;left:0;color:#000!important;background:#fff!important;justify-content:center!important;align-items:flex-start!important;display:flex!important}.receiptModalCard{box-shadow:none!important;color:#000!important;background:#fff!important;border:none!important;width:100%!important;max-width:500px!important;margin:40px auto!important;padding:0!important}.receiptHeader h2,.receiptHeader p,.receiptValue,.receiptLabel{color:#000!important}.successText{color:#059669!important}.receiptDetailsTable{background:#f3f4f6!important;border:1px solid #e5e7eb!important}.receiptFooter{display:none!important}}@keyframes pulse-glow{0%,to{opacity:.6;box-shadow:0 0 4px #ffffff05}50%{opacity:1;box-shadow:0 0 10px #ffffff0d}}.code-cell textarea::-webkit-scrollbar{width:6px;height:6px}.output-content::-webkit-scrollbar{width:6px;height:6px}.code-cell textarea::-webkit-scrollbar-track{background:0 0}.output-content::-webkit-scrollbar-track{background:0 0}.code-cell textarea::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.output-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.code-cell textarea::-webkit-scrollbar-thumb:hover{background:#fff3}.output-content::-webkit-scrollbar-thumb:hover{background:#fff3}@media (width<=900px){.code-cell{grid-template-columns:1fr;gap:16px;padding-top:60px}.output-box{margin-top:0}}@media (width<=600px){.method{padding:20px}.method h3{font-size:16px}.method ol li{padding:12px 14px 12px 20px;font-size:13px}.code-cell:before{padding-left:64px;font-size:10px}.code-cell:after{width:8px;height:8px;top:19px;left:14px;box-shadow:12px 0 #ffbd2e,24px 0 #27c93f}.next,.movecellup,.movecelldown,.deletecell,.runcell{width:26px;height:26px;top:11px}.runcell{right:8px}.next{right:38px}.movecelldown{right:68px}.movecellup{right:98px}.deletecell{right:128px}}.write1 h4,.write2 h4,.write3 h4,.write4 h4{color:var(--accent-hover);font-size:15px;font-weight:600}.write1:hover{box-shadow:none!important;border-color:var(--border)!important;background:linear-gradient(135deg,#8b5cf60f 0%,#8b5cf605 100%)!important;transform:none!important}.demo{background:var(--surface-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:16px;width:fit-content;margin:24px auto;padding:24px;box-shadow:0 10px 30px #0003}.card-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.search-card{cursor:pointer;border:1px solid var(--accent-border);background:linear-gradient(135deg,#1e1b4b 0%,#311042 100%);border-radius:10px;justify-content:center;align-items:center;width:60px;height:90px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;box-shadow:0 4px 10px #0000004d}.search-card:hover{border-color:var(--accent-hover);box-shadow:0 8px 20px var(--accent-glow);background:var(--accent-bg);transform:translateY(-8px)scale(1.05)}.card-value{opacity:0;color:var(--text-primary);font-size:20px;font-weight:700;transition:opacity .2s,transform .2s;transform:scale(.8)}.search-card:hover .card-value{opacity:1;transform:scale(1)}.container{text-align:center;background:var(--surface-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);color:var(--text-primary);box-sizing:border-box;border-radius:16px;margin:24px 0;padding:24px;box-shadow:0 10px 30px #00000040}.container h1{background:linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:22px;font-weight:700;display:inline-block}.container h2{color:var(--text-secondary);margin-bottom:16px;font-size:15px;font-weight:500}.cards-container{flex-wrap:wrap;justify-content:center;gap:12px;margin:32px 0;display:flex}.card{width:64px;height:90px;color:var(--text-primary);border:1px solid var(--border);box-sizing:border-box;background:#0f172aa6;border-radius:10px;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 10px #0003}.mid{background:var(--warning-bg);border-color:var(--warning);color:var(--warning);transform:translateY(-12px);box-shadow:0 0 15px #f59e0b59}.discarded{opacity:.25;filter:grayscale(80%);transform:scale(.88)}.found{background:var(--success-bg);border-color:var(--success);color:var(--success);animation:1s infinite pulse;box-shadow:0 0 15px #10b98173}.info{font-size:14px;font-family:var(--mono);color:var(--text-secondary);margin:20px 0}.step-btn{background:linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);color:#fff;font-family:var(--sans);cursor:pointer;box-shadow:0 4px 12px var(--accent-glow);border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1)}.step-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf666}.step-btn:active{transform:translateY(0)}.success{color:var(--success);margin-top:20px;font-size:16px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.code-cell textarea::-webkit-scrollbar{width:6px;height:6px}.output-content::-webkit-scrollbar{width:6px;height:6px}.code-cell textarea::-webkit-scrollbar-track{background:0 0}.output-content::-webkit-scrollbar-track{background:0 0}.code-cell textarea::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.output-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.code-cell textarea::-webkit-scrollbar-thumb:hover{background:#fff3}.output-content::-webkit-scrollbar-thumb:hover{background:#fff3}@media (width<=900px){.code-cell{grid-template-columns:1fr;gap:16px;padding-top:60px}.output-box{margin-top:0}}@media (width<=600px){.method{padding:20px}.method h3{font-size:16px}.method ol li{padding:12px 14px 12px 20px;font-size:13px}.code-cell:before{padding-left:64px;font-size:10px}.code-cell:after{width:8px;height:8px;top:19px;left:14px;box-shadow:12px 0 #ffbd2e,24px 0 #27c93f}.next,.movecellup,.movecelldown,.deletecell,.runcell{width:26px;height:26px;top:11px}.runcell{right:8px}.next{right:38px}.movecelldown{right:68px}.movecellup{right:98px}.deletecell{right:128px}}.write1 h4,.write2 h4,.write3 h4,.write4 h4{color:var(--accent-hover);font-size:15px;font-weight:600}.bubble-container{color:#fff;text-align:center;background:#0f172a;min-height:100vh;padding:40px}.array-container{flex-wrap:wrap;justify-content:center;gap:14px;margin-top:50px;display:flex}.bubble-card{color:#fff;background:#3b82f6;border-radius:12px;justify-content:center;align-items:center;width:80px;height:80px;font-size:28px;font-weight:700;transition:all .5s;display:flex}.compare{color:#000;background:#facc15;transform:translateY(-15px)}.swap{background:#ef4444;transform:scale(1.1)}.next-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;margin-top:40px;padding:12px 24px}.info{margin-top:20px;font-size:18px}.container{text-align:center;color:#fff;background:#0f172a;min-height:100vh;padding:40px}.cards{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px;display:flex}.card{background:#3b82f6;border-radius:10px;justify-content:center;align-items:center;width:75px;height:75px;font-size:24px;font-weight:700;transition:all .4s;display:flex}.sorted{background:#22c55e}.key{color:#000;background:#facc15;transform:translateY(-15px)}.compare{background:#ef4444}.message{margin-top:30px;font-size:20px}.btn{cursor:pointer;color:#fff;background:#2563eb;border:none;border-radius:8px;margin-top:30px;padding:12px 24px}.success{color:#22c55e;margin-top:30px}.container{text-align:center;padding:40px}.step-box{margin:40px 0}.array-group{justify-content:center;gap:10px;margin:15px;display:flex}.card{color:#fff;background:#3b82f6;border-radius:10px;justify-content:center;align-items:center;width:60px;height:60px;font-size:20px;display:flex}.arrow{margin:20px 0;font-size:40px}.result{background:#22c55e}.module-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.module-header h1{letter-spacing:-1px;background:linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px #8b5cf626);-webkit-background-clip:text;margin:0;font-size:32px;font-weight:800;display:inline-block}.btn-reset{border:1px solid var(--warning-border);color:var(--warning);font-family:var(--sans);cursor:pointer;background:linear-gradient(135deg,#f59e0b1a 0%,#f59e0b33 100%);border-radius:10px;align-items:center;gap:8px;padding:10px 18px;font-size:13px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 12px #00000026}.btn-reset:before{content:"↻";font-size:14px;font-weight:700}.btn-reset:hover{background:linear-gradient(135deg, var(--warning) 0%, #d97706 100%);border-color:var(--warning);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px #f59e0b59}.btn-reset:active{transform:translateY(0);box-shadow:0 2px 8px #f59e0b33}.pyodide-loader{font-family:var(--mono);color:var(--text-muted);border:1px solid var(--border);background:#ffffff08;border-radius:8px;padding:8px 12px;font-size:11px;animation:1.5s ease-in-out infinite pulse-glow}.glassCard>div>h3{color:var(--text-secondary);max-width:800px;margin-bottom:32px;font-size:15px;font-weight:400;line-height:1.6}.method{color:var(--text-primary);font-family:var(--sans);box-sizing:border-box;max-width:100%;margin:24px 0}.method h3{color:var(--accent-hover);letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px;font-size:18px;font-weight:700}.method h5{color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px;font-size:11px;font-weight:700}.method ol{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.method ol li{border:1px solid var(--border);color:var(--text-secondary);background:#00000040;border-radius:10px;padding:14px 18px 14px 24px;font-size:14px;line-height:1.6;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}.method ol li:before{content:"";background:linear-gradient(to bottom, var(--accent), #c084fc);opacity:.5;border-top-left-radius:10px;border-bottom-left-radius:10px;width:4px;transition:opacity .25s;position:absolute;top:0;bottom:0;left:0}.method ol li:hover{background:var(--surface-hover);color:var(--text-primary);border-color:#8b5cf64d;transform:translate(6px)}.method ol li:hover:before{opacity:1}.code-cell{border:1px solid var(--border);box-sizing:border-box;background:#0a0f1e73;border-radius:16px;grid-template-columns:1fr 1fr;gap:20px;min-height:250px;margin-top:24px;margin-bottom:24px;padding:64px 20px 20px;transition:all .3s cubic-bezier(.4,0,.2,1);display:grid;position:relative;box-shadow:inset 0 1px #ffffff0d,0 8px 30px #0000004d}.code-cell:hover{border-color:#8b5cf640;box-shadow:inset 0 1px #ffffff0d,0 12px 40px #8b5cf614}.code-cell:before{content:"Python 3 - Interactive Cell";border-bottom:1px solid var(--border);height:48px;font-family:var(--mono);color:var(--text-muted);letter-spacing:.5px;background:#0f172ad9;border-top-left-radius:15px;border-top-right-radius:15px;align-items:center;padding-left:72px;font-size:11px;font-weight:500;display:flex;position:absolute;top:0;left:0;right:0}.code-cell:after{content:"";z-index:11;background:#ff5f56;border-radius:50%;width:10px;height:10px;position:absolute;top:19px;left:18px;box-shadow:16px 0 #ffbd2e,32px 0 #27c93f}.code-cell textarea{color:#e2e8f0;border:1px solid var(--border);width:100%;height:100%;min-height:200px;font-family:var(--mono);resize:vertical;box-sizing:border-box;background:#080b14bf;border-radius:12px;outline:none;padding:16px;font-size:14px;line-height:1.6;transition:all .25s;box-shadow:inset 0 2px 6px #0006}.code-cell textarea:focus{border-color:var(--accent);box-shadow:inset 0 2px 6px #0006, 0 0 0 3px var(--accent-glow);background:#080b14f2}.code-cell textarea::-webkit-scrollbar{width:6px;height:6px}.output-content::-webkit-scrollbar{width:6px;height:6px}.code-cell textarea::-webkit-scrollbar-track{background:0 0}.output-content::-webkit-scrollbar-track{background:0 0}.code-cell textarea::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.output-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.code-cell textarea::-webkit-scrollbar-thumb:hover{background:#fff3}.output-content::-webkit-scrollbar-thumb:hover{background:#fff3}.output-box{border:1px solid var(--border);box-sizing:border-box;background:#0f172a59;border-radius:12px;flex-direction:column;height:100%;min-height:200px;padding:16px;transition:all .25s;display:flex;box-shadow:inset 0 1px #ffffff0d}.output-box h4{font-family:var(--sans);color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin:0 0 8px;font-size:10px;font-weight:700}.output-content{white-space:pre-wrap;height:calc(100% - 22px);min-height:140px;font-family:var(--mono);color:var(--success);box-sizing:border-box;background:#05070ce6;border:1px solid #ffffff08;border-radius:8px;flex-grow:1;padding:12px;font-size:13px;line-height:1.5;overflow-y:auto;box-shadow:inset 0 2px 8px #000c}.output-box.error{background:#f43f5e08;border-color:#f43f5e66}.output-box.error h4{color:var(--danger)}.output-box.error .output-content{color:var(--danger);border-color:#f43f5e26;box-shadow:inset 0 2px 8px #f43f5e1a}.next,.movecellup,.movecelldown,.deletecell,.runcell{z-index:12;cursor:pointer;border:1px solid var(--border);border-radius:6px;justify-content:center;align-items:center;width:30px;height:30px;margin:0;padding:0;font-size:0;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;position:absolute;top:9px;box-shadow:0 2px 8px #0003}.next:hover,.movecellup:hover,.movecelldown:hover,.deletecell:hover,.runcell:hover{transform:translateY(-1px)scale(1.05)}.next:active,.movecellup:active,.movecelldown:active,.deletecell:active,.runcell:active{transform:translateY(0)scale(.95)}.runcell{color:var(--success);background:linear-gradient(135deg,#10b9811a 0%,#10b98140 100%);border-color:#10b98166;right:12px}.runcell:hover{background:linear-gradient(135deg, var(--success) 0%, #059669 100%);border-color:var(--success);color:#fff;box-shadow:0 0 12px #10b98166}.runcell:before{content:"▶";font-size:12px}.next{color:var(--accent-hover);background:linear-gradient(135deg,#8b5cf61a 0%,#8b5cf640 100%);border-color:#8b5cf666;right:48px}.next:hover{background:linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);border-color:var(--accent);color:#fff;box-shadow:0 0 12px #8b5cf666}.next:before{content:"+";font-size:16px;font-weight:700}.movecelldown{border-color:var(--border);color:var(--text-secondary);background:#ffffff08;right:84px}.movecelldown:hover{border-color:var(--border-hover);color:var(--text-primary);background:#ffffff1a;box-shadow:0 0 8px #ffffff1a}.movecelldown:before{content:"▼";font-size:10px}.movecellup{border-color:var(--border);color:var(--text-secondary);background:#ffffff08;right:120px}.movecellup:hover{border-color:var(--border-hover);color:var(--text-primary);background:#ffffff1a;box-shadow:0 0 8px #ffffff1a}.movecellup:before{content:"▲";font-size:10px}.deletecell{color:var(--danger);background:linear-gradient(135deg,#f43f5e1a 0%,#f43f5e40 100%);border-color:#f43f5e66;right:156px}.deletecell:hover{background:linear-gradient(135deg, var(--danger) 0%, #e11d48 100%);border-color:var(--danger);color:#fff;box-shadow:0 0 12px #f43f5e66}.deletecell:before{content:"✕";font-size:12px;font-weight:700}.btn-add-cell-end{border:1px dashed var(--accent-border);width:fit-content;color:var(--accent-hover);font-family:var(--sans);cursor:pointer;background:linear-gradient(135deg,#8b5cf614 0%,#8b5cf626 100%);border-radius:10px;margin:24px auto 8px;padding:10px 24px;font-size:14px;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:block;box-shadow:0 4px 12px #0000001a}.btn-add-cell-end:hover{background:linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);border-style:solid;border-color:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #8b5cf659}.btn-add-cell-end:active{transform:translateY(0);box-shadow:0 2px 8px #8b5cf633}@media (width<=900px){.code-cell{grid-template-columns:1fr;gap:16px;padding-top:60px}.output-box{margin-top:0}}@media (width<=600px){.method{padding:20px}.method h3{font-size:16px}.method ol li{padding:12px 14px 12px 20px;font-size:13px}.code-cell:before{padding-left:64px;font-size:10px}.code-cell:after{width:8px;height:8px;top:19px;left:14px;box-shadow:12px 0 #ffbd2e,24px 0 #27c93f}.next,.movecellup,.movecelldown,.deletecell,.runcell{width:26px;height:26px;top:11px}.runcell{right:8px}.next{right:38px}.movecelldown{right:68px}.movecellup{right:98px}.deletecell{right:128px}}.module-video{aspect-ratio:16/9;background:#000;border-radius:16px;width:100%;max-width:900px;margin:25px auto;display:block;overflow:hidden;box-shadow:0 10px 30px #00000040}.module-video video,.module-video iframe,.module-video embed{object-fit:contain;width:100%;max-width:100%;height:auto;display:block}.write1,.write2,.write3,.write4{font-family:var(--sans);color:var(--text-primary);box-sizing:border-box;will-change:transform, box-shadow;border-radius:14px;margin:24px 0;padding:22px 26px;font-size:16px;line-height:1.8;transition:transform .24s cubic-bezier(.2,.9,.3,1),box-shadow .24s cubic-bezier(.2,.9,.3,1),border-color .24s,background-color .24s}.write1 h1,.write1 h2,.write1 h3,.write1 h4,.write1 p,.write2 h1,.write2 h2,.write2 h3,.write2 h4,.write2 p,.write3 h1,.write3 h2,.write3 h3,.write3 h4,.write3 p,.write4 h1,.write4 h2,.write4 h3,.write4 h4,.write4 p{font-family:var(--sans);color:var(--text-primary);margin-top:0;margin-bottom:12px}.write1 h1,.write2 h1,.write3 h1,.write4 h1{font-size:24px;font-weight:800}.write1 h2,.write2 h2,.write3 h2,.write4 h2{font-size:20px;font-weight:700}.write1 h3,.write2 h3,.write3 h3,.write4 h3{font-size:18px;font-weight:600}.write1 h4,.write2 h4,.write3 h4,.write4 h4{color:var(--accent-hover);font-size:15px;font-weight:600}.write1 :last-child,.write2 :last-child,.write3 :last-child,.write4 :last-child{margin-bottom:0}.write1:hover,.write2:hover,.write3:hover,.write4:hover{transform:translateY(-6px)scale(1.015)}.write1:active,.write2:active,.write3:active,.write4:active{transform:translateY(-1px)scale(.995)}.write1{border:1px solid var(--border);border-left:6px solid var(--accent);background:linear-gradient(135deg,#8b5cf60f 0%,#8b5cf605 100%);box-shadow:0 4px 20px #00000026}.write1:hover{background:linear-gradient(135deg,#8b5cf614 0%,#8b5cf608 100%);border-color:#8b5cf659;box-shadow:0 12px 30px #8b5cf626}.write2{border:1px solid var(--border);background:linear-gradient(135deg,#141a2ad9 0%,#0a0f1ee6 100%);box-shadow:0 10px 30px #00000059}.write2:hover{border-color:var(--border-hover);background:linear-gradient(135deg,#192034e6 0%,#0c1223f2 100%);box-shadow:0 16px 40px #00000080}.write3{border:1px solid var(--warning-border);border-left:6px solid var(--warning);background:linear-gradient(135deg,#f59e0b0f 0%,#f59e0b05 100%);box-shadow:0 4px 20px #00000026}.write3:hover{background:linear-gradient(135deg,#f59e0b14 0%,#f59e0b08 100%);border-color:#f59e0b73;box-shadow:0 12px 30px #f59e0b26}.write4{border:1px solid var(--success-border);border-left:6px solid var(--success);background:linear-gradient(135deg,#10b9810d 0%,#10b98103 100%);box-shadow:0 4px 20px #00000026}.write4:hover{background:linear-gradient(135deg,#10b98112 0%,#10b98105 100%);border-color:#10b98166;box-shadow:0 12px 30px #10b98126}.theory-block{color:#fff;background:#1e293b;border-radius:12px;margin:20px 0;padding:20px;line-height:1.8}