.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:Raleway,HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width:550px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button,button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type=button].button-primary,input[type=reset].button-primary,input[type=submit].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.button,button{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} /* Buttons */ .button, button, input[type='submit'], input[type='reset'], input[type='button'], .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; margin: 8px 8px 8px 0; border: 1px solid var(--border-color) !important; border-radius: 10px; background: transparent !important; color: var(--text-color) !important; font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; text-decoration: none; font-family: inherit; height: auto; white-space: nowrap; } /* Links with FontAwesome icon support */ a { color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--link); transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; } a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); } /* Plain link — no dotted border, inherits theme link colour */ a.plain-link { border-bottom: none; } a .fas, a .fab, a .far { font-size: 0.9em; opacity: 0.8; } a:hover .fas, a:hover .fab, a:hover .far { opacity: 1; transform: scale(1.1); transition: all 0.3s ease; } .button .fas, .button .fab, .button .far, button .fas, button .fab, button .far, .btn .fas, .btn .fab, .btn .far { font-size: 0.9em; } .button-primary i, .button-primary .fas, .button-primary .fab, .button-primary .far, .btn-primary i, .btn-primary .fas, .btn-primary .fab, .btn-primary .far { color: #ffffff !important; } .button:hover, button:hover, .btn:hover { border-color: var(--primary-blue) !important; background: var(--info-item-bg) !important; color: var(--primary-blue) !important; box-shadow: none; transform: none; } body.theme-light .button:hover, body.theme-light button:hover, body.theme-light .btn:hover { background: color-mix( in srgb, var(--primary-blue) 18%, transparent ) !important; } .button-primary, .btn-primary { border: none !important; border-radius: 10px !important; color: #ffffff !important; background: radial-gradient( ellipse at 50% 40%, #a855f7 0%, #9333ea 55%, #7e22ce 100% ) !important; padding: 9px 20px; font-weight: 600; font-size: 14px; box-shadow: none; transition: background 0.25s ease; } .button-primary:hover, .btn-primary:hover { border: none !important; background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important; color: #ffffff !important; box-shadow: none; transform: none; } .button-primary:active, .btn-primary:active { background: radial-gradient( ellipse at 50% 40%, #9333ea 0%, #7e22ce 55%, #6b1bb8 100% ) !important; transform: translateY(1px); box-shadow: none; } /* Light mode — restore purple gradient, override the generic sky-blue hover */ body.theme-light .button-primary, body.theme-light .btn-primary { background: radial-gradient( ellipse at 50% 40%, #a855f7 0%, #9333ea 55%, #7e22ce 100% ) !important; color: #ffffff !important; } body.theme-light .button-primary:hover, body.theme-light .btn-primary:hover { background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important; color: #ffffff !important; border-color: transparent !important; } /* Dark mode — brighter violet, more luminance to pop on dark bg */ body.theme-dark .button-primary, body.theme-dark .btn-primary { background: radial-gradient( ellipse at 50% 40%, #c084fc 0%, #a855f7 55%, #9333ea 100% ) !important; } body.theme-dark .button-primary:hover, body.theme-dark .btn-primary:hover { background: linear-gradient(135deg, #d09cff 0%, #b76cff 100%) !important; } body.theme-dark .button-primary:active, body.theme-dark .btn-primary:active { background: radial-gradient( ellipse at 50% 40%, #b06fec 0%, #9333ea 55%, #8226d6 100% ) !important; } .btn-success { border-color: #10b981 !important; color: #10b981 !important; } .btn-success:hover { border-color: #059669 !important; background: rgba(16, 185, 129, 0.1) !important; color: #059669 !important; } /* Forms with professional styling */ input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='url'], select, textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color) !important; border-radius: var(--radius-medium); background: var(--input-bg) !important; color: var(--text-color) !important; font-size: 0.95em; font-family: inherit; } /* URL input — fa-globe icon via background-image (dark mode) */ input[type='url'] { padding-left: 38px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23999' d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.5 26 20.9 58.3 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.5-26-20.9-58.3-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 14px 14px !important; } body.theme-light input[type='url'] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23777' d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.5 26 20.9 58.3 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.5-26-20.9-58.3-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z'/%3E%3C/svg%3E") !important; } input[type='text']:hover, input[type='email']:hover, input[type='password']:hover, input[type='number']:hover, input[type='url']:hover, select:hover, textarea:hover { border-color: var(--accent-blue) !important; } input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, input[type='number']:focus, input[type='url']:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-blue) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } input[type='checkbox'], input[type='radio'] { accent-color: var(--primary-blue); } label { color: var(--heading-sub); font-size: 0.9em; font-weight: 500; display: block; margin-bottom: 8px; } /* Inline checkbox label pattern: checkbox and text on one line */ label.checkbox-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; line-height: 1.4; white-space: nowrap; } label.checkbox-label input[type='checkbox'] { margin: 0; flex-shrink: 0; } .form-group { margin-bottom: 20px; } textarea { min-height: 100px; resize: vertical; } /* u-full-width class support - match other inputs */ .u-full-width { width: 100% !important; padding: 12px 16px !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-medium) !important; background: var(--input-bg) !important; color: var(--text-color) !important; font-size: 0.95em !important; font-family: inherit !important; box-sizing: border-box !important; } .u-full-width:hover { border-color: var(--accent-blue) !important; } .u-full-width:focus { outline: none !important; border-color: var(--primary-blue) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; } /* Select elements - fix visibility issues */ select.u-full-width, #timezoneSelect { padding: 12px 40px 12px 16px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; min-height: 44px !important; line-height: 1.5 !important; } body.theme-dark select.u-full-width, body.theme-dark #timezoneSelect { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b8b8b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important; } /* Button small with copy button styling */ .button-sm, .copy-btn { min-height: 36px !important; padding: 8px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .button-sm .fas, .button-sm .fab, .button-sm .far, .copy-btn .fas, .copy-btn .fab, .copy-btn .far { font-size: 0.85em !important; margin: 0 !important; line-height: 1 !important; } .button-sm:only-child, .copy-btn:only-child { width: auto !important; min-width: 36px !important; } /* Card/Section with professional styling */ .card { background: var(--card-bg); border: none; border-radius: var(--radius-medium); padding: 24px; margin: 24px 0; transition: all 0.3s ease; } .card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); border-color: var(--accent-blue); } .card .fas, .card .fab, .card .far { color: var(--primary-blue); margin-right: 8px; } .badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--border-color); border-radius: 12px; font-size: 0.8em; background: rgba(255, 255, 255, 0.05); color: var(--muted-text); margin: 0 4px; } body.theme-light .badge { background: rgba(0, 0, 0, 0.02); } /* Base Flatpickr theme */ .flatpickr-calendar { background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); color: var(--text-color, #f8fafc); } .flatpickr-calendar:before, .flatpickr-calendar:after { display: none; } body.theme-light .flatpickr-calendar { background: #ffffff; border-color: var(--border-color, #e2e8f0); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); color: var(--text-color, #333333); } .flatpickr-calendar .flatpickr-months, .flatpickr-calendar .flatpickr-weekdays { background: transparent; } .flatpickr-calendar .flatpickr-months { display: flex; align-items: center; justify-content: center; } .flatpickr-calendar .flatpickr-month { flex: 1 1 auto; text-align: center; display: flex; justify-content: center; align-items: center; padding: 0 32px; color: inherit; } .flatpickr-calendar .flatpickr-current-month { position: static; display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; } .flatpickr-calendar .flatpickr-weekday { color: var(--muted-text, rgba(248, 250, 252, 0.7)); } .flatpickr-calendar .flatpickr-day { color: inherit; border-radius: 6px; } .flatpickr-calendar .flatpickr-day:hover { background: rgba(59, 130, 246, 0.2); border-color: transparent; } .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange { background: var(--primary-blue, #3b82f6); border-color: var(--primary-blue, #3b82f6); color: #ffffff; } .flatpickr-calendar .flatpickr-day.today { border-color: var(--primary-blue, #3b82f6); } .flatpickr-calendar .flatpickr-time input, .flatpickr-calendar .flatpickr-time .flatpickr-am-pm { color: inherit; background: transparent; } .flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay { color: rgba(148, 163, 184, 0.7); } body.theme-dark .flatpickr-calendar .flatpickr-day.prevMonthDay, body.theme-dark .flatpickr-calendar .flatpickr-day.nextMonthDay { color: rgba(248, 250, 252, 0.35); } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { color: var(--muted-text, rgba(248, 250, 252, 0.7)); fill: var(--muted-text, rgba(248, 250, 252, 0.7)); } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { fill: currentColor; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover { color: var(--accent-blue, #a5b4fc); fill: var(--accent-blue, #a5b4fc); } .flatpickr-calendar .numInputWrapper span { color: var(--muted-text, rgba(248, 250, 252, 0.7)); } .flatpickr-calendar .numInputWrapper span:hover { color: var(--text-color, #f8fafc); background: transparent; } .flatpickr-calendar .numInputWrapper span { display: none; } .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; outline: none; background-image: none !important; } /* Base web footer */ .footer { margin-top: 60px; } .footer-navigation { padding: 35px 0; } .footer-nav-container { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; } .footer-nav-grid { display: flex; flex-wrap: wrap; gap: 24px; max-width: 1400px; margin: 0 auto; justify-content: center; } .footer-nav-section { display: flex; flex-direction: column; padding: 20px; background: transparent; flex: 0 1 auto; } @media (min-width: 768px) { .footer-nav-section { flex: 0 1 auto; } } @media (min-width: 1200px) { .footer-nav-section { flex: 0 1 auto; } } .footer-nav-title { font-size: 1.05em; font-weight: 600; color: var(--heading-color); margin: 0 0 16px 0; padding: 0; border: none; display: flex; align-items: center; gap: 10px; } .footer-nav-title i { color: var(--primary-blue); font-size: 1em; width: 20px; text-align: center; } .footer-nav-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 12px 24px; align-items: start; } @media (max-width: 500px) { .footer-nav-links { grid-template-columns: repeat(2, auto); } } .footer-nav-links li { margin: 0; } .footer-nav-links a { color: var(--muted-text); text-decoration: none; border-bottom: none; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9em; line-height: 1.6; white-space: nowrap; } .footer-nav-links a:hover { color: var(--link-hover); border-bottom: none; } .footer-nav-links a i { font-size: 0.9em; opacity: 0.8; } .footer-bottom { padding: 15px 0; background: var(--footer-bottom-bg); border-top: 1px solid var(--footer-border); } .footer-bottom-container { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; } .footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-copyright { margin: 0; color: var(--muted-text); font-size: 0.85em; } .footer-made-in-europe { margin: 0; color: var(--muted-text); font-size: 0.85em; } .footer-red-heart { color: #e74c3c; } .footer-copyright-section { display: flex; flex-direction: column; gap: 2px; } .footer-credit-inline { margin: 0; color: var(--muted-text); font-size: 0.7em; opacity: 0.8; } .footer-credit-inline a { color: var(--primary-blue); text-decoration: none; border-bottom: none; font-weight: 500; transition: color 0.2s ease; } .footer-credit-inline a:hover { color: var(--link-hover); border-bottom: none; } .footer-menu { display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; align-items: center; } .footer-menu a { color: var(--muted-text); text-decoration: none; border-bottom: none; font-size: 0.85em; transition: color 0.2s ease; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .footer-menu a:hover { color: var(--link-hover); border-bottom: none; cursor: pointer; } .footer-menu a.footer-menu-icon-only { font-size: 1.2em; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--footer-section-bg); transition: all 0.2s ease; } .footer-menu a.footer-menu-icon-only:hover { background: var(--primary-blue); color: white; transform: translateY(-2px); } @media (max-width: 750px) { .footer-navigation { padding: 30px 0; } .footer-nav-container, .footer-bottom-container { padding: 0 20px; } .footer-nav-grid { grid-template-columns: 1fr; gap: 16px; } .footer-nav-section { padding: 16px; } .footer-bottom { padding: 16px 0; } .footer-bottom-content { flex-direction: column; text-align: center; } .footer-menu { justify-content: center; } } .navbar { background: var(--navbar-gradient); padding: 0; margin: 0; width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); position: sticky; top: 0; z-index: 1300; overflow: visible; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; max-height: 54px !important; } .navbar { position: sticky; } .navbar::after { content: ''; display: block; width: 100%; height: var(--underline-height); background: var(--navbar-underline); position: absolute; bottom: 0; left: 0; z-index: 0; } .navbar-wrapper { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; position: relative; overflow: visible; padding-top: 4px; padding-bottom: calc(var(--underline-height) + 4px); min-height: auto; width: 100%; box-sizing: border-box; gap: 0; padding-left: 10px; padding-right: 10px; } /* 3-section layout */ .navbar-section--left { display: flex; align-items: center; flex: 0 0 auto; } .navbar-nav { display: flex; flex: 1; align-items: center; min-width: 0; overflow: visible; } .navbar-section--center { display: flex; flex: 1; justify-content: flex-end; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; gap: 0; box-sizing: border-box; overflow: visible; position: relative; } .navbar-section--right { display: flex; flex: 0 0 auto; align-items: center; list-style: none; padding: 0; margin: 0; margin-left: auto; flex-wrap: nowrap; gap: 0; box-sizing: border-box; overflow: visible; position: relative; } .navbar-wrapper::before { display: none; } .navbar-wrapper::after { display: none; } .navbar-wrapper.navbar-space-between { justify-content: space-between; } .navbar-wrapper.navbar-space-between::before, .navbar-wrapper.navbar-space-between::after { display: none; } body.container-90 .navbar-wrapper { max-width: 90%; width: 90%; } body.container-70 .navbar-wrapper { max-width: 70%; width: 70%; } body.container-1200 .navbar-wrapper { max-width: 1200px; } .navbar-logo { display: flex; align-items: center; justify-content: center; padding: 10px; color: #fff !important; text-decoration: none; font-weight: 700; font-size: 1.3em; transition: background-color 0.2s ease; border-bottom: none; border-radius: 10px; flex-shrink: 0; white-space: nowrap; opacity: 0.4; min-width: fit-content; position: relative; z-index: 10; order: 1; } .navbar-logo::before { content: ''; display: block; width: 20px; height: 20px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1OTEiIGhlaWdodD0iMTUzIiB2aWV3Qm94PSIwIDAgNTkxIDE1MyI+CjwhLS0gU1ZHIGNyZWF0ZWQgd2l0aCBBcnJvdywgYnkgUXVpdmVyQUkgKGh0dHBzOi8vcXVpdmVyLmFpKSAtLT4KICA8cGF0aCBkPSJtMzAuODkgODkuOTZ2MTkuMTZjMCA5LjUgNS40IDEyLjk3IDEyLjcgMTIuOTdoNDUuNTljNy42MyAwIDkuNzkgMi44MiA5Ljc5IDEwLjAzdjYuNDZjMCA3LjU5LTIuMzUgMTAuNTEtOS4yOCAxMC41MWgtNTguMWMtMTYuODcgMS4wNC0zMC40Ny0xMi45Ny0zMC40Ny0zMS4yOGwwLjE3LTc1LjgzYzAtMjAuNzEgMTMuNi0zNS4wNyAzMi4xMy0zNS4wN2g1NS43NmM3LjA5IDAgOS4wMSAyLjI0IDkuMDEgOS40NXY5LjMxYzAgNi4yOS0yLjM1IDkuNTUtOS4yOCA5LjU1aC00Ni44OWMtNy4xMiAwLTExLjA5IDMuNDUtMTEuMDkgMTAuNDl2MTkuODRoNDQuNjdjNy4wOSAwIDcuNTQgMi44MyA3LjU0IDguNTl2OS4xM2MwIDUuOTQtMS42MiA4LjM3LTcuMzMgOC4zN2gtNDQuOTJ2LTEuNjh6IiBmaWxsPSIjRjg2NjdCIi8+CiAgPHBhdGggZD0ibTE4MyAxOC45NnYzNi45M2MtNy44MS00LjU4LTE1LjYzLTYuMTEtMjYuMjItNi4xMS0yOC4wMSAwLTQ4LjkxIDE5Ljg0LTQ4LjkxIDUwLjA3IDAgMjguNjYgMjAuMDUgNTEuMTkgNDYuNDcgNTEuMTloMi41NGMxMi45NCAwIDIyLjczLTQuOTcgMzAuNzQtMTEuNjMgMy4xNSA3LjEgNy40MyAxMC41IDE3LjQgMTAuNSA2LjI0IDAuMzcgNy43LTIuODIgNy43LTYuNzl2LTEzMy4yYzAtNS43Ni0yLjgzLTguNzctOC41NC04LjZoLTIuMzVjLTExLjA3IDAtMTguODMgNi45Ni0xOC44MyAxNy42NHptLTIzLjI5IDEwNy40Yy0xNC44NS0wLjczLTIyLjYyLTEyLjAzLTIyLjYyLTI2LjQxIDAtMTUuMTYgOS42NS0yNS44NCAyMi4wNS0yNS44NGgxLjFjMTQuNjcgMCAyNC4yMyAxMS4zIDI0LjIzIDI1Ljg0djEuMTRjMCAxMy44OS0xMC40NSAyNS4yNy0yMy42NiAyNS4yN2gtMS4xeiIgZmlsbD0iI0Y4NjY3QiIvPgogIDxwYXRoIGQ9Im0yOTcuMSA1MC4zMmgtMy4zNmMtNS44OCAwLTcuNjcgMy4yNi03LjY3IDguMzl2NDYuNDNjMCAxMS44Mi01Ljg4IDE5LjE5LTE1LjI3IDE5LjE5LTkuOCAwLTE1Ljg1LTUuNTgtMTUuODUtMTcuOTJ2LTQ3LjMzYzAtNS45NC0yLjM1LTguNzYtOC4wNi04Ljc2aC0xMS4wN2MtNS43MiAwLTguNDUgMi44Mi04LjQ1IDkuMTF2NTIuMzhjMCAyMy42MyAxMS45NCAzOS4yMyAzMi41NSAzOS4yM2gxLjU5YzExLjY4IDAgMjAuMzgtNC4zMSAyNi41OS0xMi4wNCAzLjM1IDcuMjEgNy42NSAxMC45MSAxNi42NyAxMC45MSA1Ljg4IDAgOC43NC0yLjU5IDguNzQtNy45OXYtODMuMDRjMC01LjI3LTMuMzYtOC41Ni04LjMxLTguNTZoLTguMXoiIGZpbGw9IiNGODY2N0IiLz4KICA8cGF0aCBkPSJtMzMwLjEgMTQwLjZ2LTEyMy45YzAtOC43NSA2Ljk0LTE1LjQxIDE0Ljc1LTE1LjQxaDUuMWM2Ljk0IDAgNy45OSAzLjAxIDcuMTQgMTAuNzd2MTI3LjZjMCA2LjI5LTMuMzUgOS43Ni04LjQ4IDkuNzZoLTEwLjMyYy01LjEzIDAtOC4xOS0zLjQ3LTguMTktOC44N3oiIGZpbGw9IiNGODY2N0IiLz4KICA8cGF0aCBkPSJtNDIyLjkgNDkuNThjLTI5LjcyIDAtNTIuNzIgMjEuMy01My40IDQ5LjIzdjIuMTFjMCAyNy43NiAyMC40IDUwLjEyIDUxLjEgNTAuMTJoMi44M2MyOS4yMSAwIDUwLjQ1LTIyLjMzIDUwLjQ1LTUwLjcyIDAtMjkuMS0yMC43My01MC43NC00OS42LTUwLjc0aC0xLjM4em0tMC4xNyA3Ny4yNWgtMC41NWMtMTUuMTYgMC0yMi45OC0xMi40Ny0yMi45OC0yNi4yMiAwLTE0LjggOC41Mi0yNi4zIDIyLjk4LTI2LjNoMC44NGMxMy45OSAwIDIzLjAxIDEyLjEgMjMuMDEgMjUuNDd2MS41NGMwIDE0LjEtOS42NiAyNS41MS0yMy4zIDI1LjUxeiIgZmlsbD0iI0Y4NjY3QiIvPgogIDxwYXRoIGQ9Im01MzguMSA0OS41OGMtMjkuNzIgMC01MS44MyAyMi4xNS01Mi40OCA0OS4yM3YyLjExYzAgMjcuMDUgMTkuNyA1MC4xMiA0OS41NSA1MC4xMmgzLjY2YzI4LjY1IDAgNTEuMDktMjEuNjggNTEuMDktNDkuOTIgMC0yOS4wOS0yMC43MS01MS41NC00OS41OC01MS41NGgtMi4yNHptMC4xNyA3Ny4yNWgtMC41NWMtMTQuNDYgMC0yMy40OC0xMi40Ny0yMy40OC0yNi4yMiAwLTE0LjggOS4wMi0yNi4zIDIyLjY2LTI2LjNoMS4xN2MxMy45OSAwIDIzLjAxIDEyLjEgMjMuMDEgMjUuNDd2MS41NGMwIDE0LjEtOS42NiAyNS41MS0yMi44MSAyNS41MXoiIGZpbGw9IiNGODY2N0IiLz4KPC9zdmc+); background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; } .navbar-logo:hover { background: rgba(0, 0, 0, 0.25); color: #fff !important; border-bottom: none; border-radius: 10px; } .navbar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; overflow: visible; position: relative; min-width: 0; gap: 0; box-sizing: border-box; } .navbar li { margin: 0; position: relative; display: flex; align-items: center; } .navbar a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; color: #fff; text-decoration: none; font-weight: 500; transition: all 0.3s ease; border-bottom: none; border-radius: 10px; white-space: nowrap; flex-shrink: 0; justify-content: center; position: relative; z-index: 100000; } .dropdown > a { z-index: 100001; } .navbar a i { line-height: 1; align-self: center; } .navbar a .fas, .navbar a .fab, .navbar a .far { font-size: 0.85em; opacity: 0.9; } .navbar a .fa-chevron-down { font-size: 0.75em; margin-left: 4px; transition: transform 0.3s ease, color 0.3s ease; color: rgba(163, 180, 252, 0.9); } .dropdown:hover > a .fa-chevron-down { transform: rotate(180deg); color: rgba(163, 180, 252, 1); } .navbar a:hover .fa-chevron-down { color: rgba(163, 180, 252, 1); } .navbar a:hover { background: rgba(0, 0, 0, 0.25); color: #fff; border-bottom: none; box-shadow: none; border-radius: 15px; } .navbar a:hover .fas, .navbar a:hover .fab, .navbar a:hover .far { opacity: 1; } .navbar .nav-btn-wrapper { display: flex; align-items: center; margin: 0; } .navbar .userpanel-nav-wrapper { position: relative; } /* Icon-only user panel trigger — plain nav link, no button styling */ .navbar .userpanel-nav-toggle { font-size: 20px; padding: 6px 12px; color: #fff; opacity: 1; } .navbar .userpanel-nav-toggle i { font-size: 20px; opacity: 0.9; } .navbar .userpanel-nav-toggle:hover i { opacity: 1; } /* Show userpanel on hover via standard dropdown system */ .navbar .userpanel-nav-wrapper.is-open .userpanel-nav-panel, .navbar .userpanel-nav-panel.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* User panel — width + positioning; dropdown-content handles bg/border/shadow/visibility */ .navbar .userpanel-nav-panel { left: auto !important; right: 4px; width: 240px; } /* Logout separator — border above the logout link */ .navbar .userpanel-nav-item-logout { margin-top: 2px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text-color) 20%, transparent); } /* Logout — red color + red pseudo-element accents */ .navbar .userpanel-nav-item-logout, .navbar .userpanel-nav-item-logout .dropdown-icon { color: #f87171 !important; } .navbar .userpanel-nav-item-logout::before { background: linear-gradient( 180deg, #f87171, rgba(248, 113, 113, 0.5) ) !important; } .navbar .userpanel-nav-item-logout::after { background: linear-gradient( 90deg, rgba(248, 113, 113, 0.1), transparent ) !important; } .navbar .userpanel-nav-item-logout:hover { color: #f87171 !important; background: linear-gradient( 135deg, rgba(248, 113, 113, 0.14) 0%, rgba(248, 113, 113, 0.08) 100% ) !important; box-shadow: none !important; } body.theme-light .navbar .userpanel-nav-item-logout, body.theme-light .navbar .userpanel-nav-item-logout .dropdown-icon { color: #dc2626 !important; } body.theme-light .navbar .userpanel-nav-item-logout::before { background: linear-gradient( 180deg, #dc2626, rgba(220, 38, 38, 0.5) ) !important; } body.theme-light .navbar .userpanel-nav-item-logout::after { background: linear-gradient( 90deg, rgba(220, 38, 38, 0.08), transparent ) !important; } body.theme-light .navbar .userpanel-nav-item-logout:hover { color: #dc2626 !important; background: linear-gradient( 135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.06) 100% ) !important; box-shadow: none !important; } .navbar .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 20px; margin: 0 4px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); color: #fff; font-size: 0.95em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .navbar .nav-btn:hover { background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.35); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .navbar .nav-btn-primary { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100% ); border: 2px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) inset, inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; font-weight: 700; letter-spacing: 0.5px; } .navbar .nav-btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transition: left 0.6s ease; } .navbar .nav-btn-primary:hover::before { left: 100%; } .navbar .nav-btn-primary:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100% ); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, inset 0 1px 0 rgba(255, 255, 255, 0.3); } .navbar .nav-btn .fas, .navbar .nav-btn .fab, .navbar .nav-btn .far { font-size: 0.9em; opacity: 0.95; } .navbar .nav-btn:hover .fas, .navbar .nav-btn:hover .fab, .navbar .nav-btn:hover .far { opacity: 1; } .dropdown { position: relative; } .dropdown:hover > a { background: rgba(0, 0, 0, 0.25); border-bottom: none; border-radius: 10px; } .navbar .dropdown > .dropdown-content { top: 100%; left: 0; margin-top: 8px; } .navbar .mega-menu > .mega-menu-content { top: 100%; margin-top: 8px; } .mega-menu::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; min-width: 200px; height: 16px; background: transparent; pointer-events: none; z-index: 99998; } .mega-menu.is-open::after { pointer-events: auto; } .dropdown-content { display: block; position: absolute; top: 100%; left: 0; margin-top: 8px; background: linear-gradient( 135deg, rgba(196, 88, 114, 0.1) 0%, rgba(169, 85, 176, 0.08) 28%, rgba(123, 111, 207, 0.07) 52%, rgba(91, 143, 238, 0.08) 75%, rgba(109, 184, 251, 0.1) 100% ), var(--dropdown-bg); width: 300px; max-width: min(300px, calc(100vw - 40px)); min-width: 260px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; border: 1px solid var(--border-color); border-radius: 14px; z-index: 99999; padding: 6px; word-wrap: break-word; overflow-wrap: break-word; box-sizing: border-box; backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1), height 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown.is-open > .dropdown-content { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 16px; background: transparent; pointer-events: none; z-index: 99998; } .dropdown.is-open::after { pointer-events: auto; } .dropdown-content.is-morphing { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1), height 0.22s cubic-bezier(0.4, 0, 0.2, 1); } body.theme-dark .dropdown-content { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } .mega-menu-content { width: fit-content; min-width: min(220px, calc(100vw - 24px)); max-width: min(900px, calc(100vw - 24px)); padding: 28px 24px; left: 50%; right: auto; margin-left: 0; transform: translateX(-50%) translateY(-6px); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; opacity: 0; pointer-events: none; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; backdrop-filter: blur(16px); background: linear-gradient( 135deg, rgba(196, 88, 114, 0.1) 0%, rgba(169, 85, 176, 0.08) 28%, rgba(123, 111, 207, 0.07) 52%, rgba(91, 143, 238, 0.08) 75%, rgba(109, 184, 251, 0.1) 100% ), var(--dropdown-bg); display: block; position: absolute; top: 100%; margin-top: 8px; will-change: opacity, visibility; z-index: 99999; box-sizing: border-box; overflow-x: hidden; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; } body.theme-dark .mega-menu-content { box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } .mega-menu-content.is-visible { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%) translateY(0); } .mega-menu-content.is-morphing, .dropdown-content.is-morphing { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1), height 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1); overflow: clip; pointer-events: auto !important; } .mega-menu-content.is-morphing .mega-menu-categories, .dropdown-content.is-morphing > * { opacity: 0.85; transition: opacity 0.1s ease-out; } .mega-menu-content.is-visible:not(.is-morphing) .mega-menu-categories, .dropdown-content:not(.is-morphing) > * { opacity: 1; transition: opacity 0.1s ease-out; } .mega-menu-content::before { content: ''; position: absolute; top: -16px; left: 0; width: 100%; height: 16px; background: transparent; pointer-events: none; z-index: 99998; } .mega-menu-content.is-visible::before { pointer-events: auto; } .mega-menu-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, auto)); gap: 26px; width: auto; align-items: start; justify-items: start; pointer-events: auto; } /* 2+ groups: restore full-width stretching layout */ .mega-menu-content:has(.mega-menu-category:nth-child(2)) { width: auto; min-width: min(650px, calc(100vw - 24px)); } .mega-menu-categories:has(.mega-menu-category:nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); width: 100%; } .mega-menu-category { display: flex; flex-direction: column; gap: 0; min-width: 0; width: 100%; align-items: flex-start; } .mega-menu-category-header { display: flex; align-items: center; gap: 11px; padding: 0 0 13px 0; margin-bottom: 13px; border-bottom: 2px solid var(--border-color); position: relative; } .mega-menu-category-header::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 32px; height: 2px; background: linear-gradient( 90deg, var(--primary-blue), rgba(99, 102, 241, 0.3) ); border-radius: 2px; transition: width 0.3s ease; } .mega-menu-category:hover .mega-menu-category-header::after { width: 50px; } .mega-menu-category-header i { font-size: 19px; color: var(--primary-blue); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.08) ); border-radius: 9px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(99, 102, 241, 0.12); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mega-menu-category:hover .mega-menu-category-header i { transform: scale(1.08); box-shadow: 0 3px 8px rgba(99, 102, 241, 0.2); background: linear-gradient( 135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.12) ); } .mega-menu-category-title { font-size: 15px; font-weight: 700; color: var(--text-color); margin: 0; padding: 0; line-height: 1.4; letter-spacing: -0.01em; text-align: left; flex: 1; } .mega-menu-category-items { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; margin-left: 0; width: 100%; align-items: flex-start; } .mega-menu-category-item { display: flex; align-items: center; justify-content: flex-start; padding: 10px 12px 10px 12px; color: var(--text-color); text-decoration: none; border-radius: 8px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; font-size: 14px; font-weight: 500; position: relative; overflow: hidden; margin: 0; min-height: 42px; box-sizing: border-box; text-align: left; width: 100%; } .mega-menu-category-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0); width: 3px; height: 55%; background: linear-gradient( 180deg, var(--primary-blue), rgba(99, 102, 241, 0.5) ); border-radius: 0 2px 2px 0; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; } .mega-menu-category-item::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), transparent); opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; } .mega-menu-category-item:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.14) 0%, rgba(123, 136, 199, 0.11) 50%, rgba(129, 140, 248, 0.14) 100% ); color: var(--text-color); transform: translateX(4px); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12); } .mega-menu-category-item:hover::before { transform: translateY(-50%) scaleX(1); opacity: 1; } .mega-menu-category-item:hover::after { opacity: 1; } body.theme-light .mega-menu-category-item:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.11) 0%, rgba(123, 136, 199, 0.09) 50%, rgba(129, 140, 248, 0.11) 100% ); box-shadow: 0 2px 5px rgba(99, 102, 241, 0.1); } .mega-menu-item-text { line-height: 1.5; color: inherit; position: relative; z-index: 1; letter-spacing: -0.01em; text-align: left; width: 100%; display: block; } .mega-menu-standalone { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-color); grid-column: 1 / -1; } .mega-menu-standalone-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-color); text-decoration: none; border-radius: 12px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient( 135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.04) ); font-size: 14.5px; font-weight: 600; border: 1px solid rgba(99, 102, 241, 0.2); } .mega-menu-standalone-item:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.08) ); color: var(--text-color); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25); border-color: rgba(99, 102, 241, 0.4); } body.theme-light .mega-menu-standalone-item { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02) ); border-color: rgba(99, 102, 241, 0.15); } body.theme-light .mega-menu-standalone-item:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.06) ); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2); } .navbar li:last-child .dropdown-content:not(.mega-menu-content), .navbar li:nth-last-child(2) .dropdown-content:not(.mega-menu-content), .navbar li:nth-last-child(3) .dropdown-content:not(.mega-menu-content) { left: auto; right: 0; } .navbar li:last-child .mega-menu-content, .navbar li:nth-last-child(2) .mega-menu-content, .navbar li:nth-last-child(3) .mega-menu-content { left: 50%; right: auto; transform: translateX(-50%); } .dropdown-content a { padding: 11px 14px; color: var(--text-color); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: flex-start; gap: 12px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-width: 0; word-wrap: break-word; overflow-wrap: break-word; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; z-index: 2; background: transparent; overflow: hidden; pointer-events: auto; border-radius: 8px; margin-bottom: 2px; min-height: 44px; text-align: left; } .dropdown-content a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0); width: 3px; height: 55%; background: linear-gradient( 180deg, var(--primary-blue), rgba(99, 102, 241, 0.6) ); border-radius: 0 2px 2px 0; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; } .dropdown-content a::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(99, 102, 241, 0.1), transparent); opacity: 0; transition: opacity 0.2s ease; border-radius: 8px; } .dropdown-content a:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } .dropdown-content a:last-child { border-bottom: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 0; } .dropdown-content a:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.15) 0%, rgba(123, 136, 199, 0.12) 50%, rgba(129, 140, 248, 0.15) 100% ) !important; color: var(--text-color) !important; transform: translateX(4px); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15); } .dropdown-content a:hover::before { transform: translateY(-50%) scaleX(1); opacity: 1; } .dropdown-content a:hover::after { opacity: 1; } body.theme-light .dropdown-content a:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.12) 0%, rgba(123, 136, 199, 0.1) 50%, rgba(129, 140, 248, 0.12) 100% ) !important; box-shadow: 0 2px 5px rgba(99, 102, 241, 0.12); } .dropdown-content a .dropdown-icon { flex-shrink: 0; flex-grow: 0; width: 20px; min-width: 20px; text-align: center; font-size: 1.1em; color: var(--primary-blue); transition: all 0.2s ease; position: relative; margin: 0; padding: 0; z-index: 1; } .dropdown-content a:hover .dropdown-icon { color: var(--primary-blue); transform: scale(1.1); } .dropdown-content a .dropdown-text { flex: 1; font-weight: 500; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; min-width: 0; max-width: 100%; line-height: 1.5; hyphens: auto; overflow: visible; display: block; position: relative; z-index: 1; text-align: left; } .dropdown-content a .fi { flex-shrink: 0; width: 20px; text-align: center; font-size: 1.1em; } .dropdown-content a .fas.fa-check { margin-left: auto; color: var(--primary-blue); } @media (max-width: 750px) { .mega-menu:hover .mega-menu-content, .mega-menu-content:hover { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .mega-menu::after, .mega-menu-content::before, .dropdown::after { display: none !important; pointer-events: none !important; } } .mega-menu:hover .mega-menu-content, .mega-menu-content:hover { display: block !important; } @media (max-width: 1400px) { .navbar a { padding: 10px 12px; font-size: 0.95em; } .dropdown-content { max-width: min(300px, calc(100vw - 30px)); min-width: 260px; } .mega-menu-content { padding: 36px 32px; } .mega-menu-content:has(.mega-menu-category:nth-child(2)) { min-width: min(700px, calc(100vw - 24px)); } .mega-menu-categories { gap: 36px; grid-template-columns: repeat(auto-fill, minmax(200px, auto)); } .mega-menu-categories:has(.mega-menu-category:nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } @media (max-width: 1200px) { .navbar-wrapper { gap: 15px; padding-left: 8px; padding-right: 8px; } .navbar a { padding: 10px 10px; font-size: 0.9em; } .dropdown-content { max-width: min(280px, calc(100vw - 20px)); min-width: 240px; } .navbar li:nth-last-child(4) .dropdown-content { left: auto; right: 0; } .mega-menu-content { padding: 32px 28px; } .mega-menu-content:has(.mega-menu-category:nth-child(2)) { min-width: min(650px, calc(100vw - 24px)); } .mega-menu-categories { gap: 32px; grid-template-columns: repeat(auto-fill, minmax(190px, auto)); } .mega-menu-categories:has(.mega-menu-category:nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } @media (max-width: 1000px) { .navbar a { padding: 10px 8px; font-size: 0.85em; } .dropdown-content { max-width: min(260px, calc(100vw - 16px)); min-width: 220px; } .navbar li:nth-last-child(5) .dropdown-content { left: auto; right: 0; } } .nav-toggle { display: none; background: transparent !important; border: none !important; color: #fff !important; padding: 12px; cursor: pointer; transition: opacity 0.2s ease; outline: none !important; -webkit-tap-highlight-color: transparent; position: relative; width: 44px; height: 44px; align-items: center; justify-content: center; } .nav-toggle:hover { opacity: 0.8; } .nav-toggle:active { background: transparent !important; } .nav-toggle:focus { outline: none !important; background: transparent !important; } .nav-toggle span { position: absolute; left: 50%; transform: translateX(-50%); display: block; width: 26px; height: 2px; background-color: #fff !important; transition: all 0.3s ease; border-radius: 2px; } .nav-toggle span:nth-child(1) { top: 12px; } .nav-toggle span:nth-child(2) { top: 19px; } .nav-toggle span:nth-child(3) { top: 26px; } .nav-toggle[aria-expanded='true'] span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); } .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded='true'] span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); } .dropdown-content a.active { background: color-mix(in srgb, var(--primary-blue) 12%, transparent); color: var(--primary-blue); } .language-dropdown .language-dropdown-content { display: none; grid-template-columns: repeat(3, 1fr); min-width: 520px; max-width: 600px; gap: 0; padding: 8px 0; right: 0; left: auto; transform: translateX(0); z-index: 99999; } .language-dropdown .language-dropdown-content a { padding: 10px 16px; border-bottom: none !important; border-right: 1px solid var(--border-color); transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 !important; align-items: center !important; display: flex !important; justify-content: flex-start; gap: 8px; min-width: 0; overflow: hidden; } .language-dropdown .language-dropdown-content a .fas.fa-check { margin-left: auto; flex-shrink: 0; width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; align-self: center; color: var(--primary-blue); min-width: 16px; } .language-dropdown .language-dropdown-content a .language-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .language-dropdown .language-dropdown-content a:nth-child(3n) { border-right: none; } .language-dropdown .language-dropdown-content a:hover { background: rgba(74, 158, 255, 0.08) !important; transform: translateX(4px) !important; box-shadow: none !important; } .language-dropdown .language-dropdown-content a::before, .language-dropdown .language-dropdown-content a::after { display: none !important; } .language-dropdown .language-dropdown-content a .fi { flex-shrink: 0; width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: 0; align-self: center; } .language-dropdown .language-dropdown-content a .fas.fa-check { margin-left: auto; flex-shrink: 0; width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; align-self: center; color: var(--primary-blue); min-width: 16px; } .language-dropdown .language-dropdown-content a > *:not(.fi):not(.fa-check) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 751px) { .language-dropdown.is-open .language-dropdown-content { display: grid !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } @media (max-width: 750px) { .language-dropdown:hover .language-dropdown-content, .language-dropdown-content:hover, .navbar .language-dropdown:hover .language-dropdown-content, .navbar .language-dropdown-content:hover { display: none !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; height: 0 !important; grid-template-columns: none !important; } .language-dropdown.open .language-dropdown-content, .language-dropdown.open:hover .language-dropdown-content, .language-dropdown.open .language-dropdown-content:hover, .language-dropdown.open:hover .language-dropdown-content:hover, .navbar .language-dropdown.open .language-dropdown-content, .navbar .language-dropdown.open:hover .language-dropdown-content, .navbar .language-dropdown.open .language-dropdown-content:hover, .navbar .language-dropdown.open:hover .language-dropdown-content:hover { display: grid !important; max-height: 300px !important; height: 300px !important; min-height: 300px !important; opacity: 1 !important; overflow-y: scroll !important; overflow-x: hidden !important; } } .blog-dropdown .blog-dropdown-content { min-width: 420px; max-width: 480px; } .blog-dropdown .blog-dropdown-content a.blog-dropdown-post { display: flex; align-items: flex-start; gap: 14px; min-height: 64px; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease; } .blog-dropdown .blog-dropdown-content a.blog-dropdown-post::before, .blog-dropdown .blog-dropdown-content a.blog-dropdown-post::after { display: none !important; } /* Prevent dropdown-content a rules from fighting mega-menu-category-item on blog-all-posts */ .blog-dropdown .blog-dropdown-content a.blog-all-posts { transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, color 0.25s ease; } .blog-dropdown .blog-dropdown-content a.blog-all-posts:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.14) 0%, rgba(123, 136, 199, 0.11) 50%, rgba(129, 140, 248, 0.14) 100% ) !important; transform: translateX(4px) !important; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12) !important; } .blog-dropdown-thumb-wrap { flex: 0 0 100px; width: 100px; aspect-ratio: 1 / 1; align-self: flex-start; flex-shrink: 0; } .blog-dropdown-thumb { width: 100%; height: 100%; display: block; border-radius: 8px; object-fit: cover; border: 1px solid var(--border-color); background: var(--item-bg); } .blog-dropdown-thumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #ffffff; background: color-mix(in srgb, var(--primary-blue) 40%, transparent); } .blog-dropdown-thumb-fallback i { font-size: 22px; } .blog-dropdown-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; } .blog-dropdown-item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--primary-blue); } .blog-dropdown-item-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--muted-text); } .blog-dropdown-item-meta { font-size: 11px; font-weight: 700; color: var(--muted-text); text-transform: uppercase; letter-spacing: 0.4px; } .blog-dropdown-divider { height: 1px; margin: 6px 2px 4px; background: linear-gradient( 90deg, transparent, var(--border-color), transparent ); } @media (max-width: 750px) { .blog-dropdown .blog-dropdown-content { min-width: 100%; max-width: 100%; padding: 8px; } .blog-dropdown-thumb-wrap { flex-basis: 68px; } .blog-dropdown-thumb { width: 68px; height: auto; } .blog-dropdown-item-title { font-size: 15px; } } .navbar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(2px); } .navbar-overlay.is-open { display: block; opacity: 1; } .mobile-theme-switcher { display: none !important; } /* Mobile-only Home / Reviews menu items — hidden on desktop */ .navbar-mobile-home, .navbar-mobile-reviews { display: none !important; } @media (max-width: 750px) { .navbar { max-height: 64px !important; height: 64px; } /* Hide logo on mobile — nav items in hamburger menu serve as home */ .navbar-section--left { display: none !important; } .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; gap: 0; } .navbar-wrapper { display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0; padding: 0; padding-left: 0; padding-right: 0; position: relative; width: 100%; max-width: 100% !important; box-sizing: border-box; } /* Mobile-only Home / Reviews menu items — shown inside hamburger */ .navbar-mobile-home, .navbar-mobile-reviews { display: flex !important; } .navbar-logo { display: flex !important; padding: 8px 12px; font-size: 1.15em; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-wrapper { height: 64px; min-height: 64px; max-height: 64px; display: flex; align-items: center; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .theme-toggle-navbar { display: inline-flex !important; align-items: center; justify-content: center; position: absolute; right: 68px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: transparent !important; border: none !important; cursor: pointer; z-index: 1001; padding: 12px; margin: 0; transition: opacity 0.2s ease; outline: none !important; -webkit-tap-highlight-color: transparent; line-height: 1; } .theme-toggle-navbar:hover { opacity: 0.8; } .theme-toggle-navbar:active { opacity: 0.8; } .theme-toggle-navbar .fa-moon, .theme-toggle-navbar .fa-sun { font-size: 22px; color: #fff; transition: opacity 0.3s ease, visibility 0.3s ease; line-height: 1; position: absolute; left: 50%; transform: translate(-50%, -50%); } .theme-toggle-navbar .fa-moon { top: 50%; } .theme-toggle-navbar .fa-sun { top: 49.5%; } body.theme-dark .theme-toggle-navbar .fa-moon { opacity: 1; visibility: visible; } body.theme-dark .theme-toggle-navbar .fa-sun { opacity: 0; visibility: hidden; } body.theme-light .theme-toggle-navbar .fa-moon { opacity: 0; visibility: hidden; } body.theme-light .theme-toggle-navbar .fa-sun { opacity: 1; visibility: visible; } .nav-toggle { flex-shrink: 0; margin: 0; padding: 12px; pointer-events: auto; position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 1001; cursor: pointer; width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; background: transparent !important; border: none !important; } .nav-toggle span { background-color: #fff !important; top: auto !important; } .nav-toggle span:nth-child(1) { top: 12px !important; } .nav-toggle span:nth-child(2) { top: 19px !important; } .nav-toggle span:nth-child(3) { top: 26px !important; } .nav-toggle[aria-expanded='true'] span:nth-child(1) { top: 19px !important; } .nav-toggle[aria-expanded='true'] span:nth-child(3) { top: 19px !important; } .navbar-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; background: linear-gradient( 135deg, rgba(214, 53, 53, 0.28) 0%, rgba(192, 68, 136, 0.24) 22%, rgba(139, 92, 191, 0.22) 45%, rgba(91, 143, 238, 0.24) 70%, rgba(109, 184, 251, 0.28) 100% ), var(--container-bg); margin: 0; padding: 0; border-top: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); overflow: hidden; z-index: 1000; width: 100%; box-sizing: border-box; pointer-events: auto; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; display: flex !important; } .navbar-nav.is-open { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); opacity: 1; padding: 15px 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; } .navbar-section--center, .navbar-section--right { flex-direction: column; width: 100%; align-items: stretch; justify-content: flex-start; margin-left: 0 !important; flex: 0 0 auto; } /* Divider between center and right sections */ .navbar-section--right { border-top: 2px solid var(--border-color); margin-top: 8px; padding-top: 8px; } /* Hide dropdown chevron on mobile for items that redirect directly */ .navbar .blog-dropdown-trigger .fa-chevron-down, .navbar .userpanel-nav-toggle .fa-chevron-down { display: none; } /* Match userpanel trigger to the same size/weight/color as all other nav links */ .navbar .userpanel-nav-toggle { font-size: 0.97em !important; font-weight: 500 !important; padding: 13px 20px !important; color: var(--text-color) !important; opacity: 1; } .navbar .userpanel-nav-toggle i { font-size: 15px !important; width: 20px; text-align: center; opacity: 0.75; } /* Show "User Panel" label on mobile (hidden on desktop via sr-only) */ .navbar .userpanel-nav-toggle .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; } .navbar li { width: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; pointer-events: auto; } .navbar a { padding: 13px 20px; color: var(--text-color); border-bottom: 1px solid var(--border-color); width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; gap: 12px; pointer-events: auto; cursor: pointer; position: relative; z-index: 1; font-size: 0.97em; font-weight: 500; border-radius: 0; transition: background 0.2s ease, padding-left 0.2s ease; } /* Icon: consistent size, slightly muted */ .navbar a .fas, .navbar a .fab, .navbar a .far { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; opacity: 0.75; } /* Chevron always pushed to the right */ .navbar a .fa-chevron-down { margin-left: auto; font-size: 11px; opacity: 0.5; } .navbar a:hover, .navbar a:active { background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid var(--border-color); padding-left: 26px; } body.theme-light .navbar a:hover, body.theme-light .navbar a:active { background: rgba(0, 0, 0, 0.05); border-bottom: 1px solid var(--border-color); padding-left: 26px; } body.theme-light .navbar a { color: var(--text-color); } .navbar li:last-child a, .navbar a:last-child { border-bottom: none; } .navbar .dropdown > a, .navbar .mega-menu > a { font-weight: 600; } .navbar .dropdown > a .fa-chevron-down, .navbar .mega-menu > a .fa-chevron-down { margin-left: auto; color: var(--primary-blue); transition: transform 0.3s ease; font-size: 0.8em; padding: 4px; } .navbar .dropdown.open > a .fa-chevron-down, .navbar .mega-menu.open > a .fa-chevron-down { transform: rotate(180deg); } .navbar .dropdown.open > a, .navbar .mega-menu.open > a { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.15) 0%, rgba(123, 136, 199, 0.12) 50%, rgba(129, 140, 248, 0.15) 100% ); border-left: 3px solid var(--primary-blue); padding-left: 17px; } .navbar .nav-btn-wrapper { width: 100%; margin: 0; padding: 0; } .navbar .nav-btn { width: calc(100% - 40px); margin: 8px 20px; padding: 14px 20px; border-radius: var(--radius-medium); background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.2); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); justify-content: center; } .navbar .nav-btn:hover { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.35); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .navbar .nav-btn-primary { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100% ); border: 2px solid rgba(255, 255, 255, 0.4); color: #fff; font-weight: 700; letter-spacing: 0.5px; } .navbar .nav-btn-primary:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100% ); border-color: rgba(255, 255, 255, 0.5); color: #fff; } body.theme-light .navbar .nav-btn { background: rgba(0, 0, 0, 0.2); color: var(--text-color); } body.theme-light .navbar .nav-btn:hover { background: rgba(0, 0, 0, 0.35); border-color: rgba(0, 0, 0, 0.3); } .navbar .userpanel-nav-wrapper { width: 100%; align-items: stretch; } .navbar .userpanel-nav-panel { position: static; top: auto; right: auto; width: calc(100% - 40px); margin: 8px 20px 10px 20px; padding: 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient( 135deg, rgba(99, 102, 241, 0.09) 0%, rgba(168, 85, 159, 0.07) 45%, rgba(129, 140, 248, 0.08) 100% ), var(--container-bg); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; transform: none; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s ease; } .navbar .userpanel-nav-panel::before { display: none; } .navbar .userpanel-nav-wrapper.is-open .userpanel-nav-panel { max-height: 520px; opacity: 1; visibility: visible; pointer-events: auto; } .navbar .userpanel-nav-panel-header { margin-bottom: 8px; padding: 2px 2px 8px 2px; } .navbar .userpanel-nav-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .navbar .userpanel-nav-panel .userpanel-nav-item { border-bottom: none !important; width: 100% !important; justify-content: flex-start !important; padding: 10px 12px !important; border-radius: 12px; background: rgba(148, 163, 184, 0.08) !important; border: 1px solid rgba(148, 163, 184, 0.14); color: var(--text-color); box-shadow: none; gap: 10px; } .navbar .userpanel-nav-panel .userpanel-nav-item:hover, .navbar .userpanel-nav-panel .userpanel-nav-item:active { padding: 10px 12px !important; background: rgba(99, 102, 241, 0.14) !important; border-color: rgba(99, 102, 241, 0.2); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08); transform: none; } .navbar .userpanel-nav-panel .userpanel-nav-item.is-active { background: rgba(99, 102, 241, 0.16) !important; border-color: rgba(99, 102, 241, 0.22); box-shadow: 0 6px 12px rgba(15, 23, 42, 0.07); } .navbar .userpanel-nav-item-text { white-space: normal; overflow: visible; text-overflow: initial; } body.theme-light .navbar .userpanel-nav-panel { border-color: rgba(99, 102, 241, 0.14); background: linear-gradient( 135deg, rgba(99, 102, 241, 0.06) 0%, rgba(168, 85, 159, 0.04) 45%, rgba(129, 140, 248, 0.05) 100% ), var(--container-bg); box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.7) inset; } body.theme-light .navbar .userpanel-nav-panel .userpanel-nav-item { background: rgba(99, 102, 241, 0.05) !important; border-color: rgba(99, 102, 241, 0.1); } body.theme-light .navbar .userpanel-nav-panel .userpanel-nav-item:hover, body.theme-light .navbar .userpanel-nav-panel .userpanel-nav-item:active { background: rgba(99, 102, 241, 0.1) !important; border-color: rgba(99, 102, 241, 0.16); box-shadow: 0 8px 14px rgba(15, 23, 42, 0.05); } body.theme-light .navbar .userpanel-nav-panel .userpanel-nav-item.is-active { background: rgba(99, 102, 241, 0.12) !important; border-color: rgba(99, 102, 241, 0.18); box-shadow: 0 6px 10px rgba(15, 23, 42, 0.04); } .mobile-theme-switcher { margin-top: 10px; padding: 0 20px; display: block !important; } .theme-switcher-mobile { display: flex; justify-content: center; padding: 10px 0; } .theme-toggle-button-mobile { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; background: var(--container-bg); border: 1px solid var(--border-color); border-radius: var(--radius-medium); color: var(--text-color); cursor: pointer; transition: all 0.2s ease; font-size: 0.9em; font-weight: 500; width: 100%; pointer-events: auto; position: relative; z-index: 1001; } .theme-toggle-button-mobile:hover { background: var(--card-bg); border-color: var(--primary-blue); color: var(--primary-blue); } .theme-toggle-button-mobile .theme-icon { font-size: 1.1em; color: var(--primary-blue); } .dropdown-content { position: static !important; left: auto !important; right: auto !important; top: auto !important; border: none !important; box-shadow: none !important; background: linear-gradient( 135deg, rgba(184, 84, 80, 0.06) 0%, rgba(168, 85, 159, 0.05) 30%, rgba(139, 111, 168, 0.04) 50%, rgba(123, 136, 199, 0.05) 70%, rgba(99, 102, 241, 0.06) 85%, rgba(129, 140, 248, 0.06) 100% ), var(--dropdown-bg) !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; transform: none !important; z-index: auto !important; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; display: block !important; transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; } .dropdown-content::before { display: none !important; pointer-events: none !important; } .dropdown-content a { border: none !important; padding: 12px 20px 12px 45px !important; border-bottom: 1px solid var(--border-color) !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; pointer-events: auto !important; cursor: pointer !important; position: relative !important; z-index: 1 !important; background: linear-gradient( 135deg, rgba(99, 102, 241, 0.05) 0%, rgba(123, 136, 199, 0.04) 50%, rgba(99, 102, 241, 0.05) 100% ) !important; font-size: 0.95em !important; gap: 10px !important; transition: background 0.2s ease, padding-left 0.2s ease !important; } body.theme-light .dropdown-content a { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.04) 0%, rgba(123, 136, 199, 0.03) 50%, rgba(99, 102, 241, 0.04) 100% ) !important; } .dropdown-content a:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.18) 0%, rgba(123, 136, 199, 0.15) 50%, rgba(129, 140, 248, 0.18) 100% ) !important; padding-left: 50px !important; } body.theme-light .dropdown-content a:hover { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.15) 0%, rgba(123, 136, 199, 0.12) 50%, rgba(129, 140, 248, 0.15) 100% ) !important; } .dropdown-content a:last-child { border-bottom: none !important; } .mega-menu-content { position: static !important; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 20px 0 !important; border-radius: 0 !important; box-shadow: none !important; background: linear-gradient( 135deg, rgba(184, 84, 80, 0.06) 0%, rgba(168, 85, 159, 0.05) 30%, rgba(139, 111, 168, 0.04) 50%, rgba(123, 136, 199, 0.05) 70%, rgba(99, 102, 241, 0.06) 85%, rgba(129, 140, 248, 0.06) 100% ), var(--dropdown-bg) !important; backdrop-filter: none !important; animation: none !important; display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s !important; } .mega-menu.open .mega-menu-content { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; max-height: 60vh !important; max-height: 60dvh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 8px !important; } .mega-menu:hover .mega-menu-content { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; max-height: 0 !important; overflow: hidden !important; } .mega-menu.open:hover .mega-menu-content { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; max-height: 60vh !important; max-height: 60dvh !important; overflow-y: auto !important; overflow-x: hidden !important; } .mega-menu-categories { grid-template-columns: 1fr !important; gap: 20px !important; padding: 0 16px 16px 16px !important; } .mega-menu.open .mega-menu-content { background: linear-gradient(to bottom, var(--dropdown-bg) 0%, transparent 20px) top / 100% 20px no-repeat, linear-gradient(to top, var(--dropdown-bg) 0%, transparent 20px) bottom / 100% 20px no-repeat, linear-gradient( 135deg, rgba(184, 84, 80, 0.06) 0%, rgba(168, 85, 159, 0.05) 30%, rgba(139, 111, 168, 0.04) 50%, rgba(123, 136, 199, 0.05) 70%, rgba(99, 102, 241, 0.06) 85%, rgba(129, 140, 248, 0.06) 100% ), var(--dropdown-bg) !important; background-attachment: local, local, scroll !important; } .mega-menu-category { gap: 0 !important; background: rgba(0, 0, 0, 0.03) !important; border-radius: 12px !important; padding: 16px !important; border: 1px solid var(--border-color) !important; } body.theme-light .mega-menu-category { background: rgba(0, 0, 0, 0.02) !important; } .mega-menu-category-header { padding-bottom: 14px !important; margin-bottom: 14px !important; gap: 12px !important; } .mega-menu-category-header::after { width: 35px !important; } .mega-menu-category-header i { font-size: 20px !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; } .mega-menu-category-title { font-size: 16px !important; font-weight: 700 !important; } .mega-menu-category-items { gap: 3px !important; padding-top: 0 !important; } .mega-menu-category-item { padding: 12px 14px !important; font-size: 14px !important; border-radius: 8px !important; min-height: 48px !important; margin: 0 !important; background: linear-gradient( 135deg, rgba(99, 102, 241, 0.05) 0%, rgba(123, 136, 199, 0.04) 50%, rgba(99, 102, 241, 0.05) 100% ) !important; } body.theme-light .mega-menu-category-item { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.04) 0%, rgba(123, 136, 199, 0.03) 50%, rgba(99, 102, 241, 0.04) 100% ) !important; } .mega-menu-category-item:hover, .mega-menu-category-item:active { transform: none !important; padding-left: 16px !important; background: linear-gradient( 135deg, rgba(99, 102, 241, 0.18) 0%, rgba(123, 136, 199, 0.15) 50%, rgba(129, 140, 248, 0.18) 100% ) !important; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important; } body.theme-light .mega-menu-category-item:hover, body.theme-light .mega-menu-category-item:active { background: linear-gradient( 135deg, rgba(99, 102, 241, 0.15) 0%, rgba(123, 136, 199, 0.12) 50%, rgba(129, 140, 248, 0.15) 100% ) !important; } .mega-menu-category-item::before { width: 3px !important; height: 50% !important; } .mega-menu-item-text { font-size: 14px !important; line-height: 1.5 !important; } .mega-menu-standalone { margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid var(--border-color) !important; background: transparent !important; border-radius: 0 !important; padding: 20px 16px !important; } .mega-menu-standalone-item { padding: 14px 16px !important; font-size: 14px !important; border-radius: 10px !important; width: 100% !important; box-sizing: border-box !important; } .mega-menu-standalone-item:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important; } .dropdown-content .dropdown-icon { color: var(--primary-blue); font-size: 0.9em; } .navbar .fi { font-size: 1.2em; margin-right: 8px; } .language-dropdown-content a { justify-content: flex-start !important; align-items: center !important; display: flex !important; gap: 8px !important; } .language-dropdown-content a .fi { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; display: inline-block !important; vertical-align: middle !important; margin: 0 !important; align-self: center !important; } .language-dropdown-content a .fa-check { margin-left: auto !important; flex-shrink: 0 !important; width: auto !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; align-self: center !important; color: var(--primary-blue) !important; } .dropdown.open .dropdown-content { max-height: 50vh !important; max-height: 50dvh !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: block !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .dropdown:hover .dropdown-content:not(.mega-menu-content) { max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; } .dropdown.open:hover .dropdown-content:not(.mega-menu-content):not(.language-dropdown-content) { max-height: 50vh !important; max-height: 50dvh !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: block !important; overflow-y: auto !important; overflow-x: hidden !important; } .navbar ul::-webkit-scrollbar, .mega-menu-content::-webkit-scrollbar, .dropdown-content::-webkit-scrollbar { width: 4px; } .navbar ul::-webkit-scrollbar-track, .mega-menu-content::-webkit-scrollbar-track, .dropdown-content::-webkit-scrollbar-track { background: transparent; } .navbar ul::-webkit-scrollbar-thumb, .mega-menu-content::-webkit-scrollbar-thumb, .dropdown-content::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 4px; opacity: 0.5; } .navbar ul, .mega-menu-content, .dropdown-content { scrollbar-width: thin; scrollbar-color: var(--primary-blue) transparent; } .language-dropdown.open:hover .language-dropdown-content, .language-dropdown.open .language-dropdown-content:hover, .language-dropdown.open:hover .language-dropdown-content:hover, .dropdown.language-dropdown.open:hover .language-dropdown-content { max-height: 300px !important; height: 300px !important; min-height: 300px !important; overflow-y: scroll !important; overflow-x: hidden !important; box-sizing: border-box !important; position: relative !important; overscroll-behavior: contain !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: var(--primary-blue) transparent !important; display: grid !important; opacity: 1 !important; } .language-dropdown .language-dropdown-content { position: static !important; left: auto !important; right: auto !important; display: none !important; grid-template-columns: 1fr !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; transform: none !important; padding: 0 !important; margin: 0 !important; } .language-dropdown-content { max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease, opacity 0.3s ease !important; } .language-dropdown:not(.open):hover .language-dropdown-content, .language-dropdown:not(.open) .language-dropdown-content:hover { display: none !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; } .language-dropdown.open .language-dropdown-content { max-height: 300px !important; height: 300px !important; min-height: 300px !important; opacity: 1 !important; overflow-y: scroll !important; overflow-x: hidden !important; display: grid !important; grid-template-columns: 1fr !important; grid-auto-rows: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 10px !important; scrollbar-width: thin; scrollbar-color: var(--primary-blue) transparent; position: relative !important; will-change: scroll-position; overscroll-behavior: contain; touch-action: pan-y; box-sizing: border-box !important; } .language-dropdown.open:hover .language-dropdown-content, .language-dropdown.open .language-dropdown-content:hover, .language-dropdown.open:hover .language-dropdown-content:hover { max-height: 300px !important; height: 300px !important; min-height: 300px !important; display: grid !important; opacity: 1 !important; overflow-y: scroll !important; overflow-x: hidden !important; grid-auto-rows: auto !important; } .language-dropdown.open .language-dropdown-content::-webkit-scrollbar { width: 6px; } .language-dropdown.open .language-dropdown-content::-webkit-scrollbar-track { background: transparent; } .language-dropdown.open .language-dropdown-content::-webkit-scrollbar-thumb { background-color: var(--primary-blue); border-radius: 3px; opacity: 0.5; } .language-dropdown.open .language-dropdown-content::-webkit-scrollbar-thumb:hover { opacity: 0.8; } .language-dropdown.open:hover .language-dropdown-content::-webkit-scrollbar { width: 6px; } .language-dropdown.open:hover .language-dropdown-content::-webkit-scrollbar-track { background: transparent; } .language-dropdown.open:hover .language-dropdown-content::-webkit-scrollbar-thumb { background-color: var(--primary-blue); border-radius: 3px; opacity: 0.5; } .language-dropdown.open:hover .language-dropdown-content::-webkit-scrollbar-thumb:hover { opacity: 0.8; } .language-dropdown .language-dropdown-content a { border-right: none !important; border-bottom: 1px solid var(--border-color) !important; padding-left: 40px !important; padding-right: 20px !important; } .language-dropdown .language-dropdown-content a:last-child { border-bottom: none !important; } } /* Base search field */ .search-field { display: flex; line-height: 28px; align-items: center; position: relative; max-width: 190px; --search-height: 40px; --search-icon-size: 16px; } .search-field__input { width: 100%; height: var(--search-height) !important; line-height: var(--search-height) !important; padding: 0 16px; padding-left: 40px !important; padding-right: 16px !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-medium); outline: none; background-color: var(--input-bg) !important; color: var(--text-color) !important; font-size: 0.95em; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; display: block; appearance: none; } .search-field__input::placeholder { color: var(--muted-text); } .search-field__input::-webkit-search-cancel-button { cursor: pointer; } .search-field__input::-ms-clear { cursor: pointer; } .search-field__input:hover { border-color: var(--primary-blue) !important; } .search-field__input:focus { outline: none; border-color: var(--primary-blue) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 15%, transparent); } .search-field__icon { position: absolute; left: 16px; top: calc(var(--search-height) / 2 + 2px); transform: translateY(-50%); width: var(--search-icon-size); height: var(--search-icon-size); display: flex; align-items: center; justify-content: center; color: var(--muted-text); pointer-events: none; } .search-field__icon svg { display: block; width: var(--search-icon-size); height: var(--search-icon-size); fill: currentColor; } /* Base variables and theme tokens */ :root { --radius-small: 4px; --radius-medium: 8px; --radius-large: 16px; --container-max: 1200px; --shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-medium: 0 2px 10px rgba(0, 0, 0, 0.15); --underline-height: 2px; --navbar-offset: 54px; /* Welcoming Navbar Gradient */ --navbar-gradient: linear-gradient( 135deg, #d63535 0%, #c04488 22%, #8b5cbf 45%, #5b8fee 70%, #6db8fb 88%, #9dd4ff 100% ); /* Accent Underline */ --navbar-underline: linear-gradient( 90deg, #ff6b6b 0%, #e86db8 25%, #b08ee0 50%, #70aaff 75%, #a8dcff 100% ); --btn-gradient: #7c3aed; --btn-gradient-hover: #6d28d9; } /* DARK THEME */ body.theme-dark { isolation: isolate; /* create stacking context so ::before z-index:-1 stays behind children */ background-image: none; /* black SVG invisible on dark bg — use ::before with filter instead */ --bg-gradient: #1d161c; --text-color: #eeeeee; --muted-text: #bebebe; --heading-color: #f5f5f5; --heading-sub: #f5f5f5; --container-bg: #303037; --border-color: #43434a; --table-header-bg: #1c1c20; --card-bg: #2a2a30; --info-item-bg: rgba(178, 126, 215, 0.09); --input-bg: #1c1c20; --link: #c084fc; --link-hover: #dba8ff; --blockquote: #b98ff5; --dropdown-bg: #303037; --shadow-elev: 0 10px 40px rgba(0, 0, 0, 0.4); --primary-blue: #b98ff5; --primary-blue-hover: #a070e0; --accent-blue: #b98ff5; --accent-blue-light: #ead8ff; --light-blue-text: #d5b5ff; --bg-dark: #1c1c20; --footer-bottom-bg: #1c1c20; --footer-border: #43434a; --footer-section-bg: #252529; --text-primary: #eeeeee; --text-secondary: #a7a7a7; --card-header-bg: #2a2a30; --item-bg: #2a2a30; --item-hover-bg: #35353c; --primary-color: #0282aa; --primary-hover: #0095c1; --primary-shadow: rgba(2, 130, 170, 0.4); --info-text: #a3d5f0; --info-bg: #1a3a4a; --info-border: #2a5264; --shadow-color: rgba(2, 130, 170, 0.3); --button-disabled-bg: rgba(148, 163, 184, 0.2); --button-disabled-border: rgba(148, 163, 184, 0.32); --button-disabled-text: rgba(226, 232, 240, 0.72); --button-disabled-shadow: none; --btn-gradient: #ebebeb; --btn-gradient-hover: #ffffff; } /* Filter converts white SVG fills → rgb(145,79,87) so blended at .22 opacity over #0D0B0E = #2A1A1E */ body.theme-dark::before { content: ''; position: fixed; inset: 0; background: url(/assets/cache/contour-pattern-bg-a167342d4f7d8598.svg) repeat; filter: brightness(0.85) sepia(1) hue-rotate(315deg) brightness(0.674) saturate(2); opacity: 0.35; pointer-events: none; z-index: -1; } /* LIGHT THEME — Clean white + gray */ body.theme-light { isolation: isolate; --bg-gradient: linear-gradient( 135deg, #fffcfd 0%, #fdf9fa 30%, #fcf7f9 60%, #fdfafb 100% ); --text-color: #1a1a1a; --muted-text: #6b7280; --heading-color: #111111; --heading-sub: #111111; --container-bg: #ffffff; --border-color: #e2e4e7; --table-header-bg: #f3f4f6; --card-bg: rgba(243, 244, 246, 0.6); --info-item-bg: rgba(124, 58, 237, 0.05); --input-bg: #ffffff; --link: var(--primary-blue); --link-hover: var(--primary-blue-hover); --blockquote: var(--primary-blue); --dropdown-bg: #ffffff; --shadow-elev: 0 4px 20px rgba(0, 0, 0, 0.08); --primary-blue: #7c3aed; --primary-blue-hover: #6d28d9; --light-blue-text: #c4b5fd; --accent-blue: #a78bfa; --bg-dark: #e5e7eb; --footer-nav-bg: #f3f4f6; --footer-bottom-bg: #eaecee; --footer-border: #e2e4e7; --footer-section-bg: #f3f4f6; --text-primary: #1a1a1a; --text-secondary: #6b7280; --card-header-bg: #f3f4f6; --item-bg: #f3f4f6; --item-hover-bg: #ffffff; --primary-color: #7c3aed; --primary-hover: #6d28d9; --primary-shadow: rgba(124, 58, 237, 0.25); --info-text: #5b21b6; --info-bg: #f5f0ff; --info-border: #e9d5ff; --shadow-color: rgba(0, 0, 0, 0.06); --button-disabled-bg: rgba(124, 58, 237, 0.07); --button-disabled-border: rgba(124, 58, 237, 0.15); --button-disabled-text: rgba(26, 26, 26, 0.4); --button-disabled-shadow: none; } body.theme-light::before { content: ''; position: fixed; inset: 0; background: url(/assets/cache/contour-pattern-bg-a167342d4f7d8598.svg) repeat; filter: invert(1) sepia(0.2) hue-rotate(310deg) saturate(0.9); mix-blend-mode: multiply; opacity: 0.22; pointer-events: none; z-index: -1; } /* Global Resets & Layout */ * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; background: var(--bg-gradient); color: var(--text-color); line-height: 1.6; padding: 0; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } .container { max-width: var(--container-max); margin: 0 auto; background: var(--container-bg); border-radius: 0 0 var(--radius-large) var(--radius-large); padding: 20px; padding-top: 20px; padding-left: 20px; padding-right: 20px; box-shadow: var(--shadow-strong); border-top: none; } .container.container-90 { max-width: 90%; width: 90%; } .container.container-70 { max-width: 70%; width: 70%; } .container.container-1200 { max-width: 1200px; } .container.container-fullwidth { max-width: 100%; width: 100%; padding: 0; border-radius: 0; box-shadow: none; background: transparent; } .container .card, .container pre, .container code { border-radius: var(--radius-large); } h1 { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 16px 0; color: var(--heading-color); } h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 40px 0 12px 0; color: var(--heading-color); border: none; padding: 0; } /* Shared section heading style for project content blocks */ h2.base-section-title { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px 0; color: var(--heading-color); text-align: center; border: none; padding: 0; } @media (max-width: 768px) { h2.base-section-title { font-size: 24px; } } /* Hero product title: "BrandName - tagline" pattern */ h1.base-hero-title { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; color: var(--text-color); margin: 0 0 12px 0; } .base-hero-title-brand { font-weight: 800; letter-spacing: -0.3px; background: linear-gradient(120deg, #c084fc 0%, #a855f7 50%, #9333ea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.theme-light .base-hero-title-brand { background: linear-gradient(120deg, #c084fc 0%, #a855f7 50%, #9333ea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @media (max-width: 768px) { h1.base-hero-title { font-size: 30px; } } @media (max-width: 480px) { h1.base-hero-title { font-size: 26px; } } h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 28px 0 10px 0; color: var(--heading-color); } h4 { font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.3; margin: 20px 0 8px 0; color: var(--heading-color); } h5 { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; margin: 16px 0 6px 0; color: var(--heading-color); } h6 { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; margin: 14px 0 6px 0; color: var(--muted-text); } p { margin-bottom: 15px; color: var(--muted-text); } .button:disabled, .button[disabled], button:disabled, button[disabled] { background: var(--button-disabled-bg) !important; border-color: var(--button-disabled-border) !important; color: var(--button-disabled-text) !important; box-shadow: var(--button-disabled-shadow); cursor: not-allowed; opacity: 1; pointer-events: none; transform: none; filter: saturate(0.7); } .button:disabled::before, .button[disabled]::before, button:disabled::before, button[disabled]::before { display: none; } .button:disabled:hover, .button[disabled]:hover, button:disabled:hover, button[disabled]:hover, .button:disabled:active, .button[disabled]:active, button:disabled:active, button[disabled]:active { background: var(--button-disabled-bg); border-color: var(--button-disabled-border); color: var(--button-disabled-text); box-shadow: var(--button-disabled-shadow); transform: none; } /* Lists */ ul, ol { margin: 15px 0 15px 25px; color: var(--muted-text); } li { margin-bottom: 8px; } ul { list-style-type: disc; } /* Code blocks */ code, pre { font-family: 'Courier New', 'Monaco', monospace; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-medium); padding: 2px 6px; font-size: 0.9em; } pre { padding: 15px; margin: 15px 0; overflow-x: auto; border-radius: var(--radius-medium); } body.theme-dark pre code { color: #81c784; background: transparent; border: none; } body.theme-light pre code { color: #2d8659; background: transparent; border: none; } /* Blockquote with icon support */ blockquote { border-left: 4px solid var(--blockquote); padding-left: 24px; margin: 20px 0; font-style: italic; color: var(--muted-text); position: relative; border-radius: 0 var(--radius-medium) var(--radius-medium) 0; background: rgba(37, 99, 235, 0.05); padding: 16px 24px; } blockquote::before { content: ''; color: var(--blockquote); position: absolute; left: 8px; top: 8px; width: 1.2em; height: 1.2em; background-color: currentColor; -webkit-mask-image: var(--fa-solid-quote-left); mask-image: var(--fa-solid-quote-left); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; opacity: 0.3; } body.theme-light blockquote { background: rgba(37, 99, 235, 0.03); } hr { border: none; border-top: 1px solid var(--border-color); margin: 30px 0; } /* Grid utility for non-Skeleton sections */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0; } main { flex: 1; } @media (max-width: 750px) { .container { max-width: 100% !important; width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; padding-top: 20px; padding-bottom: 20px; } } .row:has(.six.columns) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-left: 0; margin-right: 0; } .row:has(.six.columns) .six.columns { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; float: none !important; } .row:has(.six.columns) .six.columns .card { margin: 0 !important; height: 100%; display: flex; flex-direction: column; } .row:has(.six.columns) .six.columns .card h5 { margin-top: 0; margin-bottom: 12px; } .row:has(.six.columns) .six.columns .card p { margin-bottom: 0; flex: 1; } /* Blog card links - remove outline/border and add hover effect */ .card > a { outline: none; border: none; display: block; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card > a:focus { outline: none; border: none; } /* Add blue bottom border to clickable cards on hover using box-shadow */ .card:has(> a) { box-shadow: inset 0 -1px 0 0 transparent; transition: box-shadow 0.3s ease, transform 0.2s ease; } .card:has(> a):hover { box-shadow: inset 0 -1px 0 0 var(--link), 0 8px 24px rgba(0, 0, 0, 0.15); } /* Highlight bottom border on hover for tool-card links */ a.tool-card { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease; } a.tool-card:hover { border-bottom-color: var(--link) !important; } .card:has(> a):hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); cursor: pointer; } .card > a:hover { cursor: pointer; } /* Responsive: stack cards on mobile */ @media (max-width: 768px) { .row:has(.six.columns) { grid-template-columns: 1fr; } } /* Theme switcher styles moved to assets/css/theme_switcher.css */ /* Remove default focus outlines and dotted borders from links */ *:focus { outline: none !important; } a { border-bottom: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Floating theme switcher (top-right) */ .theme-switcher { position: fixed; top: calc(var(--navbar-offset) + 8px); right: 12px; z-index: 20000; } @media (max-width: 750px) { .theme-switcher { display: none; } } .theme-toggle-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 10px; position: relative; z-index: 1; margin-top: 10px; background: transparent; border: none; box-shadow: none; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease; font-size: 22px; } .theme-toggle-button:hover { background: rgba(128, 128, 128, 0.12); transform: none; box-shadow: none; border: none; } .theme-toggle-button:active { transform: scale(0.9); background: rgba(128, 128, 128, 0.18); } .theme-toggle-button:focus { outline: none; box-shadow: none; } body.theme-dark .theme-toggle-button { color: #c0bcb8; } body.theme-light .theme-toggle-button { color: #2d2926; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 6px rgba(45, 41, 38, 0.14); } body.theme-light .theme-toggle-button:hover { background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(45, 41, 38, 0.18); } .theme-icon { display: inline-block; line-height: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg) scale(1); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Dark theme: moon visible, sun hidden behind */ .theme-icon.fa-moon { opacity: 1; } .theme-icon.fa-sun { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0.6); } /* Light theme: sun visible, moon rotated away */ body.theme-light .theme-icon.fa-moon { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.6); } body.theme-light .theme-icon.fa-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); } /* Snappier easing during active switch */ body.theme-switching .theme-icon { transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.55, 0, 0.45, 1); } /* Suppress default browser cross-fade — only our clip-path ripple runs */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { z-index: 1; } ::view-transition-old(root) { z-index: 0; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .theme-icon { transition: none !important; } } .st-dashboard-shell { --st-db-bg: linear-gradient( 155deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface) 14%) 0%, color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%) 100% ); --st-db-card: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent); --st-db-card-soft: color-mix(in srgb, var(--surface-container-low) 84%, var(--surface-container) 16%); --st-db-card-soft-2: color-mix(in srgb, var(--surface-container) 78%, var(--surface-container-high) 22%); --st-db-sidebar-active: var(--eduloo-sidebar-item-active, color-mix(in srgb, var(--surface-container-lowest) 58%, var(--primary-container) 42%)); --st-db-sidebar-hover: var(--eduloo-sidebar-item-hover, color-mix(in srgb, var(--surface-container) 76%, var(--primary-container) 24%)); --st-db-sidebar-soft: color-mix(in srgb, var(--st-db-sidebar-active) 42%, var(--st-db-card-soft) 58%); --st-db-sidebar-soft-strong: color-mix(in srgb, var(--st-db-sidebar-active) 56%, var(--st-db-card-soft) 44%); --st-db-sidebar-chip: color-mix(in srgb, var(--st-db-sidebar-active) 52%, var(--surface-container-lowest) 48%); --st-db-title: var(--on-surface); --st-db-text: var(--on-surface); --st-db-muted: var(--on-surface-variant); --st-db-icon: color-mix(in srgb, var(--primary) 80%, var(--on-primary-container) 20%); --st-db-dropdown-selected-bg: color-mix(in srgb, var(--surface-container-lowest) 62%, var(--primary-container) 38%); --st-db-dropdown-selected-border: color-mix(in srgb, var(--primary-container) 62%, transparent); --st-db-dropdown-selected-text: color-mix(in srgb, var(--primary) 78%, var(--on-primary-container) 22%); --st-db-shadow: 0 28px 52px -42px color-mix(in srgb, var(--on-surface) 44%, transparent); --st-db-card-shadow: 0 24px 40px -34px color-mix(in srgb, var(--primary) 28%, transparent); --st-db-focus: color-mix(in srgb, var(--primary-container) 62%, transparent); position: relative; overflow: hidden; max-width: 1320px; margin: 0 auto !important; padding: 24px !important; border: none !important; border-radius: 34px !important; background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary-container) 24%, transparent) 0%, transparent 42%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--primary-container) 18%, transparent) 0%, transparent 46%), var(--st-db-bg) !important; box-shadow: var(--st-db-shadow) !important; display: flex; flex-direction: column; gap: 20px; } body:has(.base-sidebar--floating-left) .st-dashboard-shell { margin-top: var(--eduloo-main-offset) !important; } body.theme-dark .st-dashboard-shell { --st-db-bg: linear-gradient( 158deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-dim) 14%) 0%, color-mix(in srgb, var(--surface-container) 78%, var(--surface-container-high) 22%) 100% ); --st-db-card: color-mix(in srgb, var(--surface-container-high) 90%, transparent); --st-db-card-soft: color-mix(in srgb, var(--surface-container-high) 82%, var(--surface-container-highest) 18%); --st-db-card-soft-2: color-mix(in srgb, var(--surface-container-highest) 76%, var(--primary-container) 24%); --st-db-sidebar-soft: color-mix(in srgb, var(--st-db-sidebar-active) 48%, var(--st-db-card-soft) 52%); --st-db-sidebar-soft-strong: color-mix(in srgb, var(--st-db-sidebar-active) 62%, var(--st-db-card-soft) 38%); --st-db-sidebar-chip: color-mix(in srgb, var(--st-db-sidebar-active) 56%, var(--surface-container-highest) 44%); --st-db-title: color-mix(in srgb, var(--on-surface) 95%, #dbe9ff 5%); --st-db-text: color-mix(in srgb, var(--on-surface) 94%, #d6e6ff 6%); --st-db-muted: color-mix(in srgb, var(--on-surface-variant) 88%, #bfd3ef 12%); --st-db-icon: color-mix(in srgb, #9fc7ff 82%, #e1eeff 18%); --st-db-play-indigo: rgba(97, 121, 228, 0.24); --st-db-play-rose: rgba(190, 101, 159, 0.22); --st-db-play-mint: rgba(44, 191, 173, 0.18); --st-db-panel-border: rgba(138, 149, 230, 0.34); --st-db-panel-shadow: 0 22px 38px -28px rgba(0, 0, 0, 0.78); --st-db-dropdown-selected-bg: linear-gradient(135deg, rgba(97, 121, 228, 0.2) 0%, rgba(44, 191, 173, 0.1) 48%, rgba(190, 101, 159, 0.17) 100%); --st-db-dropdown-selected-border: rgba(141, 152, 230, 0.4); --st-db-dropdown-selected-text: color-mix(in srgb, var(--on-surface) 90%, var(--on-primary) 10%); --st-db-shadow: 0 30px 56px -44px color-mix(in srgb, black 74%, transparent); --st-db-card-shadow: 0 26px 44px -34px color-mix(in srgb, black 70%, transparent); --st-db-focus: color-mix(in srgb, var(--primary-container) 54%, transparent); background: radial-gradient(circle at 8% 0%, rgba(97, 121, 228, 0.2) 0%, transparent 42%), radial-gradient(circle at 95% 8%, rgba(44, 191, 173, 0.14) 0%, transparent 38%), radial-gradient(circle at 94% 100%, rgba(190, 101, 159, 0.16) 0%, transparent 46%), var(--st-db-bg) !important; } body.theme-dark .st-dashboard-shell > .card, body.theme-dark .st-dashboard-shell .st-dashboard-section { border: 1px solid var(--st-db-panel-border) !important; background: radial-gradient(circle at 100% 0%, rgba(44, 191, 173, 0.08) 0%, transparent 40%), linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 82%, rgba(97, 121, 228, 0.18) 18%) 0%, color-mix(in srgb, var(--surface-container-highest) 84%, rgba(190, 101, 159, 0.14) 16%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--st-db-panel-shadow) !important; } body.theme-light .st-dashboard-shell { --st-db-sidebar-active: color-mix(in srgb, #d8e4ff 62%, #f3d8ea 38%); --st-db-sidebar-hover: color-mix(in srgb, #c4d8ff 58%, #efcbe3 42%); --st-db-sidebar-soft: color-mix(in srgb, var(--st-db-sidebar-active) 34%, var(--st-db-card-soft) 66%); --st-db-sidebar-soft-strong: color-mix(in srgb, var(--st-db-sidebar-active) 44%, var(--st-db-card-soft) 56%); --st-db-sidebar-chip: color-mix(in srgb, var(--st-db-sidebar-active) 42%, var(--surface-container-lowest) 58%); --st-db-icon: color-mix(in srgb, #5578d8 72%, #b76398 28%); --st-db-focus: color-mix(in srgb, #a59de3 52%, transparent); --st-db-sidebar-active-border: rgba(112, 105, 198, 0.24); --st-db-sidebar-active-ring: inset 0 0 0 1px rgba(112, 105, 198, 0.16); --st-db-dropdown-selected-bg: linear-gradient(135deg, rgba(85, 124, 224, 0.14) 0%, rgba(188, 102, 165, 0.14) 100%); --st-db-dropdown-selected-border: rgba(112, 105, 198, 0.24); --st-db-dropdown-selected-text: color-mix(in srgb, var(--primary) 72%, var(--on-surface) 28%); background: radial-gradient(circle at 10% 0%, rgba(85, 124, 224, 0.14) 0%, transparent 42%), radial-gradient(circle at 92% 100%, rgba(188, 102, 165, 0.12) 0%, transparent 46%), var(--st-db-bg) !important; } body:has(.base-sidebar--floating-left) .st-dashboard-shell { border: none !important; box-shadow: var(--st-db-shadow) !important; } .st-dashboard-shell > .card, .st-dashboard-shell .st-dashboard-section { margin: 0 !important; padding: 22px !important; border-radius: 30px !important; border: none !important; background: var(--st-db-card) !important; box-shadow: var(--st-db-card-shadow) !important; } .st-dashboard-shell .card .fas, .st-dashboard-shell .card .fab, .st-dashboard-shell .card .far { color: var(--st-db-icon); } .st-dashboard-shell .card .st-btn .fas, .st-dashboard-shell .card .st-btn .fab, .st-dashboard-shell .card .st-btn .far { color: inherit !important; } .st-dashboard-shell .st-dashboard-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr); gap: 16px; align-items: stretch; border-radius: 30px; background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--primary-container) 30%, transparent) 0%, transparent 52%), radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--primary-container) 22%, transparent) 0%, transparent 54%), color-mix(in srgb, var(--st-db-card) 86%, var(--surface-bright) 14%); box-shadow: var(--st-db-card-shadow); padding: 24px; } .st-dashboard-shell .st-dashboard-hero-copy { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-self: stretch; min-height: 0; } .st-dashboard-shell .st-dashboard-hero > .st-dashboard-hero-mascot { height: 100%; } .st-dashboard-shell .st-panel-head { margin: 0; } .st-dashboard-shell .st-dashboard-kicker { display: inline-flex; align-items: center; min-height: 30px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--primary-container) 34%, transparent); color: color-mix(in srgb, var(--primary) 84%, var(--on-primary-container) 16%); font-size: 13px; font-weight: 800; letter-spacing: 0.2px; } .st-dashboard-shell .st-panel-head .st-title { margin: 10px 0 6px !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 44px; line-height: 1.2; font-weight: 800; letter-spacing: -1px; padding-bottom: 8px; color: var(--st-db-title) !important; -webkit-text-fill-color: initial; animation: none; background: var(--primary); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .st-dashboard-shell .st-panel-head .st-subtitle { margin: 0 !important; color: var(--st-db-muted); font-size: 15px; line-height: 1.62; max-width: 700px; } .st-dashboard-shell .st-dashboard-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; padding-top: 2px; align-self: end; } .st-dashboard-shell .st-dashboard-hero-stat { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 11px 15px; border-radius: 18px; background: var(--st-db-sidebar-soft-strong); } .st-dashboard-shell .st-dashboard-hero-stat i { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary-container) 64%, var(--surface-container-lowest) 36%); color: var(--st-db-icon); font-size: 14px; } .st-dashboard-shell .st-dashboard-hero-stat div { display: flex; flex-direction: column; gap: 2px; } .st-dashboard-shell .st-dashboard-hero-stat-label { font-size: 12px; font-weight: 700; color: var(--st-db-muted); letter-spacing: 0.2px; } .st-dashboard-shell .st-dashboard-hero-stat strong { font-size: 16px; line-height: 1.3; color: var(--st-db-title); } .st-dashboard-shell .st-dashboard-hero-mascot { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; gap: 10px; border-radius: 24px; background: linear-gradient( 0deg, color-mix(in srgb, var(--surface-container-lowest) 52%, transparent) 0%, color-mix(in srgb, var(--surface-container-lowest) 14%, transparent) 42%, transparent 72% ), url(/assets/cache/dashboard-a6a9c66d023f0ebd.png) center center / cover no-repeat; padding: 0 !important; min-height: 190px; overflow: hidden; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-mascot { background: linear-gradient( 0deg, color-mix(in srgb, black 34%, transparent) 0%, color-mix(in srgb, black 12%, transparent) 44%, transparent 76% ), url(/assets/cache/dashboard-a6a9c66d023f0ebd.png) center center / cover no-repeat; } .st-dashboard-shell .st-dashboard-hero-badge { min-height: 32px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--primary-container) 52%, transparent); color: color-mix(in srgb, var(--primary) 84%, var(--on-primary-container) 16%); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 800; } .st-dashboard-shell .st-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .st-dashboard-shell .st-card-title { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.4px; color: var(--st-db-title); border-bottom: none !important; } .st-dashboard-shell .st-dashboard-card-meta { font-size: 12px; font-weight: 700; color: var(--st-db-muted); max-width: 340px; line-height: 1.5; } .st-dashboard-shell .st-panel-summary-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: stretch; } .st-dashboard-shell .st-panel-summary-top > .st-panel-box { position: relative; min-height: 196px; padding: 18px; border-radius: 24px; gap: 12px; background: color-mix(in srgb, var(--st-db-sidebar-soft) 92%, var(--surface-container-lowest) 8%); box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent), 0 14px 26px -26px color-mix(in srgb, var(--on-surface) 56%, transparent); } body.theme-dark .st-dashboard-shell .st-panel-summary-top > .st-panel-box { box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 16px 30px -28px color-mix(in srgb, black 78%, transparent); } body.theme-dark .st-dashboard-shell .st-dashboard-hero { background: radial-gradient(circle at 12% 10%, var(--st-db-play-indigo) 0%, transparent 52%), radial-gradient(circle at 88% 16%, var(--st-db-play-mint) 0%, transparent 46%), radial-gradient(circle at 90% 92%, var(--st-db-play-rose) 0%, transparent 56%), linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 82%, rgba(97, 121, 228, 0.18) 18%) 0%, color-mix(in srgb, var(--surface-container-highest) 84%, rgba(190, 101, 159, 0.14) 16%) 100% ); border: 1px solid var(--st-db-panel-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), var(--st-db-panel-shadow); } body.theme-dark .st-dashboard-shell .st-dashboard-kicker, body.theme-dark .st-dashboard-shell .st-dashboard-hero-badge { background: linear-gradient(135deg, rgba(97, 121, 228, 0.28) 0%, rgba(44, 191, 173, 0.16) 48%, rgba(190, 101, 159, 0.24) 100%); color: color-mix(in srgb, var(--on-surface) 90%, var(--on-primary) 10%); } .st-dashboard-shell .st-dashboard-week-box { display: flex; flex-direction: column; background: linear-gradient( 180deg, color-mix(in srgb, var(--st-db-sidebar-soft-strong) 88%, var(--st-db-card-soft) 12%) 0%, color-mix(in srgb, var(--st-db-sidebar-soft) 96%, transparent) 100% ); } body.theme-dark .st-dashboard-shell .st-dashboard-week-box { background: linear-gradient( 180deg, color-mix(in srgb, var(--st-db-sidebar-soft-strong) 90%, var(--st-db-card-soft) 10%) 0%, color-mix(in srgb, var(--st-db-sidebar-soft) 98%, transparent) 100% ); } body.theme-dark .st-dashboard-shell .st-panel-summary-top > .st-panel-box, body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled, body.theme-dark .st-dashboard-shell .st-panel-list-item, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link { border: 1px solid var(--st-db-panel-border); background: radial-gradient(circle at 100% 0%, rgba(44, 191, 173, 0.08) 0%, transparent 42%), linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 82%, rgba(97, 121, 228, 0.16) 18%) 0%, color-mix(in srgb, var(--surface-container-highest) 84%, rgba(190, 101, 159, 0.13) 16%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat { border: 1px solid rgba(138, 149, 230, 0.3); background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 72%, rgba(97, 121, 228, 0.22) 28%) 0%, color-mix(in srgb, var(--surface-container-highest) 75%, rgba(190, 101, 159, 0.2) 25%) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat i { background: linear-gradient(135deg, rgba(97, 121, 228, 0.34) 0%, rgba(44, 191, 173, 0.2) 52%, rgba(190, 101, 159, 0.28) 100%); color: color-mix(in srgb, var(--on-surface) 88%, var(--on-primary) 12%); } body.theme-dark .st-dashboard-shell .st-dashboard-week-hint { background: linear-gradient(135deg, rgba(97, 121, 228, 0.24) 0%, rgba(44, 191, 173, 0.12) 50%, rgba(190, 101, 159, 0.2) 100%); color: color-mix(in srgb, var(--on-surface) 90%, #e8efff 10%); } body.theme-dark .st-dashboard-shell .st-dashboard-week-hint .icon { color: color-mix(in srgb, var(--st-db-icon) 86%, var(--on-surface) 14%); } body.theme-dark .st-dashboard-shell .st-panel-list-item:hover, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link:hover { border-color: rgba(160, 168, 238, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 34px -26px rgba(0, 0, 0, 0.82) !important; } .st-dashboard-shell .st-dashboard-week-box .st-dashboard-box-head, .st-dashboard-shell .st-dashboard-goal-card .st-dashboard-box-head { min-height: 36px; align-items: center; } .st-dashboard-shell .st-dashboard-week-box .st-dashboard-days { margin-top: 4px; } .st-dashboard-shell .st-dashboard-week-hint { margin-top: auto; min-height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: var(--st-db-sidebar-chip); color: var(--st-db-muted); font-size: 12px; font-weight: 700; line-height: 1.35; } .st-dashboard-shell .st-dashboard-week-hint .icon { width: 13px; min-width: 13px; font-size: 11px; line-height: 1; color: var(--st-db-icon); } .st-dashboard-shell .st-dashboard-goal-card { display: flex; flex-direction: column; justify-content: space-between; } .st-dashboard-shell .st-dashboard-goal-display { display: flex; flex: 1; flex-direction: column; gap: 6px; } .st-dashboard-shell .st-dashboard-goal-display .st-panel-time-value { margin-top: 4px; } .st-dashboard-shell .st-dashboard-goal-display .st-panel-mini-progress { margin-top: auto; } .st-dashboard-shell .st-dashboard-goal-display .st-panel-kpi-meta { line-height: 1.5; } .st-dashboard-shell .st-panel-box { background: var(--st-db-card-soft); border-radius: 24px; border: none; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent); } body.theme-dark .st-dashboard-shell .st-panel-box { box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent); } .st-dashboard-shell .st-dashboard-box-head { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .st-dashboard-shell .st-dashboard-box-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 36px; } .st-dashboard-shell .st-panel-kpi-label { font-size: 12px; font-weight: 800; letter-spacing: 0.2px; color: var(--st-db-muted); } .st-dashboard-shell .st-panel-kpi-meta { font-size: 12px; color: var(--st-db-muted); } .st-dashboard-shell .st-btn { border: none !important; box-shadow: none !important; border-radius: 999px; } .st-dashboard-shell .st-dashboard-control-btn { width: 36px; min-width: 36px !important; height: 36px; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; gap: 0 !important; line-height: 1 !important; flex-shrink: 0; background: color-mix(in srgb, var(--surface-container-lowest) 78%, transparent) !important; color: var(--st-db-muted) !important; transition: transform 200ms ease, background 200ms ease, color 200ms ease; } .st-dashboard-shell .tooltip-wrapper.st-dashboard-control-btn, .st-dashboard-shell button.tooltip-wrapper.st-dashboard-control-btn, .st-dashboard-shell .st-dashboard-box-actions .tooltip-wrapper { width: 36px; min-width: 36px !important; height: 36px; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; flex-shrink: 0; } .st-dashboard-shell .st-dashboard-box-actions .tooltip-wrapper > .st-dashboard-control-btn { width: 100%; min-width: 100% !important; height: 100%; } .st-dashboard-shell .st-dashboard-control-btn .icon, .st-dashboard-shell .st-dashboard-control-btn .fas, .st-dashboard-shell .st-dashboard-control-btn .far, .st-dashboard-shell .st-dashboard-control-btn .fab { margin: 0 !important; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; font-size: 13px !important; } .st-dashboard-shell .st-dashboard-control-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--st-db-sidebar-hover) 74%, var(--surface-container-lowest) 26%) !important; color: var(--primary) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn { border: 1px solid rgba(138, 149, 230, 0.3) !important; background: linear-gradient( 142deg, color-mix(in srgb, var(--surface-container-highest) 76%, rgba(97, 121, 228, 0.24) 24%) 0%, color-mix(in srgb, var(--surface-container-highest) 78%, rgba(190, 101, 159, 0.18) 22%) 100% ) !important; color: color-mix(in srgb, var(--on-surface) 88%, #e6ebff 12%) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn:hover { background: linear-gradient(135deg, rgba(97, 121, 228, 0.28) 0%, rgba(44, 191, 173, 0.14) 52%, rgba(190, 101, 159, 0.22) 100%) !important; border-color: rgba(160, 168, 238, 0.42) !important; color: color-mix(in srgb, var(--on-surface) 90%, var(--on-primary) 10%) !important; } .st-dashboard-shell .st-dashboard-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .st-dashboard-shell .st-dashboard-day { min-height: 74px; border: none; border-radius: 16px; background: var(--st-db-card-soft-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 8px 4px; transition: transform 180ms ease, background 180ms ease; } .st-dashboard-shell .st-dashboard-day:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--st-db-card-soft-2) 56%, var(--st-db-sidebar-hover) 44%); } .st-dashboard-shell .st-dashboard-day-name { font-size: 11px; color: var(--st-db-muted); } .st-dashboard-shell .st-dashboard-day-number { font-size: 14px; font-weight: 800; color: var(--st-db-title); } .st-dashboard-shell .st-dashboard-day--active, .st-dashboard-shell .st-dashboard-day--active:hover { background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 90%, transparent) 0%, color-mix(in srgb, var(--primary-container) 72%, #2fc3b1 28%) 100% ) !important; transform: translateY(0); } body.theme-dark .st-dashboard-shell .st-dashboard-day--active, body.theme-dark .st-dashboard-shell .st-dashboard-day--active:hover { background: linear-gradient(136deg, #6179e4 0%, #be659f 100%) !important; } .st-dashboard-shell .st-dashboard-day--active .st-dashboard-day-name, .st-dashboard-shell .st-dashboard-day--active .st-dashboard-day-number { color: var(--on-primary); } .st-dashboard-shell .st-dashboard-week-picker { top: 48px; right: 0; width: min(320px, calc(100vw - 42px)); border-radius: 18px; border: none; background: color-mix(in srgb, var(--st-db-card) 94%, transparent); box-shadow: 0 26px 40px -30px color-mix(in srgb, var(--on-surface) 48%, transparent); padding: 10px; backdrop-filter: blur(18px); } .st-dashboard-shell .st-dashboard-week-picker-list { display: flex; flex-direction: column; gap: 6px; } .st-dashboard-shell .st-dashboard-week-option { border: none; border-radius: 14px; background: var(--st-db-card-soft); min-height: 42px; color: var(--st-db-text); font-size: 13px; font-weight: 700; padding: 8px 12px; } .st-dashboard-shell .st-dashboard-week-option:hover { background: color-mix(in srgb, var(--st-db-card-soft) 54%, var(--st-db-sidebar-hover) 46%); } .st-dashboard-shell .st-dashboard-week-option--active { background: color-mix(in srgb, var(--primary-container) 40%, var(--st-db-card-soft) 60%); color: var(--primary); } .st-dashboard-shell .st-panel-time-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--st-db-title); } .st-dashboard-shell .st-dashboard-goal-display { gap: 8px; } .st-dashboard-shell .st-panel-mini-progress { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--st-db-card-soft-2) 88%, transparent); } .st-dashboard-shell .st-panel-mini-progress-fill { height: 10px; border-radius: 999px; background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 94%, transparent) 0%, color-mix(in srgb, var(--primary-container) 70%, #2fc3b1 30%) 100% ); } body.theme-dark .st-dashboard-shell .st-panel-mini-progress-fill { background: linear-gradient(136deg, #6179e4 0%, #be659f 100%); } .st-dashboard-shell .st-dashboard-goal-form { gap: 6px; } .st-dashboard-shell .st-dashboard-goal-input-inline { width: 84px !important; min-height: 36px; border-radius: 14px; border: none; background: color-mix(in srgb, var(--surface-container-lowest) 86%, transparent); color: var(--st-db-text); padding: 0 10px; margin-bottom: 0; } .st-dashboard-shell .st-dashboard-goal-input-inline:focus, .st-dashboard-shell .st-dashboard-goal-input-inline:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--st-db-focus); } .st-dashboard-shell .st-panel-summary-desc { margin: 20px 0 0 !important; min-height: 40px; border-radius: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: color-mix(in srgb, var(--st-db-sidebar-soft-strong) 90%, transparent); color: var(--st-db-muted); font-size: 13px; line-height: 1.4; } .st-dashboard-shell .st-panel-summary-desc strong { color: var(--primary); font-weight: 800; } .st-dashboard-shell .st-dashboard-dual { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 14px; } .st-dashboard-shell .st-panel-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .st-dashboard-shell .st-panel-quick-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 116px; padding: 14px 46px 14px 16px; border-radius: 20px; text-decoration: none; background: var(--st-db-sidebar-soft); color: var(--st-db-text); transition: transform 200ms ease, background 200ms ease; } .st-dashboard-shell .st-panel-quick-card:hover { transform: translateY(-2px); background: var(--st-db-sidebar-soft-strong); } .st-dashboard-shell .st-panel-quick-card h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.3; color: var(--st-db-title); } .st-dashboard-shell .st-panel-quick-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--st-db-muted); } .st-dashboard-shell .st-panel-quick-title-icon { width: 28px; height: 28px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary-container) 62%, var(--surface-container-lowest) 38%); color: var(--st-db-icon); font-size: 13px; } .st-dashboard-shell .st-panel-quick-arrow { position: absolute; right: 14px; bottom: 12px; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface-container-lowest) 78%, transparent); color: var(--st-db-muted); font-size: 12px; } .st-dashboard-shell .st-card-actions { gap: 8px; align-items: center; flex-wrap: wrap; } .st-dashboard-shell .st-dashboard-subjects { background: var(--st-db-card) !important; } .st-dashboard-shell .st-dashboard-subjects-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "meta meta"; align-items: start; column-gap: 14px; row-gap: 7px; margin-bottom: 14px; } .st-dashboard-shell .st-dashboard-subjects-title-wrap { display: contents; } .st-dashboard-shell .st-dashboard-subjects-title-wrap .st-card-title { grid-area: title; align-self: center; margin: 0 !important; font-size: 24px; line-height: 1.18; letter-spacing: -0.3px; white-space: normal; word-break: normal; overflow-wrap: anywhere; min-width: 0; } .st-dashboard-shell .st-dashboard-subjects-meta { grid-area: meta; display: block; margin: 0 !important; margin-bottom: 14px !important; width: 100%; padding: 0; max-width: none; font-size: 12px; line-height: 1.5; color: var(--st-db-muted); } .st-dashboard-shell .st-dashboard-subjects-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; justify-content: flex-end; align-self: center; min-width: 0; max-width: clamp(220px, 34vw, 360px); } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-kpi-label { min-height: 0; padding: 0 2px; border-radius: 0; background: transparent; font-size: 11px; letter-spacing: 0.3px; flex-shrink: 0; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select { width: auto; min-width: 0; max-width: 248px; flex: 1 1 180px; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown, .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select { width: 100%; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger, .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select { min-height: 40px; height: 40px; border: none !important; border-radius: 14px; background: color-mix(in srgb, var(--surface-container-lowest) 78%, var(--surface-container-low) 22%) !important; color: var(--st-db-title) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 42%, transparent) !important; padding: 0 14px !important; font-size: 13px; font-weight: 700; line-height: 1.3; transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease !important; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-text, .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-text span { color: var(--st-db-title) !important; font-size: 13px !important; font-weight: 700 !important; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-chevron { color: var(--st-db-muted) !important; font-size: 11px !important; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-container-lowest) 62%, var(--primary-container) 38%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-container) 60%, transparent) !important; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:focus:not(:disabled), .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown.open .custom-dropdown-trigger { outline: none !important; background: color-mix(in srgb, var(--surface-container-lowest) 58%, var(--primary-container) 42%) !important; box-shadow: 0 0 0 3px var(--st-db-focus) !important; transform: translateY(-1px); } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-panel { border: none !important; border-radius: 16px !important; background: color-mix(in srgb, var(--surface-container-lowest) 78%, var(--surface-container-low) 22%) !important; box-shadow: 0 24px 34px -24px color-mix(in srgb, var(--on-surface) 52%, transparent) !important; padding: 6px !important; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown:not(.dropup) .custom-dropdown-panel { top: calc(100% + 8px) !important; margin-top: 0 !important; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-options { padding: 4px !important; display: grid; gap: 6px; border-radius: 12px; background: color-mix(in srgb, var(--surface-container-lowest) 78%, var(--surface-container-low) 22%); } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option { min-height: 38px; border-radius: 12px; padding: 8px 10px; margin-bottom: 0; background: color-mix(in srgb, var(--surface-container-lowest) 78%, var(--surface-container-low) 22%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 38%, transparent); color: var(--st-db-text); font-size: 13px; font-weight: 600; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option + .custom-dropdown-option { margin-top: 6px !important; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option:last-child { margin-bottom: 0; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option:hover:not(.disabled), .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option.focused:not(.disabled) { background: color-mix(in srgb, var(--surface-container-lowest) 62%, var(--primary-container) 38%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-container) 58%, transparent); outline: none; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option.selected:not(.disabled) { background: var(--st-db-dropdown-selected-bg); box-shadow: inset 0 0 0 1px var(--st-db-dropdown-selected-border); color: var(--st-db-dropdown-selected-text); } .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn { min-height: 36px; padding: 0 14px; border-radius: 12px; font-size: 12px; font-weight: 700; text-transform: none; } .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn span { text-transform: none; letter-spacing: 0; } .st-dashboard-shell .st-panel-subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; } .st-dashboard-shell .st-panel-subject-card { border-radius: 20px; } .st-dashboard-shell .st-panel-subject-card--filled { min-height: 164px; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 14px; row-gap: 6px; align-items: start; padding: 14px 16px; background: color-mix(in srgb, var(--st-db-sidebar-soft) 94%, var(--surface-container-lowest) 6%); } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled { background: color-mix(in srgb, var(--st-db-sidebar-soft) 96%, var(--surface-container-highest) 4%); } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-donut { grid-column: 1; grid-row: 1 / 5; width: 84px; height: 84px; margin: 0; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: conic-gradient( var(--subject-progress, var(--primary)) 0 var(--subject-progress-value-deg, 0deg), color-mix(in srgb, var(--st-db-card-soft-2) 92%, transparent) var(--subject-progress-value-deg, 0deg) 360deg ); } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-donut::after { inset: 13px; background: var(--st-db-card); } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-donut-value { font-size: 14px; font-weight: 800; line-height: 1; z-index: 1; color: var(--st-db-title); } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-name { grid-column: 2; grid-row: 1; margin: 2px 0 0; font-size: 20px; line-height: 1.22; font-weight: 700; text-align: left; color: var(--st-db-title); } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-line { margin: 0; font-size: 13px; color: var(--st-db-text); line-height: 1.45; text-align: left; } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-line:first-of-type { grid-column: 2; grid-row: 2; } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-line--muted { grid-column: 2; grid-row: 3; color: var(--st-db-muted); } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-meta-row { grid-column: 2; grid-row: 4; margin-top: 3px; } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-meta { min-height: 30px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; background: color-mix(in srgb, var(--surface-container-lowest) 76%, transparent); color: color-mix(in srgb, var(--primary) 78%, var(--on-primary-container) 22%) !important; font-size: 12px; font-weight: 700; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-meta { color: color-mix(in srgb, #d4e7ff 82%, var(--on-surface) 18%) !important; } .st-dashboard-shell .st-panel-subject-card--empty { min-height: 164px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 16px; gap: 8px; background: color-mix(in srgb, var(--st-db-card-soft) 90%, var(--surface-container-lowest) 10%); } .st-dashboard-shell .st-panel-subject-card--empty .st-panel-subject-name { margin: 0; font-size: 20px; color: var(--st-db-title); } .st-dashboard-shell .st-panel-subject-card--empty .st-panel-subject-line { margin: 0; font-size: 13px; color: var(--st-db-muted); } .st-dashboard-shell .st-panel-list, .st-dashboard-shell .st-panel-suggestion-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .st-dashboard-shell .st-panel-list-item, .st-dashboard-shell .st-panel-suggestion-link { border: none; border-radius: 18px; background: color-mix(in srgb, var(--st-db-sidebar-soft) 92%, var(--st-db-card-soft) 8%); padding: 12px 14px; } .st-dashboard-shell .st-panel-list-item--activity { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .st-dashboard-shell .st-panel-list-item--activity > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; } .st-dashboard-shell .st-panel-list-title { display: block; max-width: 100%; font-size: 14px; font-weight: 700; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; word-break: break-word; color: var(--st-db-title); } .st-dashboard-shell .st-panel-list-meta { font-size: 12px; color: var(--st-db-muted); } .st-dashboard-shell .st-panel-activity-right { min-width: auto; } .st-dashboard-shell .st-panel-activity-chip { min-height: 24px; border-radius: 999px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .st-dashboard-shell .st-panel-activity-chip--review { background: color-mix(in srgb, var(--primary-container) 58%, transparent); color: color-mix(in srgb, var(--primary) 82%, var(--on-primary-container) 18%); } .st-dashboard-shell .st-panel-activity-chip--warn { background: color-mix(in srgb, #ffe2b3 78%, transparent); color: #a34a00; } .st-dashboard-shell .st-panel-activity-chip--danger { background: color-mix(in srgb, #ffc3cc 72%, transparent); color: #9a2435; } .st-dashboard-shell .st-panel-activity-chip--success { background: color-mix(in srgb, #bdf8cf 70%, transparent); color: #187743; } .st-dashboard-shell .st-panel-activity-chip--new { background: color-mix(in srgb, var(--surface-container-highest) 80%, transparent); color: var(--st-db-muted); } .st-dashboard-shell .st-panel-suggestion-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; text-decoration: none; color: inherit; } body.theme-light .st-dashboard-shell .st-dashboard-hero-stat, body.theme-light .st-dashboard-shell .st-panel-subject-card--filled, body.theme-light .st-dashboard-shell .st-panel-list-item, body.theme-light .st-dashboard-shell .st-panel-suggestion-link { background: linear-gradient(135deg, rgba(85, 124, 224, 0.1) 0%, rgba(188, 102, 165, 0.1) 100%) !important; border: 1px solid rgba(112, 105, 198, 0.24) !important; color: #1e293b !important; box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } body.theme-light .st-dashboard-shell .st-dashboard-control-btn, body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn, body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger, body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select { border: 1px solid rgba(112, 105, 198, 0.24) !important; background: linear-gradient(135deg, rgba(85, 124, 224, 0.1) 0%, rgba(188, 102, 165, 0.1) 100%) !important; color: #1e293b !important; box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } body.theme-light .st-dashboard-shell .st-dashboard-control-btn:hover, body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn:hover, body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:hover:not(:disabled), body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select:hover { border-color: rgba(112, 105, 198, 0.34) !important; background: linear-gradient(135deg, rgba(85, 124, 224, 0.15) 0%, rgba(188, 102, 165, 0.15) 100%) !important; color: #1e293b !important; box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important; } body.theme-light .st-dashboard-shell .st-dashboard-hero { background: radial-gradient(circle at 12% 10%, rgba(85, 124, 224, 0.16) 0%, transparent 52%), radial-gradient(circle at 90% 90%, rgba(188, 102, 165, 0.14) 0%, transparent 54%), color-mix(in srgb, var(--st-db-card) 86%, var(--surface-bright) 14%); } body.theme-light .st-dashboard-shell .st-dashboard-kicker, body.theme-light .st-dashboard-shell .st-dashboard-hero-badge { background: linear-gradient(135deg, rgba(85, 124, 224, 0.18) 0%, rgba(188, 102, 165, 0.16) 100%); color: #4f3d71; } body.theme-light .st-dashboard-shell .st-panel-head .st-title { background: linear-gradient( 132deg, #4c63d5 0%, #7d67c8 56%, #bd649e 100% ); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.theme-light .st-dashboard-shell .st-dashboard-day--active, body.theme-light .st-dashboard-shell .st-dashboard-day--active:hover { background: linear-gradient(136deg, #5a74e0 0%, #bd649e 100%) !important; } body.theme-light .st-dashboard-shell .st-panel-mini-progress-fill { background: linear-gradient(136deg, #5a74e0 0%, #bd649e 100%); } body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:hover:not(:disabled) { background: linear-gradient(135deg, rgba(85, 124, 224, 0.14) 0%, rgba(188, 102, 165, 0.14) 100%) !important; box-shadow: inset 0 0 0 1px rgba(112, 105, 198, 0.24) !important; } body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:focus:not(:disabled), body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown.open .custom-dropdown-trigger { background: linear-gradient(135deg, rgba(85, 124, 224, 0.16) 0%, rgba(188, 102, 165, 0.16) 100%) !important; box-shadow: 0 0 0 3px rgba(112, 105, 198, 0.16) !important; } body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option:hover:not(.disabled), body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option.focused:not(.disabled) { background: linear-gradient(135deg, rgba(85, 124, 224, 0.14) 0%, rgba(188, 102, 165, 0.14) 100%); box-shadow: inset 0 0 0 1px rgba(112, 105, 198, 0.24); } body.theme-light .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-option.selected:not(.disabled) { background: var(--st-db-dropdown-selected-bg); box-shadow: inset 0 0 0 1px var(--st-db-dropdown-selected-border); color: var(--st-db-dropdown-selected-text); } .st-dashboard-shell .st-panel-suggestion-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .st-dashboard-shell .st-panel-list-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--st-db-muted); } .st-dashboard-shell .st-panel-suggestion-cta { min-height: 36px; border-radius: 999px; padding: 0 14px; font-size: 12px; font-weight: 800; white-space: nowrap; } .st-dashboard-shell button:focus-visible, .st-dashboard-shell a:focus-visible, .st-dashboard-shell input:focus-visible, .st-dashboard-shell select:focus-visible { outline: 2px solid var(--st-db-focus) !important; outline-offset: 2px !important; } @media (max-width: 1240px) { .st-dashboard-shell .st-panel-summary-top > .st-panel-box { min-height: 0; height: auto; } .st-dashboard-shell .st-panel-summary-top { grid-template-columns: 1fr; } .st-dashboard-shell .st-dashboard-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } .st-dashboard-shell .st-dashboard-dual { grid-template-columns: 1fr; } } @media (max-width: 980px) { body:has(.base-sidebar--floating-left) .st-dashboard-shell { margin-top: calc(var(--eduloo-nav-height) + 14px) !important; } .st-dashboard-shell { padding: 16px !important; border-radius: 24px !important; } .st-dashboard-shell .st-dashboard-hero { grid-template-columns: 1fr; padding: 18px; } .st-dashboard-shell .st-dashboard-hero > .st-dashboard-hero-copy, .st-dashboard-shell .st-dashboard-hero > .st-dashboard-hero-mascot { height: auto; } .st-dashboard-shell .st-dashboard-hero-copy { display: flex; flex-direction: column; } .st-dashboard-shell .st-dashboard-hero-stats { margin-top: 18px; padding-top: 0; } .st-dashboard-shell .st-panel-head .st-title { font-size: 36px; } .st-dashboard-shell .st-dashboard-hero-mascot { min-height: 168px; } .st-dashboard-shell .st-panel-subject-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .st-dashboard-shell { padding: 12px !important; gap: 12px; border-radius: 20px !important; } .st-dashboard-shell > .card, .st-dashboard-shell .st-dashboard-section { padding: 16px !important; border-radius: 20px !important; } .st-dashboard-shell .st-panel-head .st-title { font-size: 30px; line-height: 1.18; } .st-dashboard-shell .st-dashboard-hero-stats { flex-direction: column; margin-top: 18px; padding-top: 0; } .st-dashboard-shell .st-dashboard-hero-stat { width: 100%; } .st-dashboard-shell .st-card-head { flex-direction: column; align-items: center; gap: 8px; } .st-dashboard-shell .st-dashboard-subjects-head { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "actions" "meta"; align-items: start; row-gap: 8px; width: 100%; } .st-dashboard-shell .st-card-title { font-size: 21px; } .st-dashboard-shell .st-dashboard-card-meta { max-width: 100%; } .st-dashboard-shell .st-dashboard-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-dashboard-shell .st-panel-time-value { font-size: 26px; } .st-dashboard-shell .st-panel-quick-grid { grid-template-columns: 1fr; } .st-dashboard-shell .st-dashboard-subjects-actions { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; padding: 0; align-self: start; max-width: none; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select { width: min(260px, 100%); min-width: 200px; max-width: 100%; flex: 1 1 220px; } .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn { width: auto; justify-content: center; } .st-dashboard-shell .st-dashboard-subjects-title-wrap .st-card-title { font-size: 22px; line-height: 1.24; white-space: normal; } .st-dashboard-shell .st-dashboard-subjects-meta { width: 100%; max-width: 100%; margin-bottom: 12px !important; } .st-dashboard-shell .st-panel-subject-card--filled { grid-template-columns: 76px minmax(0, 1fr); min-height: 0; padding: 12px 13px; } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-donut { width: 76px; height: 76px; } .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-name { font-size: 18px; } .st-dashboard-shell .st-panel-list-item--activity { flex-direction: column; align-items: flex-start; } } @media (max-width: 520px) { .st-dashboard-shell .st-dashboard-hero { padding: 14px; } .st-dashboard-shell .st-dashboard-kicker { font-size: 11px; min-height: 28px; padding: 0 12px; } .st-dashboard-shell .st-panel-head .st-title { font-size: 27px; } .st-dashboard-shell .st-panel-head .st-subtitle { font-size: 13px; } .st-dashboard-shell .st-dashboard-subjects-head { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "actions" "meta"; gap: 8px; } .st-dashboard-shell .st-dashboard-subjects-actions { width: 100%; justify-content: flex-start; align-self: start; } .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select, .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn { width: 100%; } .st-dashboard-shell .st-dashboard-subjects-title-wrap .st-card-title { font-size: 21px; line-height: 1.24; } .st-dashboard-shell .st-dashboard-subjects-meta { width: 100%; font-size: 12px; line-height: 1.5; padding: 1px 0 0; margin-bottom: 10px !important; max-width: 100%; } .st-dashboard-shell .st-dashboard-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.theme-dark .st-dashboard-shell { --st-db-bg: linear-gradient( 158deg, color-mix(in srgb, var(--surface-container-low) 84%, var(--surface-dim) 16%) 0%, color-mix(in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22%) 100% ); --st-db-card: color-mix(in srgb, var(--surface-container-high) 90%, transparent); --st-db-card-soft: color-mix(in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16%); --st-db-card-soft-2: color-mix(in srgb, var(--surface-container-highest) 74%, var(--primary-container) 26%); --st-db-sidebar-active: color-mix(in srgb, var(--surface-container-highest) 56%, var(--primary-container) 44%); --st-db-sidebar-hover: color-mix(in srgb, var(--surface-container-highest) 48%, var(--primary-container) 52%); --st-db-sidebar-soft: color-mix(in srgb, var(--st-db-sidebar-active) 46%, var(--st-db-card-soft) 54%); --st-db-sidebar-soft-strong: color-mix(in srgb, var(--st-db-sidebar-active) 58%, var(--st-db-card-soft) 42%); --st-db-sidebar-chip: color-mix(in srgb, var(--st-db-sidebar-active) 54%, var(--surface-container-highest) 46%); --st-db-title: color-mix(in srgb, var(--on-surface) 96%, rgb(255 224 222) 4%); --st-db-text: color-mix(in srgb, var(--on-surface) 92%, rgb(240 221 255) 8%); --st-db-muted: color-mix(in srgb, var(--on-surface-variant) 86%, rgb(248 214 213) 14%); --st-db-icon: color-mix(in srgb, var(--on-surface) 84%, var(--secondary) 16%); --st-db-panel-border: color-mix(in srgb, var(--outline-variant) 56%, var(--primary-container) 44%); --st-db-panel-shadow: 0 22px 38px -28px color-mix(in srgb, black 78%, transparent); --st-db-dropdown-selected-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary-container) 62%, transparent) 0%, color-mix(in srgb, var(--secondary-container) 40%, transparent) 100% ); --st-db-dropdown-selected-border: color-mix(in srgb, var(--outline-variant) 48%, var(--secondary) 52%); --st-db-dropdown-selected-text: color-mix(in srgb, var(--on-surface) 92%, var(--on-primary) 8%); --st-db-shadow: 0 30px 56px -44px color-mix(in srgb, black 74%, transparent); --st-db-card-shadow: 0 24px 40px -30px color-mix(in srgb, black 72%, transparent); --st-db-focus: color-mix(in srgb, var(--secondary) 50%, transparent); --st-db-badge-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary-container) 68%, transparent) 0%, color-mix(in srgb, var(--secondary-container) 42%, transparent) 100% ); --st-db-badge-text: color-mix(in srgb, var(--on-surface) 94%, var(--on-primary) 6%); --st-db-control-bg: color-mix(in srgb, var(--surface-container-highest) 74%, var(--primary-container) 26%); --st-db-control-bg-hover: color-mix(in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36%); --st-db-control-border: color-mix(in srgb, var(--outline-variant) 54%, var(--primary-container) 46%); --st-db-control-text: color-mix(in srgb, var(--on-surface) 92%, var(--on-primary) 8%); --st-db-primary-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 84%, rgb(239 160 154) 16%) 0%, color-mix(in srgb, var(--secondary) 62%, var(--primary) 38%) 100% ); --st-db-primary-bg-hover: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 90%, rgb(245 174 168) 10%) 0%, color-mix(in srgb, var(--secondary) 70%, var(--primary) 30%) 100% ); --st-db-primary-shadow: 0 18px 30px -20px color-mix(in srgb, black 70%, transparent); background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 26%, transparent) 0%, transparent 44%), radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--secondary) 18%, transparent) 0%, transparent 38%), radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 46%), var(--st-db-bg) !important; } body.theme-dark .st-dashboard-shell > .card, body.theme-dark .st-dashboard-shell .st-dashboard-section, body.theme-dark .st-dashboard-shell .st-panel-summary-top > .st-panel-box, body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled, body.theme-dark .st-dashboard-shell .st-panel-list-item, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link { border: 1px solid var(--st-db-panel-border) !important; background: linear-gradient( 148deg, color-mix(in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18%) 0%, color-mix(in srgb, var(--surface-container-highest) 86%, var(--secondary-container) 14%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero { background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--primary) 28%, transparent) 0%, transparent 52%), radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--secondary) 16%, transparent) 0%, transparent 46%), radial-gradient(circle at 90% 92%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 56%), linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18%) 0%, color-mix(in srgb, var(--surface-container-highest) 86%, var(--secondary-container) 14%) 100% ) !important; border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-kicker, body.theme-dark .st-dashboard-shell .st-dashboard-hero-badge { background: var(--st-db-badge-bg) !important; color: var(--st-db-badge-text) !important; border: 1px solid color-mix(in srgb, var(--st-db-panel-border) 78%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat { border: 1px solid var(--st-db-panel-border) !important; background: color-mix(in srgb, var(--surface-container-highest) 74%, var(--primary-container) 26%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat i { background: linear-gradient( 136deg, color-mix(in srgb, var(--primary-container) 72%, transparent) 0%, color-mix(in srgb, var(--secondary-container) 44%, transparent) 100% ) !important; color: var(--st-db-control-text) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select { border: 1px solid var(--st-db-control-border) !important; background: var(--st-db-control-bg) !important; color: var(--st-db-control-text) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 12px 24px -20px color-mix(in srgb, black 68%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select:hover { border-color: color-mix(in srgb, var(--st-db-control-border) 66%, var(--secondary) 34%) !important; background: var(--st-db-control-bg-hover) !important; color: var(--on-surface) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:focus:not(:disabled), body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown.open .custom-dropdown-trigger { box-shadow: 0 0 0 3px var(--st-db-focus) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day--active, body.theme-dark .st-dashboard-shell .st-dashboard-day--active:hover, body.theme-dark .st-dashboard-shell .st-panel-mini-progress-fill { background: var(--st-db-primary-bg) !important; box-shadow: var(--st-db-primary-shadow) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-week-hint { background: var(--st-db-control-bg) !important; border: 1px solid var(--st-db-control-border) !important; color: var(--st-db-control-text) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-item:hover, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link:hover { border-color: color-mix(in srgb, var(--st-db-panel-border) 68%, var(--secondary) 32%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 20px 34px -26px color-mix(in srgb, black 80%, transparent) !important; } main.landing-container:has(.dashboard-page), main.landing-container:has(.user-overview-page) { display: block !important; padding: 16px 0 32px !important; } @media (min-width: 901px) { body:has(.base-sidebar--floating-left) main.landing-container:has(.dashboard-page), body:has(.base-sidebar--floating-left) main.landing-container:has(.user-overview-page) { padding-left: calc(var(--base-sidebar-width) + var(--base-sidebar-gap) + 8px) !important; } } .dashboard-page, .user-overview-page { --st-up-shell-bg: linear-gradient( 155deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface) 14%) 0%, color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%) 100% ); --st-up-card: color-mix(in srgb, var(--surface-container-lowest) 95%, var(--surface-container-low) 5%); --st-up-soft: color-mix(in srgb, var(--surface-container-lowest) 90%, var(--surface-container-low) 10%); --st-up-border: color-mix(in srgb, var(--outline-variant) 56%, transparent); --st-up-border-strong: color-mix(in srgb, var(--outline-variant) 42%, var(--primary-container) 58%); --st-up-focus: color-mix(in srgb, var(--primary-container) 56%, transparent); width: min(1320px, 100%); max-width: 1320px; margin: 0 auto !important; padding: 20px !important; border: none !important; border-radius: 30px !important; background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary-container) 20%, transparent) 0%, transparent 42%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--primary-container) 14%, transparent) 0%, transparent 46%), var(--st-up-shell-bg) !important; box-shadow: 0 28px 52px -42px color-mix(in srgb, var(--on-surface) 44%, transparent) !important; box-sizing: border-box !important; } body.theme-dark .dashboard-page, body.theme-dark .user-overview-page { --st-up-shell-bg: linear-gradient( 158deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-dim) 14%) 0%, color-mix(in srgb, var(--surface-container) 78%, var(--surface-container-high) 22%) 100% ); --st-up-card: color-mix(in srgb, var(--surface-container-high) 88%, var(--surface-container-highest) 12%); --st-up-soft: color-mix(in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22%); --st-up-border: color-mix(in srgb, var(--outline-variant) 66%, transparent); --st-up-border-strong: color-mix(in srgb, var(--outline-variant) 50%, var(--primary-container) 50%); --st-up-focus: color-mix(in srgb, var(--primary-container) 52%, transparent); background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 42%), radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--secondary) 14%, transparent) 0%, transparent 38%), radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 46%), var(--st-up-shell-bg) !important; } .dashboard-page .dashboard-alerts { margin: 0 0 12px !important; } .dashboard-page .dashboard-alerts .user-overview-message-container { margin: 0 0 10px !important; } .dashboard-page .dashboard-alerts .alert { border-radius: 16px !important; border: 1px solid var(--st-up-border) !important; border-left: 1px solid var(--st-up-border) !important; background: var(--st-up-soft) !important; box-shadow: none !important; } .dashboard-page .user-dashboard-container { display: grid !important; grid-template-columns: minmax(244px, 284px) minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .dashboard-page .dashboard-tabs-wrapper { position: sticky !important; top: calc(var(--eduloo-nav-height, 74px) + 12px) !important; width: auto !important; margin: 0 !important; padding: 14px !important; border-radius: 24px !important; border: 1px solid var(--st-up-border) !important; background: var(--st-up-card) !important; box-shadow: 0 24px 40px -34px color-mix(in srgb, var(--primary) 28%, transparent) !important; display: grid !important; gap: 10px !important; } .dashboard-page .dashboard-content-area { min-width: 0 !important; width: 100% !important; margin: 0 !important; padding: 18px !important; border-radius: 24px !important; border: 1px solid var(--st-up-border) !important; background: radial-gradient( circle at 100% 0, color-mix(in srgb, var(--primary-container) 16%, transparent) 0%, transparent 44% ), var(--st-up-card) !important; box-shadow: 0 24px 40px -34px color-mix(in srgb, var(--primary) 28%, transparent) !important; } .dashboard-page .dashboard-tabs { display: grid !important; gap: 8px !important; } .dashboard-page .dashboard-tab-btn { min-height: 44px !important; border-radius: 14px !important; } .dashboard-page .dashboard-tab-content, .dashboard-page .dashboard-tab-content.active { width: 100% !important; min-width: 0 !important; } .dashboard-page .user-overview-card, .dashboard-page .userpanel-form-card, .dashboard-page .userpanel-subcard, .dashboard-page .userpanel-action-card, .dashboard-page .userpanel-session-card, .dashboard-page .user-overview-mfa-option-card, .dashboard-page .user-overview-mfa-method-card, .dashboard-page .user-overview-session-card { width: 100% !important; max-width: none !important; min-width: 0 !important; border-radius: 20px !important; border: 1px solid var(--st-up-border) !important; background: var(--st-up-soft) !important; box-shadow: none !important; } .dashboard-page .user-overview-card { padding: 20px !important; } .dashboard-page .user-overview-card::before { height: 2px !important; background: linear-gradient( 90deg, color-mix(in srgb, var(--primary) 86%, transparent) 0%, color-mix(in srgb, var(--secondary) 64%, var(--primary) 36%) 100% ) !important; box-shadow: none !important; } .dashboard-page .user-overview-card::after { display: none !important; } .dashboard-page .userpanel-form-grid, .dashboard-page .userpanel-security-grid, .dashboard-page .userpanel-privacy-grid, .dashboard-page .user-overview-mfa-options-grid, .dashboard-page .user-overview-mfa-methods-grid, .dashboard-page .userpanel-sessions-grid, .dashboard-page .user-overview-sessions-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 14px !important; } .dashboard-page .userpanel-section-chips { max-width: 100% !important; } .dashboard-page .userpanel-chip { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .dashboard-page .user-overview-form-input:focus, .dashboard-page .user-overview-totp-input:focus { box-shadow: 0 0 0 3px var(--st-up-focus) !important; } body:has(.base-sidebar--dashboard) .dashboard-page .dashboard-tabs-wrapper, body:has(.base-sidebar--floating-left) .dashboard-page .dashboard-tabs-wrapper { display: none !important; } body:has(.base-sidebar--dashboard) .dashboard-page .user-dashboard-container, body:has(.base-sidebar--floating-left) .dashboard-page .user-dashboard-container { grid-template-columns: minmax(0, 1fr) !important; } @media (max-width: 1160px) { .dashboard-page .user-dashboard-container { grid-template-columns: minmax(0, 1fr) !important; } .dashboard-page .dashboard-tabs-wrapper { position: relative !important; top: auto !important; } } @media (max-width: 780px) { .dashboard-page, .user-overview-page { padding: 14px !important; border-radius: 24px !important; } .dashboard-page .dashboard-content-area { padding: 12px !important; border-radius: 18px !important; } .dashboard-page .user-overview-card, .dashboard-page .userpanel-form-card, .dashboard-page .userpanel-subcard, .dashboard-page .userpanel-action-card, .dashboard-page .userpanel-session-card, .dashboard-page .user-overview-mfa-option-card, .dashboard-page .user-overview-mfa-method-card, .dashboard-page .user-overview-session-card { border-radius: 16px !important; } .dashboard-page .userpanel-form-grid, .dashboard-page .userpanel-security-grid, .dashboard-page .userpanel-privacy-grid, .dashboard-page .user-overview-mfa-options-grid, .dashboard-page .user-overview-mfa-methods-grid, .dashboard-page .userpanel-sessions-grid, .dashboard-page .user-overview-sessions-grid { grid-template-columns: minmax(0, 1fr) !important; } } body.theme-dark .st-dashboard-shell { --st-db-bg: linear-gradient( 158deg, color-mix(in srgb, var(--surface-container-low) 90%, var(--surface-dim) 10%) 0%, color-mix(in srgb, var(--surface-container) 84%, var(--surface-container-high) 16%) 100% ); --st-db-card: color-mix( in srgb, var(--surface-container-high) 88%, var(--primary-container) 12% ); --st-db-card-soft: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --st-db-card-soft-2: color-mix( in srgb, var(--surface-container-highest) 74%, var(--primary) 26% ); --st-db-panel-border: color-mix( in srgb, var(--outline-variant) 78%, rgba(255, 255, 255, 0.22) 22% ); --st-db-panel-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.38); --st-db-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.36); --st-db-card-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.34); --st-db-control-bg: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --st-db-control-bg-hover: color-mix( in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28% ); --st-db-control-border: color-mix( in srgb, var(--outline-variant) 80%, rgba(255, 255, 255, 0.2) 20% ); --st-db-control-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --st-db-focus: color-mix(in srgb, var(--primary) 50%, transparent); background: radial-gradient( circle at 8% 0%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 44% ), radial-gradient( circle at 95% 8%, color-mix(in srgb, var(--secondary) 14%, transparent) 0%, transparent 40% ), radial-gradient( circle at 94% 100%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 48% ), var(--st-db-bg) !important; } body.theme-dark .st-dashboard-shell > .card, body.theme-dark .st-dashboard-shell .st-dashboard-section { border: 1px solid var(--st-db-panel-border) !important; background: var(--st-db-card) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero, body.theme-dark .st-dashboard-shell .st-panel-summary-top > .st-panel-box, body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled, body.theme-dark .st-dashboard-shell .st-panel-list-item, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link { border: 1px solid var(--st-db-panel-border) !important; background: var(--st-db-card-soft) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-panel-box, body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat, body.theme-dark .st-dashboard-shell .st-dashboard-day { border: 1px solid var(--st-db-panel-border) !important; background: var(--st-db-card-soft-2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select { border: 1px solid var(--st-db-control-border) !important; background: var(--st-db-control-bg) !important; color: var(--st-db-control-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 16px -12px rgba(0, 0, 0, 0.34) !important; transition: filter 200ms ease, transform 180ms ease, box-shadow 180ms ease !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select:hover { background: var(--st-db-control-bg-hover) !important; border-color: color-mix( in srgb, var(--st-db-control-border) 64%, var(--primary) 36% ) !important; filter: brightness(1.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 20px -12px color-mix(in srgb, var(--primary) 30%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn:active, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn:active { transform: scale(0.98) !important; filter: brightness(0.96) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day:hover, body.theme-dark .st-dashboard-shell .st-panel-list-item:hover, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link:hover { filter: brightness(1.1) !important; border-color: color-mix( in srgb, var(--st-db-panel-border) 62%, var(--primary) 38% ) !important; box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--primary) 28%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day--active, body.theme-dark .st-dashboard-shell .st-dashboard-day--active:hover, body.theme-dark .st-dashboard-shell .st-panel-mini-progress-fill { background: var(--st-db-primary-bg) !important; border-color: color-mix( in srgb, var(--primary) 72%, rgba(255, 255, 255, 0.28) 28% ) !important; box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--primary) 36%, transparent) !important; } body.theme-dark .st-dashboard-shell { --st-db-bg: linear-gradient( 160deg, var(--eduloo-dark-surface-shell) 0%, color-mix(in srgb, var(--surface-container) 82%, var(--surface-container-low) 18%) 100% ); --st-db-card: var(--eduloo-dark-surface-card); --st-db-card-soft: var(--eduloo-dark-surface-panel); --st-db-card-soft-2: color-mix( in srgb, var(--surface-container-highest) 74%, var(--primary-container) 26% ); --st-db-title: var(--on-surface); --st-db-text: color-mix(in srgb, var(--on-surface) 88%, var(--on-surface-variant) 12%); --st-db-muted: color-mix(in srgb, var(--on-surface-variant) 86%, transparent); --st-db-panel-border: color-mix( in srgb, var(--outline-variant) 76%, rgba(255, 255, 255, 0.2) 24% ); --st-db-panel-shadow: var(--eduloo-dark-shadow-soft-sm); --st-db-shadow: var(--eduloo-dark-shadow-soft); --st-db-card-shadow: var(--eduloo-dark-shadow-soft-sm); --st-db-control-bg: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --st-db-control-bg-hover: color-mix( in srgb, var(--surface-container-highest) 68%, var(--primary-container) 32% ); --st-db-control-border: color-mix( in srgb, var(--outline-variant) 78%, rgba(255, 255, 255, 0.2) 22% ); --st-db-control-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --st-db-primary-bg: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%, color-mix(in srgb, var(--primary) 76%, var(--secondary) 24%) 100% ); --st-db-primary-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 96%, var(--on-primary-container) 4%) 0%, color-mix(in srgb, var(--primary) 80%, var(--secondary) 20%) 100% ); --st-db-primary-shadow: 0 10px 18px -10px color-mix(in srgb, var(--primary) 34%, black 66%); } body.theme-dark .st-dashboard-shell > .card, body.theme-dark .st-dashboard-shell .st-dashboard-section { background: var(--st-db-card) !important; border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-panel-summary-top > .st-panel-box, body.theme-dark .st-dashboard-shell .st-panel-box { background: var(--st-db-card-soft) !important; border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-kicker, body.theme-dark .st-dashboard-shell .st-dashboard-hero-badge { background: var(--eduloo-kicker-bg) !important; border: 1px solid var(--eduloo-kicker-border) !important; color: var(--on-surface) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-mascot { background: radial-gradient( circle at 50% 48%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 62% ), linear-gradient( 0deg, color-mix(in srgb, var(--surface-container-low) 52%, transparent) 0%, color-mix(in srgb, var(--surface-container-low) 22%, transparent) 40%, transparent 75% ), url(/assets/cache/dashboard-a6a9c66d023f0ebd.png) center center / cover no-repeat !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select { background: var(--st-db-control-bg) !important; border: 1px solid var(--st-db-control-border) !important; color: var(--st-db-control-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 16px -12px rgba(0, 0, 0, 0.34) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select:hover { background: var(--st-db-control-bg-hover) !important; border-color: color-mix(in srgb, var(--st-db-control-border) 58%, var(--primary) 42%) !important; filter: brightness(1.14) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn:active, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn:active { transform: scale(0.98) !important; filter: brightness(0.96) !important; } body.theme-dark .st-dashboard-shell .st-panel-mini-progress-fill { background: var(--eduloo-progress-gradient) !important; box-shadow: 0 8px 14px -10px color-mix(in srgb, var(--primary) 34%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day--active, body.theme-dark .st-dashboard-shell .st-dashboard-day--active:hover { background: color-mix(in srgb, var(--primary) 88%, var(--on-primary-container) 12%) !important; border-color: color-mix(in srgb, var(--primary) 62%, rgba(255, 255, 255, 0.28) 38%) !important; box-shadow: 0 8px 14px -10px color-mix(in srgb, var(--primary) 34%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card { border: 1px solid var(--st-db-panel-border) !important; background: var(--st-db-card-soft) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card:hover { background: color-mix(in srgb, var(--st-db-card-soft) 76%, var(--primary-container) 24%) !important; border-color: color-mix(in srgb, var(--st-db-panel-border) 58%, var(--primary) 42%) !important; box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--primary) 24%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-arrow { background: color-mix(in srgb, var(--primary) 88%, var(--on-primary-container) 12%) !important; color: var(--on-primary) !important; border: 1px solid color-mix(in srgb, var(--primary) 70%, rgba(255, 255, 255, 0.26) 30%) !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled { border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-grid .st-panel-subject-card:nth-child(odd).st-panel-subject-card--filled { background: linear-gradient( 90deg, color-mix(in srgb, var(--eduloo-accent-quizzes) 58%, transparent) 0 4px, transparent 4px 100% ), color-mix(in srgb, var(--st-db-card-soft) 88%, var(--primary-container) 12%) !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-grid .st-panel-subject-card:nth-child(even).st-panel-subject-card--filled { background: linear-gradient( 90deg, color-mix(in srgb, var(--eduloo-accent-documents) 56%, transparent) 0 4px, transparent 4px 100% ), color-mix(in srgb, var(--st-db-card-soft) 86%, var(--secondary-container) 14%) !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-name { font-weight: 800 !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled .st-panel-donut-value { font-size: 16px !important; font-weight: 800 !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-meta { background: color-mix(in srgb, var(--surface-container-highest) 68%, var(--primary-container) 32%) !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 72%, rgba(255, 255, 255, 0.18) 28%) !important; color: var(--on-surface) !important; } body.theme-dark .st-dashboard-shell { --st-db-bg: linear-gradient( 160deg, color-mix(in srgb, var(--surface-container-low) 90%, var(--surface) 10%) 0%, color-mix(in srgb, var(--surface-container) 84%, var(--surface-container-low) 16%) 100% ); --st-db-card: color-mix( in srgb, var(--surface-container-high) 86%, var(--primary-container) 14% ); --st-db-card-soft: color-mix( in srgb, var(--surface-container-highest) 78%, var(--surface-container-high) 22% ); --st-db-card-soft-2: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ); --st-db-panel-border: color-mix( in srgb, var(--outline-variant) 72%, rgba(255, 255, 255, 0.28) 28% ); --st-db-panel-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.34); } body.theme-dark .st-dashboard-shell > .card, body.theme-dark .st-dashboard-shell .st-dashboard-section { background: var(--st-db-card) !important; border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-panel-summary-top > .st-panel-box, body.theme-dark .st-dashboard-shell .st-panel-box { background: var(--st-db-card-soft) !important; border: 1px solid var(--st-db-panel-border) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day { background: var(--st-db-card-soft-2) !important; border: 1px solid var(--st-db-panel-border) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day:hover { filter: brightness(1.12) !important; border-color: color-mix(in srgb, var(--st-db-panel-border) 54%, var(--primary) 46%) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day--active, body.theme-dark .st-dashboard-shell .st-dashboard-day--active:hover { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%, color-mix(in srgb, var(--primary) 76%, var(--secondary) 24%) 100% ) !important; border-color: color-mix(in srgb, var(--primary) 66%, rgba(255, 255, 255, 0.28) 34%) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-item, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link { border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-item:nth-child(odd) { background: color-mix(in srgb, var(--st-db-card-soft) 88%, var(--primary-container) 12%) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-item:nth-child(even) { background: color-mix(in srgb, var(--st-db-card-soft) 84%, var(--secondary-container) 16%) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-title, body.theme-dark .st-dashboard-shell .st-panel-subject-name, body.theme-dark .st-dashboard-shell .st-dashboard-section h3, body.theme-dark .st-dashboard-shell .st-dashboard-hero h1 { color: var(--eduloo-text-title) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-meta, body.theme-dark .st-dashboard-shell .st-panel-subject-line--muted, body.theme-dark .st-dashboard-shell .st-dashboard-hero p { color: var(--eduloo-text-muted) !important; } body.theme-dark .st-dashboard-shell .st-panel-activity-chip, body.theme-dark .st-dashboard-shell .st-dashboard-week-hint { border: 1px solid var(--st-db-panel-border) !important; background: color-mix(in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28%) !important; color: var(--eduloo-text-body) !important; } body.theme-dark .st-dashboard-shell .st-panel-activity-chip--review, body.theme-dark .st-dashboard-shell .st-panel-activity-chip--new { background: color-mix(in srgb, var(--primary-container) 58%, var(--surface-container-highest) 42%) !important; color: var(--eduloo-text-title) !important; } body.theme-dark .st-dashboard-shell .st-panel-mini-progress-fill { background: var(--eduloo-progress-gradient) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-arrow { width: 32px !important; height: 32px !important; border-radius: 999px !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-mascot [class*='bubble'], body.theme-dark .st-dashboard-shell .st-dashboard-hero-mascot [class*='speech'] { background: color-mix(in srgb, var(--surface-container-highest) 82%, var(--tertiary-container) 18%) !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 68%, rgba(255, 255, 255, 0.26) 32%) !important; } .st-dashboard-shell .st-card-head { align-items: center !important; min-height: 36px; } .st-dashboard-shell .st-card-title { margin: 0 0 10px 0 !important; } body.theme-dark .st-dashboard-shell { --st-db-bg: linear-gradient( 160deg, color-mix(in srgb, var(--surface-container-low) 90%, var(--surface) 10%) 0%, color-mix(in srgb, var(--surface-container) 84%, var(--surface-container-low) 16%) 100% ); --st-db-card: color-mix( in srgb, var(--surface-container-high) 86%, var(--primary-container) 14% ); --st-db-card-soft: color-mix( in srgb, var(--surface-container-highest) 82%, var(--surface-container-high) 18% ); --st-db-card-soft-2: color-mix( in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28% ); --st-db-title: var(--eduloo-text-title); --st-db-text: var(--eduloo-text-body); --st-db-muted: var(--eduloo-text-muted); --st-db-panel-border: color-mix( in srgb, var(--outline-variant) 74%, rgba(255, 255, 255, 0.24) 26% ); --st-db-panel-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.34); --st-db-control-bg: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --st-db-control-bg-hover: color-mix( in srgb, var(--surface-container-highest) 66%, var(--primary-container) 34% ); --st-db-control-border: color-mix( in srgb, var(--outline-variant) 72%, rgba(255, 255, 255, 0.26) 28% ); } body.theme-dark .st-dashboard-shell > .card, body.theme-dark .st-dashboard-shell .st-dashboard-section { background: var(--st-db-card) !important; border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--st-db-panel-shadow) !important; } body.theme-dark .st-dashboard-shell .st-panel-summary-top > .st-panel-box, body.theme-dark .st-dashboard-shell .st-panel-box { background: var(--st-db-card-soft) !important; border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 16px -12px rgba(0, 0, 0, 0.3) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-week-box, body.theme-dark .st-dashboard-shell .st-dashboard-goal-card { background: var(--st-db-card-soft-2) !important; border: 1px solid var(--st-db-panel-border) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-week-hint, body.theme-dark .st-dashboard-shell .st-panel-activity-chip { border: 1px solid var(--st-db-panel-border) !important; background: color-mix( in srgb, var(--primary-container) 56%, var(--surface-container-highest) 44% ) !important; color: var(--st-db-text) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day { background: color-mix( in srgb, var(--surface-container-highest) 78%, var(--surface-container-high) 22% ) !important; border: 1px solid var(--st-db-panel-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day:hover { border-color: color-mix(in srgb, var(--st-db-panel-border) 54%, var(--primary) 46%) !important; filter: brightness(1.12) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-day--active, body.theme-dark .st-dashboard-shell .st-dashboard-day--active:hover { background: linear-gradient(135deg, #ff8ea2 0%, #ff6f8f 100%) !important; border-color: color-mix(in srgb, var(--primary) 72%, rgba(255, 255, 255, 0.3) 28%) !important; color: #fff5f9 !important; box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--primary) 34%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-panel-mini-progress { background: color-mix( in srgb, var(--surface-container) 84%, var(--surface-container-low) 16% ) !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 64%, rgba(255, 255, 255, 0.18) 36%) !important; } body.theme-dark .st-dashboard-shell .st-panel-mini-progress-fill { background: linear-gradient(90deg, #ff7f98 0%, #8ec9ff 100%) !important; box-shadow: 0 8px 14px -10px color-mix(in srgb, var(--primary) 34%, transparent) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select { background: var(--st-db-control-bg) !important; border: 1px solid var(--st-db-control-border) !important; color: var(--st-db-title) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 16px -12px rgba(0, 0, 0, 0.32) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn .icon, body.theme-dark .st-dashboard-shell .st-dashboard-control-btn .fas, body.theme-dark .st-dashboard-shell .st-dashboard-control-btn .far, body.theme-dark .st-dashboard-shell .st-dashboard-control-btn .fab { color: var(--st-db-title) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-control-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions > .st-btn:hover, body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .st-dashboard-shell .st-dashboard-subjects-actions .st-panel-workspace-select select:hover { background: var(--st-db-control-bg-hover) !important; border-color: color-mix(in srgb, var(--st-db-control-border) 54%, var(--primary) 46%) !important; filter: brightness(1.14) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-kicker, body.theme-dark .st-dashboard-shell .st-dashboard-hero-badge { background: var(--eduloo-kicker-bg) !important; border: 1px solid var(--eduloo-kicker-border) !important; color: #fff4f8 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 16px -12px rgba(0, 0, 0, 0.32) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat { border: 1px solid var(--st-db-panel-border) !important; background: color-mix( in srgb, var(--surface-container-highest) 78%, var(--primary-container) 22% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 16px -12px rgba(0, 0, 0, 0.3) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat i { background: color-mix(in srgb, var(--primary) 26%, var(--surface-container-highest) 74%) !important; color: var(--primary) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-stat:nth-child(2) i { background: color-mix(in srgb, var(--secondary) 26%, var(--surface-container-highest) 74%) !important; color: var(--secondary) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card { border: 1px solid var(--st-db-panel-border) !important; background: var(--st-db-card-soft) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-title-icon { border: 1px solid var(--st-db-panel-border) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-title-icon { background: color-mix(in srgb, var(--primary-container) 32%, var(--surface-container-highest) 68%) !important; color: color-mix(in srgb, var(--on-surface) 88%, var(--primary) 12%) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-arrow { width: 34px !important; height: 34px !important; border-radius: 999px !important; color: #fff5f9 !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 14px -10px rgba(0, 0, 0, 0.32) !important; transition: transform 180ms ease, filter 180ms ease !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-arrow { background: color-mix(in srgb, var(--primary) 82%, var(--surface-container-highest) 18%) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card:hover .st-panel-quick-arrow { filter: brightness(1.12) !important; transform: scale(1.06) !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled { position: relative; overflow: hidden; border: 1px solid var(--st-db-panel-border) !important; background: color-mix( in srgb, var(--surface-container-highest) 78%, var(--primary-container) 22% ) !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card:not(.st-panel-subject-card--empty) { position: relative; overflow: hidden; border: 1px solid var(--st-db-panel-border) !important; background: color-mix( in srgb, var(--surface-container-highest) 78%, var(--primary-container) 22% ) !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 74%, var(--secondary) 26%); } body.theme-dark .st-dashboard-shell .st-panel-subject-grid .st-panel-subject-card:nth-child(even).st-panel-subject-card--filled::before { background: color-mix(in srgb, var(--secondary) 76%, var(--primary) 24%); } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-meta { background: color-mix( in srgb, var(--surface-container-highest) 66%, var(--primary-container) 34% ) !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, rgba(255, 255, 255, 0.22) 30%) !important; color: #ffb4c8 !important; } body.theme-dark .st-dashboard-shell .st-panel-list-item, body.theme-dark .st-dashboard-shell .st-panel-suggestion-link { border: 1px solid var(--st-db-panel-border) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-item:nth-child(odd) { background: color-mix( in srgb, var(--surface-container-highest) 80%, var(--primary-container) 20% ) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-item:nth-child(even) { background: color-mix( in srgb, var(--surface-container-highest) 78%, var(--secondary-container) 22% ) !important; } body.theme-dark .st-dashboard-shell .st-panel-activity-chip { background: color-mix( in srgb, var(--surface-container-highest) 68%, var(--primary-container) 32% ) !important; color: var(--st-db-title) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-title, body.theme-dark .st-dashboard-shell .st-dashboard-section h3, body.theme-dark .st-dashboard-shell .st-card-title { color: var(--st-db-title) !important; } body.theme-dark .st-dashboard-shell .st-panel-list-meta, body.theme-dark .st-dashboard-shell .st-dashboard-card-meta, body.theme-dark .st-dashboard-shell .st-panel-subject-line--muted { color: var(--st-db-muted) !important; } body.theme-dark .st-dashboard-shell .st-dashboard-hero-mascot [class*='bubble'], body.theme-dark .st-dashboard-shell .st-dashboard-hero-mascot [class*='speech'], body.theme-dark .st-dashboard-shell .st-dashboard-hero-badge { background: color-mix( in srgb, var(--surface-container-highest) 74%, var(--tertiary-container) 26% ) !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 66%, rgba(255, 255, 255, 0.28) 34%) !important; color: #fff4f8 !important; } body.theme-dark .st-dashboard-shell .st-panel-head .st-subtitle { color: #e1bfcd !important; } body.theme-dark .st-dashboard-shell .st-panel-kpi-label { color: #e7c7d4 !important; font-weight: 800 !important; } body.theme-dark .st-dashboard-shell .st-panel-kpi-meta, body.theme-dark .st-dashboard-shell .st-dashboard-goal-display .st-panel-kpi-meta { color: #d7b1c1 !important; } body.theme-dark .st-dashboard-shell .st-panel-summary-desc, body.theme-dark .st-dashboard-shell .st-panel-summary-desc p, body.theme-dark .st-dashboard-shell .st-panel-summary-desc span { color: #dcb8c7 !important; } body.theme-dark .st-dashboard-shell .st-panel-summary-desc strong { color: #fff0f5 !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-line { color: #ddb9c8 !important; } body.theme-dark .st-dashboard-shell .st-panel-subject-card--filled .st-panel-subject-line--muted { color: #cfa9ba !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card p { color: #e8c6d3 !important; font-weight: 600 !important; } body.theme-dark .st-dashboard-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']), body.theme-dark .st-dashboard-shell textarea, body.theme-dark .st-dashboard-shell select, body.theme-dark .st-dashboard-shell .custom-dropdown-trigger { border: 1px solid var(--eduloo-input-unified-border) !important; background: var(--eduloo-input-unified-bg) !important; color: var(--eduloo-text-title) !important; box-shadow: none !important; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important; } body.theme-dark .st-dashboard-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):hover, body.theme-dark .st-dashboard-shell textarea:hover, body.theme-dark .st-dashboard-shell select:hover, body.theme-dark .st-dashboard-shell .custom-dropdown-trigger:hover:not(:disabled) { border-color: var(--eduloo-input-unified-border-hover) !important; background: var(--eduloo-input-unified-bg-hover) !important; box-shadow: none !important; filter: none !important; transform: none !important; } body.theme-dark .st-dashboard-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):focus, body.theme-dark .st-dashboard-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):focus-visible, body.theme-dark .st-dashboard-shell textarea:focus, body.theme-dark .st-dashboard-shell textarea:focus-visible, body.theme-dark .st-dashboard-shell select:focus, body.theme-dark .st-dashboard-shell select:focus-visible, body.theme-dark .st-dashboard-shell .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .st-dashboard-shell .custom-dropdown-trigger:focus, body.theme-dark .st-dashboard-shell .custom-dropdown-trigger:focus-visible { outline: none !important; border-color: var(--eduloo-input-unified-border-focus) !important; background: var(--eduloo-input-unified-bg-focus) !important; box-shadow: 0 0 0 2px var(--eduloo-input-unified-ring) !important; filter: none !important; transform: none !important; } .st-dashboard-shell .st-panel-quick-grid { gap: 12px; align-items: stretch; } .st-dashboard-shell .st-panel-quick-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; row-gap: 10px; min-height: 132px; padding: 16px 16px 14px; align-items: start; } .st-dashboard-shell .st-panel-quick-card h3 { grid-column: 1; grid-row: 1; margin: 0; display: inline-flex; align-items: center; gap: 10px; line-height: 1.25; } .st-dashboard-shell .st-panel-quick-card p { grid-column: 1; grid-row: 2; margin: 0; line-height: 1.5; max-width: 36ch; } .st-dashboard-shell .st-panel-quick-title-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; } .st-dashboard-shell .st-panel-quick-arrow { position: static !important; right: auto !important; bottom: auto !important; grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: end; } body.theme-dark .st-dashboard-shell .st-panel-quick-card { border: 1px solid var(--st-db-panel-border) !important; background: var(--st-db-card-soft) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 16px -12px rgba(0, 0, 0, 0.3) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 24px -14px rgba(0, 0, 0, 0.34) !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card h3 { color: #fff1f6 !important; } body.theme-dark .st-dashboard-shell .st-panel-quick-card p { color: #e8c6d3 !important; } :root { --eduloo-dd-trigger-bg: color-mix( in srgb, var(--surface-container-lowest) 86%, var(--surface-container-low) 14% ); --eduloo-dd-trigger-bg-hover: color-mix( in srgb, var(--surface-container-lowest) 70%, var(--primary-container) 30% ); --eduloo-dd-trigger-bg-open: color-mix( in srgb, var(--surface-container-lowest) 66%, var(--primary-container) 34% ); --eduloo-dd-trigger-border: color-mix( in srgb, var(--outline-variant) 44%, transparent ); --eduloo-dd-trigger-border-hover: color-mix( in srgb, var(--primary-container) 54%, transparent ); --eduloo-dd-trigger-border-open: color-mix( in srgb, var(--primary-container) 68%, transparent ); --eduloo-dd-focus-ring: color-mix( in srgb, var(--secondary-container) 58%, transparent ); --eduloo-dd-text: var(--on-surface); --eduloo-dd-muted: var(--on-surface-variant); --eduloo-dd-icon: color-mix( in srgb, var(--primary) 76%, var(--on-primary-container) 24% ); --eduloo-dd-panel-bg: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--surface-container-low) 10% ); --eduloo-dd-panel-border: color-mix( in srgb, var(--outline-variant) 42%, transparent ); --eduloo-dd-panel-shadow: 0 24px 36px -24px color-mix(in srgb, var(--on-surface) 42%, transparent); --eduloo-dd-search-separator: color-mix( in srgb, var(--outline-variant) 42%, transparent ); --eduloo-dd-group-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--primary-container) 28% ); --eduloo-dd-group-text: color-mix( in srgb, var(--primary) 76%, var(--on-primary-container) 24% ); --eduloo-dd-option-hover-bg: color-mix( in srgb, var(--surface-container-lowest) 68%, var(--primary-container) 32% ); --eduloo-dd-option-focused-bg: color-mix( in srgb, var(--surface-container-lowest) 62%, var(--primary-container) 38% ); --eduloo-dd-option-focused-border: color-mix( in srgb, var(--primary-container) 62%, transparent ); --eduloo-dd-option-selected-bg: color-mix( in srgb, var(--surface-container-lowest) 64%, var(--primary-container) 36% ); --eduloo-dd-option-selected-border: color-mix( in srgb, var(--primary-container) 66%, transparent ); --eduloo-dd-option-selected-text: color-mix( in srgb, var(--primary) 80%, var(--on-primary-container) 20% ); --eduloo-dd-action-bg: color-mix( in srgb, var(--surface-container-lowest) 84%, var(--surface-container-low) 16% ); --eduloo-dd-action-border: color-mix( in srgb, var(--outline-variant) 44%, transparent ); --eduloo-dd-action-text: var(--on-surface-variant); --eduloo-dd-action-hover-bg: color-mix( in srgb, var(--surface-container-low) 68%, var(--primary-container) 32% ); --eduloo-dd-action-hover-border: color-mix( in srgb, var(--primary-container) 58%, transparent ); --eduloo-dd-action-hover-text: var(--on-surface); --eduloo-dd-scroll-thumb: color-mix( in srgb, var(--outline-variant) 68%, transparent ); --eduloo-dd-scroll-thumb-hover: color-mix( in srgb, var(--outline) 72%, transparent ); --eduloo-dd-mark-bg: color-mix( in srgb, var(--primary-container) 78%, var(--surface-container-lowest) 22% ); --eduloo-dd-mark-text: color-mix( in srgb, var(--primary) 80%, var(--on-primary-container) 20% ); } body.theme-dark { --eduloo-dd-trigger-bg: color-mix( in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22% ); --eduloo-dd-trigger-bg-hover: color-mix( in srgb, var(--surface-container-highest) 60%, var(--primary-container) 40% ); --eduloo-dd-trigger-bg-open: linear-gradient( 135deg, rgba(97, 121, 228, 0.22) 0%, rgba(44, 191, 173, 0.1) 48%, rgba(190, 101, 159, 0.18) 100% ); --eduloo-dd-trigger-border: color-mix( in srgb, var(--outline-variant) 66%, transparent ); --eduloo-dd-trigger-border-hover: color-mix( in srgb, var(--primary-container) 60%, transparent ); --eduloo-dd-trigger-border-open: color-mix( in srgb, var(--primary-container) 72%, transparent ); --eduloo-dd-focus-ring: color-mix( in srgb, var(--secondary-container) 50%, transparent ); --eduloo-dd-text: color-mix( in srgb, var(--on-surface) 92%, var(--on-primary) 8% ); --eduloo-dd-muted: color-mix( in srgb, var(--on-surface-variant) 86%, var(--primary-container) 14% ); --eduloo-dd-icon: color-mix( in srgb, var(--on-surface) 86%, var(--secondary-container) 14% ); --eduloo-dd-panel-bg: color-mix( in srgb, var(--surface-container-high) 80%, var(--surface-container-highest) 20% ); --eduloo-dd-panel-border: color-mix( in srgb, var(--primary-container) 34%, transparent ); --eduloo-dd-panel-shadow: 0 28px 40px -26px color-mix(in srgb, black 76%, transparent); --eduloo-dd-search-separator: color-mix( in srgb, var(--outline-variant) 58%, transparent ); --eduloo-dd-group-bg: color-mix( in srgb, var(--surface-container-highest) 62%, var(--primary-container) 38% ); --eduloo-dd-group-text: color-mix( in srgb, var(--on-surface) 88%, var(--on-primary) 12% ); --eduloo-dd-option-hover-bg: color-mix( in srgb, var(--surface-container-highest) 62%, var(--primary-container) 38% ); --eduloo-dd-option-focused-bg: color-mix( in srgb, var(--surface-container-highest) 54%, var(--primary-container) 46% ); --eduloo-dd-option-focused-border: color-mix( in srgb, var(--primary-container) 72%, transparent ); --eduloo-dd-option-selected-bg: color-mix( in srgb, var(--surface-container-highest) 50%, var(--primary-container) 50% ); --eduloo-dd-option-selected-border: color-mix( in srgb, var(--primary-container) 76%, transparent ); --eduloo-dd-option-selected-text: color-mix( in srgb, var(--on-surface) 90%, var(--on-primary) 10% ); --eduloo-dd-action-bg: color-mix( in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36% ); --eduloo-dd-action-border: color-mix( in srgb, var(--outline-variant) 44%, rgba(255, 255, 255, 0.28) 56% ); --eduloo-dd-action-text: color-mix( in srgb, var(--on-surface) 92%, var(--primary) 8% ); --eduloo-dd-action-hover-bg: color-mix( in srgb, var(--surface-container-highest) 50%, var(--primary-container) 50% ); --eduloo-dd-action-hover-border: color-mix( in srgb, var(--primary) 54%, var(--outline-variant) 46% ); --eduloo-dd-action-hover-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --eduloo-dd-scroll-thumb: color-mix( in srgb, var(--outline-variant) 76%, transparent ); --eduloo-dd-scroll-thumb-hover: color-mix( in srgb, var(--outline) 78%, transparent ); --eduloo-dd-mark-bg: color-mix( in srgb, var(--primary-container) 72%, var(--surface-container-highest) 28% ); --eduloo-dd-mark-text: color-mix( in srgb, var(--on-surface) 88%, var(--on-primary) 12% ); } body .custom-dropdown { position: relative; width: auto; display: inline-block; font-family: 'Be Vietnam Pro', sans-serif; } body .custom-dropdown.u-full-width { width: 100%; display: block; } body .custom-dropdown.disabled { opacity: 0.6; cursor: not-allowed; } body .custom-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 0 14px; border: none !important; border-radius: 16px !important; background: var(--eduloo-dd-trigger-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-dd-trigger-border) !important; color: var(--eduloo-dd-text) !important; font-family: 'Be Vietnam Pro', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease !important; box-sizing: border-box; } body .custom-dropdown-trigger:hover:not(:disabled) { background: var(--eduloo-dd-trigger-bg-hover) !important; box-shadow: inset 0 0 0 1px var(--eduloo-dd-trigger-border-hover) !important; } body .custom-dropdown-trigger:focus:not(:disabled), body .custom-dropdown-trigger:focus-visible:not(:disabled) { outline: none; background: var(--eduloo-dd-trigger-bg-open) !important; box-shadow: 0 0 0 3px var(--eduloo-dd-focus-ring) !important; transform: translateY(-1px); } body .custom-dropdown.open .custom-dropdown-trigger { background: var(--eduloo-dd-trigger-bg-open) !important; box-shadow: 0 0 0 3px var(--eduloo-dd-focus-ring), inset 0 0 0 1px var(--eduloo-dd-trigger-border-open) !important; } body .custom-dropdown.open:not(.dropup) .custom-dropdown-trigger { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; } body .custom-dropdown.open.dropup .custom-dropdown-trigger { border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; } body .custom-dropdown-text { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } body .custom-dropdown-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .custom-dropdown-placeholder { color: var(--eduloo-dd-muted); opacity: 0.86; } body .custom-dropdown-trigger-image { width: 24px; height: 24px; object-fit: cover; flex-shrink: 0; } body .custom-dropdown-trigger-image.circle { border-radius: 999px; } body .custom-dropdown-trigger-image.square { border-radius: 8px; } body .custom-dropdown-trigger-icon { width: 18px; text-align: center; flex-shrink: 0; color: var(--eduloo-dd-icon); } body .custom-dropdown-chevron { width: 12px; font-size: 11px; color: var(--eduloo-dd-muted); transition: transform 200ms ease, color 200ms ease; flex-shrink: 0; } body .custom-dropdown.open .custom-dropdown-chevron { transform: rotate(180deg); color: var(--eduloo-dd-icon); } body .custom-dropdown-panel { position: absolute; top: calc(100% + 2px); left: 0; min-width: 100%; width: max-content; max-width: none; z-index: 99999 !important; border: none !important; border-radius: 16px !important; background: var(--eduloo-dd-panel-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-dd-panel-border), var(--eduloo-dd-panel-shadow) !important; overflow: hidden; display: none; flex-direction: column; max-height: 300px; box-sizing: border-box; } body .custom-dropdown.open .custom-dropdown-panel, body .custom-dropdown-panel.is-open { display: flex; } body .custom-dropdown.dropup .custom-dropdown-panel { top: auto; bottom: calc(100% + 4px); } body .custom-dropdown-panel.attach-bottom { border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; } body .custom-dropdown-panel.attach-top { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; } body .custom-dropdown-search { padding: 8px 8px 0; border-bottom: 1px solid var(--eduloo-dd-search-separator); display: flex; align-items: center; min-height: calc(var(--search-height, 40px) + 12px); } body .custom-dropdown-search .search-field { width: min(100%, 300px); margin: 0 auto; align-self: center; } body .custom-dropdown-multi-actions { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--eduloo-dd-search-separator); flex-shrink: 0; } body .custom-dropdown-action-btn { flex: 1; min-height: 34px; padding: 0 10px; border: none; border-radius: 12px; background: var(--eduloo-dd-action-bg); box-shadow: inset 0 0 0 1px var(--eduloo-dd-action-border); color: var(--eduloo-dd-action-text); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } body .custom-dropdown-action-btn:hover { background: var(--eduloo-dd-action-hover-bg); color: var(--eduloo-dd-action-hover-text); box-shadow: inset 0 0 0 1px var(--eduloo-dd-action-hover-border); transform: translateY(-1px); } body .custom-dropdown-action-btn:active { transform: translateY(0); } body .custom-dropdown-options { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px; min-width: 0; } body .custom-dropdown-options::-webkit-scrollbar { width: 8px; } body .custom-dropdown-options::-webkit-scrollbar-track { background: transparent; } body .custom-dropdown-options::-webkit-scrollbar-thumb { background: var(--eduloo-dd-scroll-thumb); border-radius: 999px; } body .custom-dropdown-options::-webkit-scrollbar-thumb:hover { background: var(--eduloo-dd-scroll-thumb-hover); } body .custom-dropdown-group { padding: 6px 10px 4px; margin-bottom: 4px !important; border-radius: 4px; border-bottom: 1px solid var(--eduloo-dd-group-bg); background: transparent; color: var(--eduloo-dd-group-text); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: 0.5px; text-transform: uppercase; user-select: none; } body .custom-dropdown-group:first-child { margin-top: 0; } body .custom-dropdown-option { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-bottom: 0; padding: 8px 10px; border-radius: 12px; background: transparent; color: var(--eduloo-dd-text); cursor: pointer; transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; user-select: none; } body .custom-dropdown-option + .custom-dropdown-option { margin-top: 3px !important; } body .custom-dropdown-option:last-child { margin-bottom: 0; } body .custom-dropdown-option:hover:not(.disabled) { background: var(--eduloo-dd-option-hover-bg); } body .custom-dropdown-option.focused:not(.disabled) { background: var(--eduloo-dd-option-focused-bg); box-shadow: inset 0 0 0 1px var(--eduloo-dd-option-focused-border); outline: none; } body .custom-dropdown-option.selected:not(.disabled) { background: var(--eduloo-dd-option-selected-bg); box-shadow: inset 0 0 0 1px var(--eduloo-dd-option-selected-border); color: var(--eduloo-dd-option-selected-text); font-weight: 700; } body .custom-dropdown-option.disabled { opacity: 0.54; cursor: not-allowed; background: transparent !important; } body .custom-dropdown-checkbox { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; } body .custom-dropdown-option.disabled .custom-dropdown-checkbox { cursor: not-allowed; } body .custom-dropdown-option-content { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } body .custom-dropdown-option-image { width: 32px; height: 32px; object-fit: cover; flex-shrink: 0; } body .custom-dropdown-option-image.circle { border-radius: 999px; } body .custom-dropdown-option-image.square { border-radius: 8px; } body .custom-dropdown-option-icon { width: 20px; text-align: center; flex-shrink: 0; color: var(--eduloo-dd-icon); font-size: 14px; } body .custom-dropdown-option-text { flex: 1; min-width: 0; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body .custom-dropdown-option-text mark { background: var(--eduloo-dd-mark-bg); color: var(--eduloo-dd-mark-text); padding: 1px 4px; border-radius: 6px; font-weight: 700; } body .custom-dropdown-option .status-badge { margin-left: auto; flex-shrink: 0; } body .custom-dropdown-no-results { padding: 14px; text-align: center; color: var(--eduloo-dd-muted); font-size: 13px; font-style: normal; font-weight: 600; } @media (max-width: 768px) { body .custom-dropdown-panel { max-height: min(360px, 60vh); max-width: calc(100vw - 16px); } body .custom-dropdown-option { min-height: 42px; padding: 10px; } body .custom-dropdown-trigger { min-height: 42px; padding: 0 12px; } body .custom-dropdown-action-btn { min-height: 40px; padding: 0 10px; } } @media (max-width: 480px) { body .custom-dropdown-panel { left: 0; max-height: min(420px, 70vh); max-width: calc(100vw - 14px); } } @media print { body .custom-dropdown { display: none; } body select[data-dropdown] { display: block !important; } } @media (prefers-contrast: high) { body .custom-dropdown-trigger { box-shadow: inset 0 0 0 2px var(--eduloo-dd-trigger-border) !important; } body .custom-dropdown-option.focused:not(.disabled) { box-shadow: inset 0 0 0 2px var(--eduloo-dd-option-focused-border); } } @media (prefers-reduced-motion: reduce) { body .custom-dropdown-panel, body .custom-dropdown-chevron, body .custom-dropdown-option, body .custom-dropdown-trigger, body .custom-dropdown-action-btn { animation: none; transition: none; } } /* Eduloo Dark Mode v6: Dropdown Trigger And Panel Separation */ body.theme-dark { --eduloo-dd-trigger-bg: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --eduloo-dd-trigger-bg-hover: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ); --eduloo-dd-trigger-bg-open: color-mix( in srgb, var(--surface-container-highest) 62%, var(--primary-container) 38% ); --eduloo-dd-trigger-border: color-mix( in srgb, var(--outline-variant) 80%, rgba(255, 255, 255, 0.2) 20% ); --eduloo-dd-trigger-border-hover: color-mix( in srgb, var(--eduloo-dd-trigger-border) 62%, var(--primary) 38% ); --eduloo-dd-trigger-border-open: color-mix( in srgb, var(--primary) 44%, var(--eduloo-dd-trigger-border) 56% ); --eduloo-dd-focus-ring: color-mix(in srgb, var(--primary) 52%, transparent); --eduloo-dd-panel-bg: color-mix( in srgb, var(--surface-container-highest) 90%, var(--primary-container) 10% ); --eduloo-dd-panel-border: color-mix( in srgb, var(--outline-variant) 82%, rgba(255, 255, 255, 0.2) 18% ); --eduloo-dd-panel-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.36); } body.theme-dark .custom-dropdown-trigger { border: 1px solid var(--eduloo-dd-trigger-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 16px -12px rgba(0, 0, 0, 0.34) !important; } body.theme-dark .custom-dropdown-trigger:hover:not(:disabled) { filter: none !important; } body.theme-dark .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .custom-dropdown-trigger:focus:not(:disabled), body.theme-dark .custom-dropdown-trigger:focus-visible:not(:disabled) { border-color: var(--eduloo-dd-trigger-border-open) !important; } body.theme-dark .custom-dropdown-panel { border: 1px solid var(--eduloo-dd-panel-border) !important; } /* Eduloo Dark Mode v7: Dropdown Inset Inputs And Elevated Panels */ body.theme-dark { --eduloo-dd-trigger-bg: var(--eduloo-input-inset-bg); --eduloo-dd-trigger-border: var(--eduloo-input-inset-border); --eduloo-dd-trigger-bg-hover: color-mix( in srgb, var(--eduloo-input-inset-bg) 72%, var(--primary-container) 28% ); --eduloo-dd-panel-bg: var(--eduloo-dark-surface-panel); --eduloo-dd-panel-border: color-mix( in srgb, var(--outline-variant) 80%, rgba(255, 255, 255, 0.2) 20% ); } body.theme-dark .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .custom-dropdown-trigger:focus:not(:disabled), body.theme-dark .custom-dropdown-trigger:focus-visible:not(:disabled) { background: var(--eduloo-dd-trigger-bg-open) !important; border-color: var(--eduloo-dd-trigger-border-open) !important; box-shadow: 0 0 0 2px var(--eduloo-dd-focus-ring) !important; filter: none !important; transform: none !important; } /* Eduloo Dark Mode v8: Dropdown Trigger And Panel Definition */ body.theme-dark { --eduloo-dd-trigger-bg: var(--eduloo-input-unified-bg); --eduloo-dd-trigger-bg-hover: var(--eduloo-input-unified-bg-hover); --eduloo-dd-trigger-bg-open: var(--eduloo-input-unified-bg-focus); --eduloo-dd-trigger-border: var(--eduloo-input-unified-border); --eduloo-dd-trigger-border-hover: var(--eduloo-input-unified-border-hover); --eduloo-dd-trigger-border-open: var(--eduloo-input-unified-border-focus); --eduloo-dd-focus-ring: var(--eduloo-input-unified-ring); --eduloo-dd-panel-bg: color-mix( in srgb, var(--surface-container-highest) 80%, var(--surface-container-high) 20% ); } body.theme-dark .custom-dropdown-trigger { border: 1px solid var(--eduloo-dd-trigger-border) !important; background: var(--eduloo-dd-trigger-bg) !important; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important; } body.theme-dark .custom-dropdown-trigger:hover:not(:disabled) { background: var(--eduloo-dd-trigger-bg-hover) !important; border-color: var(--eduloo-dd-trigger-border-hover) !important; filter: none !important; transform: none !important; } body.theme-dark .custom-dropdown-panel { background: var(--eduloo-dd-panel-bg) !important; border: 1px solid var(--eduloo-dd-panel-border) !important; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.34) !important; } body .custom-dropdown-search .search-field__input, body .custom-dropdown-search input[type='search'], body .custom-dropdown-search input[type='text'] { border-radius: 999px !important; } body.theme-dark .custom-dropdown-action-btn { background: var(--eduloo-dd-action-bg) !important; border: 1px solid var(--eduloo-dd-action-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; color: var(--eduloo-dd-action-text) !important; } body.theme-dark .custom-dropdown-action-btn:hover { background: var(--eduloo-dd-action-hover-bg) !important; border-color: var(--eduloo-dd-action-hover-border) !important; color: var(--eduloo-dd-action-hover-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } /* Eduloo footer overrides for startup base_footer.css */ :root { --eduloo-footer-shell-bg: var(--surface-container-low); --eduloo-footer-shell-shadow: inset 0 1px 0 color-mix(in srgb, var(--outline-variant) 40%, transparent); --eduloo-footer-card-bg: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent); --eduloo-footer-card-bg-hover: color-mix(in srgb, var(--surface-bright) 92%, transparent); --eduloo-footer-card-shadow: none; --eduloo-footer-link-bg: color-mix(in srgb, var(--surface-container) 72%, transparent); --eduloo-footer-link-bg-hover: color-mix(in srgb, var(--primary-container) 26%, var(--surface-container-lowest) 74%); --eduloo-footer-link-fg: var(--on-surface-variant); --eduloo-footer-link-fg-strong: var(--on-surface); --eduloo-footer-icon-only-bg: color-mix(in srgb, var(--surface-container-low) 86%, var(--secondary-container) 14%); --eduloo-footer-icon-only-bg-hover: color-mix(in srgb, var(--surface-container) 72%, var(--primary-container) 28%); --eduloo-footer-icon-only-fg: var(--on-surface); --eduloo-footer-accent: var(--primary); --eduloo-footer-accent-soft: color-mix(in srgb, var(--primary-container) 48%, transparent); --eduloo-footer-bottom-bg: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent); --eduloo-footer-bottom-shadow: none; --eduloo-footer-focus: color-mix(in srgb, var(--secondary-container) 64%, transparent); } body.theme-dark { --eduloo-footer-shell-bg: color-mix(in srgb, var(--surface-container-low) 94%, transparent); --eduloo-footer-shell-shadow: inset 0 1px 0 color-mix(in srgb, var(--outline-variant) 52%, transparent); --eduloo-footer-card-bg: color-mix(in srgb, var(--surface-container-high) 82%, transparent); --eduloo-footer-card-bg-hover: color-mix(in srgb, var(--surface-container-highest) 84%, transparent); --eduloo-footer-card-shadow: none; --eduloo-footer-link-bg: color-mix(in srgb, var(--surface-container-high) 78%, transparent); --eduloo-footer-link-bg-hover: color-mix(in srgb, var(--primary-container) 30%, var(--surface-container-high) 70%); --eduloo-footer-link-fg: var(--on-surface-variant); --eduloo-footer-link-fg-strong: var(--on-surface); --eduloo-footer-icon-only-bg: color-mix(in srgb, var(--surface-container-high) 84%, var(--secondary) 16%); --eduloo-footer-icon-only-bg-hover: color-mix(in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28%); --eduloo-footer-icon-only-fg: color-mix(in srgb, var(--on-surface) 94%, var(--secondary-container) 6%); --eduloo-footer-accent-soft: color-mix(in srgb, var(--primary-container) 52%, transparent); --eduloo-footer-bottom-bg: color-mix(in srgb, var(--surface-container-high) 86%, transparent); --eduloo-footer-bottom-shadow: none; --eduloo-footer-focus: color-mix(in srgb, var(--secondary-container) 58%, transparent); } body .footer { width: 100% !important; margin-top: 104px !important; border-radius: 72px 72px 0 0 !important; background: var(--eduloo-footer-shell-bg) !important; border-top: none !important; box-shadow: var(--eduloo-footer-shell-shadow) !important; position: relative !important; overflow: hidden !important; } body .footer-navigation { padding: 56px 0 26px !important; } body .footer-nav-container, body .footer-bottom-container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 30px !important; } body .footer-nav-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 18px !important; align-items: stretch !important; justify-content: stretch !important; } body .footer-nav-section { position: relative !important; display: flex !important; flex-direction: column !important; gap: 14px !important; min-height: 100% !important; padding: 24px 22px !important; border-radius: 30px !important; background: var(--eduloo-footer-card-bg) !important; box-shadow: var(--eduloo-footer-card-shadow) !important; border: none !important; transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease !important; } body .footer-nav-section:hover { transform: none !important; background: var(--eduloo-footer-card-bg-hover) !important; box-shadow: var(--eduloo-footer-card-shadow) !important; } body .footer-nav-title { margin: 0 !important; padding: 0 !important; border: none !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; color: var(--eduloo-footer-link-fg-strong) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.2px !important; line-height: 1.25 !important; } body .footer-nav-title i { width: 20px !important; min-width: 20px !important; text-align: center !important; color: var(--eduloo-footer-accent) !important; font-size: 16px !important; } body .footer-nav-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; align-items: start !important; } body .footer-nav-links li { margin: 0 !important; } body .footer-nav-links a { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-height: 34px !important; padding: 6px 10px !important; border-radius: 14px !important; background: transparent !important; color: var(--eduloo-footer-link-fg) !important; border: none !important; text-decoration: none !important; white-space: nowrap !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; transition: color 220ms ease, background 220ms ease, transform 220ms ease !important; } body .footer-nav-links a i { font-size: 12px !important; color: color-mix(in srgb, var(--eduloo-footer-accent) 78%, transparent) !important; } body .footer-nav-links a:hover { color: var(--primary) !important; background: var(--eduloo-footer-link-bg-hover) !important; transform: translateX(2px) !important; } body .footer-nav-links a:focus-visible, body .footer-menu a:focus-visible, body .footer-blog-recommendations-btn:focus-visible { outline: 2px solid var(--eduloo-footer-focus) !important; outline-offset: 2px !important; } body .footer-bottom { padding: 0 0 26px !important; background: transparent !important; border-top: none !important; } body .footer-bottom-content { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 14px 18px !important; padding: 18px 22px !important; border-radius: 24px !important; background: var(--eduloo-footer-bottom-bg) !important; box-shadow: var(--eduloo-footer-bottom-shadow) !important; } body .footer-copyright-section { display: flex !important; flex-direction: column !important; gap: 3px !important; } body .footer-copyright, body .footer-made-in-europe { margin: 0 !important; color: var(--eduloo-footer-link-fg) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; } body .footer-credit-inline { margin: 0 !important; color: var(--eduloo-footer-link-fg) !important; font-size: 12px !important; line-height: 1.3 !important; } body .footer-credit-inline a { color: var(--eduloo-footer-accent) !important; font-weight: 700 !important; text-decoration: none !important; border: none !important; } body .footer-credit-inline a:hover { color: color-mix(in srgb, var(--eduloo-footer-accent) 72%, var(--secondary) 28%) !important; } body .footer-red-heart { color: color-mix(in srgb, var(--primary) 84%, var(--secondary-container) 16%) !important; } body .footer-menu { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } body .footer-menu a { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-height: 38px !important; padding: 8px 14px !important; border-radius: 999px !important; background: var(--eduloo-footer-link-bg) !important; color: var(--eduloo-footer-link-fg-strong) !important; border: none !important; text-decoration: none !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; transition: transform 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease !important; } body .footer-menu a:hover { transform: none !important; background: var(--eduloo-footer-link-bg-hover) !important; color: var(--primary) !important; box-shadow: none !important; } body .footer-menu a.footer-menu-icon-only { width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; justify-content: center !important; background: var(--eduloo-footer-icon-only-bg) !important; color: var(--eduloo-footer-icon-only-fg) !important; } body .footer-menu a.footer-menu-icon-only:hover { background: var(--eduloo-footer-icon-only-bg-hover) !important; color: var(--primary) !important; } body .footer-blog-recommendations-btn { width: 38px !important; min-width: 38px !important; height: 38px !important; border-radius: 999px !important; border: none !important; background: var(--eduloo-footer-link-bg) !important; color: var(--eduloo-footer-link-fg-strong) !important; box-shadow: none !important; transition: background 220ms ease, color 220ms ease, transform 220ms ease !important; } body .footer-blog-recommendations-btn:hover { transform: none !important; background: var(--eduloo-footer-link-bg-hover) !important; color: var(--primary) !important; } /* Compatibility with older project-specific footer markup */ body .footer-main { display: flex !important; flex-direction: column !important; gap: 46px !important; max-width: 1280px !important; margin: 0 auto !important; padding: 56px 30px 34px !important; } body .footer-brand { display: flex !important; flex-direction: column !important; gap: 16px !important; } body .footer-brand-logo { display: inline-flex !important; align-items: center !important; gap: 10px !important; } body .footer-brand-logo img { width: 38px !important; height: 38px !important; } body .footer-brand-logo span { color: var(--primary) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 26px !important; font-weight: 900 !important; letter-spacing: -0.4px !important; } body .footer-brand p { margin: 0 !important; color: var(--eduloo-footer-link-fg) !important; font-size: 14px !important; line-height: 1.45 !important; } body .footer-links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } body .footer-links-col { display: flex !important; flex-direction: column !important; gap: 8px !important; } body .footer-links-col > span { color: var(--eduloo-footer-link-fg-strong) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 16px !important; font-weight: 800 !important; } body .footer-links-col a { color: var(--eduloo-footer-link-fg) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; transition: color 220ms ease, transform 220ms ease !important; } body .footer-links-col a:hover { color: var(--primary) !important; transform: translateX(2px) !important; } body .footer-social { display: flex !important; gap: 12px !important; } body .footer-social a { color: var(--eduloo-footer-link-fg) !important; } body .footer-social a:hover { color: var(--primary) !important; } @media (max-width: 1024px) { body .footer-nav-links { grid-template-columns: 1fr !important; } body .footer-links { grid-template-columns: 1fr !important; } body .footer-main { flex-direction: column !important; } } @media (max-width: 750px) { body .footer { margin-top: 76px !important; border-radius: 46px 46px 0 0 !important; } body .footer-navigation { padding: 44px 0 22px !important; } body .footer-nav-container, body .footer-bottom-container { padding: 0 18px !important; } body .footer-nav-grid { grid-template-columns: 1fr !important; gap: 14px !important; } body .footer-nav-section { padding: 20px 16px !important; border-radius: 24px !important; } body .footer-bottom-content { flex-direction: column !important; text-align: center !important; padding: 16px 14px !important; border-radius: 20px !important; } body .footer-menu { justify-content: center !important; } body .footer-menu a { min-height: 36px !important; padding: 8px 12px !important; } } @media (min-width: 1025px) { body .footer-nav-links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body .footer-main { flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; } } @media (prefers-reduced-motion: reduce) { body .footer-nav-section, body .footer-nav-links a, body .footer-menu a, body .footer-blog-recommendations-btn { transition: none !important; } } /* Eduloo Dark Mode v7: Footer Hierarchy And Contrast */ body.theme-dark { --eduloo-footer-shell-bg: color-mix( in srgb, var(--surface-container-low) 90%, var(--surface-container) 10% ); --eduloo-footer-card-bg: color-mix( in srgb, var(--surface-container-high) 86%, var(--surface-container-highest) 14% ); --eduloo-footer-card-bg-hover: color-mix( in srgb, var(--surface-container-highest) 78%, var(--primary-container) 22% ); --eduloo-footer-link-bg: color-mix( in srgb, var(--surface-container-high) 80%, var(--primary-container) 20% ); --eduloo-footer-link-bg-hover: color-mix( in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36% ); --eduloo-footer-link-fg: var(--on-surface-variant); --eduloo-footer-link-fg-strong: var(--on-surface); --eduloo-footer-shell-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); --eduloo-footer-focus: color-mix(in srgb, var(--primary) 52%, transparent); } body.theme-dark .footer { border-top: 1px solid color-mix(in srgb, var(--outline-variant) 76%, rgba(255, 255, 255, 0.18) 24%) !important; } body.theme-dark .footer-nav-section, body.theme-dark .footer-bottom-content { border: 1px solid color-mix(in srgb, var(--outline-variant) 74%, rgba(255, 255, 255, 0.18) 26%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 16px -12px rgba(0, 0, 0, 0.32) !important; } body.theme-dark .footer-nav-section:hover, body.theme-dark .footer-menu a:hover, body.theme-dark .footer-blog-recommendations-btn:hover { filter: brightness(1.1) !important; } /* Eduloo Dark Mode v8: Footer Readability And Separation */ body.theme-dark .footer { background: color-mix( in srgb, var(--surface-container-low) 90%, var(--surface-container) 10% ) !important; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 74%, rgba(255, 255, 255, 0.24) 26%) !important; } body.theme-dark .footer-nav-section, body.theme-dark .footer-bottom-content { background: color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ) !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 74%, rgba(255, 255, 255, 0.24) 26%) !important; } body.theme-dark .footer-nav-section h4, body.theme-dark .footer-links-col > span, body.theme-dark .footer-brand-logo span { color: var(--eduloo-text-title) !important; } body.theme-dark .footer-nav-links a, body.theme-dark .footer-links-col a, body.theme-dark .footer-brand p { color: var(--eduloo-text-body) !important; } body.theme-dark .footer-nav-links a:hover, body.theme-dark .footer-links-col a:hover, body.theme-dark .footer-menu a:hover { color: var(--primary) !important; } :root { --eduloo-modal-overlay: color-mix( in srgb, var(--on-surface) 32%, transparent ); --eduloo-modal-shell-bg: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--surface-container-low) 10% ); --eduloo-modal-shell-border: color-mix( in srgb, var(--outline-variant) 38%, transparent ); --eduloo-modal-shell-accent-a: color-mix( in srgb, var(--primary-container) 30%, transparent ); --eduloo-modal-shell-accent-b: color-mix( in srgb, var(--secondary-container) 24%, transparent ); --eduloo-modal-header-bg: color-mix( in srgb, var(--surface-container-lowest) 84%, var(--surface-container-low) 16% ); --eduloo-modal-header-accent: color-mix( in srgb, var(--primary-container) 26%, transparent ); --eduloo-modal-title: var(--on-surface); --eduloo-modal-text: var(--on-surface); --eduloo-modal-muted: var(--on-surface-variant); --eduloo-modal-panel-bg: color-mix( in srgb, var(--surface-container-lowest) 86%, var(--surface-container-low) 14% ); --eduloo-modal-panel-alt: color-mix( in srgb, var(--surface-container-low) 82%, var(--surface-container) 18% ); --eduloo-modal-row-bg: color-mix( in srgb, var(--surface-container-lowest) 86%, var(--surface-container-low) 14% ); --eduloo-modal-row-alt-bg: color-mix( in srgb, var(--surface-container-low) 80%, var(--surface-container) 20% ); --eduloo-modal-row-hover: color-mix( in srgb, var(--surface-container) 68%, var(--primary-container) 32% ); --eduloo-modal-button-bg: color-mix( in srgb, var(--surface-container-lowest) 86%, var(--surface-container-low) 14% ); --eduloo-modal-button-hover: color-mix( in srgb, var(--surface-container) 70%, var(--primary-container) 30% ); --eduloo-modal-button-text: var(--on-surface-variant); --eduloo-modal-button-strong: var(--on-surface); --eduloo-modal-button-primary: color-mix( in srgb, var(--primary) 78%, var(--primary-container) 22% ); --eduloo-modal-button-primary-hover: color-mix( in srgb, var(--primary) 84%, var(--primary-container) 16% ); --eduloo-modal-button-primary-text: var(--on-primary); --eduloo-modal-danger-bg: color-mix( in srgb, var(--error) 20%, var(--surface-container-lowest) 80% ); --eduloo-modal-danger-text: color-mix( in srgb, var(--error) 86%, var(--on-surface) 14% ); --eduloo-modal-shadow: 0 34px 72px -36px color-mix(in srgb, var(--on-surface) 46%, transparent); --eduloo-modal-panel-shadow: 0 22px 38px -30px color-mix(in srgb, var(--on-surface) 38%, transparent); --eduloo-modal-input-bg: color-mix( in srgb, var(--surface-container-lowest) 94%, transparent ); --eduloo-modal-input-focus-bg: color-mix( in srgb, var(--surface-bright) 84%, var(--surface-container-lowest) 16% ); --eduloo-modal-focus: color-mix( in srgb, var(--secondary-container) 60%, transparent ); --eduloo-modal-option-selected-bg: color-mix( in srgb, var(--eduloo-modal-input-bg) 72%, var(--eduloo-modal-row-hover) 28% ); --eduloo-modal-option-selected-border: color-mix( in srgb, var(--outline-variant) 42%, var(--primary-container) 58% ); --eduloo-modal-option-selected-text: color-mix( in srgb, var(--primary) 80%, var(--on-primary-container) 20% ); } body.theme-dark { --eduloo-modal-overlay: color-mix(in srgb, black 74%, transparent); --eduloo-modal-shell-bg: color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ); --eduloo-modal-shell-border: color-mix( in srgb, var(--primary-container) 34%, transparent ); --eduloo-modal-shell-accent-a: rgba(97, 121, 228, 0.22); --eduloo-modal-shell-accent-b: rgba(190, 101, 159, 0.2); --eduloo-modal-header-bg: color-mix( in srgb, var(--surface-container-high) 76%, var(--surface-container-highest) 24% ); --eduloo-modal-header-accent: rgba(44, 191, 173, 0.16); --eduloo-modal-title: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --eduloo-modal-text: color-mix( in srgb, var(--on-surface) 92%, var(--secondary-container) 8% ); --eduloo-modal-muted: color-mix( in srgb, var(--on-surface-variant) 86%, var(--primary-container) 14% ); --eduloo-modal-panel-bg: color-mix( in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22% ); --eduloo-modal-panel-alt: color-mix( in srgb, var(--surface-container-highest) 66%, var(--surface-container-high) 34% ); --eduloo-modal-row-bg: color-mix( in srgb, var(--surface-container-high) 74%, var(--surface-container-highest) 26% ); --eduloo-modal-row-alt-bg: color-mix( in srgb, var(--surface-container-highest) 62%, var(--surface-container-high) 38% ); --eduloo-modal-row-hover: color-mix( in srgb, var(--primary-container) 42%, var(--surface-container-highest) 58% ); --eduloo-modal-button-bg: color-mix( in srgb, var(--surface-container-high) 74%, var(--surface-container-highest) 26% ); --eduloo-modal-button-hover: color-mix( in srgb, var(--primary-container) 36%, var(--surface-container-high) 64% ); --eduloo-modal-button-text: color-mix( in srgb, var(--on-surface-variant) 88%, var(--secondary-container) 12% ); --eduloo-modal-button-strong: color-mix( in srgb, var(--on-surface) 90%, var(--on-primary) 10% ); --eduloo-modal-button-primary: color-mix( in srgb, var(--primary-container) 68%, var(--primary) 32% ); --eduloo-modal-button-primary-hover: color-mix( in srgb, var(--primary-container) 74%, var(--primary) 26% ); --eduloo-modal-danger-bg: color-mix( in srgb, var(--error) 36%, var(--surface-container-high) 64% ); --eduloo-modal-danger-text: color-mix( in srgb, var(--on-primary) 72%, var(--on-surface) 28% ); --eduloo-modal-shadow: 0 36px 76px -38px color-mix(in srgb, black 78%, transparent); --eduloo-modal-panel-shadow: 0 24px 40px -30px color-mix(in srgb, black 72%, transparent); --eduloo-modal-input-bg: color-mix( in srgb, var(--surface-container-highest) 88%, transparent ); --eduloo-modal-input-focus-bg: color-mix( in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22% ); --eduloo-modal-focus: color-mix( in srgb, var(--secondary-container) 52%, transparent ); --eduloo-modal-option-selected-bg: color-mix( in srgb, var(--eduloo-modal-input-bg) 62%, var(--eduloo-modal-row-hover) 38% ); --eduloo-modal-option-selected-border: color-mix( in srgb, var(--primary-container) 70%, transparent ); --eduloo-modal-option-selected-text: color-mix( in srgb, var(--on-surface) 90%, var(--on-primary) 10% ); } body .st-study-modal { background: var(--eduloo-modal-overlay) !important; backdrop-filter: blur(14px) saturate(124%) !important; -webkit-backdrop-filter: blur(14px) saturate(124%) !important; } body .st-study-modal .modal-content { width: min(840px, calc(100vw - 28px)) !important; max-width: min(840px, calc(100vw - 28px)) !important; max-height: calc(100vh - 28px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: transparent !important; border: none !important; box-shadow: none !important; } body .st-study-modal .modal-body { padding: 0 !important; display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } body .st-study-modal .st-study-modal-body { width: 100% !important; display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } body .st-study-modal .st-modal { margin: 0 !important; width: 100% !important; max-height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; border: none !important; border-radius: 30px !important; overflow: hidden !important; background: var(--eduloo-modal-shell-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-shell-border), var(--eduloo-modal-shadow) !important; gap: 0 !important; } body .st-study-modal .st-modal-header { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 20px 22px 14px !important; background: var(--eduloo-modal-header-bg) !important; } body .st-study-modal .st-modal-header h2 { margin: 0 !important; padding: 0 0 3px !important; border: none !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 30px !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal .st-modal-header .st-btn.st-btn--only-icon, body .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; border: none !important; border-radius: 999px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 220ms ease, color 220ms ease, transform 220ms ease !important; } body .st-study-modal .st-modal-header .st-btn.st-btn--only-icon:hover, body .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon:hover { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; transform: translateY(-1px) !important; } body .st-study-modal .st-modal-header .st-btn.st-btn--only-icon i, body .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon i { margin: 0 !important; font-size: 13px !important; } body .st-study-modal .st-modal-body { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-gutter: stable !important; gap: 12px !important; padding: 6px 22px 20px !important; background: transparent !important; color: var(--eduloo-modal-text) !important; } body .st-study-modal .st-modal-form-group { display: flex !important; flex-direction: column !important; gap: 8px !important; } body .st-study-modal .st-modal-form-group label { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 800 !important; color: var(--eduloo-modal-muted) !important; } body .st-study-modal .st-modal-form-group input, body .st-study-modal .st-modal-form-group textarea, body .st-study-modal .st-modal-form-group select, body .st-study-modal .st-modal-form-group .custom-dropdown-trigger { min-height: 44px !important; border: none !important; border-radius: 16px !important; background: var(--eduloo-modal-input-bg) !important; color: var(--eduloo-modal-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 40%, transparent) !important; padding: 0 14px !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; transition: box-shadow 220ms ease, background 220ms ease, transform 220ms ease !important; } body .st-study-modal .st-modal-form-group .st-output-language-select { width: 100% !important; } body .st-study-modal .st-modal-form-group textarea { min-height: 116px !important; padding: 12px 14px !important; } body .st-study-modal .st-modal-form-group input:focus, body .st-study-modal .st-modal-form-group input:focus-visible, body .st-study-modal .st-modal-form-group textarea:focus, body .st-study-modal .st-modal-form-group textarea:focus-visible, body .st-study-modal .st-modal-form-group select:focus, body .st-study-modal .st-modal-form-group select:focus-visible, body .st-study-modal .st-modal-form-group .custom-dropdown-trigger:focus, body .st-study-modal .st-modal-form-group .custom-dropdown-trigger:focus-visible, body .st-study-modal .st-modal-form-group .custom-dropdown.open .custom-dropdown-trigger { outline: none !important; background: var(--eduloo-modal-input-focus-bg) !important; box-shadow: 0 0 0 3px var(--eduloo-modal-focus) !important; transform: none !important; } body .st-study-modal .st-modal-form-group .custom-dropdown-panel { border: none !important; border-radius: 16px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: var(--eduloo-modal-panel-shadow) !important; padding: 6px !important; } body .st-study-modal .st-modal-form-group .custom-dropdown-option { min-height: 36px !important; border-radius: 12px !important; background: transparent !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; font-weight: 600 !important; } body .st-study-modal .st-modal-form-group .custom-dropdown-option:hover:not(.disabled), body .st-study-modal .st-modal-form-group .custom-dropdown-option.focused:not(.disabled) { background: var(--eduloo-modal-row-hover) !important; } body .st-study-modal .st-modal-form-group .custom-dropdown-option.selected:not(.disabled) { background: var(--eduloo-modal-option-selected-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-option-selected-border) !important; color: var(--eduloo-modal-option-selected-text) !important; } body .st-study-modal input[type='checkbox'] { appearance: none !important; -webkit-appearance: none !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin: 0 !important; border: none !important; border-radius: 7px !important; background: var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 44%, transparent), 0 10px 16px -14px color-mix(in srgb, var(--on-surface) 50%, transparent) !important; display: inline-grid !important; place-content: center !important; cursor: pointer !important; transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease !important; } body .st-study-modal input[type='checkbox']::before { content: '' !important; width: 8px !important; height: 5px !important; border-left: 2px solid var(--eduloo-modal-button-primary-text) !important; border-bottom: 2px solid var(--eduloo-modal-button-primary-text) !important; transform: translateY(-1px) rotate(-45deg) scale(0.7) !important; transform-origin: center !important; opacity: 0 !important; transition: transform 180ms ease, opacity 180ms ease !important; } body .st-study-modal input[type='checkbox']:hover { background: var(--eduloo-modal-row-hover) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 62%, transparent ), 0 12px 18px -14px color-mix(in srgb, var(--on-surface) 52%, transparent) !important; } body .st-study-modal input[type='checkbox']:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; } body .st-study-modal input[type='checkbox']:checked { background: var(--eduloo-modal-button-primary) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 62%, transparent), 0 14px 20px -14px color-mix(in srgb, var(--primary) 58%, transparent) !important; } body .st-study-modal input[type='checkbox']:checked::before { opacity: 1 !important; transform: translateY(-1px) rotate(-45deg) scale(1) !important; } body .st-study-modal input[type='checkbox']:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } body .st-study-modal .button.button-secondary.st-btn { min-height: 44px !important; border: none !important; border-radius: 999px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1px !important; transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal .st-btn.st-btn--sm { min-height: 40px !important; padding: 0 14px !important; border-radius: 14px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } body .st-study-modal .st-btn.st-btn--sm.st-btn--only-icon { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 12px !important; } body .st-study-modal .st-btn.st-btn--sm .icon { margin: 0 !important; font-size: 12px !important; } body .st-study-modal .st-create-quiz-type-text { display: inline-block !important; min-width: 0 !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; } body .st-study-modal--document-topics .st-modal.st-modal--document-topics { flex: 1 1 auto !important; min-height: 0 !important; } body .st-study-modal .button.button-secondary.st-btn:hover, body .st-study-modal .button.button-secondary.st-btn:focus-visible { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; transform: none !important; } body .st-study-modal .button.button-secondary.st-btn.btn-success, body .st-study-modal .button.button-primary.st-btn { background: var(--eduloo-modal-button-primary) !important; color: var(--eduloo-modal-button-primary-text) !important; box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--primary) 52%, transparent) !important; } body .st-study-modal .button.button-secondary.st-btn.btn-success:hover, body .st-study-modal .button.button-primary.st-btn:hover { background: var(--eduloo-modal-button-primary-hover) !important; } body .st-study-modal .button.button-secondary.st-btn:focus-visible, body .st-study-modal .button.button-primary.st-btn:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; } body .st-study-modal--document-topics .st-modal-header, body .st-study-modal--edit-quiz .st-modal-header { padding: 16px 18px 12px !important; } body .st-study-modal--document-topics .st-modal-header h2, body .st-study-modal--edit-quiz .st-modal-header h2 { font-size: 26px !important; } body .st-study-modal--document-topics .st-modal-body { display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; padding: 0 12px 12px !important; } body .st-study-modal--edit-quiz .st-modal-body { display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; padding: 0 16px 16px !important; } body .st-study-modal--edit-quiz .st-modal { --st-edit-quiz-list-bg: color-mix( in srgb, var(--eduloo-modal-panel-bg) 76%, var(--eduloo-modal-panel-alt) 24% ); --st-edit-quiz-list-border: color-mix( in srgb, var(--eduloo-modal-shell-border) 78%, transparent ); --st-edit-quiz-card-bg: color-mix( in srgb, var(--eduloo-modal-row-bg) 84%, var(--eduloo-modal-panel-alt) 16% ); --st-edit-quiz-card-bg-hover: color-mix( in srgb, var(--eduloo-modal-row-bg) 76%, var(--eduloo-modal-row-hover) 24% ); --st-edit-quiz-card-bg-open: color-mix( in srgb, var(--eduloo-modal-row-bg) 70%, var(--eduloo-modal-row-hover) 30% ); --st-edit-quiz-card-border: color-mix( in srgb, var(--eduloo-modal-shell-border) 72%, transparent ); --st-edit-quiz-card-border-strong: color-mix( in srgb, var(--eduloo-modal-option-selected-border) 64%, var(--eduloo-modal-shell-border) 36% ); --st-edit-quiz-title: var(--eduloo-modal-title); --st-edit-quiz-muted: var(--eduloo-modal-muted); --st-edit-quiz-divider: color-mix( in srgb, var(--eduloo-modal-shell-border) 70%, transparent ); --st-edit-quiz-type-bg: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 52%, var(--eduloo-modal-row-bg) 48% ); --st-edit-quiz-type-border: color-mix( in srgb, var(--eduloo-modal-option-selected-border) 72%, transparent ); --st-edit-quiz-type-text: color-mix( in srgb, var(--eduloo-modal-option-selected-text) 82%, var(--eduloo-modal-title) 18% ); --st-edit-quiz-action-feedback-bg: color-mix( in srgb, var(--eduloo-modal-button-bg) 70%, var(--secondary-container) 30% ); --st-edit-quiz-action-feedback-border: color-mix( in srgb, var(--secondary-container) 66%, var(--eduloo-modal-shell-border) 34% ); --st-edit-quiz-action-feedback-text: color-mix( in srgb, var(--secondary) 74%, var(--eduloo-modal-title) 26% ); --st-edit-quiz-action-edit-bg: color-mix( in srgb, var(--eduloo-modal-button-bg) 66%, var(--primary-container) 34% ); --st-edit-quiz-action-edit-border: color-mix( in srgb, var(--primary-container) 68%, var(--eduloo-modal-shell-border) 32% ); --st-edit-quiz-action-edit-text: color-mix( in srgb, var(--primary) 76%, var(--eduloo-modal-title) 24% ); --st-edit-quiz-action-danger-bg: color-mix( in srgb, var(--eduloo-modal-danger-bg) 66%, var(--eduloo-modal-row-bg) 34% ); --st-edit-quiz-action-danger-border: color-mix( in srgb, var(--eduloo-modal-danger-text) 58%, var(--eduloo-modal-shell-border) 42% ); --st-edit-quiz-action-danger-text: var(--eduloo-modal-danger-text); --st-edit-quiz-action-success-bg: color-mix( in srgb, var(--success) 24%, var(--eduloo-modal-row-bg) 76% ); --st-edit-quiz-action-success-border: color-mix( in srgb, var(--success) 68%, var(--eduloo-modal-shell-border) 32% ); --st-edit-quiz-action-success-text: color-mix( in srgb, var(--success) 78%, var(--eduloo-modal-title) 22% ); } body .st-study-modal--edit-quiz .st-modal-quiz-list { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; margin-top: 10px !important; padding: 10px 8px 10px 6px !important; border-radius: 20px !important; background: var(--st-edit-quiz-list-bg) !important; box-shadow: inset 0 0 0 1px var(--st-edit-quiz-list-border) !important; gap: 12px !important; max-height: clamp(260px, calc(78vh - 220px), 680px) !important; scrollbar-width: thin; scrollbar-color: var(--eduloo-modal-option-selected-border) color-mix(in srgb, var(--st-edit-quiz-list-bg) 82%, transparent); } body .st-study-modal--edit-quiz .st-modal-quiz-list > .st-modal-quiz-item { flex: 0 0 auto !important; } body .st-study-modal--edit-quiz .st-modal-quiz-list::-webkit-scrollbar { width: 9px; } body .st-study-modal--edit-quiz .st-modal-quiz-list::-webkit-scrollbar-track { border-radius: 999px; background: color-mix(in srgb, var(--st-edit-quiz-list-bg) 84%, transparent); } body .st-study-modal--edit-quiz .st-modal-quiz-list::-webkit-scrollbar-thumb { border-radius: 999px; border: 2px solid color-mix(in srgb, var(--st-edit-quiz-list-bg) 92%, transparent); background: color-mix( in srgb, var(--eduloo-modal-option-selected-border) 74%, transparent ); } body .st-study-modal--edit-quiz .st-modal-quiz-item { position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 14px !important; border-radius: 16px !important; border: 1px solid var(--st-edit-quiz-card-border) !important; background: var(--st-edit-quiz-card-bg) !important; box-shadow: 0 12px 26px -24px color-mix(in srgb, var(--on-surface) 46%, transparent) !important; transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, transform 220ms ease !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item::before { content: '' !important; position: absolute !important; inset: 0 auto 0 0 !important; width: 3px !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--primary) 82%, transparent) 0%, color-mix(in srgb, var(--secondary) 72%, transparent) 100% ) !important; opacity: 0.48 !important; pointer-events: none !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item:hover { border-color: var(--st-edit-quiz-card-border-strong) !important; background: var(--st-edit-quiz-card-bg-hover) !important; box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--on-surface) 52%, transparent) !important; transform: translateY(-1px) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item--expanded { border-color: var(--st-edit-quiz-card-border-strong) !important; background: var(--st-edit-quiz-card-bg-open) !important; box-shadow: 0 20px 34px -24px color-mix(in srgb, var(--on-surface) 56%, transparent) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; min-height: 0 !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-summary { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; flex-direction: column !important; gap: 6px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-title { margin: 0 !important; color: var(--st-edit-quiz-title) !important; font-size: 15px !important; line-height: 1.42 !important; font-weight: 700 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-type { display: inline-flex !important; align-items: center !important; gap: 6px !important; width: fit-content !important; padding: 3px 10px !important; border-radius: 999px !important; border: 1px solid var(--st-edit-quiz-type-border) !important; background: var(--st-edit-quiz-type-bg) !important; color: var(--st-edit-quiz-type-text) !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-type::before { content: '' !important; width: 6px !important; height: 6px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--st-edit-quiz-type-text) 78%, transparent ) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-search-snippet { margin: 1px 0 0 !important; color: var(--st-edit-quiz-muted) !important; font-size: 12px !important; line-height: 1.4 !important; } body .st-study-modal--edit-quiz .st-modal-quiz-search-snippet-label { color: var(--st-edit-quiz-title) !important; font-weight: 700 !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions { display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; align-self: flex-start !important; gap: 8px !important; flex: 0 0 auto !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .st-btn { width: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 11px !important; border: 1px solid var(--st-edit-quiz-card-border) !important; box-shadow: none !important; transition: border-color 220ms ease, background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .st-btn i { font-size: 14px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .st-btn:hover, body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .st-btn:focus-visible { transform: translateY(-1px) !important; box-shadow: 0 12px 20px -16px color-mix(in srgb, var(--on-surface) 56%, transparent) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions [data-edit-quiz-feedback] { background: var(--st-edit-quiz-action-feedback-bg) !important; border-color: var(--st-edit-quiz-action-feedback-border) !important; color: var(--st-edit-quiz-action-feedback-text) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions [data-edit-quiz-toggle] { background: var(--st-edit-quiz-action-edit-bg) !important; border-color: var(--st-edit-quiz-action-edit-border) !important; color: var(--st-edit-quiz-action-edit-text) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions [data-edit-quiz-remove] { background: var(--st-edit-quiz-action-danger-bg) !important; border-color: var(--st-edit-quiz-action-danger-border) !important; color: var(--st-edit-quiz-action-danger-text) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions [data-edit-quiz-toggle].st-modal-quiz-item-toggle--accept { background: var(--st-edit-quiz-action-success-bg) !important; border-color: var(--st-edit-quiz-action-success-border) !important; color: var(--st-edit-quiz-action-success-text) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions [data-edit-quiz-toggle].st-modal-quiz-item-toggle--accept i { color: var(--st-edit-quiz-action-success-text) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-content { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 0 !important; padding-top: 12px !important; border-top: 1px solid var(--st-edit-quiz-divider) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item:not(.st-modal-quiz-item--expanded) .st-modal-quiz-item-content { padding-top: 0 !important; border-top-color: transparent !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-content .st-modal-form-group { margin: 0 !important; padding: 10px !important; border-radius: 12px !important; background: color-mix( in srgb, var(--eduloo-modal-input-bg) 72%, var(--eduloo-modal-row-bg) 28% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; gap: 8px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-content .st-modal-form-group label { color: var(--st-edit-quiz-muted) !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: 0.2px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-answer-list { display: flex !important; flex-direction: column !important; gap: 8px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-combination-list { display: flex !important; flex-direction: column !important; gap: 8px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-combination-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; padding: 6px !important; border-radius: 12px !important; background: var(--eduloo-modal-row-alt-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 64%, transparent) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-combination-row > input { min-width: 0 !important; width: 100% !important; } body .st-study-modal--edit-quiz .st-modal-quiz-combination-separator { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; min-width: 28px !important; height: 28px !important; color: var(--st-edit-quiz-muted) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-answer-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; padding: 6px !important; border-radius: 12px !important; background: var(--eduloo-modal-row-alt-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 64%, transparent) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-answer-row--with-tab { grid-template-columns: 34px minmax(0, 1fr) auto !important; } body .st-study-modal--edit-quiz .st-modal-quiz-answer-tab { width: 34px !important; height: 34px !important; border-radius: 10px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; background: color-mix( in srgb, var(--eduloo-modal-input-bg) 70%, var(--eduloo-modal-row-bg) 30% ) !important; color: var(--st-edit-quiz-muted) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; } body .st-study-modal--edit-quiz .st-modal-quiz-correct-btn { width: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 11px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; background: color-mix( in srgb, var(--eduloo-modal-button-bg) 84%, var(--eduloo-modal-row-bg) 16% ) !important; color: var(--st-edit-quiz-muted) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-correct-btn i { font-size: 15px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-correct-btn--active { border-color: var(--st-edit-quiz-type-border) !important; background: var(--st-edit-quiz-type-bg) !important; color: var(--st-edit-quiz-type-text) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-correct-btn--active i { color: var(--st-edit-quiz-type-text) !important; } body .st-study-modal--edit-quiz [data-edit-quiz-loading], body .st-study-modal--edit-quiz [data-edit-quiz-empty], body .st-study-modal--edit-quiz .st-modal-quiz-search-empty { margin: 0 !important; padding: 20px 16px !important; border-radius: 14px !important; border: 1px dashed color-mix(in srgb, var(--eduloo-modal-shell-border) 70%, transparent) !important; background: color-mix( in srgb, var(--eduloo-modal-row-bg) 84%, var(--eduloo-modal-panel-alt) 16% ) !important; color: var(--st-edit-quiz-muted) !important; font-size: 13px !important; line-height: 1.45 !important; font-weight: 600 !important; text-align: center !important; } body .st-study-modal--edit-quiz .st-modal-quiz-search-hit { background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 84%, var(--eduloo-modal-row-hover) 16% ) !important; color: inherit !important; border-radius: 5px !important; padding: 0 2px !important; font-weight: 700 !important; } body .st-study-modal--edit-quiz .st-modal-quiz-input--search-hit { border-color: var(--eduloo-modal-option-selected-border) !important; background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 58%, var(--eduloo-modal-input-bg) 42% ) !important; color: var(--eduloo-modal-text) !important; } body .st-study-modal--document-topics .st-topic-modal-split { display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } body .st-study-modal--document-topics .st-topic-list-panel { min-height: 0 !important; overflow: auto !important; padding-right: 6px !important; } body .st-study-modal--document-topics .st-topic-list-items { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; } body .st-study-modal--document-topics .st-topic-selected-chunks { max-height: 180px !important; overflow: auto !important; } body .st-study-modal--document-topics .st-topic-pdf-panel { min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } body .st-study-modal--document-topics .st-topic-pdf-viewport { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; } body .st-study-modal--document-topics .st-topic-text-preview { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 12px !important; gap: 12px !important; } body .st-study-modal--document-topics .st-topic-text-preview-header { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--on-surface-variant, #6e7191) !important; flex: 0 0 auto !important; } body .st-study-modal--document-topics .st-topic-text-preview-list { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding-right: 4px !important; } body .st-study-modal--document-topics .st-topic-text-preview-empty { margin: 0 !important; font-size: 13px !important; color: var(--on-surface-variant, #6e7191) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item { border-radius: 14px !important; padding: 12px 14px !important; background: var(--surface-container-lowest, #ffffff) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-surface, #1f1d2c) 8%, transparent) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; cursor: default !important; transition: box-shadow 120ms ease, background 120ms ease !important; } body .st-study-modal--document-topics .st-topic-text-preview-item[data-dt-text-preview-selectable='1'] { cursor: pointer !important; } body .st-study-modal--document-topics .st-topic-text-preview-item[data-dt-text-preview-selectable='1']:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #6366f1) 50%, transparent) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item.is-selected { background: color-mix( in srgb, var(--surface-container-lowest, #ffffff) 80%, var(--primary, #6366f1) 20% ) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary, #6366f1) 70%, transparent) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item.is-focused { box-shadow: 0 0 0 2px var(--primary, #6366f1), 0 8px 24px -8px color-mix(in srgb, var(--primary, #6366f1) 40%, transparent) !important; background: color-mix( in srgb, var(--surface-container-lowest, #ffffff) 72%, var(--primary, #6366f1) 28% ) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item.is-selected.is-focused { box-shadow: 0 0 0 2px var(--primary, #6366f1), inset 0 0 0 2px var(--primary, #6366f1), 0 8px 24px -8px color-mix(in srgb, var(--primary, #6366f1) 40%, transparent) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-title { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: color-mix( in srgb, var(--on-surface, #1f1d2c) 60%, transparent ) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-badge { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 2px 8px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--primary, #6366f1) 18%, transparent ) !important; color: var(--primary, #6366f1) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body { font-size: 14px !important; line-height: 1.55 !important; color: var(--on-surface, #1f1d2c) !important; word-break: break-word !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body > *:first-child { margin-top: 0 !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body > *:last-child { margin-bottom: 0 !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body p { margin: 0 0 8px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body h1, body .st-study-modal--document-topics .st-topic-text-preview-item-body h2, body .st-study-modal--document-topics .st-topic-text-preview-item-body h3, body .st-study-modal--document-topics .st-topic-text-preview-item-body h4, body .st-study-modal--document-topics .st-topic-text-preview-item-body h5, body .st-study-modal--document-topics .st-topic-text-preview-item-body h6 { margin: 10px 0 6px !important; font-weight: 700 !important; line-height: 1.3 !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body h1 { font-size: 18px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body h2 { font-size: 16px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body h3 { font-size: 15px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body h4, body .st-study-modal--document-topics .st-topic-text-preview-item-body h5, body .st-study-modal--document-topics .st-topic-text-preview-item-body h6 { font-size: 14px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body ul, body .st-study-modal--document-topics .st-topic-text-preview-item-body ol { margin: 0 0 8px !important; padding-left: 22px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body li { margin: 2px 0 !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body a { color: var(--primary, #6366f1) !important; text-decoration: underline !important; text-underline-offset: 2px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 0.9em !important; padding: 1px 5px !important; border-radius: 4px !important; background: color-mix( in srgb, var(--on-surface, #1f1d2c) 8%, transparent ) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body strong { font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body em { font-style: italic !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body blockquote { margin: 0 0 8px !important; padding: 4px 12px !important; border-left: 3px solid color-mix(in srgb, var(--primary, #6366f1) 50%, transparent) !important; background: color-mix( in srgb, var(--on-surface, #1f1d2c) 4%, transparent ) !important; font-style: italic !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body .st-topic-text-preview-table-wrap { width: 100% !important; max-width: 100% !important; margin: 0 0 8px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-surface, #1f1d2c) 8%, transparent) !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body table { width: max-content !important; min-width: 100% !important; margin: 0 !important; border-collapse: collapse !important; font-size: 13px !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body th, body .st-study-modal--document-topics .st-topic-text-preview-item-body td { padding: 4px 8px !important; border: 1px solid color-mix(in srgb, var(--on-surface, #1f1d2c) 12%, transparent) !important; text-align: left !important; vertical-align: top !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body th { background: color-mix( in srgb, var(--on-surface, #1f1d2c) 6%, transparent ) !important; font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-text-preview-item-body hr { border: none !important; border-top: 1px solid color-mix(in srgb, var(--on-surface, #1f1d2c) 12%, transparent) !important; margin: 10px 0 !important; } @media (max-width: 760px) { body .st-study-modal .modal-content { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 14px) !important; } body .st-study-modal .st-modal { border-radius: 24px !important; } body .st-study-modal .st-modal-header { padding: 16px 16px 12px !important; } body .st-study-modal .st-modal-header h2 { font-size: 24px !important; } body .st-study-modal .st-modal-body { padding: 4px 16px 14px !important; } body .st-study-modal--edit-quiz .st-modal-body { padding: 0 14px 14px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-list { margin-top: 8px !important; padding: 8px 4px 8px 4px !important; border-radius: 16px !important; max-height: calc(100vh - 336px) !important; gap: 10px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item { padding: 12px !important; border-radius: 14px !important; gap: 9px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-top { flex-wrap: wrap !important; gap: 10px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-summary { width: 100% !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-title { font-size: 14px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions { margin-left: auto !important; gap: 6px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .st-btn { width: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 10px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-answer-row--with-tab { grid-template-columns: 30px minmax(0, 1fr) auto !important; } body .st-study-modal--edit-quiz .st-modal-quiz-answer-tab { width: 30px !important; height: 30px !important; border-radius: 9px !important; font-size: 11px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-correct-btn { width: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 10px !important; } body .st-study-modal .button.button-secondary.st-btn { min-height: 42px !important; } body .st-study-modal .st-modal-footer, body .st-study-modal .modal-footer, body .st-study-modal .modal-actions { justify-content: stretch !important; gap: 8px !important; padding: 12px 16px 16px !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn, body .st-study-modal .modal-footer .st-modal-footer-btn, body .st-study-modal .modal-actions .st-modal-footer-btn, body .st-study-modal .st-modal-footer > .st-btn, body .st-study-modal .modal-footer > .st-btn, body .st-study-modal .modal-actions > .st-btn, body .st-study-modal .st-modal-footer > .button, body .st-study-modal .modal-footer > .button, body .st-study-modal .modal-actions > .button, body .st-study-modal .st-modal-footer > .btn, body .st-study-modal .modal-footer > .btn, body .st-study-modal .modal-actions > .btn, body .st-study-modal .st-modal-footer > button, body .st-study-modal .modal-footer > button, body .st-study-modal .modal-actions > button { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; } } body .st-study-modal .st-modal-footer, body .st-study-modal .modal-footer, body .st-study-modal .modal-actions { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 !important; height: auto !important; min-height: 0 !important; padding: 8px 22px 16px !important; background: transparent !important; border-top: none !important; } body .st-study-modal .modal-footer { display: none !important; } body .st-study-modal .modal-actions:not(.st-modal-footer) { display: none !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn, body .st-study-modal .modal-footer .st-modal-footer-btn, body .st-study-modal .modal-actions .st-modal-footer-btn, body .st-study-modal .st-modal-footer > .st-btn, body .st-study-modal .modal-footer > .st-btn, body .st-study-modal .modal-actions > .st-btn, body .st-study-modal .st-modal-footer > .button, body .st-study-modal .modal-footer > .button, body .st-study-modal .modal-actions > .button, body .st-study-modal .st-modal-footer > .btn, body .st-study-modal .modal-footer > .btn, body .st-study-modal .modal-actions > .btn, body .st-study-modal .st-modal-footer > button, body .st-study-modal .modal-footer > button, body .st-study-modal .modal-actions > button { min-height: 44px !important; min-width: 152px !important; margin: 0 !important; padding: 0 18px !important; border: none !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0.1px !important; text-transform: none !important; appearance: none !important; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn i, body .st-study-modal .modal-footer .st-modal-footer-btn i, body .st-study-modal .modal-actions .st-modal-footer-btn i { margin: 0 !important; font-size: 13px !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn:hover, body .st-study-modal .modal-footer .st-modal-footer-btn:hover, body .st-study-modal .modal-actions .st-modal-footer-btn:hover, body .st-study-modal .st-modal-footer > .st-btn:hover, body .st-study-modal .modal-footer > .st-btn:hover, body .st-study-modal .modal-actions > .st-btn:hover, body .st-study-modal .st-modal-footer > .button:hover, body .st-study-modal .modal-footer > .button:hover, body .st-study-modal .modal-actions > .button:hover, body .st-study-modal .st-modal-footer > .btn:hover, body .st-study-modal .modal-footer > .btn:hover, body .st-study-modal .modal-actions > .btn:hover, body .st-study-modal .st-modal-footer > button:hover, body .st-study-modal .modal-footer > button:hover, body .st-study-modal .modal-actions > button:hover { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 74%, transparent ) !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn:focus-visible, body .st-study-modal .modal-footer .st-modal-footer-btn:focus-visible, body .st-study-modal .modal-actions .st-modal-footer-btn:focus-visible, body .st-study-modal .st-modal-footer > .st-btn:focus-visible, body .st-study-modal .modal-footer > .st-btn:focus-visible, body .st-study-modal .modal-actions > .st-btn:focus-visible, body .st-study-modal .st-modal-footer > .button:focus-visible, body .st-study-modal .modal-footer > .button:focus-visible, body .st-study-modal .modal-actions > .button:focus-visible, body .st-study-modal .st-modal-footer > .btn:focus-visible, body .st-study-modal .modal-footer > .btn:focus-visible, body .st-study-modal .modal-actions > .btn:focus-visible, body .st-study-modal .st-modal-footer > button:focus-visible, body .st-study-modal .modal-footer > button:focus-visible, body .st-study-modal .modal-actions > button:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn.button-primary, body .st-study-modal .modal-footer .st-modal-footer-btn.button-primary, body .st-study-modal .modal-actions .st-modal-footer-btn.button-primary, body .st-study-modal .st-modal-footer > .button.button-primary.st-btn, body .st-study-modal .modal-footer > .button.button-primary.st-btn, body .st-study-modal .modal-actions > .button.button-primary.st-btn, body .st-study-modal .st-modal-footer > .button.button-primary, body .st-study-modal .modal-footer > .button.button-primary, body .st-study-modal .modal-actions > .button.button-primary, body .st-study-modal .st-modal-footer > .btn.btn-primary, body .st-study-modal .modal-footer > .btn.btn-primary, body .st-study-modal .modal-actions > .btn.btn-primary, body .st-study-modal .st-modal-footer .st-modal-footer-btn.btn-success, body .st-study-modal .modal-footer .st-modal-footer-btn.btn-success, body .st-study-modal .modal-actions .st-modal-footer-btn.btn-success, body .st-study-modal .st-modal-footer > .button.button-secondary.st-btn.btn-success, body .st-study-modal .modal-footer > .button.button-secondary.st-btn.btn-success, body .st-study-modal .modal-actions > .button.button-secondary.st-btn.btn-success { background: var(--eduloo-modal-button-primary) !important; color: var(--eduloo-modal-button-primary-text) !important; box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--primary) 52%, transparent) !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn.button-primary:hover, body .st-study-modal .modal-footer .st-modal-footer-btn.button-primary:hover, body .st-study-modal .modal-actions .st-modal-footer-btn.button-primary:hover, body .st-study-modal .st-modal-footer > .button.button-primary.st-btn:hover, body .st-study-modal .modal-footer > .button.button-primary.st-btn:hover, body .st-study-modal .modal-actions > .button.button-primary.st-btn:hover, body .st-study-modal .st-modal-footer > .button.button-primary:hover, body .st-study-modal .modal-footer > .button.button-primary:hover, body .st-study-modal .modal-actions > .button.button-primary:hover, body .st-study-modal .st-modal-footer > .btn.btn-primary:hover, body .st-study-modal .modal-footer > .btn.btn-primary:hover, body .st-study-modal .modal-actions > .btn.btn-primary:hover, body .st-study-modal .st-modal-footer .st-modal-footer-btn.btn-success:hover, body .st-study-modal .modal-footer .st-modal-footer-btn.btn-success:hover, body .st-study-modal .modal-actions .st-modal-footer-btn.btn-success:hover, body .st-study-modal .st-modal-footer > .button.button-secondary.st-btn.btn-success:hover, body .st-study-modal .modal-footer > .button.button-secondary.st-btn.btn-success:hover, body .st-study-modal .modal-actions > .button.button-secondary.st-btn.btn-success:hover { background: var(--eduloo-modal-button-primary-hover) !important; color: var(--eduloo-modal-button-primary-text) !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn.st-btn--danger, body .st-study-modal .modal-footer .st-modal-footer-btn.st-btn--danger, body .st-study-modal .modal-actions .st-modal-footer-btn.st-btn--danger, body .st-study-modal .st-modal-footer > .st-btn.st-btn--danger, body .st-study-modal .modal-footer > .st-btn.st-btn--danger, body .st-study-modal .modal-actions > .st-btn.st-btn--danger, body .st-study-modal .st-modal-footer > .button.button-danger, body .st-study-modal .modal-footer > .button.button-danger, body .st-study-modal .modal-actions > .button.button-danger, body .st-study-modal .st-modal-footer > .btn.btn-danger, body .st-study-modal .modal-footer > .btn.btn-danger, body .st-study-modal .modal-actions > .btn.btn-danger { background: var(--eduloo-modal-danger-bg) !important; color: var(--eduloo-modal-danger-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 34%, transparent) !important; } body .st-study-modal .st-modal-footer .st-modal-footer-btn:disabled, body .st-study-modal .modal-footer .st-modal-footer-btn:disabled, body .st-study-modal .modal-actions .st-modal-footer-btn:disabled, body .st-study-modal .st-modal-footer > .st-btn:disabled, body .st-study-modal .modal-footer > .st-btn:disabled, body .st-study-modal .modal-actions > .st-btn:disabled, body .st-study-modal .st-modal-footer > .button:disabled, body .st-study-modal .modal-footer > .button:disabled, body .st-study-modal .modal-actions > .button:disabled, body .st-study-modal .st-modal-footer > .btn:disabled, body .st-study-modal .modal-footer > .btn:disabled, body .st-study-modal .modal-actions > .btn:disabled, body .st-study-modal .st-modal-footer > button:disabled, body .st-study-modal .modal-footer > button:disabled, body .st-study-modal .modal-actions > button:disabled { opacity: 0.52 !important; cursor: not-allowed !important; transform: none !important; } body .st-study-modal--pomodoro .modal-content { width: min(760px, calc(100vw - 28px)) !important; max-width: min(760px, calc(100vw - 28px)) !important; } body .st-study-modal--pomodoro .st-modal { border-radius: 28px !important; background: radial-gradient( 160% 95% at 0% 0%, color-mix(in srgb, var(--primary-container) 30%, transparent) 0%, transparent 52% ), radial-gradient( 130% 100% at 100% 100%, color-mix(in srgb, var(--secondary-container) 22%, transparent) 0%, transparent 62% ), var(--eduloo-modal-shell-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 84%, transparent), var(--eduloo-modal-shadow) !important; } body .st-study-modal--pomodoro .st-modal-header { align-items: flex-start !important; gap: 16px !important; padding: 22px 22px 14px !important; } body .st-study-modal--pomodoro .st-pomodoro-header-copy { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 7px !important; } body .st-study-modal--pomodoro .st-modal-header h2 { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; font-size: 31px !important; line-height: 1.14 !important; letter-spacing: -0.5px !important; } body .st-study-modal--pomodoro .st-pomodoro-title-icon { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 68%, transparent ) !important; color: color-mix( in srgb, var(--primary) 72%, var(--on-surface) 28% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 78%, transparent ) !important; } body .st-study-modal--pomodoro .st-pomodoro-title-icon i { margin: 0 !important; font-size: 14px !important; } body .st-study-modal--pomodoro .st-pomodoro-header-subtitle { margin: 0 !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--eduloo-modal-muted) !important; } body .st-study-modal--pomodoro .st-modal-body.st-pomodoro-top { padding: 10px 22px 20px !important; gap: 14px !important; } body .st-study-modal--pomodoro .st-pomodoro-display { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 20px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 76%, transparent) !important; background: linear-gradient( 138deg, color-mix(in srgb, var(--eduloo-modal-panel-bg) 88%, transparent) 0%, color-mix(in srgb, var(--eduloo-modal-panel-alt) 58%, transparent) 100% ) !important; padding: 16px 16px 18px !important; } body .st-study-modal--pomodoro .st-pomodoro-session { margin: 0 !important; padding: 4px 10px !important; border-radius: 999px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0.4px !important; text-transform: uppercase !important; color: color-mix( in srgb, var(--eduloo-modal-button-primary) 78%, var(--eduloo-modal-title) 22% ) !important; background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 84%, transparent ) !important; } body .st-study-modal--pomodoro .st-pomodoro-clock-shell { width: 100% !important; border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 70%, transparent) !important; background: color-mix( in srgb, var(--eduloo-modal-input-bg) 88%, transparent ) !important; padding: 14px 14px !important; } body .st-study-modal--pomodoro .st-pomodoro-display h3 { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 82px !important; line-height: 0.95 !important; font-weight: 800 !important; letter-spacing: -1.6px !important; text-align: center !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal--pomodoro .st-pomodoro-next { margin: 0 !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 700 !important; color: var(--eduloo-modal-muted) !important; } body .st-study-modal--pomodoro .st-pomodoro-settings-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } body .st-study-modal--pomodoro .st-pomodoro-setting { --st-pomodoro-control-height: 44px; min-height: 110px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; border-radius: 18px !important; background: linear-gradient( 142deg, color-mix(in srgb, var(--eduloo-modal-row-bg) 90%, transparent) 0%, color-mix(in srgb, var(--eduloo-modal-panel-alt) 60%, transparent) 100% ) !important; padding: 14px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } body .st-study-modal--pomodoro .st-pomodoro-setting-head { display: inline-flex !important; align-items: center !important; gap: 8px !important; } body .st-study-modal--pomodoro .st-pomodoro-setting-head i { width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; font-size: 12px !important; background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 72%, transparent ) !important; color: color-mix( in srgb, var(--eduloo-modal-button-primary) 80%, var(--eduloo-modal-title) 20% ) !important; } body .st-study-modal--pomodoro .st-pomodoro-setting label { margin: 0 !important; font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0.28px !important; text-transform: uppercase !important; color: var(--eduloo-modal-muted) !important; } body .st-study-modal--pomodoro .st-pomodoro-setting--active { background: linear-gradient( 142deg, color-mix( in srgb, var(--primary-container) 20%, var(--eduloo-modal-row-bg) 80% ) 0%, color-mix( in srgb, var(--primary-container) 13%, var(--eduloo-modal-panel-alt) 87% ) 100% ) !important; border-color: color-mix( in srgb, var(--primary-container) 54%, var(--eduloo-modal-shell-border) 46% ) !important; } body .st-study-modal--pomodoro .st-pomodoro-setting--break { background: linear-gradient( 142deg, color-mix( in srgb, var(--secondary-container) 20%, var(--eduloo-modal-row-bg) 80% ) 0%, color-mix( in srgb, var(--secondary-container) 13%, var(--eduloo-modal-panel-alt) 87% ) 100% ) !important; border-color: color-mix( in srgb, var(--secondary-container) 52%, var(--eduloo-modal-shell-border) 48% ) !important; } body .st-study-modal--pomodoro .st-pomodoro-setting--current { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent), 0 18px 28px -24px color-mix(in srgb, var(--primary) 48%, transparent) !important; } body .st-study-modal--pomodoro .st-pomodoro-stepper { width: 100% !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; } body .st-study-modal--pomodoro .st-pomodoro-step-btn { width: var(--st-pomodoro-control-height) !important; min-width: var(--st-pomodoro-control-height) !important; height: var(--st-pomodoro-control-height) !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 76%, transparent) !important; background: color-mix( in srgb, var(--eduloo-modal-input-bg) 84%, transparent ) !important; color: var(--eduloo-modal-button-text) !important; box-shadow: none !important; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important; } body .st-study-modal--pomodoro .st-pomodoro-step-btn:hover, body .st-study-modal--pomodoro .st-pomodoro-step-btn:focus-visible { border-color: color-mix( in srgb, var(--eduloo-modal-option-selected-border) 74%, transparent ) !important; background: color-mix( in srgb, var(--eduloo-modal-row-hover) 70%, transparent ) !important; color: var(--eduloo-modal-button-strong) !important; transform: translateY(-1px) !important; } body .st-study-modal--pomodoro .st-pomodoro-step-btn i { margin: 0 !important; font-size: 11px !important; } body .st-study-modal--pomodoro .st-pomodoro-value { min-height: var(--st-pomodoro-control-height) !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 70%, transparent) !important; background: color-mix( in srgb, var(--eduloo-modal-input-bg) 90%, transparent ) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal--pomodoro .st-pomodoro-sessions-select, body .st-study-modal--pomodoro .st-pomodoro-sessions-select .custom-dropdown { width: 100% !important; } body .st-study-modal--pomodoro .st-pomodoro-sessions-select .custom-dropdown-trigger { min-height: var(--st-pomodoro-control-height) !important; height: var(--st-pomodoro-control-height) !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; background: color-mix( in srgb, var(--eduloo-modal-input-bg) 90%, transparent ) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; color: var(--eduloo-modal-text) !important; padding: 0 12px !important; } body .st-study-modal--pomodoro .st-pomodoro-footer { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 8px 22px 20px !important; } body .st-study-modal--pomodoro .st-pomodoro-footer .st-modal-footer-btn { min-width: 0 !important; min-height: 48px !important; width: 100% !important; border-radius: 14px !important; font-size: 14px !important; line-height: 1.25 !important; } body .st-study-modal--pomodoro .st-pomodoro-footer-btn--reset, body .st-study-modal--pomodoro .st-pomodoro-footer-btn--skip { width: auto !important; min-width: 102px !important; padding: 0 14px !important; gap: 8px !important; font-size: 13px !important; } body .st-study-modal--pomodoro .st-pomodoro-footer-btn--start { min-width: 0 !important; } body .st-study-modal--pomodoro .st-pomodoro-footer-btn i { margin: 0 !important; font-size: 12px !important; } body .st-study-modal--pomodoro .st-pomodoro-footer-btn span { white-space: nowrap !important; } @media (max-width: 720px) { body .st-study-modal--pomodoro .modal-content { width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; max-height: calc(100dvh - 10px) !important; } body .st-study-modal--pomodoro .st-modal { border-radius: 22px !important; } body .st-study-modal--pomodoro .st-modal-header { gap: 10px !important; padding: 16px 16px 10px !important; } body .st-study-modal--pomodoro .st-modal-header h2 { font-size: 24px !important; line-height: 1.2 !important; } body .st-study-modal--pomodoro .st-pomodoro-title-icon { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; } body .st-study-modal--pomodoro .st-pomodoro-header-subtitle { font-size: 13px !important; } body .st-study-modal--pomodoro .st-modal-body.st-pomodoro-top { padding: 8px 16px 14px !important; gap: 10px !important; } body .st-study-modal--pomodoro .st-pomodoro-display { border-radius: 16px !important; padding: 12px 12px 14px !important; gap: 8px !important; } body .st-study-modal--pomodoro .st-pomodoro-session { font-size: 11px !important; } body .st-study-modal--pomodoro .st-pomodoro-clock-shell { border-radius: 14px !important; padding: 10px 10px !important; } body .st-study-modal--pomodoro .st-pomodoro-display h3 { font-size: 68px !important; } body .st-study-modal--pomodoro .st-pomodoro-next { font-size: 13px !important; } body .st-study-modal--pomodoro .st-pomodoro-settings-grid { grid-template-columns: 1fr !important; gap: 8px !important; } body .st-study-modal--pomodoro .st-pomodoro-setting { min-height: 0 !important; --st-pomodoro-control-height: 42px; border-radius: 16px !important; padding: 12px !important; gap: 10px !important; } body .st-study-modal--pomodoro .st-pomodoro-footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px 16px 16px !important; } body .st-study-modal--pomodoro .st-pomodoro-footer-btn--start { grid-column: 1 / -1 !important; } body .st-study-modal--pomodoro .st-pomodoro-footer-btn--reset, body .st-study-modal--pomodoro .st-pomodoro-footer-btn--skip { width: 100% !important; min-width: 0 !important; justify-content: center !important; } } @media (max-width: 420px) { body .st-study-modal--pomodoro .st-pomodoro-setting-head { gap: 6px !important; } body .st-study-modal--pomodoro .st-pomodoro-value { font-size: 15px !important; } body .st-study-modal--pomodoro .st-pomodoro-display h3 { font-size: 56px !important; } body .st-study-modal--pomodoro .st-pomodoro-footer .st-modal-footer-btn { min-height: 46px !important; font-size: 13px !important; } } body .st-study-modal--document-topics .st-modal-footer, body .st-study-modal--document-topics .modal-footer, body .st-study-modal--document-topics .modal-actions { padding: 8px 14px 14px !important; } body .st-study-modal--edit-quiz .st-modal-footer, body .st-study-modal--edit-quiz .modal-footer, body .st-study-modal--edit-quiz .modal-actions { padding: 8px 16px 16px !important; } body .st-study-modal--workspace-manage { background: var(--eduloo-modal-overlay) !important; backdrop-filter: blur(14px) saturate(120%) !important; -webkit-backdrop-filter: blur(14px) saturate(120%) !important; } body .st-study-modal--workspace-manage .modal-content { width: min(1020px, calc(100vw - 34px)) !important; max-width: min(1020px, calc(100vw - 34px)) !important; max-height: calc(100vh - 34px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: transparent !important; border: none !important; box-shadow: none !important; } body .st-study-modal--workspace-manage .modal-body { padding: 0 !important; display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } body .st-study-modal--workspace-manage .st-study-modal-body { width: 100% !important; display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } body .st-study-modal--workspace-manage .st-modal { margin: 0 !important; width: 100% !important; max-height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; border: none !important; border-radius: 32px !important; overflow: hidden !important; background: var(--eduloo-modal-shell-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-shell-border), var(--eduloo-modal-shadow) !important; gap: 0 !important; } body .st-study-modal--workspace-manage .st-modal-header { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 24px 24px 18px !important; background: var(--eduloo-modal-header-bg) !important; } body .st-study-modal--workspace-manage .st-modal-header h2 { margin: 0 !important; padding: 0 0 3px !important; border: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 30px !important; line-height: 1.28 !important; font-weight: 800 !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal--workspace-manage .st-modal-header .st-btn.st-btn--only-icon { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border: none !important; border-radius: 999px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 220ms ease, color 220ms ease, transform 220ms ease !important; } body .st-study-modal--workspace-manage .st-modal-header .st-btn.st-btn--only-icon:hover { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; transform: translateY(-1px) !important; } body .st-study-modal--workspace-manage .st-modal-header .st-btn.st-btn--only-icon i { margin: 0 !important; font-size: 14px !important; } body .st-study-modal--workspace-manage .st-modal-body { display: grid !important; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; align-items: stretch !important; gap: 18px !important; padding: 8px 24px 22px !important; background: transparent !important; } body .st-study-modal--workspace-manage .st-modal-body > .st-panel-box { min-height: 0 !important; } body .st-study-modal--workspace-manage .st-modal-body > .st-panel-box:first-child { overflow: auto !important; } body .st-study-modal--workspace-manage .st-modal-form-group { gap: 10px !important; } body .st-study-modal--workspace-manage .st-panel-box { border: none !important; border-radius: 30px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 86%, transparent), var(--eduloo-modal-panel-shadow) !important; padding: 20px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } body .st-study-modal--workspace-manage [data-workspace-manage-subjects-panel] { background: var(--eduloo-modal-panel-alt) !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } body .st-study-modal--workspace-manage .st-modal-form-group label, body .st-study-modal--workspace-manage .st-workspace-manage-subjects-title { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 800 !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal--workspace-manage .st-modal-inline-row, body .st-study-modal--workspace-manage [data-workspace-manage-workspace-row] { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px 44px !important; align-items: center !important; gap: 8px !important; margin-top: 0 !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select { width: 100% !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select select, body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-trigger, body .st-study-modal--workspace-manage .st-modal-create-editor input, body .st-study-modal--workspace-manage .st-workspace-manage-subject-search input { width: 100% !important; min-height: 44px !important; height: 44px !important; margin: 0 !important; border: none !important; border-radius: 16px !important; background: var(--eduloo-modal-input-bg) !important; color: var(--eduloo-modal-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 40%, transparent) !important; padding: 0 14px !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; transition: box-shadow 220ms ease, background 220ms ease, transform 220ms ease !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-trigger { padding-right: 34px !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-panel { border: none !important; border-radius: 16px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: var(--eduloo-modal-panel-shadow) !important; padding: 6px !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-option { min-height: 36px !important; border-radius: 12px !important; background: transparent !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; font-weight: 600 !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-option:hover:not(.disabled), body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-option.focused:not(.disabled) { background: var(--eduloo-modal-row-hover) !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-option.selected:not(.disabled) { background: var(--eduloo-modal-option-selected-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-option-selected-border) !important; color: var(--eduloo-modal-option-selected-text) !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select select:focus, body .st-study-modal--workspace-manage .st-panel-workspace-select select:focus-visible, body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-trigger:focus, body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-trigger:focus-visible, body .st-study-modal--workspace-manage .st-modal-create-editor input:focus, body .st-study-modal--workspace-manage .st-modal-create-editor input:focus-visible, body .st-study-modal--workspace-manage .st-workspace-manage-subject-search input:focus, body .st-study-modal--workspace-manage .st-workspace-manage-subject-search input:focus-visible { outline: none !important; background: var(--eduloo-modal-input-focus-bg) !important; box-shadow: 0 0 0 3px var(--eduloo-modal-focus) !important; transform: translateY(-1px) !important; } body .st-study-modal--workspace-manage .st-btn { border: none !important; box-shadow: none !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn { min-height: 44px !important; border-radius: 999px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn:hover, body .st-study-modal--workspace-manage .button.button-secondary.st-btn:focus-visible { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; transform: translateY(-1px) !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn:active { transform: translateY(0) scale(0.99) !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn:disabled { opacity: 0.52 !important; cursor: not-allowed !important; transform: none !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn.btn-success { background: var(--eduloo-modal-button-primary) !important; color: var(--eduloo-modal-button-primary-text) !important; box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--primary) 58%, transparent) !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn.btn-success:hover, body .st-study-modal--workspace-manage .button.button-secondary.st-btn.btn-success:focus-visible { filter: saturate(1.04) !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn.st-btn--danger { background: var(--eduloo-modal-danger-bg) !important; color: var(--eduloo-modal-danger-text) !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn.st-btn--only-icon { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; gap: 0 !important; color: #fdd6d6 !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn i { margin: 0 !important; font-size: 13px !important; } body .st-study-modal--workspace-manage .st-modal-create-inline { margin-top: 6px !important; } body .st-study-modal--workspace-manage .st-modal-create-inline > .button.button-secondary.st-btn { width: fit-content !important; padding: 0 16px !important; } body .st-study-modal--workspace-manage .st-modal-create-editor { display: none !important; width: 100%; align-items: center; grid-template-columns: minmax(0, 1fr) 44px 44px !important; gap: 9px !important; margin-top: 9px !important; } body .st-study-modal--workspace-manage .st-modal-rename-editor { display: none !important; } body .st-study-modal--workspace-manage .st-modal-create-inline.is-creating > [data-workspace-manage-create-trigger] { display: none; } body .st-study-modal--workspace-manage .st-modal-create-inline.is-creating .st-modal-create-editor { display: grid !important; } body .st-study-modal--workspace-manage [data-workspace-manage-workspace-panel].is-renaming-workspace > [data-workspace-manage-workspace-row] { display: none; } body .st-study-modal--workspace-manage [data-workspace-manage-workspace-panel].is-renaming-workspace > [data-workspace-manage-create='workspace'] { display: none; } body .st-study-modal--workspace-manage [data-workspace-manage-workspace-panel].is-renaming-workspace > [data-workspace-manage-workspace-rename-editor] { display: grid !important; } body .st-study-modal--workspace-manage .st-workspace-manage-demo-controls { margin-top: 10px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important; border-radius: 18px !important; background: color-mix( in srgb, var(--eduloo-modal-row-bg) 86%, var(--eduloo-modal-panel-alt) 14% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 76%, transparent), 0 16px 28px -24px color-mix(in srgb, var(--on-surface) 48%, transparent) !important; } body .st-study-modal--workspace-manage .st-demo-toggle-row { margin: 0 !important; width: 100% !important; min-height: 44px !important; padding: 10px 12px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; gap: 10px !important; background: var(--eduloo-modal-row-alt-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; cursor: pointer !important; transition: background 220ms ease, box-shadow 220ms ease, color 220ms ease !important; } body .st-study-modal--workspace-manage .st-demo-toggle-row:hover { background: var(--eduloo-modal-row-hover) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 68%, transparent ) !important; } body .st-study-modal--workspace-manage .st-demo-toggle-row:has(input[type='checkbox']:checked) { background: var(--eduloo-modal-option-selected-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-option-selected-border) !important; color: var(--eduloo-modal-option-selected-text) !important; } body .st-study-modal--workspace-manage .st-demo-toggle-row input[type='checkbox'] { flex: 0 0 auto !important; } body .st-study-modal--workspace-manage .st-demo-toggle-row span { flex: 1 1 auto !important; } body .st-study-modal--workspace-manage .st-demo-toggle-hint { margin: 0 !important; padding: 8px 10px !important; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--eduloo-modal-row-alt-bg) !important; color: var(--eduloo-modal-muted) !important; font-size: 12px !important; line-height: 1.45 !important; } body .st-study-modal--workspace-manage .st-demo-toggle-hint .icon { margin: 0 !important; font-size: 12px !important; color: var(--primary) !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subjects-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important; align-items: center !important; gap: 10px !important; margin: 0 0 10px !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-search { position: relative !important; width: 100% !important; margin: 0 !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-search i { position: absolute !important; left: 13px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; font-size: 13px !important; color: var(--eduloo-modal-muted) !important; pointer-events: none !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-search input { padding-left: 37px !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-table { border: none !important; border-radius: 0px !important; background: transparent !important; overflow: hidden !important; flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-table-head { display: grid !important; grid-template-columns: minmax(0, 1fr) 132px !important; align-items: center !important; gap: 12px !important; padding: 0 2px !important; margin-bottom: 8px !important; background: transparent !important; border: none !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.42px !important; text-transform: uppercase !important; color: var(--eduloo-modal-muted) !important; flex: 0 0 auto !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-table-head > span:last-child { text-align: center !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-table-body { display: flex !important; flex-direction: column !important; gap: 8px !important; max-height: none !important; min-height: 230px !important; height: 100% !important; overflow: auto !important; padding-right: 3px !important; flex: 1 1 auto !important; } body .st-study-modal--workspace-manage .st-modal-subject-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 132px !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 58px !important; padding: 11px 12px !important; border: none !important; border-radius: 20px !important; background: var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; transition: background 220ms ease, transform 220ms ease !important; } body .st-study-modal--workspace-manage .st-modal-subject-row:nth-child(even) { background: var(--eduloo-modal-row-alt-bg) !important; } body .st-study-modal--workspace-manage .st-modal-subject-row:hover { background: var(--eduloo-modal-row-hover) !important; transform: translateY(-1px) !important; } body .st-study-modal--workspace-manage .st-modal-subject-row[hidden] { display: none !important; } body .st-study-modal--workspace-manage .st-modal-subject-cell { min-width: 0 !important; } body .st-study-modal--workspace-manage .st-modal-subject-cell--name { font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 700 !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal--workspace-manage .st-modal-subject-cell--name span { display: block !important; width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body .st-study-modal--workspace-manage .st-modal-subject-actions { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-action-btn { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; gap: 0 !important; } body .st-study-modal--workspace-manage .st-modal-subject-editor { display: none !important; grid-column: 1 / -1 !important; grid-template-columns: minmax(0, 1fr) 44px 44px !important; gap: 9px !important; margin-top: 1px !important; } body .st-study-modal--workspace-manage .st-modal-subject-row.is-renaming { grid-template-columns: 1fr !important; padding: 10px !important; } body .st-study-modal--workspace-manage .st-modal-subject-row.is-renaming > .st-modal-subject-cell, body .st-study-modal--workspace-manage .st-modal-subject-row.is-renaming > .st-modal-subject-actions { display: none !important; } body .st-study-modal--workspace-manage .st-modal-subject-row.is-renaming .st-modal-subject-editor { display: grid !important; } body .st-study-modal--workspace-manage [hidden] { display: none !important; } body .st-study-modal--workspace-manage .st-modal-subject-row--empty { grid-template-columns: 1fr !important; justify-items: center !important; text-align: center !important; color: var(--eduloo-modal-muted) !important; font-size: 13px !important; font-weight: 700 !important; } body .st-study-modal--workspace-manage [data-workspace-manage-subjects-panel].is-renaming-subject > [data-workspace-manage-create='subject'] { display: none !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-create { margin-top: 11px !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-create > .button.button-secondary.st-btn { width: fit-content !important; min-height: 44px !important; padding: 0 16px !important; } @media (max-width: 1080px) { body .st-study-modal--workspace-manage .modal-content { width: min(980px, calc(100vw - 30px)) !important; max-width: min(980px, calc(100vw - 30px)) !important; } body .st-study-modal--workspace-manage .st-modal-body { grid-template-columns: 1fr !important; gap: 14px !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-table-body { min-height: 0 !important; max-height: 300px !important; } } @media (max-width: 760px) { body .st-study-modal--workspace-manage .modal-content { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; max-height: calc(100vh - 18px) !important; } body .st-study-modal--workspace-manage .st-modal { border-radius: 24px !important; } body .st-study-modal--workspace-manage .st-modal-header { padding: 18px 16px 14px !important; } body .st-study-modal--workspace-manage .st-modal-header h2 { font-size: 24px !important; } body .st-study-modal--workspace-manage .st-modal-body { padding: 2px 16px 14px !important; gap: 12px !important; } body .st-study-modal--workspace-manage .st-panel-box { border-radius: 24px !important; padding: 14px !important; gap: 9px !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subjects-toolbar { grid-template-columns: 1fr !important; gap: 10px !important; } body .st-study-modal--workspace-manage .st-workspace-manage-subject-table-head { display: none !important; } body .st-study-modal--workspace-manage .st-modal-subject-row { grid-template-columns: 1fr !important; gap: 10px !important; padding: 12px !important; } body .st-study-modal--workspace-manage .st-modal-subject-actions { justify-content: flex-start !important; } body .st-study-modal--workspace-manage .st-modal-create-inline > .button.button-secondary.st-btn, body .st-study-modal--workspace-manage .st-workspace-manage-subject-create > .button.button-secondary.st-btn { width: 100% !important; } } @media (prefers-reduced-motion: reduce) { body .st-study-modal--workspace-manage .st-btn, body .st-study-modal--workspace-manage .st-modal-subject-row, body .st-study-modal--workspace-manage .st-modal-create-editor input, body .st-study-modal--workspace-manage .st-workspace-manage-subject-search input, body .st-study-modal--workspace-manage .st-panel-workspace-select select, body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-trigger { transition: none !important; } } body .st-study-modal:not(.st-study-modal--document-topics):not( .st-study-modal--edit-quiz ):not(.st-study-modal--workspace-manage) .st-modal-body { padding: 12px 22px 20px !important; gap: 14px !important; } body .st-study-modal:not(.st-study-modal--document-topics):not( .st-study-modal--edit-quiz ):not(.st-study-modal--workspace-manage) .st-modal-form-group { padding: 12px !important; border-radius: 18px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 76%, transparent) !important; gap: 8px !important; } body .st-study-modal .base-multi-select-button-group-wrap { border-radius: 16px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; padding: 6px !important; } body .st-study-modal .base-multi-select-button-group { gap: 6px !important; } body .st-study-modal .base-multi-select-button-group .base-multi-select-button-group__btn { min-height: 42px !important; border: none !important; border-radius: 12px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; } body .st-study-modal .base-multi-select-button-group .base-multi-select-button-group__btn--active { background: var(--eduloo-modal-option-selected-bg) !important; color: var(--eduloo-modal-option-selected-text) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-option-selected-border) !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row { align-items: stretch !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; padding: 6px !important; border-radius: 18px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .st-topic-select-row__select, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-trigger { min-height: 44px !important; border-radius: 12px !important; border: none !important; background: var(--eduloo-modal-input-bg) !important; color: var(--eduloo-modal-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 42%, transparent), 0 10px 16px -14px color-mix(in srgb, var(--on-surface) 48%, transparent) !important; padding: 0 14px !important; transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown.open .custom-dropdown-trigger, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-trigger:focus, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-trigger:focus-visible { background: var(--eduloo-modal-input-focus-bg) !important; box-shadow: 0 0 0 3px var(--eduloo-modal-focus), inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 70%, transparent ) !important; transform: none !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel { margin-top: 4px !important; border-radius: 14px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 78%, transparent), 0 22px 30px -24px color-mix(in srgb, var(--on-surface) 62%, transparent) !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel.is-open.attach-bottom { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; transform-origin: top center; animation: st-topic-dropdown-panel-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } body .st-topic-select-dropdown-panel .custom-dropdown-search, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search { width: 100% !important; } body .st-topic-select-dropdown-panel .custom-dropdown-search .search-field, body .st-topic-select-dropdown-panel .custom-dropdown-search .st-search-field, body .st-topic-select-dropdown-panel .custom-dropdown-search > *, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search .search-field, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search .st-search-field, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search > * { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; flex: 1 1 auto !important; } body .st-topic-select-dropdown-panel .custom-dropdown-search .search-field__input, body .st-topic-select-dropdown-panel .custom-dropdown-search .st-search-field input, body .st-topic-select-dropdown-panel .custom-dropdown-search .search-field input, body .st-topic-select-dropdown-panel .custom-dropdown-search input[type='search'], body .st-topic-select-dropdown-panel .custom-dropdown-search input[type='text'], body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search .search-field__input, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search .st-search-field input, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search .search-field input, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search input[type='search'], body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel .custom-dropdown-search input[type='text'] { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; display: block !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel.is-open.attach-bottom .custom-dropdown-options { padding: 6px !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle { flex: 0 0 auto !important; min-width: 132px !important; margin: 0 !important; padding: 0 14px !important; min-height: 44px !important; border: none !important; border-radius: 12px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 78%, transparent), 0 10px 16px -14px color-mix(in srgb, var(--on-surface) 44%, transparent) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; gap: 8px !important; white-space: nowrap !important; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle:hover { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; transform: translateY(-1px) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 56%, transparent ), 0 12px 18px -14px color-mix(in srgb, var(--on-surface) 52%, transparent) !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--eduloo-modal-focus), inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 70%, transparent ) !important; transform: none !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle[aria-pressed='true'] { background: var(--eduloo-modal-option-selected-bg) !important; color: var(--eduloo-modal-option-selected-text) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-option-selected-border), 0 12px 18px -14px color-mix(in srgb, var(--on-surface) 50%, transparent) !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle .st-topic-select-all-toggle__icon { display: inline-flex !important; margin: 0 !important; min-width: 14px !important; font-size: 14px !important; line-height: 1 !important; text-align: center !important; color: currentColor !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle .st-topic-select-all-toggle__icon--on { display: none !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle[aria-pressed='true'] .st-topic-select-all-toggle__icon--on { display: inline-flex !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle[aria-pressed='true'] .st-topic-select-all-toggle__icon--off { display: none !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle .st-topic-select-all-toggle__label { margin: 0 !important; line-height: 1.1 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1px !important; } body .st-study-modal .st-create-podcast-modal-body { --st-create-podcast-section-gap: 16px; gap: var(--st-create-podcast-section-gap) !important; } body .st-study-modal .st-create-podcast-modal-body .st-modal-tab-panel { gap: var(--st-create-podcast-section-gap) !important; margin-top: 2px; } body .st-study-modal .st-create-podcast-modal-body > .st-modal-form-group, body .st-study-modal .st-create-podcast-modal-body .st-modal-tab-panel > .st-modal-form-group { margin: 6px 0 !important; } @keyframes st-topic-dropdown-panel-in { from { opacity: 0; transform: translateY(-4px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-panel.is-open.attach-bottom { animation: none !important; } } @media (max-width: 640px) { body .st-study-modal .st-create-podcast-modal-body { --st-create-podcast-section-gap: 14px; } body .st-study-modal .st-create-podcast-modal-body > .st-modal-form-group, body .st-study-modal .st-create-podcast-modal-body .st-modal-tab-panel > .st-modal-form-group { margin: 4px 0 !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row { flex-wrap: wrap !important; gap: 8px !important; padding: 8px !important; border-radius: 14px !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .st-topic-select-row__select, body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown { flex-basis: 100% !important; width: 100% !important; } body .st-study-modal .st-modal-inline-row.st-topic-select-row .custom-dropdown-trigger { min-height: 42px !important; border-radius: 10px !important; } body .st-study-modal .button.button-secondary.st-btn.st-topic-select-all-toggle { width: 100% !important; min-width: 0 !important; min-height: 40px !important; border-radius: 10px !important; justify-content: center !important; padding: 0 12px !important; } } body .st-study-modal--document-topics .modal-content { width: min(1360px, calc(100vw - 20px)) !important; max-width: min(1360px, calc(100vw - 20px)) !important; height: min(92vh, calc(100vh - 20px)) !important; max-height: calc(100vh - 20px) !important; } body .st-study-modal--document-topics .st-modal { border-radius: 28px !important; } body .st-study-modal--document-topics .st-modal-header { padding: 18px 20px 12px !important; border-bottom: none !important; } body .st-study-modal--document-topics .st-modal-header h2 { font-size: 36px !important; line-height: 1.22 !important; max-width: calc(100% - 60px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body .st-study-modal--document-topics .st-modal-header .st-btn.st-btn--only-icon { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } body .st-study-modal--document-topics .st-modal-body { padding: 8px 14px 14px !important; } body .st-study-modal--document-topics .st-topic-modal-split { display: grid !important; grid-template-columns: 352px minmax(0, 1fr) !important; gap: 12px !important; height: 100% !important; } body .st-study-modal--document-topics .st-topic-list-panel { min-width: 0 !important; max-width: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important; border-radius: 22px !important; background: var(--eduloo-modal-panel-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 80%, transparent) !important; overflow: hidden !important; } body .st-study-modal--document-topics .st-topic-list-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } body .st-study-modal--document-topics .st-topic-list-actions > .st-btn { min-height: 44px !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 800 !important; padding: 0 12px !important; justify-content: center !important; } body .st-study-modal--document-topics .st-topic-list-actions > [data-dt-create-topic] { background: var(--eduloo-modal-button-primary) !important; color: var(--eduloo-modal-button-primary-text) !important; box-shadow: 0 14px 24px -20px color-mix(in srgb, var(--primary) 54%, transparent) !important; } body .st-study-modal--document-topics .st-topic-list-actions > [data-dt-create-topic]:hover { background: var(--eduloo-modal-button-primary-hover) !important; } body .st-study-modal--document-topics .st-topic-list-actions > [data-dt-generate-topics] { background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-strong) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 74%, transparent) !important; } body .st-study-modal--document-topics .st-topic-list-items { margin: 0 !important; padding: 10px !important; border-radius: 16px !important; background: var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 74%, transparent) !important; gap: 0 !important; } body .st-study-modal--document-topics .st-topic-detail-item + .st-topic-detail-item { margin-top: 10px !important; } body .st-study-modal--document-topics .st-topic-list-empty, body .st-study-modal--document-topics .st-topic-list-error { margin: 0 !important; min-height: 120px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: var(--eduloo-modal-panel-alt) !important; color: var(--eduloo-modal-muted) !important; font-size: 13px !important; font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-detail-item { position: relative !important; display: flex !important; flex-direction: column !important; border: none !important; border-radius: 14px !important; background: color-mix( in srgb, var(--eduloo-modal-row-bg) 90%, var(--eduloo-modal-panel-bg) 10% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; overflow: hidden !important; transition: background 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal--document-topics .st-topic-detail-item:hover { background: color-mix( in srgb, var(--eduloo-modal-row-bg) 84%, var(--eduloo-modal-row-hover) 16% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 46%, transparent ) !important; } body .st-study-modal--document-topics .st-topic-detail-item.is-selected { background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 56%, var(--eduloo-modal-row-bg) 44% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 82%, transparent ) !important; } body .st-study-modal--document-topics .st-topic-detail-item.is-selected::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; background: color-mix( in srgb, var(--primary) 72%, var(--secondary) 28% ) !important; } body .st-study-modal--document-topics .st-topic-detail-item.is-selected .st-topic-detail-title { color: color-mix( in srgb, var(--eduloo-modal-option-selected-text) 84%, var(--eduloo-modal-title) 16% ) !important; } body .st-study-modal--document-topics .st-topic-detail-item.is-selected .st-topic-detail-chunks { background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 58%, var(--eduloo-modal-panel-bg) 42% ) !important; color: color-mix( in srgb, var(--eduloo-modal-option-selected-text) 78%, var(--eduloo-modal-muted) 22% ) !important; } body .st-study-modal--document-topics .st-topic-detail-header { display: grid !important; grid-template-columns: minmax(0, 1fr) 34px !important; grid-template-rows: auto auto !important; align-items: start !important; column-gap: 10px !important; row-gap: 6px !important; min-height: 64px !important; padding: 10px 12px !important; cursor: pointer !important; } body .st-study-modal--document-topics .st-topic-detail-header:hover { background: transparent !important; } body .st-study-modal--document-topics .st-topic-detail-title { grid-column: 1 !important; grid-row: 1 !important; display: -webkit-box !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; line-height: 1.3 !important; letter-spacing: -0.08px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal--document-topics .st-topic-detail-chunks { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; min-height: 24px !important; padding: 0 10px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--eduloo-modal-panel-alt) 74%, var(--eduloo-modal-row-bg) 26% ) !important; color: var(--eduloo-modal-muted) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1px !important; white-space: nowrap !important; } body .st-study-modal--document-topics .st-topic-detail-header [data-dt-delete-topic] { grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: center !important; justify-self: end !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border: none !important; border-radius: 10px !important; background: var(--eduloo-modal-button-bg) !important; color: color-mix( in srgb, var(--eduloo-modal-danger-text) 80%, var(--eduloo-modal-button-text) 20% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 74%, transparent) !important; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal--document-topics .st-topic-detail-header [data-dt-delete-topic] .icon { margin: 0 !important; font-size: 12px !important; } body .st-study-modal--document-topics .st-topic-detail-header [data-dt-delete-topic]:hover { background: var(--eduloo-modal-danger-bg) !important; color: var(--eduloo-modal-danger-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 36%, transparent) !important; } body .st-study-modal--document-topics .st-topic-detail-header [data-dt-delete-topic]:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; } body .st-study-modal--document-topics .st-topic-detail-body { border-top: 1px solid transparent !important; padding: 0 9px !important; background: color-mix( in srgb, var(--eduloo-modal-panel-alt) 82%, var(--eduloo-modal-row-bg) 18% ) !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transform-origin: top center !important; transition: max-height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, padding 220ms ease, border-color 220ms ease !important; } body .st-study-modal--document-topics .st-topic-detail-item.is-selected .st-topic-detail-body { border-top-color: color-mix( in srgb, var(--eduloo-modal-shell-border) 66%, transparent ) !important; padding: 9px !important; max-height: 240px !important; opacity: 1 !important; overflow: auto !important; } body .st-study-modal--document-topics .st-topic-detail-item.is-selected .st-topic-detail-body:empty { border-top-color: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; } body .st-study-modal--document-topics .st-topic-detail-body[hidden] { display: block !important; } body .st-study-modal--document-topics .st-topic-source-list { display: flex !important; flex-direction: column !important; gap: 7px !important; } body .st-study-modal--document-topics .st-topic-source-row { display: grid !important; grid-template-columns: 26px minmax(0, 1fr) !important; align-items: start !important; gap: 8px !important; min-width: 0 !important; padding: 8px 9px !important; border: none !important; border-radius: 11px !important; background: color-mix( in srgb, var(--eduloo-modal-row-bg) 92%, var(--eduloo-modal-panel-alt) 8% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 66%, transparent) !important; transition: background 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal--document-topics .st-topic-source-row:hover { background: color-mix( in srgb, var(--eduloo-modal-row-bg) 84%, var(--eduloo-modal-row-hover) 16% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 48%, transparent ) !important; } body .st-study-modal--document-topics .st-topic-source-row.is-active { background: color-mix( in srgb, var(--eduloo-modal-option-selected-bg) 50%, var(--eduloo-modal-row-bg) 50% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 78%, transparent ) !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-selection-remove-btn { width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 7px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-muted) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 64%, transparent) !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-selection-remove-btn .icon { margin: 0 !important; font-size: 9px !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-selection-remove-btn:hover { background: var(--eduloo-modal-danger-bg) !important; color: var(--eduloo-modal-danger-text) !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-main { width: 100% !important; min-width: 0 !important; padding: 2px 2px 1px !important; border: none !important; border-radius: 8px !important; background: transparent !important; color: var(--eduloo-modal-text) !important; box-shadow: none !important; transform: none !important; filter: none !important; transition: background 180ms ease, color 180ms ease !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-line { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-meta { order: 1 !important; display: inline-flex !important; align-items: center !important; min-height: 21px !important; padding: 0 7px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--eduloo-modal-panel-alt) 70%, var(--eduloo-modal-row-bg) 30% ) !important; color: var(--eduloo-modal-muted) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-preview { order: 3 !important; flex: 1 1 100% !important; min-width: 0 !important; display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; line-height: 1.35 !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-badge { order: 2 !important; margin-left: auto !important; min-height: 21px !important; padding: 0 7px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--warning) 16%, transparent) !important; color: color-mix( in srgb, var(--warning) 82%, var(--eduloo-modal-title) 18% ) !important; font-size: 10px !important; font-weight: 800 !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-main:hover { background: color-mix( in srgb, var(--eduloo-modal-row-hover) 44%, transparent ) !important; color: var(--eduloo-modal-title) !important; box-shadow: none !important; transform: none !important; filter: none !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-main:focus-visible { background: color-mix( in srgb, var(--eduloo-modal-row-hover) 38%, transparent ) !important; outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; transform: none !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-main:active { transform: none !important; box-shadow: none !important; } body .st-study-modal--document-topics .st-topic-create-form { padding: 10px !important; border-radius: 16px !important; background: var(--eduloo-modal-panel-alt) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; } body .st-study-modal--document-topics .st-topic-create-form .st-modal-form-group { margin-bottom: 8px !important; } body .st-study-modal--document-topics .st-topic-create-hint { margin: 0 0 6px 0 !important; padding: 9px 10px !important; border-radius: 12px !important; background: var(--eduloo-modal-input-bg) !important; color: var(--eduloo-modal-muted) !important; font-size: 12px !important; line-height: 1.45 !important; } body .st-study-modal--document-topics .st-topic-selected-chunks { margin-top: 4px !important; padding: 9px !important; border-radius: 14px !important; background: linear-gradient( 180deg, rgba(44, 189, 171, 0.05) 0%, rgba(44, 189, 171, 0.1) 100% ), var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.38), 0 12px 20px -18px rgba(22, 163, 152, 0.32) !important; max-height: 210px !important; min-height: 56px !important; overflow: auto !important; display: flex !important; flex-direction: column !important; gap: 7px !important; } body .st-study-modal--document-topics .st-topic-no-selection { margin: 0 !important; padding: 14px 10px !important; border-radius: 10px !important; background: rgba(44, 189, 171, 0.12) !important; color: rgba(14, 109, 99, 0.88) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; text-align: center !important; } body .st-study-modal .st-modal-body .dropzone { min-height: 144px; border: none; border-radius: 20px; background: color-mix( in srgb, var(--eduloo-doc-upload-bg) 68%, var(--surface-container-lowest) 32% ); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-doc-upload-border) 90%, transparent); padding: 18px; display: grid; place-items: center; row-gap: 8px; cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease; } body .st-study-modal .st-modal-body .dropzone:hover, body .st-study-modal .st-modal-body .dropzone.drag-over { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 52%, transparent); } body .st-study-modal .st-modal-body .dropzone .dropzone-icon { width: 56px; height: 56px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--eduloo-doc-dropzone-icon-bg); color: var(--eduloo-doc-dropzone-icon-text); } body .st-study-modal .st-modal-body .dropzone .dropzone-icon .icon, body .st-study-modal .st-modal-body .dropzone .dropzone-icon i { margin: 0; font-size: 22px; } body .st-study-modal .st-modal-body .dropzone .dropzone-text { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; text-align: center; color: var(--eduloo-doc-title); } body .st-study-modal .st-modal-body .dropzone .dropzone-hint { font-size: 13px; color: var(--eduloo-doc-muted, var(--on-surface-variant)); text-align: center; } body .st-study-modal--document-topics .st-topic-selected-item { display: grid !important; grid-template-columns: 30px minmax(0, 1fr) !important; align-items: start !important; gap: 8px !important; min-width: 0 !important; padding: 8px 9px !important; border: none !important; border-radius: 12px !important; background: linear-gradient( 180deg, rgba(44, 189, 171, 0.05) 0%, rgba(44, 189, 171, 0.12) 100% ), var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.44) !important; transition: background 200ms ease, box-shadow 200ms ease !important; } body .st-study-modal--document-topics .st-topic-selected-item:hover { background: linear-gradient( 180deg, rgba(44, 189, 171, 0.08) 0%, rgba(44, 189, 171, 0.16) 100% ), var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.56) !important; } body .st-study-modal--document-topics .st-topic-selected-item.is-active { background: linear-gradient( 180deg, rgba(44, 189, 171, 0.12) 0%, rgba(44, 189, 171, 0.22) 100% ), var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.68), 0 12px 22px -20px rgba(22, 163, 152, 0.38) !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selection-remove-btn { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 9px !important; background: rgba(239, 254, 251, 0.92) !important; color: rgba(14, 109, 99, 0.78) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.34) !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selection-remove-btn .icon { margin: 0 !important; font-size: 10px !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selection-remove-btn:hover { background: var(--eduloo-modal-danger-bg) !important; color: var(--eduloo-modal-danger-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 46%, transparent) !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selected-main { width: 100% !important; min-width: 0 !important; padding: 1px 0 !important; border: none !important; border-radius: 8px !important; background: transparent !important; color: var(--eduloo-modal-text) !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selected-main:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selected-line { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selected-label { order: 1 !important; display: inline-flex !important; align-items: center !important; min-height: 20px !important; padding: 0 8px !important; border-radius: 999px !important; background: rgba(239, 254, 251, 0.98) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.32) !important; color: rgba(14, 109, 99, 0.94) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } body .st-study-modal--document-topics .st-topic-selected-item .st-topic-selected-preview { order: 2 !important; flex: 1 1 100% !important; min-width: 0 !important; display: -webkit-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; } body.theme-dark .st-study-modal--document-topics .st-topic-selected-chunks { background: linear-gradient( 180deg, rgba(44, 189, 171, 0.12) 0%, rgba(44, 189, 171, 0.2) 100% ), var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.48), 0 12px 22px -18px rgba(0, 0, 0, 0.48) !important; } body.theme-dark .st-study-modal--document-topics .st-topic-selected-item { background: linear-gradient( 180deg, rgba(44, 189, 171, 0.12) 0%, rgba(44, 189, 171, 0.22) 100% ), var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.56) !important; } body.theme-dark .st-study-modal--document-topics .st-topic-selected-item.is-active { background: linear-gradient( 180deg, rgba(44, 189, 171, 0.18) 0%, rgba(44, 189, 171, 0.3) 100% ), var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px rgba(44, 189, 171, 0.7), 0 14px 24px -18px rgba(0, 0, 0, 0.56) !important; } body .st-study-modal--document-topics .st-topic-create-actions { margin-top: 8px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } body .st-study-modal--document-topics .st-topic-create-actions .st-btn { min-height: 42px !important; border-radius: 14px !important; } body .st-study-modal--document-topics .st-topic-pdf-panel { padding: 12px !important; border-radius: 22px !important; background: var(--eduloo-modal-panel-alt) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 80%, transparent) !important; overflow: hidden !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar { margin: 0 !important; padding: 8px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; background: var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar > .st-btn, body .st-study-modal--document-topics .st-topic-pdf-zoom .st-btn { min-height: 36px !important; height: 36px !important; min-width: 36px !important; border: none !important; border-radius: 10px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-strong) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 8px !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar > .st-btn:disabled, body .st-study-modal--document-topics .st-topic-pdf-zoom .st-btn:disabled { opacity: 0.52 !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar span[data-dt-pdf-page-info] { min-height: 36px !important; padding: 0 10px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; background: var(--eduloo-modal-row-bg) !important; color: var(--eduloo-modal-title) !important; font-size: 13px !important; font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-pdf-zoom { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } body .st-study-modal--document-topics .st-topic-pdf-zoom-label { min-height: 32px !important; padding: 0 10px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; background: var(--eduloo-modal-row-bg) !important; color: var(--eduloo-modal-muted) !important; font-size: 12px !important; font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-pdf-viewport { margin-top: 10px !important; border-radius: 16px !important; padding: 12px !important; background: var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 70%, transparent) !important; overflow: auto !important; } body .st-study-modal--document-topics .st-topic-pdf-canvas-wrap { position: relative !important; display: block !important; inline-size: fit-content !important; block-size: fit-content !important; width: fit-content !important; min-width: min-content !important; margin: 0 auto !important; overflow: visible !important; line-height: 0 !important; isolation: isolate !important; } body .st-study-modal--document-topics .st-topic-pdf-canvas-wrap canvas { position: relative !important; z-index: 1 !important; } body .st-study-modal--document-topics .st-topic-bbox-layer { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; z-index: 12 !important; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; overflow: visible !important; transform: translateZ(0) !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable { position: absolute !important; z-index: 14 !important; display: block !important; visibility: visible !important; opacity: 1 !important; min-width: 8px !important; min-height: 8px !important; border: 1px solid rgba(232, 79, 116, 0.78) !important; border-radius: 10px !important; background: linear-gradient( 180deg, rgba(232, 79, 116, 0.02) 0%, rgba(232, 79, 116, 0.07) 100% ) !important; outline: 1px solid rgba(255, 255, 255, 0.52) !important; outline-offset: -1px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; pointer-events: auto !important; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable:hover { background: linear-gradient( 180deg, rgba(232, 79, 116, 0.08) 0%, rgba(232, 79, 116, 0.14) 100% ) !important; border-color: rgba(236, 63, 106, 0.9) !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable.is-selected { border-color: rgba(44, 189, 171, 0.82) !important; background: linear-gradient( 180deg, rgba(44, 189, 171, 0.04) 0%, rgba(44, 189, 171, 0.13) 100% ) !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(20, 184, 166, 0.2) !important; } body.theme-dark .st-study-modal--document-topics .st-topic-bbox-selectable { border-color: rgba(250, 124, 155, 0.84) !important; background: linear-gradient( 180deg, rgba(250, 124, 155, 0.06) 0%, rgba(250, 124, 155, 0.14) 100% ) !important; outline-color: rgba(255, 231, 237, 0.42) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 219, 228, 0.12) !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable::before, body .st-study-modal--document-topics .st-topic-bbox-selectable::after { content: '' !important; position: absolute !important; width: 10px !important; height: 10px !important; pointer-events: none !important; opacity: 0.84 !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable::before { top: -1px !important; left: -1px !important; border-top: 2px solid currentColor !important; border-left: 2px solid currentColor !important; border-radius: 10px 0 0 0 !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable::after { right: -1px !important; bottom: -1px !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; border-radius: 0 0 10px 0 !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable { color: rgba(236, 63, 106, 0.9) !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable.is-selected { color: rgba(22, 163, 152, 0.92) !important; } body .st-study-modal--document-topics .st-topic-bbox-text { position: absolute !important; top: -13px !important; left: 12px !important; display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 5px !important; border-radius: 999px !important; border: 1px solid rgba(236, 83, 119, 0.3) !important; background: rgba(255, 248, 251, 0.98) !important; color: rgba(118, 23, 50, 0.9) !important; box-shadow: 0 6px 14px rgba(90, 28, 49, 0.16) !important; font-size: 8px !important; font-weight: 700 !important; line-height: 12px !important; letter-spacing: 0.55px !important; text-transform: uppercase !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; pointer-events: none !important; } body .st-study-modal--document-topics .st-topic-bbox-selectable.is-selected .st-topic-bbox-text { border-color: rgba(44, 189, 171, 0.34) !important; background: rgba(239, 254, 251, 0.98) !important; color: rgba(14, 109, 99, 0.94) !important; } body.theme-dark .st-study-modal--document-topics .st-topic-bbox-text { border-color: rgba(250, 124, 155, 0.34) !important; background: rgba(58, 34, 45, 0.96) !important; color: rgba(255, 221, 230, 0.96) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32) !important; } body .st-study-modal--document-topics .st-topic-pdf-placeholder { margin: 8px 0 0 !important; min-height: 36px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; background: var(--eduloo-modal-row-bg) !important; color: var(--eduloo-modal-muted) !important; font-size: 12px !important; font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-list-items::-webkit-scrollbar, body .st-study-modal--document-topics .st-topic-pdf-viewport::-webkit-scrollbar, body .st-study-modal--document-topics .st-topic-selected-chunks::-webkit-scrollbar { width: 10px !important; height: 10px !important; } body .st-study-modal--document-topics .st-topic-list-items::-webkit-scrollbar-thumb, body .st-study-modal--document-topics .st-topic-pdf-viewport::-webkit-scrollbar-thumb, body .st-study-modal--document-topics .st-topic-selected-chunks::-webkit-scrollbar-thumb { background: color-mix( in srgb, var(--eduloo-modal-muted) 40%, transparent ) !important; border-radius: 999px !important; border: 2px solid transparent !important; background-clip: padding-box !important; } @media (max-width: 1180px) { body .st-study-modal--document-topics .st-topic-modal-split { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr) !important; } body .st-study-modal--document-topics .st-topic-list-panel { max-height: 300px !important; } body .st-study-modal--document-topics .st-topic-pdf-panel { min-height: 360px !important; } } @media (max-width: 760px) { body .st-study-modal--document-topics .modal-content { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; height: calc(100vh - 12px) !important; max-height: calc(100vh - 12px) !important; } body .st-study-modal--document-topics .st-modal { border-radius: 22px !important; } body .st-study-modal--document-topics .st-modal-header { padding: 14px 14px 10px !important; } body .st-study-modal--document-topics .st-modal-header h2 { font-size: 24px !important; } body .st-study-modal--document-topics .st-modal-body { padding: 6px 10px 10px !important; } body .st-study-modal--document-topics .st-topic-list-panel, body .st-study-modal--document-topics .st-topic-pdf-panel { border-radius: 16px !important; padding: 10px !important; } body .st-study-modal--document-topics .st-topic-list-actions { grid-template-columns: 1fr !important; } body .st-study-modal--document-topics .st-topic-create-actions { grid-template-columns: 1fr !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar { gap: 6px !important; } body .st-study-modal--document-topics .st-topic-pdf-zoom { margin-left: 0 !important; width: 100% !important; justify-content: flex-start !important; } } body .st-study-modal--document-topics .st-topic-list-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; } body .st-study-modal--document-topics .st-topic-list-actions > .st-btn { min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; gap: 7px !important; } body .st-study-modal--document-topics .st-topic-list-actions > .st-btn .icon { margin: 0 !important; font-size: 12px !important; } body .st-study-modal--document-topics .st-topic-list-actions > [data-dt-create-topic] { grid-column: 1 / -1 !important; } body .st-study-modal--document-topics .st-topic-list-actions > [data-dt-delete-all-topics] { background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-muted) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; } body .st-study-modal--document-topics .st-topic-list-actions > [data-dt-delete-all-topics]:hover { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; } body .st-study-modal--document-topics .st-topic-available-panel { margin-top: 4px !important; padding: 10px !important; border-top: none !important; border-radius: 16px !important; background: var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; min-height: 0 !important; max-height: 340px !important; overflow: hidden !important; } body .st-study-modal--document-topics .st-topic-available-header { display: flex !important; flex-direction: column !important; gap: 8px !important; flex: 0 0 auto !important; min-height: 0 !important; } body .st-study-modal--document-topics .st-topic-available-title { margin: 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.35px !important; text-transform: uppercase !important; color: var(--eduloo-modal-muted) !important; } body .st-study-modal--document-topics .st-topic-available-search { margin: 0 0 8px 0 !important; height: 38px !important; position: relative !important; display: block !important; } body .st-study-modal--document-topics .st-topic-available-search .search-field__input { min-height: 38px !important; height: 38px !important; border: none !important; border-radius: 12px !important; background: var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; font-weight: 600 !important; padding-left: 34px !important; padding-right: 12px !important; } body .st-study-modal--document-topics .st-topic-available-search .search-field__icon { position: absolute !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; z-index: 2 !important; pointer-events: none !important; left: 10px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--eduloo-modal-muted) !important; font-size: 12px !important; } body .st-study-modal--document-topics .st-topic-available-items { margin: 0 !important; padding: 6px !important; border-radius: 12px !important; background: var(--eduloo-modal-panel-alt) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 66%, transparent) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; flex: 1 1 auto !important; min-height: 132px !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin !important; scrollbar-gutter: stable !important; } body .st-study-modal--document-topics .st-topic-available-items::-webkit-scrollbar { width: 10px !important; } body .st-study-modal--document-topics .st-topic-available-items::-webkit-scrollbar-track { background: transparent !important; } body .st-study-modal--document-topics .st-topic-available-items::-webkit-scrollbar-thumb { background: color-mix( in srgb, var(--eduloo-modal-muted) 40%, transparent ) !important; border-radius: 999px !important; border: 2px solid transparent !important; background-clip: padding-box !important; } body .st-study-modal--document-topics .st-topic-available-item { margin: 0 !important; padding: 8px 9px !important; border: none !important; border-radius: 11px !important; background: color-mix( in srgb, var(--eduloo-modal-row-bg) 92%, var(--eduloo-modal-panel-alt) 8% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 66%, transparent) !important; min-height: 42px !important; display: flex !important; align-items: stretch !important; transition: background 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal--document-topics .st-topic-available-item:hover { background: color-mix( in srgb, var(--eduloo-modal-row-bg) 84%, var(--eduloo-modal-row-hover) 16% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 48%, transparent ) !important; } body .st-study-modal--document-topics .st-topic-available-main { appearance: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; color: var(--eduloo-modal-text) !important; text-align: left !important; cursor: pointer !important; transform: none !important; } body .st-study-modal--document-topics .st-topic-available-main:hover, body .st-study-modal--document-topics .st-topic-available-main:active { transform: none !important; } body .st-study-modal--document-topics .st-topic-available-main:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; border-radius: 8px !important; } body .st-study-modal--document-topics .st-topic-available-line { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } body .st-study-modal--document-topics .st-topic-available-meta { display: inline-flex !important; align-items: center !important; min-height: 21px !important; padding: 0 8px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--eduloo-modal-panel-alt) 72%, var(--eduloo-modal-row-bg) 28% ) !important; color: var(--eduloo-modal-muted) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08px !important; white-space: nowrap !important; } body .st-study-modal--document-topics .st-topic-available-preview { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0px !important; } body .st-study-modal--document-topics .st-topic-list-empty[data-dt-available-chunk-empty] { min-height: 108px !important; border-radius: 10px !important; padding: 12px !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar { display: grid !important; grid-template-columns: 36px auto 36px minmax(220px, 1fr) auto !important; flex-wrap: nowrap !important; gap: 10px !important; align-items: center !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar > [data-dt-pdf-prev] { grid-column: 1 !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar > [data-dt-pdf-next] { grid-column: 3 !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar > .st-btn { flex: 0 0 auto !important; } body .st-study-modal--document-topics .st-topic-pdf-page-jump, body .st-study-modal--document-topics .st-topic-pdf-toolbar label[data-dt-pdf-page-info] { grid-column: 2 !important; min-height: 36px !important; padding: 0 10px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--eduloo-modal-row-bg) !important; color: var(--eduloo-modal-title) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; white-space: nowrap !important; } body .st-study-modal--document-topics .st-topic-pdf-page-jump span, body .st-study-modal--document-topics .st-topic-pdf-toolbar label[data-dt-pdf-page-info] span { font-size: 12px !important; font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-pdf-page-jump input, body .st-study-modal--document-topics .st-topic-pdf-toolbar label[data-dt-pdf-page-info] input { width: 52px !important; min-width: 52px !important; height: 32px !important; min-height: 32px !important; border: none !important; border-radius: 10px !important; background: var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 66%, transparent) !important; color: var(--eduloo-modal-text) !important; text-align: center !important; font-size: 13px !important; font-weight: 700 !important; padding: 0 4px !important; } body .st-study-modal--document-topics .st-topic-pdf-search { display: grid !important; grid-template-columns: minmax(0, 1fr) 36px 36px auto !important; align-items: center !important; grid-column: 4 !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; gap: 6px !important; } body .st-study-modal--document-topics .st-topic-pdf-search-field { flex: 1 1 auto !important; min-width: 0 !important; position: relative !important; display: block !important; } body .st-study-modal--document-topics .st-topic-pdf-search-field .search-field__input { min-height: 38px !important; height: 38px !important; border: none !important; border-radius: 12px !important; background: var(--eduloo-modal-row-bg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 68%, transparent) !important; color: var(--eduloo-modal-text) !important; font-size: 13px !important; font-weight: 600 !important; padding-left: 34px !important; padding-right: 10px !important; } body .st-study-modal--document-topics .st-topic-pdf-search-field .search-field__icon { position: absolute !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; z-index: 2 !important; pointer-events: none !important; left: 10px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--eduloo-modal-muted) !important; font-size: 12px !important; } body .st-study-modal--document-topics .st-topic-pdf-search [data-dt-pdf-search-prev], body .st-study-modal--document-topics .st-topic-pdf-search [data-dt-pdf-search-next] { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 10px !important; } body .st-study-modal--document-topics .st-topic-pdf-search-count { min-width: 48px !important; min-height: 34px !important; padding: 0 8px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--eduloo-modal-row-bg) !important; color: var(--eduloo-modal-muted) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 66%, transparent) !important; font-size: 12px !important; font-weight: 700 !important; } body .st-study-modal--document-topics .st-topic-pdf-zoom { grid-column: 5 !important; margin-left: 0 !important; } @media (max-width: 1100px) { body .st-study-modal--document-topics .st-topic-list-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body .st-study-modal--document-topics .st-topic-pdf-toolbar { grid-template-columns: 36px minmax(0, 1fr) 36px auto !important; row-gap: 8px !important; } body .st-study-modal--document-topics .st-topic-pdf-page-jump, body .st-study-modal--document-topics .st-topic-pdf-toolbar label[data-dt-pdf-page-info] { grid-column: 2 !important; } body .st-study-modal--document-topics .st-topic-pdf-zoom { grid-column: 4 !important; } body .st-study-modal--document-topics .st-topic-pdf-search { order: 4 !important; grid-column: 1 / -1 !important; grid-row: 2 !important; flex: 1 1 100% !important; width: 100% !important; } } @media (max-width: 760px) { body .st-study-modal--document-topics .st-topic-list-actions { grid-template-columns: 1fr !important; } body .st-study-modal--document-topics .st-topic-available-panel { max-height: 260px !important; } body .st-study-modal--document-topics .st-topic-available-items { min-height: 112px !important; } body .st-study-modal--document-topics .st-topic-available-item { min-height: 40px !important; padding: 7px 8px !important; } body .st-study-modal--document-topics .st-topic-available-preview { font-size: 12px !important; } body .st-study-modal--document-topics .st-topic-detail-header { min-height: 60px !important; padding: 9px 10px !important; row-gap: 5px !important; } body .st-study-modal--document-topics .st-topic-detail-title { font-size: 13px !important; } body .st-study-modal--document-topics .st-topic-detail-chunks { min-height: 22px !important; padding: 0 8px !important; font-size: 10px !important; } body .st-study-modal--document-topics .st-topic-detail-header [data-dt-delete-topic] { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; } body .st-study-modal--document-topics .st-topic-source-row { padding: 7px 8px !important; } body .st-study-modal--document-topics .st-topic-source-row .st-topic-source-preview { font-size: 12px !important; } } body.theme-dark .st-study-modal--document-topics .st-topic-list-panel, body.theme-dark .st-study-modal--document-topics .st-topic-pdf-panel { background: color-mix( in srgb, var(--eduloo-modal-panel-bg) 82%, var(--eduloo-modal-panel-alt) 18% ) !important; } body.theme-dark .st-study-modal--document-topics .st-topic-available-panel, body.theme-dark .st-study-modal--document-topics .st-topic-pdf-toolbar, body.theme-dark .st-study-modal--document-topics .st-topic-pdf-search-field .search-field__input, body.theme-dark .st-study-modal--document-topics .st-topic-available-search .search-field__input, body.theme-dark .st-study-modal--document-topics .st-topic-pdf-page-jump, body.theme-dark .st-study-modal--document-topics .st-topic-pdf-toolbar label[data-dt-pdf-page-info], body.theme-dark .st-study-modal--document-topics .st-topic-pdf-search-count { background: color-mix( in srgb, var(--eduloo-modal-input-bg) 72%, var(--eduloo-modal-panel-alt) 28% ) !important; } body .st-study-modal--workspace-manage .st-modal-footer, body .st-study-modal--workspace-manage .modal-footer, body .st-study-modal--workspace-manage .modal-actions { padding: 8px 24px 16px !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn:hover, body .st-study-modal--workspace-manage .button.button-secondary.st-btn:focus-visible, body .st-study-modal--workspace-manage .button.button-secondary.st-btn:active, body .st-study-modal .button.button-secondary.st-btn:hover, body .st-study-modal .button.button-secondary.st-btn:focus-visible, body .st-study-modal .button.button-primary.st-btn:hover, body .st-study-modal .button.button-primary.st-btn:focus-visible { transform: none !important; filter: none !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn.btn-success:hover, body .st-study-modal--workspace-manage .button.button-secondary.st-btn.btn-success:focus-visible { background: var(--eduloo-modal-button-primary-hover) !important; color: var(--eduloo-modal-button-primary-text) !important; filter: none !important; } body .st-study-modal--workspace-manage .button.button-secondary.st-btn.st-btn--only-icon, body .st-study-modal .button.button-secondary.st-btn.st-btn--only-icon { color: var(--eduloo-modal-button-text) !important; border-radius: 999px !important; } body .st-study-modal--workspace-manage .st-panel-workspace-select select:focus, body .st-study-modal--workspace-manage .st-panel-workspace-select select:focus-visible, body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-trigger:focus, body .st-study-modal--workspace-manage .st-panel-workspace-select .custom-dropdown-trigger:focus-visible, body .st-study-modal--workspace-manage .st-modal-create-editor input:focus, body .st-study-modal--workspace-manage .st-modal-create-editor input:focus-visible, body .st-study-modal--workspace-manage .st-workspace-manage-subject-search input:focus, body .st-study-modal--workspace-manage .st-workspace-manage-subject-search input:focus-visible { transform: none !important; } body .st-study-modal .st-topic-list-actions > .st-btn, body .st-study-modal .st-topic-create-actions .st-btn { min-height: 44px !important; border-radius: 999px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1px !important; } @media (min-width: 761px) { body .st-study-modal--workspace-manage .st-modal, body .st-study-modal--document-topics .st-modal, body .st-study-modal--edit-quiz .st-modal { border-radius: 30px !important; } body .st-study-modal--workspace-manage .st-modal-header, body .st-study-modal--document-topics .st-modal-header, body .st-study-modal--edit-quiz .st-modal-header { padding: 20px 22px 14px !important; } body .st-study-modal--workspace-manage .st-modal-header h2, body .st-study-modal--document-topics .st-modal-header h2, body .st-study-modal--edit-quiz .st-modal-header h2 { font-size: 30px !important; line-height: 1.28 !important; } } @media (max-width: 760px) { body .st-study-modal--workspace-manage .st-modal, body .st-study-modal--document-topics .st-modal, body .st-study-modal--edit-quiz .st-modal { border-radius: 24px !important; } body .st-study-modal--workspace-manage .st-modal-header, body .st-study-modal--document-topics .st-modal-header, body .st-study-modal--edit-quiz .st-modal-header { padding: 16px 16px 12px !important; } body .st-study-modal--workspace-manage .st-modal-header h2, body .st-study-modal--document-topics .st-modal-header h2, body .st-study-modal--edit-quiz .st-modal-header h2 { font-size: 24px !important; line-height: 1.3 !important; } body .st-study-modal--workspace-manage .st-modal-footer, body .st-study-modal--workspace-manage .modal-footer, body .st-study-modal--workspace-manage .modal-actions { padding: 12px 16px 16px !important; } } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) { background: var(--eduloo-modal-overlay) !important; backdrop-filter: blur(14px) saturate(124%) !important; -webkit-backdrop-filter: blur(14px) saturate(124%) !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-content { width: min(840px, calc(100vw - 28px)) !important; max-width: min(840px, calc(100vw - 28px)) !important; max-height: calc(100vh - 28px) !important; border: none !important; border-radius: 30px !important; overflow: hidden !important; background: var(--eduloo-modal-shell-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-shell-border), var(--eduloo-modal-shadow) !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header { margin: 0 !important; padding: 20px 22px 14px !important; border: none !important; background: var(--eduloo-modal-header-bg) !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header h1, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header h2, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header h3 { margin: 0 !important; padding: 0 0 3px !important; border: none !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 30px !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: var(--eduloo-modal-title) !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-body { padding: 8px 22px 10px !important; border: none !important; background: transparent !important; color: var(--eduloo-modal-text) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 !important; padding: 8px 22px 16px !important; border: none !important; background: transparent !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .btn, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .btn { min-height: 44px !important; min-width: 152px !important; margin: 0 !important; padding: 0 18px !important; border: none !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0.1px !important; text-transform: none !important; appearance: none !important; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > button:hover, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > button:hover, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button:hover, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button:hover, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .btn:hover, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .btn:hover { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 74%, transparent ) !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > button:focus-visible, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > button:focus-visible, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button:focus-visible, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button:focus-visible, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .btn:focus-visible, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .btn:focus-visible { outline: 2px solid var(--eduloo-modal-focus) !important; outline-offset: 2px !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button.button-danger, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button.button-danger, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .btn.btn-danger, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .btn.btn-danger, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button-danger, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button-danger, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > [data-variant='danger'], body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > [data-variant='danger'], body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > [class*='danger'], body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > [class*='danger'] { background: var(--eduloo-modal-danger-bg) !important; color: var(--eduloo-modal-danger-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 34%, transparent) !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button.button-primary, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button.button-primary, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .btn.btn-primary, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .btn.btn-primary, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > [data-variant='primary'], body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > [data-variant='primary'], body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > [class*='primary'], body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > [class*='primary'], body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > button:not(:first-child):last-child, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > button:not(:first-child):last-child, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button:not(:first-child):last-child, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button:not(:first-child):last-child, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .btn:not(:first-child):last-child, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .btn:not(:first-child):last-child { background: var(--eduloo-modal-button-primary) !important; color: var(--eduloo-modal-button-primary-text) !important; box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--primary) 52%, transparent) !important; } @media (max-width: 760px) { body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-content { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 14px) !important; border-radius: 24px !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header { padding: 16px 16px 12px !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header h1, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header h2, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-header h3 { font-size: 24px !important; line-height: 1.3 !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-body { padding: 4px 16px 10px !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions { justify-content: stretch !important; gap: 8px !important; padding: 12px 16px 16px !important; } body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .button, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-footer > .btn, body:has(.st-pane[data-study-page]) .modal:not(.st-study-modal) .modal-actions > .btn { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; } } body .st-study-modal.st-study-modal--confirm .modal-content { width: min(840px, calc(100vw - 28px)) !important; max-width: min(840px, calc(100vw - 28px)) !important; max-height: calc(100vh - 28px) !important; border: none !important; border-radius: 30px !important; overflow: hidden !important; background: var(--eduloo-modal-shell-bg) !important; box-shadow: inset 0 0 0 1px var(--eduloo-modal-shell-border), var(--eduloo-modal-shadow) !important; } body .st-study-modal.st-study-modal--confirm .modal-header { margin: 0 !important; padding: 20px 22px 14px !important; border: none !important; background: var(--eduloo-modal-header-bg) !important; } body .st-study-modal.st-study-modal--confirm .modal-header h1, body .st-study-modal.st-study-modal--confirm .modal-header h2, body .st-study-modal.st-study-modal--confirm .modal-header h3 { margin: 0 !important; padding: 0 0 3px !important; border: none !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 30px !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: var(--eduloo-modal-title) !important; } body .st-study-modal.st-study-modal--confirm .modal-body { margin: 0 !important; padding: 8px 22px 10px !important; border: none !important; background: transparent !important; color: var(--eduloo-modal-text) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; } body .st-study-modal.st-study-modal--confirm .modal-footer, body .st-study-modal.st-study-modal--confirm .modal-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 !important; padding: 8px 22px 16px !important; border: none !important; background: transparent !important; } body .st-study-modal.st-study-modal--confirm .modal-footer > button, body .st-study-modal.st-study-modal--confirm .modal-actions > button, body .st-study-modal.st-study-modal--confirm .modal-footer > .button, body .st-study-modal.st-study-modal--confirm .modal-actions > .button, body .st-study-modal.st-study-modal--confirm .modal-footer > .btn, body .st-study-modal.st-study-modal--confirm .modal-actions > .btn { min-height: 44px !important; min-width: 152px !important; margin: 0 !important; padding: 0 18px !important; border: none !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-modal-button-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eduloo-modal-shell-border) 72%, transparent) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0.1px !important; text-transform: none !important; appearance: none !important; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease !important; } body .st-study-modal.st-study-modal--confirm .modal-footer > button:hover, body .st-study-modal.st-study-modal--confirm .modal-actions > button:hover, body .st-study-modal.st-study-modal--confirm .modal-footer > .button:hover, body .st-study-modal.st-study-modal--confirm .modal-actions > .button:hover, body .st-study-modal.st-study-modal--confirm .modal-footer > .btn:hover, body .st-study-modal.st-study-modal--confirm .modal-actions > .btn:hover { background: var(--eduloo-modal-button-hover) !important; color: var(--eduloo-modal-button-strong) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--eduloo-modal-option-selected-border) 74%, transparent ) !important; } body .st-study-modal.st-study-modal--confirm .modal-footer > [data-variant='danger'], body .st-study-modal.st-study-modal--confirm .modal-actions > [data-variant='danger'], body .st-study-modal.st-study-modal--confirm .modal-footer > [class*='danger'], body .st-study-modal.st-study-modal--confirm .modal-actions > [class*='danger'] { background: var(--eduloo-modal-danger-bg) !important; color: var(--eduloo-modal-danger-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 34%, transparent) !important; } body .st-study-modal.st-study-modal--confirm .modal-footer > [data-variant='primary'], body .st-study-modal.st-study-modal--confirm .modal-actions > [data-variant='primary'], body .st-study-modal.st-study-modal--confirm .modal-footer > [class*='primary'], body .st-study-modal.st-study-modal--confirm .modal-actions > [class*='primary'], body .st-study-modal.st-study-modal--confirm .modal-footer > button:not(:first-child):last-child, body .st-study-modal.st-study-modal--confirm .modal-actions > button:not(:first-child):last-child { background: var(--eduloo-modal-button-primary) !important; color: var(--eduloo-modal-button-primary-text) !important; box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--primary) 52%, transparent) !important; } @media (max-width: 760px) { body .st-study-modal.st-study-modal--confirm .modal-content { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 14px) !important; border-radius: 24px !important; } body .st-study-modal.st-study-modal--confirm .modal-header { padding: 16px 16px 12px !important; } body .st-study-modal.st-study-modal--confirm .modal-header h1, body .st-study-modal.st-study-modal--confirm .modal-header h2, body .st-study-modal.st-study-modal--confirm .modal-header h3 { font-size: 24px !important; line-height: 1.3 !important; } body .st-study-modal.st-study-modal--confirm .modal-body { padding: 4px 16px 10px !important; } body .st-study-modal.st-study-modal--confirm .modal-footer, body .st-study-modal.st-study-modal--confirm .modal-actions { justify-content: stretch !important; gap: 8px !important; padding: 12px 16px 16px !important; } body .st-study-modal.st-study-modal--confirm .modal-footer > button, body .st-study-modal.st-study-modal--confirm .modal-actions > button, body .st-study-modal.st-study-modal--confirm .modal-footer > .button, body .st-study-modal.st-study-modal--confirm .modal-actions > .button, body .st-study-modal.st-study-modal--confirm .modal-footer > .btn, body .st-study-modal.st-study-modal--confirm .modal-actions > .btn { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; } } body .st-study-modal.st-study-modal--guest-import .modal-content { width: min(820px, calc(100vw - 24px)) !important; max-width: min(820px, calc(100vw - 24px)) !important; } body .st-study-modal.st-study-modal--guest-import .modal-footer:not(.st-modal-footer), body .st-study-modal.st-study-modal--guest-import .modal-actions:not(.st-modal-footer) { display: none !important; } body .st-study-modal.st-study-modal--guest-import .st-modal { gap: 0 !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-header { margin: 0 !important; padding: 20px 24px 14px !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-body { padding: 8px 24px 8px !important; gap: 14px !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-footer { margin-top: 0 !important; padding: 12px 24px 22px !important; justify-content: flex-end !important; gap: 10px !important; flex-wrap: wrap !important; background: color-mix( in srgb, var(--table-header-bg, #f1e8ee) 84%, var(--container-bg, #ffffff) 16% ) !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-footer .st-modal-footer-btn { min-width: 152px !important; min-height: 44px !important; padding: 0 18px !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-footer .st-modal-footer-btn.button-primary { min-width: 166px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro { display: grid !important; grid-template-columns: 60px minmax(0, 1fr) !important; gap: 16px !important; align-items: center !important; padding: 18px !important; border-radius: 22px !important; background: color-mix( in srgb, var(--table-header-bg, #f1e8ee) 74%, var(--container-bg, #ffffff) 26% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(126, 82, 106, 0.28)) 54%, transparent ) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__icon { width: 60px !important; height: 60px !important; border-radius: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix( in srgb, var(--button-primary-bg, #ef5d7a) 18%, #ffffff 82% ) !important; color: var(--button-primary-bg, #ef5d7a) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-primary-bg, #ef5d7a) 26%, transparent) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__icon .icon { margin: 0 !important; font-size: 22px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__eyebrow { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: 0.9px !important; text-transform: uppercase !important; color: var(--muted-text, #826875) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__text { margin: 0 !important; font-size: 17px !important; line-height: 1.52 !important; color: var(--text-color, #4d3945) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-summary { margin-top: 0 !important; padding: 16px !important; border-radius: 22px !important; background: color-mix( in srgb, var(--container-bg, #ffffff) 68%, var(--table-header-bg, #f1e8ee) 32% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(126, 82, 106, 0.28)) 54%, transparent ) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__content { min-width: 0 !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target { margin-top: 0 !important; padding: 14px !important; border-radius: 20px !important; background: color-mix( in srgb, var(--container-bg, #ffffff) 74%, var(--table-header-bg, #f1e8ee) 26% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(126, 82, 106, 0.28)) 46%, transparent ) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-summary__header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 14px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-summary__title { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; color: var(--heading-color, #3a2230) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-summary__total { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; padding: 0 14px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--button-primary-bg, #ef5d7a) 15%, #ffffff 85% ) !important; color: var(--button-primary-bg, #ef5d7a) !important; font-size: 13px !important; font-weight: 800 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-primary-bg, #ef5d7a) 24%, transparent) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target .st-modal-form-group { gap: 7px !important; padding: 12px !important; border-radius: 16px !important; background: color-mix( in srgb, var(--container-bg, #ffffff) 86%, var(--table-header-bg, #f1e8ee) 14% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(126, 82, 106, 0.28)) 56%, transparent ) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target .st-modal-form-group label { font-size: 13px !important; font-weight: 800 !important; color: var(--muted-text, #826875) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target select, body .st-study-modal.st-study-modal--guest-import .st-guest-import-target .custom-dropdown, body .st-study-modal.st-study-modal--guest-import .st-guest-import-target .custom-dropdown-trigger { width: 100% !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; min-height: 78px !important; padding: 12px 14px !important; border: none !important; border-radius: 16px !important; background: color-mix( in srgb, var(--container-bg, #ffffff) 86%, var(--table-header-bg, #f1e8ee) 14% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(126, 82, 106, 0.28)) 56%, transparent ) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card__icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix( in srgb, var(--table-header-bg, #f1e8ee) 72%, #ffffff 28% ) !important; color: color-mix( in srgb, var(--heading-color, #3a2230) 74%, var(--button-primary-bg, #ef5d7a) 26% ) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card__icon .icon { margin: 0 !important; font-size: 17px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card__content { min-width: 0 !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card__label { margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: var(--heading-color, #3a2230) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card__meta { margin: 2px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--muted-text, #826875) !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card__count { min-width: 34px !important; height: 34px !important; padding: 0 10px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix( in srgb, var(--button-primary-bg, #ef5d7a) 14%, #ffffff 86% ) !important; color: var(--button-primary-bg, #ef5d7a) !important; font-size: 14px !important; font-weight: 800 !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-modal-footer { background: color-mix( in srgb, var(--table-header-bg, #2e2531) 88%, var(--container-bg, #1f1923) 12% ) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-intro { background: color-mix( in srgb, var(--table-header-bg, #2d2430) 70%, var(--container-bg, #1d1720) 30% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(216, 180, 201, 0.24)) 66%, transparent ) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__icon { background: color-mix( in srgb, var(--button-primary-bg, #ef5d7a) 28%, #1e1720 72% ) !important; color: #ffdce5 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-primary-bg, #ef5d7a) 42%, transparent) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__eyebrow { color: var(--muted-text, #cfb8c5) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__text { color: var(--text-color, #f0e6ed) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-summary { background: color-mix( in srgb, var(--container-bg, #1f1923) 78%, var(--table-header-bg, #2e2531) 22% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(216, 180, 201, 0.24)) 66%, transparent ) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-target { background: color-mix( in srgb, var(--container-bg, #1f1923) 78%, var(--table-header-bg, #2e2531) 22% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(216, 180, 201, 0.24)) 56%, transparent ) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-summary__title { color: var(--heading-color, #fff2f8) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-summary__total { background: color-mix( in srgb, var(--button-primary-bg, #ef5d7a) 28%, #1e1720 72% ) !important; color: #ffdce5 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-primary-bg, #ef5d7a) 40%, transparent) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-card { background: color-mix( in srgb, var(--container-bg, #1f1923) 82%, var(--table-header-bg, #2e2531) 18% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(216, 180, 201, 0.24)) 64%, transparent ) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-target .st-modal-form-group { background: color-mix( in srgb, var(--container-bg, #1f1923) 82%, var(--table-header-bg, #2e2531) 18% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--border-color, rgba(216, 180, 201, 0.24)) 64%, transparent ) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-target .st-modal-form-group label { color: var(--muted-text, #cfb8c5) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-card__icon { background: color-mix( in srgb, var(--table-header-bg, #2f2531) 66%, #1e1720 34% ) !important; color: #ffdce5 !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-card__label { color: var(--heading-color, #fff2f8) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-card__meta { color: var(--muted-text, #cfb8c5) !important; } body.theme-dark .st-study-modal.st-study-modal--guest-import .st-guest-import-card__count { background: color-mix( in srgb, var(--button-primary-bg, #ef5d7a) 28%, #1e1720 72% ) !important; color: #ffdce5 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-primary-bg, #ef5d7a) 40%, transparent) !important; } @media (max-width: 760px) { body .st-study-modal.st-study-modal--guest-import .st-modal-header { padding: 14px 16px 10px !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-body { padding: 6px 16px 6px !important; gap: 12px !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-footer { padding: 10px 16px 16px !important; justify-content: stretch !important; gap: 8px !important; } body .st-study-modal.st-study-modal--guest-import .st-modal-footer .st-modal-footer-btn { width: 100% !important; min-width: 0 !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro { grid-template-columns: 1fr !important; gap: 10px !important; padding: 14px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-intro__icon { width: 44px !important; height: 44px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-grid { grid-template-columns: 1fr !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target__grid { grid-template-columns: 1fr !important; gap: 0 !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target .st-modal-form-group { margin-bottom: 10px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-target .st-modal-form-group:last-child { margin-bottom: 0 !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-summary { padding: 14px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-summary__header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-bottom: 12px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-summary__total { min-height: 30px !important; padding: 0 12px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card { grid-template-columns: 38px minmax(0, 1fr) auto !important; gap: 10px !important; min-height: 68px !important; padding: 10px 12px !important; } body .st-study-modal.st-study-modal--guest-import .st-guest-import-card__icon { width: 38px !important; height: 38px !important; border-radius: 11px !important; } } body.theme-dark { --eduloo-modal-shell-bg: color-mix( in srgb, var(--surface-container-high) 86%, var(--surface-container) 14% ); --eduloo-modal-shell-border: color-mix( in srgb, var(--outline-variant) 78%, rgba(255, 255, 255, 0.22) 22% ); --eduloo-modal-panel-bg: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-modal-panel-alt: color-mix( in srgb, var(--surface-container-highest) 74%, var(--surface-container-high) 26% ); --eduloo-modal-row-bg: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --eduloo-modal-row-alt-bg: color-mix( in srgb, var(--surface-container-highest) 78%, var(--secondary-container) 22% ); --eduloo-modal-row-hover: color-mix( in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36% ); --eduloo-modal-button-bg: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --eduloo-modal-button-hover: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ); --eduloo-modal-button-text: color-mix( in srgb, var(--on-surface) 92%, var(--on-primary) 8% ); --eduloo-modal-input-bg: var(--eduloo-input-unified-bg); --eduloo-modal-input-bg-hover: var(--eduloo-input-unified-bg-hover); --eduloo-modal-input-focus-bg: var(--eduloo-input-unified-bg-focus); --eduloo-modal-focus: var(--eduloo-input-unified-ring); --eduloo-modal-option-selected-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 72%, var(--primary-container) 28%) 0%, color-mix(in srgb, var(--primary) 54%, var(--secondary) 46%) 100% ); --eduloo-modal-option-selected-border: color-mix( in srgb, var(--primary) 78%, rgba(255, 255, 255, 0.22) 22% ); --eduloo-modal-option-selected-text: color-mix( in srgb, var(--on-primary-container) 92%, var(--on-surface) 8% ); --eduloo-modal-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.38); --eduloo-modal-panel-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.34); } body.theme-dark .st-study-modal .st-modal { border: 1px solid var(--eduloo-modal-shell-border) !important; } body.theme-dark .st-study-modal .st-modal-form-group { border: 1px solid var(--eduloo-modal-shell-border) !important; border-radius: 16px !important; padding: 10px 12px !important; background: color-mix( in srgb, var(--eduloo-modal-panel-bg) 88%, transparent ) !important; } body.theme-dark .st-study-modal .st-modal-form-group input, body.theme-dark .st-study-modal .st-modal-form-group textarea, body.theme-dark .st-study-modal .st-modal-form-group select, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger { border: 1px solid color-mix(in srgb, var(--outline-variant) 76%, rgba(255, 255, 255, 0.2) 24%) !important; background: var(--eduloo-modal-input-bg) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } body.theme-dark .st-study-modal .st-modal-form-group input:focus, body.theme-dark .st-study-modal .st-modal-form-group input:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group textarea:focus, body.theme-dark .st-study-modal .st-modal-form-group textarea:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group select:focus, body.theme-dark .st-study-modal .st-modal-form-group select:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger:focus, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger:focus-visible { border-color: var(--eduloo-modal-option-selected-border) !important; background: var(--eduloo-modal-input-focus-bg) !important; box-shadow: 0 0 0 3px var(--eduloo-modal-focus) !important; } body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-panel { border: 1px solid var(--eduloo-modal-shell-border) !important; } body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-option.selected:not(.disabled) { border: 1px solid var(--eduloo-modal-option-selected-border) !important; background: var(--eduloo-modal-option-selected-bg) !important; color: var(--eduloo-modal-option-selected-text) !important; } body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon, body.theme-dark .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon { border: 1px solid var(--eduloo-modal-shell-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon:hover, body.theme-dark .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon:hover { background: var(--eduloo-modal-button-hover) !important; border-color: color-mix(in srgb, var(--outline-variant) 54%, var(--primary) 46%) !important; filter: none !important; } body.theme-dark .st-study-modal .st-btn:not(.button-primary):not(.st-btn--danger), body.theme-dark .st-study-modal .button-secondary { border: 1px solid var(--eduloo-modal-shell-border) !important; background: var(--eduloo-modal-button-bg) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 16px -12px rgba(0, 0, 0, 0.34) !important; } body.theme-dark .st-study-modal .st-btn:not(.button-primary):not(.st-btn--danger):hover, body.theme-dark .st-study-modal .button-secondary:hover { background: var(--eduloo-modal-button-hover) !important; border-color: color-mix( in srgb, var(--eduloo-modal-shell-border) 60%, var(--primary) 40% ) !important; filter: none !important; } body.theme-dark .st-study-modal .st-btn:not(.button-primary):not(.st-btn--danger):active, body.theme-dark .st-study-modal .button-secondary:active { transform: scale(0.98) !important; filter: none !important; } body.theme-dark { --eduloo-modal-shell-bg: var(--eduloo-dark-surface-card); --eduloo-modal-panel-bg: var(--eduloo-dark-surface-panel); --eduloo-modal-input-bg: var(--eduloo-input-inset-bg); --eduloo-modal-input-focus-bg: color-mix( in srgb, var(--eduloo-input-inset-bg) 66%, var(--primary-container) 34% ); --eduloo-modal-shell-border: color-mix( in srgb, var(--outline-variant) 78%, rgba(255, 255, 255, 0.2) 22% ); } body.theme-dark .st-study-modal .st-modal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 20px -14px rgba(0, 0, 0, 0.36) !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card { border: 1px solid var(--eduloo-modal-shell-border) !important; background: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ) !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item.selected, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card.is-selected { border-color: var(--eduloo-modal-option-selected-border) !important; background: var(--eduloo-modal-option-selected-bg) !important; color: var(--eduloo-modal-option-selected-text) !important; } body.theme-dark { --eduloo-modal-shell-bg: color-mix( in srgb, var(--surface-container-high) 86%, var(--primary-container) 14% ); --eduloo-modal-panel-bg: color-mix( in srgb, var(--surface-container-highest) 78%, var(--surface-container-high) 22% ); --eduloo-modal-input-bg: var(--eduloo-input-unified-bg); --eduloo-modal-input-bg-hover: var(--eduloo-input-unified-bg-hover); --eduloo-modal-input-focus-bg: var(--eduloo-input-unified-bg-focus); --eduloo-modal-shell-border: color-mix( in srgb, var(--outline-variant) 72%, rgba(255, 255, 255, 0.28) 28% ); --eduloo-modal-option-selected-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 90%, var(--on-primary-container) 10%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ); --eduloo-modal-option-selected-border: color-mix( in srgb, var(--primary) 68%, rgba(255, 255, 255, 0.32) 32% ); --eduloo-modal-option-selected-text: #fff5f9; } body.theme-dark .st-study-modal .st-modal { background: var(--eduloo-modal-shell-bg) !important; border: 1px solid var(--eduloo-modal-shell-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 24px -16px rgba(0, 0, 0, 0.36) !important; } body.theme-dark .st-study-modal .st-modal-form-group { background: var(--eduloo-modal-panel-bg) !important; border: 1px solid var(--eduloo-modal-shell-border) !important; } body.theme-dark .st-study-modal .st-modal-form-group input, body.theme-dark .st-study-modal .st-modal-form-group textarea, body.theme-dark .st-study-modal .st-modal-form-group select, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger { background: var(--eduloo-modal-input-bg) !important; border: 1px solid var(--eduloo-input-unified-border) !important; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important; } body.theme-dark .st-study-modal .st-modal-form-group input:hover, body.theme-dark .st-study-modal .st-modal-form-group textarea:hover, body.theme-dark .st-study-modal .st-modal-form-group select:hover, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger:hover:not(:disabled) { background: var(--eduloo-modal-input-bg-hover) !important; border-color: var(--eduloo-input-unified-border-hover) !important; filter: none !important; transform: none !important; } body.theme-dark .st-study-modal .st-modal-form-group input:focus, body.theme-dark .st-study-modal .st-modal-form-group input:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group textarea:focus, body.theme-dark .st-study-modal .st-modal-form-group textarea:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group select:focus, body.theme-dark .st-study-modal .st-modal-form-group select:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger:focus-visible { background: var(--eduloo-modal-input-focus-bg) !important; border-color: var(--eduloo-input-unified-border-focus) !important; box-shadow: 0 0 0 2px var(--eduloo-input-unified-ring) !important; filter: none !important; transform: none !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-btn, body.theme-dark .st-study-modal .st-modal-form-group .button.button-secondary.st-btn, body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card { background: color-mix( in srgb, var(--surface-container-highest) 80%, var(--primary-container) 20% ) !important; border: 1px solid var(--eduloo-modal-shell-border) !important; color: var(--eduloo-text-body) !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-btn:hover, body.theme-dark .st-study-modal .st-modal-form-group .button.button-secondary.st-btn:hover, body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item:hover, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card:hover { background: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ) !important; border-color: color-mix(in srgb, var(--eduloo-modal-shell-border) 54%, var(--primary) 46%) !important; filter: none !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-btn.selected, body.theme-dark .st-study-modal .st-modal-form-group .st-btn.is-selected, body.theme-dark .st-study-modal .st-modal-form-group .st-btn.active, body.theme-dark .st-study-modal .st-modal-form-group .st-btn[aria-selected='true'], body.theme-dark .st-study-modal .st-modal-form-group .st-btn[aria-pressed='true'], body.theme-dark .st-study-modal .st-modal-form-group .button.button-secondary.st-btn[aria-pressed='true'], body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item.selected, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card.is-selected, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-option.selected:not(.disabled) { background: var(--eduloo-modal-option-selected-bg) !important; border: 1px solid var(--eduloo-modal-option-selected-border) !important; color: var(--eduloo-modal-option-selected-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn, body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn, body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn, body.theme-dark .st-study-modal .button.button-secondary.st-btn { background: color-mix( in srgb, var(--surface-container-highest) 80%, var(--surface-container-high) 20% ) !important; border: 1px solid var(--eduloo-modal-shell-border) !important; color: var(--eduloo-text-title) !important; } body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn.button-primary, body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn.button-primary, body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn.button-primary, body.theme-dark .st-study-modal .button.button-primary.st-btn, body.theme-dark .st-study-modal .button.button-secondary.st-btn.btn-success { background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ) !important; border: 1px solid color-mix(in srgb, var(--primary) 68%, rgba(255, 255, 255, 0.3) 32%) !important; color: #fff5f9 !important; } body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon, body.theme-dark .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon { border: 1px solid var(--eduloo-modal-shell-border) !important; background: color-mix( in srgb, var(--surface-container-highest) 78%, var(--surface-container-high) 22% ) !important; } body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon:hover, body.theme-dark .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon:hover { background: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ) !important; border-color: color-mix(in srgb, var(--outline-variant) 54%, var(--primary) 46%) !important; filter: none !important; } body .st-study-modal--edit-quiz .st-modal-header { margin-bottom: 10px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .button.button-secondary.st-btn.st-btn--only-icon { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .button.button-secondary.st-btn.st-btn--only-icon .icon, body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .button.button-secondary.st-btn.st-btn--only-icon i { margin: 0 !important; line-height: 1 !important; transform: translateY(0) !important; } body .st-study-modal--edit-quiz .st-modal-quiz-answer-tab { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0 !important; } body .st-study-modal--edit-quiz .button.button-secondary.st-btn.st-modal-quiz-correct-btn { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; border-radius: 10px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } @media (max-width: 760px) { body .st-study-modal--edit-quiz .st-modal-header { margin-bottom: 8px !important; } body .st-study-modal--edit-quiz .st-modal-quiz-item-actions .button.button-secondary.st-btn.st-btn--only-icon, body .st-study-modal--edit-quiz .button.button-secondary.st-btn.st-modal-quiz-correct-btn { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; border-radius: 9px !important; } } body.theme-dark .st-study-modal--edit-quiz .st-modal-quiz-search { position: relative !important; min-height: 40px !important; height: 40px !important; } body.theme-dark .st-study-modal--edit-quiz .st-modal-quiz-search .search-field__input { min-height: 40px !important; height: 40px !important; padding-left: 36px !important; padding-right: 12px !important; } body.theme-dark .st-study-modal--edit-quiz .st-modal-quiz-search .search-field__icon { position: absolute !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; left: 12px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; pointer-events: none !important; line-height: 1 !important; color: var(--eduloo-modal-muted) !important; } body.theme-dark .st-study-modal--edit-quiz [data-edit-quiz-add-trigger].button.button-secondary.st-btn:not( .st-modal-quiz-add-trigger--cancel ) { background: var(--eduloo-ui-primary-btn-bg) !important; border: 1px solid var(--eduloo-ui-primary-btn-border) !important; color: var(--on-primary-container) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--eduloo-ui-primary-btn-shadow) !important; } body.theme-dark .st-study-modal--edit-quiz [data-edit-quiz-add-trigger].button.button-secondary.st-btn:not( .st-modal-quiz-add-trigger--cancel ):hover, body.theme-dark .st-study-modal--edit-quiz [data-edit-quiz-add-trigger].button.button-secondary.st-btn:not( .st-modal-quiz-add-trigger--cancel ):focus-visible { background: var(--eduloo-ui-primary-btn-bg) !important; color: var(--on-primary-container) !important; filter: brightness(1.08) !important; border-color: var(--eduloo-ui-primary-btn-border) !important; } body.theme-dark .st-study-modal--edit-quiz [data-edit-quiz-add-trigger].button.button-secondary.st-btn .icon { color: inherit !important; } body.theme-dark .st-study-modal--edit-quiz .st-modal-quiz-list { background: color-mix( in srgb, var(--surface-container-high) 88%, var(--surface-container-low) 12% ) !important; box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--outline-variant) 76%, rgba(255, 255, 255, 0.24) 24% ) !important; } body.theme-dark .st-study-modal.st-study-modal--edit-quiz .st-modal-quiz-list .st-modal-quiz-item, body.theme-dark .st-study-modal.st-study-modal--edit-quiz .st-modal-quiz-list .st-modal-quiz-item:hover, body.theme-dark .st-study-modal.st-study-modal--edit-quiz .st-modal-quiz-list .st-modal-quiz-item--expanded, body.theme-dark .st-study-modal.st-study-modal--edit-quiz .st-modal-quiz-list .st-modal-quiz-item.selected { box-shadow: none !important; } body.theme-dark { --eduloo-modal-overlay: color-mix(in srgb, black 68%, transparent); --eduloo-modal-shell-bg: color-mix( in srgb, var(--surface-container-high) 86%, var(--primary-container) 14% ); --eduloo-modal-shell-border: color-mix( in srgb, var(--outline-variant) 72%, rgba(255, 255, 255, 0.28) 28% ); --eduloo-modal-header-bg: color-mix( in srgb, var(--surface-container-highest) 78%, var(--surface-container-high) 22% ); --eduloo-modal-panel-bg: color-mix( in srgb, var(--surface-container-highest) 78%, var(--surface-container-high) 22% ); --eduloo-modal-panel-alt: color-mix( in srgb, var(--surface-container-highest) 82%, var(--secondary-container) 18% ); --eduloo-modal-input-bg: var(--eduloo-input-unified-bg); --eduloo-modal-input-bg-hover: var(--eduloo-input-unified-bg-hover); --eduloo-modal-input-focus-bg: var(--eduloo-input-unified-bg-focus); --eduloo-modal-input-border: var(--eduloo-input-unified-border); --eduloo-modal-input-border-focus: var(--eduloo-input-unified-border-focus); --eduloo-modal-focus: var(--eduloo-input-unified-ring); --eduloo-modal-button-bg: color-mix( in srgb, var(--surface-container-highest) 80%, var(--primary-container) 20% ); --eduloo-modal-button-hover: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ); --eduloo-modal-button-text: var(--eduloo-text-title); --eduloo-modal-button-border: color-mix( in srgb, var(--outline-variant) 72%, rgba(255, 255, 255, 0.28) 28% ); --eduloo-modal-option-unselected-bg: color-mix( in srgb, var(--surface-container-highest) 80%, var(--primary-container) 20% ); --eduloo-modal-option-unselected-border: var(--eduloo-modal-shell-border); --eduloo-modal-option-selected-bg: var(--eduloo-ui-primary-btn-bg); --eduloo-modal-option-selected-border: var(--eduloo-ui-primary-btn-border); --eduloo-modal-option-selected-text: var(--on-primary-container); --eduloo-modal-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.38); } body.theme-dark .st-study-modal { background: var(--eduloo-modal-overlay) !important; backdrop-filter: blur(12px) saturate(118%) !important; -webkit-backdrop-filter: blur(12px) saturate(118%) !important; } body.theme-dark .st-study-modal .st-modal { background: var(--eduloo-modal-shell-bg) !important; border: 1px solid var(--eduloo-modal-shell-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--eduloo-modal-shadow) !important; } body.theme-dark .st-study-modal .st-modal-header { background: var(--eduloo-modal-header-bg) !important; border-bottom: 1px solid var(--eduloo-modal-shell-border) !important; } body.theme-dark .st-study-modal .st-modal-form-group { background: var(--eduloo-modal-panel-bg) !important; border: 1px solid var(--eduloo-modal-shell-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.theme-dark .st-study-modal .st-modal-form-group label { color: var(--eduloo-text-title) !important; } body.theme-dark .st-study-modal .st-modal-form-group input, body.theme-dark .st-study-modal .st-modal-form-group textarea, body.theme-dark .st-study-modal .st-modal-form-group select, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger, body.theme-dark .st-study-modal .st-modal-form-group .st-topic-select-row .custom-dropdown-trigger { background: var(--eduloo-modal-input-bg) !important; border: 1px solid var(--eduloo-modal-input-border) !important; color: var(--eduloo-text-title) !important; outline: none !important; box-shadow: none !important; } body.theme-dark .st-study-modal .st-modal-form-group input:hover, body.theme-dark .st-study-modal .st-modal-form-group textarea:hover, body.theme-dark .st-study-modal .st-modal-form-group select:hover, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .st-study-modal .st-modal-form-group .st-topic-select-row .custom-dropdown-trigger:hover:not(:disabled) { background: var(--eduloo-modal-input-bg-hover) !important; border-color: var(--eduloo-input-unified-border-hover) !important; } body.theme-dark .st-study-modal .st-modal-form-group input:focus, body.theme-dark .st-study-modal .st-modal-form-group input:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group textarea:focus, body.theme-dark .st-study-modal .st-modal-form-group textarea:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group select:focus, body.theme-dark .st-study-modal .st-modal-form-group select:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger:focus-visible, body.theme-dark .st-study-modal .st-modal-form-group .st-topic-select-row .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .st-study-modal .st-modal-form-group .st-topic-select-row .custom-dropdown-trigger:focus-visible { background: var(--eduloo-modal-input-focus-bg) !important; border-color: var(--eduloo-modal-input-border-focus) !important; outline: none !important; box-shadow: 0 0 0 2px var(--eduloo-modal-focus) !important; } body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-panel { background: var(--eduloo-modal-panel-alt) !important; border: 1px solid var(--eduloo-modal-shell-border) !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card, body.theme-dark .st-study-modal .st-modal-form-group .st-btn.st-btn--sm, body.theme-dark .st-study-modal .st-modal-form-group .st-quizz-option { background: var(--eduloo-modal-option-unselected-bg) !important; border: 1px solid var(--eduloo-modal-option-unselected-border) !important; color: var(--eduloo-text-body) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item:hover, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card:hover, body.theme-dark .st-study-modal .st-modal-form-group .st-btn.st-btn--sm:hover, body.theme-dark .st-study-modal .st-modal-form-group .st-quizz-option:hover { background: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ) !important; border-color: color-mix(in srgb, var(--outline-variant) 54%, var(--primary) 46%) !important; filter: none !important; } body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item.selected, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card.is-selected, body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card.selected, body.theme-dark .st-study-modal .st-modal-form-group .st-btn.st-btn--sm.selected, body.theme-dark .st-study-modal .st-modal-form-group .st-btn.st-btn--sm[aria-pressed='true'], body.theme-dark .st-study-modal .st-modal-form-group .st-btn.st-btn--sm[aria-selected='true'], body.theme-dark .st-study-modal .st-modal-form-group .st-quizz-option--selected, body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-option.selected:not(.disabled) { background: var(--eduloo-modal-option-selected-bg) !important; border-color: var(--eduloo-modal-option-selected-border) !important; color: var(--eduloo-modal-option-selected-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } body.theme-dark .st-study-modal .st-modal-footer, body.theme-dark .st-study-modal .modal-footer, body.theme-dark .st-study-modal .modal-actions { border-top: 1px solid var(--eduloo-modal-shell-border) !important; background: color-mix( in srgb, var(--eduloo-dark-elev-panel) 84%, var(--surface-container-high) 16% ) !important; } body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn, body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn, body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn, body.theme-dark .st-study-modal .button.button-secondary.st-btn { background: var(--eduloo-modal-button-bg) !important; border: 1px solid var(--eduloo-modal-button-border) !important; color: var(--eduloo-modal-button-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--eduloo-dark-shadow-soft) !important; } body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn:hover, body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn:hover, body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn:hover, body.theme-dark .st-study-modal .button.button-secondary.st-btn:hover { background: var(--eduloo-modal-button-hover) !important; border-color: color-mix( in srgb, var(--outline-variant) 54%, var(--primary) 46% ) !important; filter: none !important; } body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn.button-primary, body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn.button-primary, body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn.button-primary, body.theme-dark .st-study-modal .button.button-primary.st-btn, body.theme-dark .st-study-modal .button.button-secondary.st-btn.btn-success { background: var(--eduloo-ui-primary-btn-bg) !important; border: 1px solid var(--eduloo-ui-primary-btn-border) !important; color: var(--on-primary-container) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--eduloo-ui-primary-btn-shadow) !important; } body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon, body.theme-dark .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon { border: 1px solid var(--eduloo-modal-button-border) !important; background: var(--eduloo-modal-button-bg) !important; color: var(--eduloo-text-title) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon:hover, body.theme-dark .st-study-modal .st-modal-header button.button-secondary.st-btn.st-btn--only-icon:hover { background: color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ) !important; border-color: color-mix(in srgb, var(--outline-variant) 54%, var(--primary) 46%) !important; filter: none !important; } :root { --eduloo-nav-height: 96px; --eduloo-main-offset: calc(var(--eduloo-nav-height) + 26px); --eduloo-nav-border: color-mix(in srgb, var(--outline-variant) 42%, transparent); --eduloo-nav-border-strong: color-mix(in srgb, var(--outline) 60%, transparent); --eduloo-nav-bg: color-mix(in srgb, var(--surface) 86%, transparent); --eduloo-nav-text: var(--on-surface-variant); --eduloo-nav-text-strong: var(--on-surface); --eduloo-nav-pill: color-mix(in srgb, var(--surface-container-low) 78%, transparent); --eduloo-nav-pill-hover: color-mix(in srgb, var(--surface-container) 82%, transparent); --eduloo-nav-pill-active: color-mix(in srgb, var(--primary-container) 26%, var(--surface-container-low) 74%); --eduloo-nav-shadow: 0 16px 30px -24px color-mix(in srgb, var(--on-surface) 38%, transparent); } body.theme-dark { --eduloo-nav-border: color-mix(in srgb, var(--outline-variant) 66%, transparent); --eduloo-nav-border-strong: color-mix(in srgb, var(--outline) 82%, transparent); --eduloo-nav-bg: color-mix(in srgb, var(--surface-container-low) 78%, transparent); --eduloo-nav-text: var(--on-surface-variant); --eduloo-nav-text-strong: var(--on-surface); --eduloo-nav-pill: color-mix(in srgb, var(--surface-container) 78%, transparent); --eduloo-nav-pill-hover: color-mix(in srgb, var(--surface-container-high) 74%, transparent); --eduloo-nav-pill-active: color-mix(in srgb, var(--primary-container) 38%, var(--surface-container) 62%); --eduloo-nav-shadow: 0 18px 34px -22px color-mix(in srgb, black 72%, transparent); } body > main.container { margin-top: var(--eduloo-main-offset) !important; } body.pricing-page > main.container, body:has(.auth-split-container) > main, body > main.eduloo-page { margin-top: 0 !important; } body .navbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; z-index: 1300 !important; background: var(--eduloo-nav-bg) !important; border-bottom: 1px solid var(--eduloo-nav-border) !important; box-shadow: var(--eduloo-nav-shadow) !important; backdrop-filter: blur(24px) !important; } body .navbar::after { content: none !important; display: none !important; } body .navbar .navbar-inner, body .navbar .navbar-wrapper, body .navbar .navbar-wrapper.navbar-space-between { width: 100% !important; max-width: 1280px !important; min-height: var(--eduloo-nav-height) !important; height: var(--eduloo-nav-height) !important; margin: 0 auto !important; padding: 0 32px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; background: transparent !important; box-sizing: border-box !important; } body .navbar .navbar-brand { display: flex !important; align-items: center !important; gap: 8px !important; } body .navbar .navbar-brand img:not(.navbar-brand-logo) { width: 36px !important; height: 36px !important; } body .navbar .navbar-brand .navbar-brand-logo { width: auto !important; height: 18px !important; object-fit: contain !important; } body .navbar .navbar-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; flex: 0 0 auto !important; min-height: 78px !important; padding: 18px 30px !important; margin: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--eduloo-nav-text-strong) !important; opacity: 1 !important; font-size: 36px !important; font-weight: 800 !important; line-height: 1.1 !important; position: relative !important; inset: auto !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; translate: 0 0 !important; transition: background 220ms ease, color 220ms ease !important; } body .navbar .navbar-logo::before { width: 58px !important; height: 58px !important; margin-right: 16px !important; } body .navbar .navbar-logo:hover { background: transparent !important; color: var(--eduloo-nav-text-strong) !important; padding: 18px 30px !important; margin: 0 !important; position: relative !important; inset: auto !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; translate: 0 0 !important; box-shadow: none !important; } body .navbar .navbar-logo:focus, body .navbar .navbar-logo:focus-visible, body .navbar .navbar-logo:active { background: transparent !important; color: var(--eduloo-nav-text-strong) !important; padding: 18px 30px !important; margin: 0 !important; position: relative !important; inset: auto !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; translate: 0 0 !important; box-shadow: none !important; } body .navbar .navbar-links, body .navbar ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; overflow: visible !important; } body .navbar li { margin: 0 !important; display: flex !important; align-items: center !important; } body .navbar li.navbar-mobile-home, body .navbar li.navbar-mobile-reviews { display: none !important; } @media (max-width: 750px) { body .navbar li.navbar-mobile-home, body .navbar li.navbar-mobile-reviews { display: flex !important; } } body .navbar .navbar-links a, body .navbar li > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-height: 40px !important; padding: 10px 14px !important; border-radius: 999px !important; border: 1px solid transparent !important; background: transparent !important; color: var(--eduloo-nav-text) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; text-decoration: none !important; white-space: nowrap !important; transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease !important; } body .navbar .navbar-links a:hover:not(.navbar-logo), body .navbar li > a:hover:not(.navbar-logo) { color: var(--primary) !important; border-color: var(--eduloo-nav-border) !important; background: var(--eduloo-nav-pill-hover) !important; transform: translateY(-1px) !important; } body .navbar .navbar-links a.active, body .navbar li > a.active, body .navbar .navbar-links a[aria-current='page'], body .navbar li > a[aria-current='page'] { color: var(--primary) !important; border-color: color-mix(in srgb, var(--primary-container) 52%, transparent) !important; background: var(--eduloo-nav-pill-active) !important; box-shadow: 0 12px 22px -20px color-mix(in srgb, var(--primary) 54%, transparent) !important; } body .navbar .navbar-links a.active, body .navbar li > a.active { padding-bottom: 10px !important; } body .navbar a .fa-chevron-down { color: color-mix(in srgb, var(--eduloo-nav-text) 90%, transparent) !important; transition: transform 220ms ease, color 220ms ease !important; } body .navbar .dropdown:hover > a .fa-chevron-down, body .navbar .dropdown:focus-within > a .fa-chevron-down { color: var(--primary) !important; transform: rotate(180deg) !important; } body .navbar .dropdown > .dropdown-content, body .navbar .dropdown-content { top: calc(100% + 10px) !important; left: 0 !important; margin-top: 0 !important; width: 280px !important; max-width: min(300px, calc(100vw - 28px)) !important; min-width: 230px !important; padding: 8px !important; border-radius: 20px !important; border: 1px solid var(--eduloo-nav-border) !important; background: radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 52%), radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--secondary-container) 24%, transparent) 0%, transparent 54%), color-mix(in srgb, var(--surface-container-lowest) 94%, transparent) !important; box-shadow: 0 22px 36px -26px color-mix(in srgb, var(--on-surface) 44%, transparent) !important; backdrop-filter: blur(18px) !important; } body.theme-dark .navbar .dropdown > .dropdown-content, body.theme-dark .navbar .dropdown-content { border-color: var(--eduloo-nav-border-strong) !important; background: radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 54%), radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--secondary) 24%, transparent) 0%, transparent 56%), color-mix(in srgb, var(--surface-container) 94%, transparent) !important; box-shadow: 0 24px 38px -24px color-mix(in srgb, black 70%, transparent) !important; } body .navbar .dropdown-content a { min-height: 38px !important; margin-bottom: 4px !important; padding: 9px 10px !important; border: none !important; border-bottom: none !important; border-radius: 14px !important; background: transparent !important; color: var(--eduloo-nav-text-strong) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; text-align: left !important; gap: 10px !important; transform: none !important; box-shadow: none !important; transition: background 220ms ease, color 220ms ease, transform 220ms ease !important; } body .navbar .dropdown-content a::before, body .navbar .dropdown-content a::after { display: none !important; } body .navbar .dropdown-content a:last-child { margin-bottom: 0 !important; } body .navbar .dropdown-content a:hover, body .navbar .dropdown-content a:focus-visible { background: var(--eduloo-nav-pill-hover) !important; color: var(--primary) !important; transform: translateX(3px) !important; outline: none !important; } body .navbar .dropdown-content a.active, body .navbar .dropdown-content a[aria-current='page'] { background: var(--eduloo-nav-pill-active) !important; color: var(--primary) !important; } body .navbar .dropdown-content a .dropdown-icon, body .navbar .dropdown-content a .fi { width: 16px !important; min-width: 16px !important; font-size: 13px !important; color: var(--primary) !important; } body .navbar .dropdown-content a .dropdown-text { font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; } body .navbar .dropdown-content a .fas.fa-check { font-size: 12px !important; } body .navbar .language-dropdown .language-dropdown-content a { font-size: 13px !important; line-height: 1.35 !important; } body .navbar .language-dropdown .language-dropdown-content { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; min-width: 420px !important; max-width: 520px !important; padding: 8px !important; gap: 4px !important; border-radius: 20px !important; border: 1px solid var(--eduloo-nav-border) !important; background: radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 52%), radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--secondary-container) 20%, transparent) 0%, transparent 54%), color-mix(in srgb, var(--surface-container-lowest) 95%, transparent) !important; } body.theme-dark .navbar .language-dropdown .language-dropdown-content { border-color: var(--eduloo-nav-border-strong) !important; background: radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 54%), radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--secondary) 20%, transparent) 0%, transparent 56%), color-mix(in srgb, var(--surface-container) 95%, transparent) !important; } body .navbar .language-dropdown .language-dropdown-content a { min-height: 36px !important; padding: 8px 10px !important; border: none !important; border-right: none !important; border-radius: 12px !important; background: transparent !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--eduloo-nav-text-strong) !important; } body .navbar .language-dropdown .language-dropdown-content a:hover { background: var(--eduloo-nav-pill-hover) !important; color: var(--primary) !important; } body .navbar .language-dropdown .language-dropdown-content a .fi { width: 16px !important; height: 16px !important; } body .navbar .language-dropdown .language-dropdown-content a .fas.fa-check { color: var(--primary) !important; font-size: 12px !important; min-width: 12px !important; } body .navbar .language-dropdown .language-dropdown-content a .language-name, body .navbar .language-dropdown .language-dropdown-content a > *:not(.fi):not(.fa-check) { font-size: 12px !important; line-height: 1.3 !important; } body .navbar .blog-dropdown-item-title { font-size: 13px !important; line-height: 1.35 !important; } body .navbar .blog-dropdown-item-meta { font-size: 11px !important; line-height: 1.35 !important; } body .navbar .blog-dropdown .blog-dropdown-content { min-width: 320px !important; max-width: 360px !important; } body .navbar .blog-dropdown .blog-dropdown-content a.blog-dropdown-post { border-radius: 14px !important; font-size: 12px !important; line-height: 1.35 !important; } body .navbar .blog-dropdown .blog-dropdown-content a.blog-all-posts { display: grid !important; grid-template-columns: 16px 1fr !important; align-items: center !important; gap: 10px !important; min-height: 38px !important; padding: 9px 10px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 54%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--primary-container) 54%, transparent) !important; border-radius: 14px !important; background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 14%, transparent) 0%, color-mix(in srgb, var(--primary-container) 20%, transparent) 52%, color-mix(in srgb, var(--secondary-container) 20%, transparent) 100% ) !important; color: var(--eduloo-nav-text-strong) !important; box-shadow: 0 14px 24px -20px color-mix(in srgb, var(--primary) 40%, transparent) !important; transform: none !important; } body .navbar .blog-dropdown .blog-dropdown-content a.blog-all-posts:last-child { border-bottom: 1px solid color-mix(in srgb, var(--primary-container) 54%, transparent) !important; } body .navbar .blog-dropdown .blog-dropdown-content a.blog-all-posts:hover { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 20%, transparent) 0%, color-mix(in srgb, var(--primary-container) 28%, transparent) 56%, color-mix(in srgb, var(--secondary-container) 26%, transparent) 100% ) !important; border-color: color-mix(in srgb, var(--primary) 48%, transparent) !important; border-bottom-color: color-mix(in srgb, var(--primary) 48%, transparent) !important; color: var(--primary) !important; transform: none !important; box-shadow: 0 16px 28px -20px color-mix(in srgb, var(--primary) 48%, transparent) !important; } body .navbar .blog-dropdown .blog-dropdown-content a.blog-all-posts::before, body .navbar .blog-dropdown .blog-dropdown-content a.blog-all-posts::after { display: none !important; } body .navbar .blog-dropdown .blog-dropdown-content a.blog-all-posts .dropdown-icon { width: 16px !important; min-width: 16px !important; height: 16px !important; font-size: 12px !important; color: var(--primary) !important; top: 0 !important; } body .navbar .blog-dropdown .blog-dropdown-content a.blog-all-posts .dropdown-text { font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; } body .navbar .userpanel-nav-panel { width: 304px !important; padding: 10px !important; border-radius: 20px !important; border: 1px solid var(--eduloo-nav-border) !important; background: radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 54%), radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--secondary-container) 22%, transparent) 0%, transparent 56%), color-mix(in srgb, var(--surface-container-lowest) 95%, transparent) !important; box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--on-surface) 46%, transparent) !important; backdrop-filter: blur(16px) !important; } body.theme-dark .navbar .userpanel-nav-panel { border-color: var(--eduloo-nav-border-strong) !important; background: radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 56%), radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--secondary) 22%, transparent) 0%, transparent 58%), color-mix(in srgb, var(--surface-container) 95%, transparent) !important; } body .navbar .userpanel-nav-panel-kicker { font-size: 10px !important; } body .navbar .userpanel-nav-panel-title { font-size: 13px !important; } .userpanel-nav-panel-header, .userpanel-nav-panel-header h2, .userpanel-nav-panel h2, .userpanel-nav-panel-header::before, .userpanel-nav-panel-header::after, .userpanel-nav-panel h2::before, .userpanel-nav-panel h2::after, body .navbar .userpanel-nav-panel-header, body .navbar .userpanel-nav-panel-header h2, body .navbar .userpanel-nav-panel h2, body .navbar .userpanel-nav-panel-header::before, body .navbar .userpanel-nav-panel-header::after, body .navbar .userpanel-nav-panel h2::before, body .navbar .userpanel-nav-panel h2::after { border-bottom: none !important; box-shadow: none !important; } .userpanel-nav-panel-header::before, .userpanel-nav-panel-header::after, .userpanel-nav-panel h2::before, .userpanel-nav-panel h2::after, body .navbar .userpanel-nav-panel-header::before, body .navbar .userpanel-nav-panel-header::after, body .navbar .userpanel-nav-panel h2::before, body .navbar .userpanel-nav-panel h2::after { display: none !important; } body .navbar .userpanel-nav-item-text { font-size: 12px !important; line-height: 1.25 !important; } body .navbar .navbar-actions, body .navbar .nav-btn-wrapper { display: flex !important; align-items: center !important; gap: 12px !important; } body .navbar .btn-login, body .navbar a.btn-login { display: none !important; min-height: 40px !important; padding: 10px 16px !important; border-radius: 999px !important; border: 1px solid var(--eduloo-nav-border) !important; background: var(--eduloo-nav-pill) !important; color: var(--eduloo-nav-text) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease !important; } body .navbar .btn-login:hover, body .navbar a.btn-login:hover { color: var(--primary) !important; border-color: var(--eduloo-nav-border-strong) !important; background: var(--eduloo-nav-pill-hover) !important; transform: translateY(-1px) !important; box-shadow: none !important; } body .navbar .btn-get-started, body .navbar a.btn-get-started, body .navbar .btn-primary { min-height: 44px !important; padding: 12px 28px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 56%, transparent) !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%) !important; color: var(--on-primary) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.1 !important; box-shadow: 0 16px 28px -18px color-mix(in srgb, var(--primary) 56%, transparent) !important; transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease !important; } body .navbar .btn-get-started:hover, body .navbar a.btn-get-started:hover, body .navbar .btn-primary:hover { transform: translateY(-1px) scale(1.03) !important; filter: saturate(1.05) !important; box-shadow: 0 20px 32px -20px color-mix(in srgb, var(--primary) 62%, transparent) !important; } body .navbar .btn-get-started:active, body .navbar a.btn-get-started:active, body .navbar .btn-primary:active { transform: translateY(0) scale(0.99) !important; } body.theme-dark .navbar .btn-get-started, body.theme-dark .navbar a.btn-get-started, body.theme-dark .navbar .btn-primary { box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--primary) 46%, black 54%) !important; } body .navbar .theme-switcher, body .navbar [data-theme-switcher], body .navbar .theme-toggle, body .navbar .base-theme-switcher, body .navbar .base-theme-toggle { margin-right: 4px !important; } @media (min-width: 640px) { body .navbar .btn-login, body .navbar a.btn-login { display: inline-flex !important; } } @media (min-width: 768px) { body .navbar .navbar-links { display: flex !important; } } @media (min-width: 901px) { body:has(.base-sidebar--floating-left) .base-sidebar.base-sidebar--floating-left { top: var(--eduloo-nav-height) !important; height: calc(100vh - var(--eduloo-nav-height)) !important; padding-top: 0 !important; } } @media (max-width: 767px) { body .navbar .navbar-links { display: none !important; } } @media (max-width: 900px) { body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; padding: 0 !important; border-radius: 13px !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: -2px 0 0 !important; border: 1px solid color-mix(in srgb, var(--primary-container) 38%, var(--eduloo-nav-border) 62%) !important; background: color-mix(in srgb, var(--surface-container-lowest) 92%, var(--primary-container) 8%) !important; color: color-mix(in srgb, var(--primary) 82%, var(--eduloo-nav-text-strong) 18%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 58%, transparent), 0 10px 18px -16px color-mix(in srgb, var(--on-surface) 48%, transparent) !important; transform: none !important; } body .navbar .nav-toggle:hover, body .navbar .navbar-toggle:hover, body .navbar .menu-toggle:hover, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover { border-color: color-mix(in srgb, var(--primary-container) 58%, var(--eduloo-nav-border-strong) 42%) !important; background: color-mix(in srgb, var(--surface-container-lowest) 84%, var(--primary-container) 16%) !important; color: var(--primary) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 56%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--primary) 44%, transparent) !important; transform: none !important; } body .navbar .nav-toggle span, body .navbar .navbar-toggle span, body .navbar .menu-toggle span, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline span { display: block !important; width: 16px !important; height: 2px !important; border-radius: 999px !important; background: currentColor !important; margin: 2px auto !important; } body .navbar .nav-toggle i, body .navbar .navbar-toggle i, body .navbar .menu-toggle i, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline i, body .navbar .nav-toggle .icon, body .navbar .navbar-toggle .icon, body .navbar .menu-toggle .icon, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline .icon { font-size: 15px !important; line-height: 1 !important; color: currentColor !important; } body.theme-dark .navbar .nav-toggle, body.theme-dark .navbar .navbar-toggle, body.theme-dark .navbar .menu-toggle, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline { border-color: color-mix(in srgb, var(--primary-container) 46%, var(--eduloo-nav-border-strong) 54%) !important; background: color-mix(in srgb, var(--surface-container-high) 88%, var(--primary-container) 12%) !important; color: color-mix(in srgb, var(--on-surface) 88%, var(--primary-container) 12%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 24px -18px color-mix(in srgb, black 74%, transparent) !important; } body.theme-dark .navbar .nav-toggle:hover, body.theme-dark .navbar .navbar-toggle:hover, body.theme-dark .navbar .menu-toggle:hover, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover { background: color-mix(in srgb, var(--surface-container-high) 80%, var(--primary-container) 20%) !important; border-color: color-mix(in srgb, var(--primary-container) 66%, transparent) !important; color: var(--on-surface) !important; } body .navbar > ul, body .navbar .navbar-inner > ul, body .navbar .navbar-wrapper > ul, body .navbar .navbar-links { background: color-mix(in srgb, var(--surface-container-lowest) 96%, var(--surface) 4%) !important; border: 1px solid var(--eduloo-nav-border) !important; border-radius: 16px !important; box-shadow: 0 16px 26px -22px color-mix(in srgb, var(--on-surface) 44%, transparent) !important; } body.theme-dark .navbar > ul, body.theme-dark .navbar .navbar-inner > ul, body.theme-dark .navbar .navbar-wrapper > ul, body.theme-dark .navbar .navbar-links { background: color-mix(in srgb, var(--surface-container-highest) 92%, var(--surface-container) 8%) !important; border-color: var(--eduloo-nav-border-strong) !important; box-shadow: 0 18px 28px -22px color-mix(in srgb, black 72%, transparent) !important; } } @media (max-width: 760px) { :root { --eduloo-nav-height: 78px; --eduloo-main-offset: 104px; } body .navbar .navbar-inner, body .navbar .navbar-wrapper, body .navbar .navbar-wrapper.navbar-space-between { padding: 0 18px !important; min-height: var(--eduloo-nav-height) !important; height: var(--eduloo-nav-height) !important; gap: 10px !important; } body .navbar .btn-get-started, body .navbar a.btn-get-started, body .navbar .btn-primary { min-height: 40px !important; padding: 10px 18px !important; font-size: 13px !important; } body .navbar .navbar-logo { min-height: 58px !important; height: 58px !important; padding: 12px 18px !important; margin: 0 !important; font-size: 24px !important; line-height: 1 !important; align-self: center !important; position: relative !important; inset: auto !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; translate: 0 0 !important; } body .navbar .navbar-logo::before { width: 40px !important; height: 40px !important; margin-right: 11px !important; } body .navbar .navbar-logo:hover, body .navbar .navbar-logo:focus, body .navbar .navbar-logo:focus-visible, body .navbar .navbar-logo:active { padding: 12px 18px !important; margin: 0 !important; position: relative !important; inset: auto !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; translate: 0 0 !important; background: transparent !important; } body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; padding: 0 !important; border-radius: 12px !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: -2px 0 0 !important; border: 1px solid color-mix(in srgb, var(--primary-container) 38%, var(--eduloo-nav-border) 62%) !important; background: color-mix(in srgb, var(--surface-container-lowest) 92%, var(--primary-container) 8%) !important; color: color-mix(in srgb, var(--primary) 82%, var(--eduloo-nav-text-strong) 18%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 58%, transparent), 0 10px 18px -16px color-mix(in srgb, var(--on-surface) 48%, transparent) !important; transform: none !important; } body .navbar .nav-toggle:hover, body .navbar .navbar-toggle:hover, body .navbar .menu-toggle:hover, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover { border-color: color-mix(in srgb, var(--primary-container) 58%, var(--eduloo-nav-border-strong) 42%) !important; background: color-mix(in srgb, var(--surface-container-lowest) 84%, var(--primary-container) 16%) !important; color: var(--primary) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 56%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--primary) 44%, transparent) !important; transform: none !important; } body.theme-dark .navbar .nav-toggle, body.theme-dark .navbar .navbar-toggle, body.theme-dark .navbar .menu-toggle, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline { border-color: color-mix(in srgb, var(--primary-container) 46%, var(--eduloo-nav-border-strong) 54%) !important; background: color-mix(in srgb, var(--surface-container-high) 88%, var(--primary-container) 12%) !important; color: color-mix(in srgb, var(--on-surface) 88%, var(--primary-container) 12%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 24px -18px color-mix(in srgb, black 74%, transparent) !important; } body.theme-dark .navbar .nav-toggle:hover, body.theme-dark .navbar .navbar-toggle:hover, body.theme-dark .navbar .menu-toggle:hover, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover { background: color-mix(in srgb, var(--surface-container-high) 72%, var(--primary-container) 28%) !important; border-color: color-mix(in srgb, var(--primary-container) 66%, transparent) !important; color: var(--on-surface) !important; } body .navbar > ul, body .navbar .navbar-inner > ul, body .navbar .navbar-wrapper > ul, body .navbar .navbar-links { background: color-mix(in srgb, var(--surface-container-lowest) 96%, var(--surface) 4%) !important; border: 1px solid var(--eduloo-nav-border) !important; border-radius: 16px !important; box-shadow: 0 16px 26px -22px color-mix(in srgb, var(--on-surface) 44%, transparent) !important; } body.theme-dark .navbar > ul, body.theme-dark .navbar .navbar-inner > ul, body.theme-dark .navbar .navbar-wrapper > ul, body.theme-dark .navbar .navbar-links { background: color-mix(in srgb, var(--surface-container-highest) 92%, var(--surface-container) 8%) !important; border-color: var(--eduloo-nav-border-strong) !important; box-shadow: 0 18px 28px -22px color-mix(in srgb, black 72%, transparent) !important; } } @media (min-width: 751px) { body .navbar .mobile-theme-switcher, body .navbar .theme-switcher-mobile, body .navbar .theme-toggle-button-mobile, body .navbar .theme-toggle-mobile, body .navbar .theme-toggle-navbar { display: none !important; } } @media (max-width: 900px) { body .navbar .navbar-wrapper, body .navbar .navbar-wrapper.navbar-space-between, body .navbar .navbar-inner, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline), body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline), body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) { align-items: center !important; } body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle, body .navbar .base-sidebar-toggle, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle { margin: -6px 0 0 !important; position: relative !important; inset: auto !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; row-gap: 4px !important; padding: 0 !important; line-height: 0 !important; vertical-align: middle !important; align-self: center !important; justify-self: center !important; transform: none !important; } body .navbar .nav-toggle::before, body .navbar .nav-toggle::after, body .navbar .navbar-toggle::before, body .navbar .navbar-toggle::after, body .navbar .menu-toggle::before, body .navbar .menu-toggle::after { content: none !important; display: none !important; } body .navbar .nav-toggle span, body .navbar .navbar-toggle span, body .navbar .menu-toggle span, body .navbar .nav-toggle span:nth-child(1), body .navbar .nav-toggle span:nth-child(2), body .navbar .nav-toggle span:nth-child(3), body .navbar .navbar-toggle span:nth-child(1), body .navbar .navbar-toggle span:nth-child(2), body .navbar .navbar-toggle span:nth-child(3), body .navbar .menu-toggle span:nth-child(1), body .navbar .menu-toggle span:nth-child(2), body .navbar .menu-toggle span:nth-child(3) { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important; width: 16px !important; min-width: 16px !important; height: 2px !important; min-height: 2px !important; border-radius: 999px !important; background: currentColor !important; display: block !important; flex: 0 0 auto !important; } body .navbar .nav-toggle[aria-expanded='true'] span, body .navbar .navbar-toggle[aria-expanded='true'] span, body .navbar .menu-toggle[aria-expanded='true'] span, body .navbar .nav-toggle.open span, body .navbar .navbar-toggle.open span, body .navbar .menu-toggle.open span, body .navbar .nav-toggle.active span, body .navbar .navbar-toggle.active span, body .navbar .menu-toggle.active span, body .navbar .nav-toggle.is-active span, body .navbar .navbar-toggle.is-active span, body .navbar .menu-toggle.is-active span { display: block !important; width: 16px !important; height: 2px !important; margin: 0 !important; border-radius: 999px !important; transform-origin: center center !important; transition: transform 220ms ease, opacity 180ms ease !important; } body .navbar .nav-toggle[aria-expanded='true'] span:nth-child(1), body .navbar .navbar-toggle[aria-expanded='true'] span:nth-child(1), body .navbar .menu-toggle[aria-expanded='true'] span:nth-child(1), body .navbar .nav-toggle.open span:nth-child(1), body .navbar .navbar-toggle.open span:nth-child(1), body .navbar .menu-toggle.open span:nth-child(1), body .navbar .nav-toggle.active span:nth-child(1), body .navbar .navbar-toggle.active span:nth-child(1), body .navbar .menu-toggle.active span:nth-child(1), body .navbar .nav-toggle.is-active span:nth-child(1), body .navbar .navbar-toggle.is-active span:nth-child(1), body .navbar .menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; } body .navbar .nav-toggle[aria-expanded='true'] span:nth-child(2), body .navbar .navbar-toggle[aria-expanded='true'] span:nth-child(2), body .navbar .menu-toggle[aria-expanded='true'] span:nth-child(2), body .navbar .nav-toggle.open span:nth-child(2), body .navbar .navbar-toggle.open span:nth-child(2), body .navbar .menu-toggle.open span:nth-child(2), body .navbar .nav-toggle.active span:nth-child(2), body .navbar .navbar-toggle.active span:nth-child(2), body .navbar .menu-toggle.active span:nth-child(2), body .navbar .nav-toggle.is-active span:nth-child(2), body .navbar .navbar-toggle.is-active span:nth-child(2), body .navbar .menu-toggle.is-active span:nth-child(2) { opacity: 0 !important; transform: scaleX(0.2) !important; } body .navbar .nav-toggle[aria-expanded='true'] span:nth-child(3), body .navbar .navbar-toggle[aria-expanded='true'] span:nth-child(3), body .navbar .menu-toggle[aria-expanded='true'] span:nth-child(3), body .navbar .nav-toggle.open span:nth-child(3), body .navbar .navbar-toggle.open span:nth-child(3), body .navbar .menu-toggle.open span:nth-child(3), body .navbar .nav-toggle.active span:nth-child(3), body .navbar .navbar-toggle.active span:nth-child(3), body .navbar .menu-toggle.active span:nth-child(3), body .navbar .nav-toggle.is-active span:nth-child(3), body .navbar .navbar-toggle.is-active span:nth-child(3), body .navbar .menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; } body .navbar .base-sidebar-toggle, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline { border-color: color-mix(in srgb, var(--primary) 44%, var(--outline) 56%) !important; background: color-mix(in srgb, var(--primary) 34%, var(--surface-container-high) 66%) !important; color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 16px -14px color-mix(in srgb, var(--primary) 36%, transparent) !important; } body .navbar .base-sidebar-toggle .icon, body .navbar .base-sidebar-toggle i, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline .icon, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline i { color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; } body .navbar .base-sidebar-toggle:hover, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover { border-color: color-mix(in srgb, var(--primary) 44%, var(--outline) 56%) !important; background: color-mix(in srgb, var(--primary) 34%, var(--surface-container-high) 66%) !important; color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 16px -14px color-mix(in srgb, var(--primary) 36%, transparent) !important; transform: none !important; } body.theme-dark .navbar .base-sidebar-toggle, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline, body.theme-dark .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body.theme-dark .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body.theme-dark .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline { border-color: color-mix(in srgb, var(--eduloo-nav-border-strong) 80%, rgba(141, 152, 230, 0.2) 20%) !important; background: color-mix(in srgb, var(--surface-container-high) 90%, var(--surface-container-highest) 10%) !important; color: color-mix(in srgb, var(--on-surface-variant) 86%, var(--on-surface) 14%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 18px -14px color-mix(in srgb, black 72%, transparent) !important; } body.theme-dark .navbar .base-sidebar-toggle .icon, body.theme-dark .navbar .base-sidebar-toggle i, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline .icon, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline i { color: color-mix(in srgb, var(--on-surface-variant) 86%, var(--on-surface) 14%) !important; } body.theme-dark .navbar .base-sidebar-toggle:hover, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body.theme-dark .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body.theme-dark .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body.theme-dark .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover { border-color: color-mix(in srgb, var(--eduloo-nav-border-strong) 80%, rgba(141, 152, 230, 0.2) 20%) !important; background: color-mix(in srgb, var(--surface-container-high) 90%, var(--surface-container-highest) 10%) !important; color: color-mix(in srgb, var(--on-surface-variant) 86%, var(--on-surface) 14%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 18px -14px color-mix(in srgb, black 72%, transparent) !important; transform: none !important; } } @media (max-width: 900px) { body .navbar .navbar-inner, body .navbar .navbar-wrapper, body .navbar .navbar-wrapper.navbar-space-between, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline), body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) { position: relative !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; justify-items: center !important; } body .navbar .navbar-logo { grid-column: 2 !important; justify-self: center !important; align-self: center !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; transform: none !important; translate: 0 0 !important; z-index: 2 !important; } body .navbar .navbar-logo:hover, body .navbar .navbar-logo:focus, body .navbar .navbar-logo:focus-visible, body .navbar .navbar-logo:active { grid-column: 2 !important; justify-self: center !important; align-self: center !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; transform: none !important; translate: 0 0 !important; } body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle { grid-column: 3 !important; justify-self: end !important; align-self: center !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; transform: none !important; translate: 0 0 !important; z-index: 3 !important; } body .navbar .base-sidebar-toggle, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline { grid-column: 1 !important; justify-self: start !important; align-self: center !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; transform: none !important; translate: 0 0 !important; z-index: 3 !important; } body .navbar .nav-toggle:hover, body .navbar .navbar-toggle:hover, body .navbar .menu-toggle:hover, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle:hover, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle:hover, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle:hover, body .navbar .base-sidebar-toggle:hover, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover { transform: none !important; } body .navbar > ul, body .navbar .navbar-inner > ul, body .navbar .navbar-wrapper > ul, body .navbar .navbar-links { grid-column: 1 / -1 !important; justify-self: stretch !important; } } @media (min-width: 751px) { body .navbar .dropdown > .dropdown-content:not(.mega-menu-content), body .navbar .dropdown-content:not(.mega-menu-content) { max-width: min(360px, calc(100vw - 24px)) !important; max-height: min(68vh, calc(100dvh - var(--eduloo-nav-height) - 24px)) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; box-sizing: border-box !important; } body .navbar .navbar-section--right .dropdown > .dropdown-content:not(.mega-menu-content), body .navbar .dropdown.language-dropdown > .dropdown-content, body .navbar .dropdown.userpanel-nav-wrapper > .dropdown-content, body .navbar li:last-child > .dropdown-content:not(.mega-menu-content), body .navbar li:nth-last-child(2) > .dropdown-content:not(.mega-menu-content), body .navbar li:nth-last-child(3) > .dropdown-content:not(.mega-menu-content), body .navbar li:nth-last-child(4) > .dropdown-content:not(.mega-menu-content), body .navbar li:nth-last-child(5) > .dropdown-content:not(.mega-menu-content) { left: auto !important; right: 0 !important; } body .navbar .language-dropdown .language-dropdown-content { width: min(520px, calc(100vw - 24px)) !important; min-width: min(420px, calc(100vw - 24px)) !important; max-width: min(520px, calc(100vw - 24px)) !important; max-height: min(68vh, calc(100dvh - var(--eduloo-nav-height) - 24px)) !important; overflow-x: hidden !important; overflow-y: auto !important; } } @media (min-width: 751px) and (max-width: 1280px) { body .navbar .language-dropdown .language-dropdown-content { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: min(420px, calc(100vw - 24px)) !important; min-width: min(360px, calc(100vw - 24px)) !important; max-width: min(420px, calc(100vw - 24px)) !important; } } @media (min-width: 751px) and (max-width: 980px) { body .navbar .dropdown > .dropdown-content:not(.mega-menu-content), body .navbar .dropdown-content:not(.mega-menu-content) { width: min(280px, calc(100vw - 18px)) !important; min-width: min(220px, calc(100vw - 18px)) !important; max-width: min(280px, calc(100vw - 18px)) !important; } body .navbar .language-dropdown .language-dropdown-content { grid-template-columns: 1fr !important; width: min(300px, calc(100vw - 18px)) !important; min-width: min(240px, calc(100vw - 18px)) !important; max-width: min(300px, calc(100vw - 18px)) !important; } } @media (max-width: 900px) { body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle { transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 160ms ease !important; will-change: background-color, border-color, box-shadow, transform; -webkit-tap-highlight-color: transparent !important; border: 1px solid color-mix(in srgb, var(--primary-container) 48%, var(--eduloo-nav-border-strong) 52%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-lowest) 90%, var(--primary-container) 10%) 0%, color-mix(in srgb, var(--surface-container-low) 92%, var(--surface) 8%) 100% ) !important; color: color-mix(in srgb, var(--primary) 82%, var(--on-surface) 18%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 54%, transparent), 0 10px 18px -14px color-mix(in srgb, var(--on-surface) 42%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent) !important; opacity: 1 !important; } body.theme-dark .navbar .nav-toggle, body.theme-dark .navbar .navbar-toggle, body.theme-dark .navbar .menu-toggle { border-color: color-mix(in srgb, var(--primary-container) 62%, var(--eduloo-nav-border-strong) 38%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-high) 86%, var(--primary-container) 14%) 0%, color-mix(in srgb, var(--surface-container-highest) 88%, var(--surface-container) 12%) 100% ) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--primary) 6%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 22px -16px color-mix(in srgb, black 76%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent) !important; } body .navbar .nav-toggle:hover, body .navbar .navbar-toggle:hover, body .navbar .menu-toggle:hover { border-color: color-mix(in srgb, var(--primary) 52%, var(--eduloo-nav-border-strong) 48%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-lowest) 80%, var(--primary-container) 20%) 0%, color-mix(in srgb, var(--surface-container-low) 82%, var(--secondary-container) 18%) 100% ) !important; color: var(--primary) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--primary) 44%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent) !important; } body.theme-dark .navbar .nav-toggle:hover, body.theme-dark .navbar .navbar-toggle:hover, body.theme-dark .navbar .menu-toggle:hover { border-color: color-mix(in srgb, var(--primary-container) 72%, var(--eduloo-nav-border-strong) 28%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-high) 78%, var(--primary-container) 22%) 0%, color-mix(in srgb, var(--surface-container-highest) 80%, var(--secondary-container) 20%) 100% ) !important; color: var(--on-surface) !important; } body .navbar .navbar-section--right { border-top: none !important; margin-top: 4px !important; padding-top: 0 !important; } body .navbar .navbar-section--right::before, body .navbar .navbar-section--right::after { content: none !important; display: none !important; } body .navbar .userpanel-nav-item-logout { border-top: none !important; } body .navbar .mobile-theme-switcher { display: block !important; width: 100% !important; margin-top: 8px !important; padding: 0 16px !important; } body .navbar .theme-switcher-mobile { display: block !important; width: 100% !important; padding: 0 !important; } body .navbar .theme-toggle-button-mobile, body .navbar #theme-toggle-mobile { width: 100% !important; min-height: 44px !important; padding: 10px 14px !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 52%, var(--eduloo-nav-border) 48%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-lowest) 90%, var(--primary-container) 10%) 0%, color-mix(in srgb, var(--surface-container-low) 92%, var(--surface) 8%) 100% ) !important; color: var(--eduloo-nav-text-strong) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.2px !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 54%, transparent), 0 10px 20px -16px color-mix(in srgb, var(--on-surface) 42%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent) !important; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 160ms ease !important; } body.theme-dark .navbar .theme-toggle-button-mobile, body.theme-dark .navbar #theme-toggle-mobile { border-color: color-mix(in srgb, var(--primary-container) 62%, var(--eduloo-nav-border-strong) 38%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-high) 86%, var(--primary-container) 14%) 0%, color-mix(in srgb, var(--surface-container-highest) 88%, var(--surface-container) 12%) 100% ) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--primary) 6%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 22px -16px color-mix(in srgb, black 76%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent) !important; } body .navbar .theme-toggle-button-mobile:hover, body .navbar #theme-toggle-mobile:hover { border-color: color-mix(in srgb, var(--primary) 56%, var(--eduloo-nav-border-strong) 44%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-lowest) 80%, var(--primary-container) 20%) 0%, color-mix(in srgb, var(--surface-container-low) 82%, var(--secondary-container) 18%) 100% ) !important; color: var(--primary) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--primary) 44%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent) !important; transform: translateY(-1px) !important; } body.theme-dark .navbar .theme-toggle-button-mobile:hover, body.theme-dark .navbar #theme-toggle-mobile:hover { border-color: color-mix(in srgb, var(--primary-container) 72%, var(--eduloo-nav-border-strong) 28%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-high) 78%, var(--primary-container) 22%) 0%, color-mix(in srgb, var(--surface-container-highest) 80%, var(--secondary-container) 20%) 100% ) !important; color: var(--on-surface) !important; } body .navbar .theme-toggle-button-mobile:active, body .navbar #theme-toggle-mobile:active { transform: scale(0.98) !important; } body .navbar .theme-toggle-button-mobile:focus-visible, body .navbar #theme-toggle-mobile:focus-visible { outline: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent), inset 0 1px 0 color-mix(in srgb, white 42%, transparent), 0 10px 22px -16px color-mix(in srgb, var(--primary) 44%, transparent) !important; } body .navbar .theme-toggle-button-mobile .theme-icon, body .navbar #theme-toggle-mobile .theme-icon { font-size: 14px !important; line-height: 1 !important; color: currentColor !important; } body.theme-light .navbar .theme-toggle-button-mobile .theme-icon.fa-moon, body.theme-light .navbar #theme-toggle-mobile .theme-icon.fa-moon { display: none !important; } body.theme-light .navbar .theme-toggle-button-mobile .theme-icon.fa-sun, body.theme-light .navbar #theme-toggle-mobile .theme-icon.fa-sun { display: inline-block !important; } body.theme-dark .navbar .theme-toggle-button-mobile .theme-icon.fa-sun, body.theme-dark .navbar #theme-toggle-mobile .theme-icon.fa-sun { display: none !important; } body.theme-dark .navbar .theme-toggle-button-mobile .theme-icon.fa-moon, body.theme-dark .navbar #theme-toggle-mobile .theme-icon.fa-moon { display: inline-block !important; } body .navbar #nav-menu.navbar-nav .navbar-section > li > a, body .navbar .navbar-nav .navbar-section > li > a, body .navbar .navbar-nav .blog-dropdown-trigger, body .navbar .navbar-nav .userpanel-nav-toggle { width: calc(100% - 24px) !important; min-height: 42px !important; margin: 4px 12px !important; padding: 11px 14px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 46%, var(--eduloo-nav-border) 54%) !important; border-bottom: none !important; border-radius: 13px !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-lowest) 90%, var(--primary-container) 10%) 0%, color-mix(in srgb, var(--surface-container-low) 92%, var(--surface) 8%) 100% ) !important; color: var(--eduloo-nav-text-strong) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 10px !important; padding-left: 14px !important; padding-right: 14px !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 54%, transparent), 0 10px 18px -14px color-mix(in srgb, var(--on-surface) 38%, transparent) !important; transform: none !important; } body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a, body.theme-dark .navbar .navbar-nav .navbar-section > li > a, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle { border-color: color-mix(in srgb, var(--primary-container) 62%, var(--eduloo-nav-border-strong) 38%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-high) 86%, var(--primary-container) 14%) 0%, color-mix(in srgb, var(--surface-container-highest) 88%, var(--surface-container) 12%) 100% ) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--primary) 6%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 20px -16px color-mix(in srgb, black 76%, transparent) !important; } body .navbar #nav-menu.navbar-nav .navbar-section > li > a:hover, body .navbar .navbar-nav .navbar-section > li > a:hover, body .navbar .navbar-nav .blog-dropdown-trigger:hover, body .navbar .navbar-nav .userpanel-nav-toggle:hover, body .navbar #nav-menu.navbar-nav .navbar-section > li > a:active, body .navbar .navbar-nav .navbar-section > li > a:active, body .navbar .navbar-nav .blog-dropdown-trigger:active, body .navbar .navbar-nav .userpanel-nav-toggle:active { padding-left: 14px !important; padding-right: 14px !important; border-color: color-mix(in srgb, var(--primary) 54%, var(--eduloo-nav-border-strong) 46%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-lowest) 80%, var(--primary-container) 20%) 0%, color-mix(in srgb, var(--surface-container-low) 82%, var(--secondary-container) 18%) 100% ) !important; color: var(--primary) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 52%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--primary) 42%, transparent) !important; transform: none !important; } body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a:hover, body.theme-dark .navbar .navbar-nav .navbar-section > li > a:hover, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger:hover, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle:hover, body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a:active, body.theme-dark .navbar .navbar-nav .navbar-section > li > a:active, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger:active, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle:active { border-color: color-mix(in srgb, var(--primary-container) 74%, var(--eduloo-nav-border-strong) 26%) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-high) 78%, var(--primary-container) 22%) 0%, color-mix(in srgb, var(--surface-container-highest) 80%, var(--secondary-container) 20%) 100% ) !important; color: var(--on-surface) !important; } body .navbar .navbar-nav .navbar-section > li > a .fa-chevron-down, body .navbar .navbar-nav .blog-dropdown-trigger .fa-chevron-down, body .navbar .navbar-nav .userpanel-nav-toggle .fa-chevron-down { margin-left: 0 !important; } body .navbar .navbar-nav .navbar-section > li > a span, body .navbar .navbar-nav .blog-dropdown-trigger span, body .navbar .navbar-nav .userpanel-nav-toggle span, body .navbar .navbar-nav .userpanel-nav-toggle .sr-only { text-align: center !important; } body .navbar .nav-toggle:focus-visible, body .navbar .navbar-toggle:focus-visible, body .navbar .menu-toggle:focus-visible { outline: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent), inset 0 1px 0 color-mix(in srgb, white 38%, transparent), 0 10px 22px -16px color-mix(in srgb, var(--primary) 44%, transparent) !important; } body .navbar .nav-toggle:active, body .navbar .navbar-toggle:active, body .navbar .menu-toggle:active { transform: scale(0.96) !important; } body .navbar .nav-toggle[aria-expanded='true'], body .navbar .navbar-toggle[aria-expanded='true'], body .navbar .menu-toggle[aria-expanded='true'], body .navbar .nav-toggle.open, body .navbar .navbar-toggle.open, body .navbar .menu-toggle.open, body .navbar .nav-toggle.active, body .navbar .navbar-toggle.active, body .navbar .menu-toggle.active, body .navbar .nav-toggle.is-active, body .navbar .navbar-toggle.is-active, body .navbar .menu-toggle.is-active { border-color: color-mix( in srgb, var(--primary) 52%, var(--eduloo-nav-border-strong) 48% ) !important; background: linear-gradient( 135deg, color-mix( in srgb, var(--surface-container-lowest) 74%, var(--primary-container) 26% ) 0%, color-mix( in srgb, var(--surface-container-low) 66%, var(--secondary-container) 34% ) 100% ) !important; color: color-mix(in srgb, var(--primary) 88%, var(--on-surface) 12%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 52%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--primary) 46%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent) !important; } body.theme-dark .navbar .nav-toggle[aria-expanded='true'], body.theme-dark .navbar .navbar-toggle[aria-expanded='true'], body.theme-dark .navbar .menu-toggle[aria-expanded='true'], body.theme-dark .navbar .nav-toggle.open, body.theme-dark .navbar .navbar-toggle.open, body.theme-dark .navbar .menu-toggle.open, body.theme-dark .navbar .nav-toggle.active, body.theme-dark .navbar .navbar-toggle.active, body.theme-dark .navbar .menu-toggle.active, body.theme-dark .navbar .nav-toggle.is-active, body.theme-dark .navbar .navbar-toggle.is-active, body.theme-dark .navbar .menu-toggle.is-active { border-color: color-mix( in srgb, var(--primary-container) 64%, var(--eduloo-nav-border-strong) 36% ) !important; background: linear-gradient( 135deg, color-mix( in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36% ) 0%, color-mix( in srgb, var(--surface-container-high) 58%, var(--secondary-container) 42% ) 100% ) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--primary) 6%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 24px -18px color-mix(in srgb, var(--primary) 42%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent) !important; } body .navbar .nav-toggle[aria-expanded='true'] span, body .navbar .navbar-toggle[aria-expanded='true'] span, body .navbar .menu-toggle[aria-expanded='true'] span, body .navbar .nav-toggle.open span, body .navbar .navbar-toggle.open span, body .navbar .menu-toggle.open span, body .navbar .nav-toggle.active span, body .navbar .navbar-toggle.active span, body .navbar .menu-toggle.active span, body .navbar .nav-toggle.is-active span, body .navbar .navbar-toggle.is-active span, body .navbar .menu-toggle.is-active span { background: currentColor !important; opacity: 1 !important; } body .navbar .nav-toggle[aria-expanded='true'] span:nth-child(1), body .navbar .navbar-toggle[aria-expanded='true'] span:nth-child(1), body .navbar .menu-toggle[aria-expanded='true'] span:nth-child(1), body .navbar .nav-toggle.open span:nth-child(1), body .navbar .navbar-toggle.open span:nth-child(1), body .navbar .menu-toggle.open span:nth-child(1), body .navbar .nav-toggle.active span:nth-child(1), body .navbar .navbar-toggle.active span:nth-child(1), body .navbar .menu-toggle.active span:nth-child(1), body .navbar .nav-toggle.is-active span:nth-child(1), body .navbar .navbar-toggle.is-active span:nth-child(1), body .navbar .menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; } body .navbar .nav-toggle[aria-expanded='true'] span:nth-child(2), body .navbar .navbar-toggle[aria-expanded='true'] span:nth-child(2), body .navbar .menu-toggle[aria-expanded='true'] span:nth-child(2), body .navbar .nav-toggle.open span:nth-child(2), body .navbar .navbar-toggle.open span:nth-child(2), body .navbar .menu-toggle.open span:nth-child(2), body .navbar .nav-toggle.active span:nth-child(2), body .navbar .navbar-toggle.active span:nth-child(2), body .navbar .menu-toggle.active span:nth-child(2), body .navbar .nav-toggle.is-active span:nth-child(2), body .navbar .navbar-toggle.is-active span:nth-child(2), body .navbar .menu-toggle.is-active span:nth-child(2) { opacity: 0 !important; transform: scaleX(0.2) !important; } body .navbar .nav-toggle[aria-expanded='true'] span:nth-child(3), body .navbar .navbar-toggle[aria-expanded='true'] span:nth-child(3), body .navbar .menu-toggle[aria-expanded='true'] span:nth-child(3), body .navbar .nav-toggle.open span:nth-child(3), body .navbar .navbar-toggle.open span:nth-child(3), body .navbar .menu-toggle.open span:nth-child(3), body .navbar .nav-toggle.active span:nth-child(3), body .navbar .navbar-toggle.active span:nth-child(3), body .navbar .menu-toggle.active span:nth-child(3), body .navbar .nav-toggle.is-active span:nth-child(3), body .navbar .navbar-toggle.is-active span:nth-child(3), body .navbar .menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; } body .navbar #nav-menu.navbar-nav.is-open, body .navbar .navbar-nav.is-open { max-height: calc(100vh - var(--eduloo-nav-height)) !important; max-height: calc(100dvh - var(--eduloo-nav-height)) !important; padding-top: 10px !important; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid color-mix(in srgb, var(--eduloo-nav-border-strong) 62%, transparent) !important; border-left: 1px solid color-mix(in srgb, var(--eduloo-nav-border) 84%, transparent) !important; border-right: 1px solid color-mix(in srgb, var(--eduloo-nav-border) 84%, transparent) !important; border-bottom-left-radius: 24px !important; border-bottom-right-radius: 24px !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--surface-container-lowest) 92%, var(--primary-container) 8%) 0%, color-mix(in srgb, var(--surface-container-low) 94%, var(--surface) 6%) 100% ) !important; box-shadow: 0 24px 38px -24px color-mix(in srgb, var(--on-surface) 52%, transparent), inset 0 1px 0 color-mix(in srgb, white 28%, transparent) !important; backdrop-filter: blur(18px) saturate(122%) !important; -webkit-backdrop-filter: blur(18px) saturate(122%) !important; } body.theme-dark .navbar #nav-menu.navbar-nav.is-open, body.theme-dark .navbar .navbar-nav.is-open { border-top-color: color-mix(in srgb, var(--eduloo-nav-border-strong) 80%, transparent) !important; border-left-color: color-mix(in srgb, var(--eduloo-nav-border-strong) 74%, transparent) !important; border-right-color: color-mix(in srgb, var(--eduloo-nav-border-strong) 74%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--surface-container-highest) 88%, var(--primary-container) 12%) 0%, color-mix(in srgb, var(--surface-container-high) 90%, var(--surface-container) 10%) 100% ) !important; box-shadow: 0 26px 40px -24px color-mix(in srgb, black 82%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } body .navbar-overlay { transition: opacity 220ms ease, background-color 220ms ease, backdrop-filter 220ms ease !important; } body .navbar-overlay.is-open { background: color-mix(in srgb, var(--on-surface) 30%, transparent) !important; backdrop-filter: blur(8px) saturate(112%) !important; -webkit-backdrop-filter: blur(8px) saturate(112%) !important; } body.theme-dark .navbar-overlay.is-open { background: color-mix(in srgb, black 58%, transparent) !important; backdrop-filter: blur(10px) saturate(112%) !important; -webkit-backdrop-filter: blur(10px) saturate(112%) !important; } } @media (prefers-reduced-motion: reduce) { body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle, body .navbar .theme-toggle-button-mobile, body .navbar #theme-toggle-mobile, body .navbar-overlay, body .navbar #nav-menu.navbar-nav.is-open, body .navbar .navbar-nav.is-open { transition: none !important; } } @media (max-width: 900px) { body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle, body .navbar .nav-toggle[aria-expanded='true'], body .navbar .navbar-toggle[aria-expanded='true'], body .navbar .menu-toggle[aria-expanded='true'], body .navbar .nav-toggle.open, body .navbar .navbar-toggle.open, body .navbar .menu-toggle.open, body .navbar .nav-toggle.active, body .navbar .navbar-toggle.active, body .navbar .menu-toggle.active, body .navbar .nav-toggle.is-active, body .navbar .navbar-toggle.is-active, body .navbar .menu-toggle.is-active, body .navbar .theme-toggle-button-mobile, body .navbar #theme-toggle-mobile, body .navbar #nav-menu.navbar-nav .navbar-section > li > a, body .navbar .navbar-nav .navbar-section > li > a, body .navbar .navbar-nav .blog-dropdown-trigger, body .navbar .navbar-nav .userpanel-nav-toggle, body .navbar #nav-menu.navbar-nav.is-open, body .navbar .navbar-nav.is-open { box-shadow: none !important; transition: none !important; } body .navbar .nav-toggle, body .navbar .navbar-toggle, body .navbar .menu-toggle { border: 1px solid color-mix(in srgb, var(--outline-variant) 44%, transparent) !important; background: color-mix(in srgb, var(--surface-container-lowest) 86%, var(--primary-container) 14%) !important; color: color-mix(in srgb, var(--primary) 78%, var(--on-surface) 22%) !important; } body.theme-dark .navbar .nav-toggle, body.theme-dark .navbar .navbar-toggle, body.theme-dark .navbar .menu-toggle { border-color: color-mix(in srgb, var(--outline-variant) 66%, transparent) !important; background: color-mix(in srgb, var(--surface-container-high) 82%, var(--primary-container) 18%) !important; color: color-mix(in srgb, var(--on-surface) 92%, var(--primary) 8%) !important; } body .navbar .nav-toggle:hover, body .navbar .navbar-toggle:hover, body .navbar .menu-toggle:hover, body .navbar .nav-toggle:active, body .navbar .navbar-toggle:active, body .navbar .menu-toggle:active { border-color: color-mix(in srgb, var(--outline-variant) 44%, transparent) !important; background: color-mix(in srgb, var(--surface-container-lowest) 86%, var(--primary-container) 14%) !important; color: color-mix(in srgb, var(--primary) 78%, var(--on-surface) 22%) !important; transform: none !important; } body.theme-dark .navbar .nav-toggle:hover, body.theme-dark .navbar .navbar-toggle:hover, body.theme-dark .navbar .menu-toggle:hover, body.theme-dark .navbar .nav-toggle:active, body.theme-dark .navbar .navbar-toggle:active, body.theme-dark .navbar .menu-toggle:active { border-color: color-mix(in srgb, var(--outline-variant) 66%, transparent) !important; background: color-mix(in srgb, var(--surface-container-high) 82%, var(--primary-container) 18%) !important; color: color-mix(in srgb, var(--on-surface) 92%, var(--primary) 8%) !important; } body .navbar #nav-menu.navbar-nav .navbar-section > li > a, body .navbar .navbar-nav .navbar-section > li > a, body .navbar .navbar-nav .blog-dropdown-trigger, body .navbar .navbar-nav .userpanel-nav-toggle { min-height: 44px !important; margin: 4px 12px !important; padding: 10px 14px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--surface-container-lowest) 84%, var(--primary-container) 16%) !important; color: var(--eduloo-nav-text-strong) !important; justify-content: center !important; gap: 10px !important; padding-left: 14px !important; padding-right: 14px !important; } body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a, body.theme-dark .navbar .navbar-nav .navbar-section > li > a, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle { border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent) !important; background: color-mix(in srgb, var(--surface-container-high) 80%, var(--primary-container) 20%) !important; color: color-mix(in srgb, var(--on-surface) 92%, var(--primary) 8%) !important; } body .navbar #nav-menu.navbar-nav .navbar-section > li > a:hover, body .navbar .navbar-nav .navbar-section > li > a:hover, body .navbar .navbar-nav .blog-dropdown-trigger:hover, body .navbar .navbar-nav .userpanel-nav-toggle:hover, body .navbar #nav-menu.navbar-nav .navbar-section > li > a:active, body .navbar .navbar-nav .navbar-section > li > a:active, body .navbar .navbar-nav .blog-dropdown-trigger:active, body .navbar .navbar-nav .userpanel-nav-toggle:active { border-color: color-mix(in srgb, var(--outline-variant) 40%, transparent) !important; background: color-mix(in srgb, var(--surface-container-lowest) 84%, var(--primary-container) 16%) !important; color: var(--eduloo-nav-text-strong) !important; transform: none !important; } body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a:hover, body.theme-dark .navbar .navbar-nav .navbar-section > li > a:hover, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger:hover, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle:hover, body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a:active, body.theme-dark .navbar .navbar-nav .navbar-section > li > a:active, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger:active, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle:active { border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent) !important; background: color-mix(in srgb, var(--surface-container-high) 80%, var(--primary-container) 20%) !important; color: color-mix(in srgb, var(--on-surface) 92%, var(--primary) 8%) !important; } body .navbar .navbar-nav .navbar-section > li > a i:not(.fa-chevron-down), body .navbar .navbar-nav .blog-dropdown-trigger i:not(.fa-chevron-down), body .navbar .navbar-nav .userpanel-nav-toggle i:not(.fa-chevron-down) { width: 28px !important; min-width: 28px !important; height: 28px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; color: color-mix(in srgb, var(--primary) 78%, var(--on-surface) 22%) !important; background: color-mix(in srgb, var(--surface-container-lowest) 62%, var(--primary-container) 38%) !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a i:not(.fa-chevron-down), body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger i:not(.fa-chevron-down), body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle i:not(.fa-chevron-down) { color: color-mix(in srgb, var(--on-surface) 90%, var(--secondary-container) 10%) !important; background: color-mix(in srgb, var(--surface-container-highest) 60%, var(--primary-container) 40%) !important; } body .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard'] { border-color: color-mix(in srgb, var(--secondary-container) 62%, var(--primary-container) 38%) !important; background: color-mix(in srgb, var(--secondary-container) 64%, var(--surface-container-lowest) 36%) !important; color: color-mix(in srgb, var(--primary) 84%, var(--on-surface) 16%) !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard'] { border-color: color-mix(in srgb, var(--secondary-container) 74%, var(--outline-variant) 26%) !important; background: color-mix(in srgb, var(--secondary-container) 58%, var(--surface-container-high) 42%) !important; color: color-mix(in srgb, var(--on-surface) 92%, var(--secondary-container) 8%) !important; } body .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard']:hover, body .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard']:active { border-color: color-mix(in srgb, var(--secondary-container) 62%, var(--primary-container) 38%) !important; background: color-mix(in srgb, var(--secondary-container) 64%, var(--surface-container-lowest) 36%) !important; color: color-mix(in srgb, var(--primary) 84%, var(--on-surface) 16%) !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard']:hover, body.theme-dark .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard']:active { border-color: color-mix(in srgb, var(--secondary-container) 74%, var(--outline-variant) 26%) !important; background: color-mix(in srgb, var(--secondary-container) 58%, var(--surface-container-high) 42%) !important; color: color-mix(in srgb, var(--on-surface) 92%, var(--secondary-container) 8%) !important; } body .navbar .mobile-theme-switcher { margin-top: 8px !important; padding: 0 !important; } body .navbar .theme-switcher-mobile { display: flex !important; justify-content: center !important; width: 100% !important; } body .navbar .theme-toggle-button-mobile, body .navbar #theme-toggle-mobile { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 52%, transparent) !important; background: color-mix(in srgb, var(--surface-container-lowest) 80%, var(--secondary-container) 20%) !important; color: color-mix(in srgb, var(--primary) 78%, var(--on-surface) 22%) !important; gap: 0 !important; transform: none !important; } body.theme-dark .navbar .theme-toggle-button-mobile, body.theme-dark .navbar #theme-toggle-mobile { border-color: color-mix(in srgb, var(--outline-variant) 68%, transparent) !important; background: color-mix(in srgb, var(--surface-container-highest) 76%, var(--secondary-container) 24%) !important; color: color-mix(in srgb, var(--secondary-container) 76%, var(--on-surface) 24%) !important; } body .navbar .theme-toggle-button-mobile:hover, body .navbar #theme-toggle-mobile:hover, body .navbar .theme-toggle-button-mobile:active, body .navbar #theme-toggle-mobile:active { border-color: color-mix(in srgb, var(--outline-variant) 52%, transparent) !important; background: color-mix(in srgb, var(--surface-container-lowest) 80%, var(--secondary-container) 20%) !important; color: color-mix(in srgb, var(--primary) 78%, var(--on-surface) 22%) !important; transform: none !important; } body.theme-dark .navbar .theme-toggle-button-mobile:hover, body.theme-dark .navbar #theme-toggle-mobile:hover, body.theme-dark .navbar .theme-toggle-button-mobile:active, body.theme-dark .navbar #theme-toggle-mobile:active { border-color: color-mix(in srgb, var(--outline-variant) 68%, transparent) !important; background: color-mix(in srgb, var(--surface-container-highest) 76%, var(--secondary-container) 24%) !important; color: color-mix(in srgb, var(--secondary-container) 76%, var(--on-surface) 24%) !important; } body .navbar .theme-toggle-button-mobile span, body .navbar #theme-toggle-mobile span { display: none !important; } body .navbar .theme-toggle-button-mobile .theme-icon.fa-moon, body .navbar #theme-toggle-mobile .theme-icon.fa-moon { display: none !important; } body .navbar .theme-toggle-button-mobile .theme-icon.fa-sun, body .navbar #theme-toggle-mobile .theme-icon.fa-sun { display: inline-block !important; font-size: 16px !important; } body.theme-dark .navbar .theme-toggle-button-mobile .theme-icon.fa-sun, body.theme-dark .navbar #theme-toggle-mobile .theme-icon.fa-sun { display: none !important; } body.theme-dark .navbar .theme-toggle-button-mobile .theme-icon, body.theme-dark .navbar #theme-toggle-mobile .theme-icon { color: color-mix(in srgb, var(--on-primary-container) 78%, var(--primary) 22%) !important; } body.theme-dark .navbar .theme-toggle-button-mobile .theme-icon.fa-moon, body.theme-dark .navbar #theme-toggle-mobile .theme-icon.fa-moon { display: inline-block !important; font-size: 16px !important; } body .navbar .nav-toggle:focus-visible, body .navbar .navbar-toggle:focus-visible, body .navbar .menu-toggle:focus-visible, body .navbar .theme-toggle-button-mobile:focus-visible, body .navbar #theme-toggle-mobile:focus-visible { box-shadow: none !important; outline: 1px solid color-mix(in srgb, var(--primary) 48%, transparent) !important; outline-offset: 0 !important; } } @media (max-width: 900px) { body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a, body.theme-dark .navbar .navbar-nav .navbar-section > li > a, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle { min-height: 44px !important; margin: 3px 10px !important; padding: 8px 12px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--surface-container-high) 82%, var(--surface-container-highest) 18%) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--primary) 6%) !important; justify-content: flex-start !important; text-align: left !important; gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; box-shadow: none !important; transform: none !important; } body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a:hover, body.theme-dark .navbar .navbar-nav .navbar-section > li > a:hover, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger:hover, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle:hover, body.theme-dark .navbar #nav-menu.navbar-nav .navbar-section > li > a:active, body.theme-dark .navbar .navbar-nav .navbar-section > li > a:active, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger:active, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle:active { border-color: color-mix(in srgb, var(--outline-variant) 60%, transparent) !important; background: color-mix(in srgb, var(--surface-container-high) 82%, var(--surface-container-highest) 18%) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--primary) 6%) !important; box-shadow: none !important; transform: none !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a i:not(.fa-chevron-down), body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger i:not(.fa-chevron-down), body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle i:not(.fa-chevron-down) { width: 28px !important; min-width: 28px !important; height: 28px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; color: color-mix(in srgb, var(--on-surface) 90%, var(--secondary-container) 10%) !important; background: color-mix(in srgb, var(--surface-container-highest) 60%, var(--primary-container) 40%) !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a .fa-chevron-down, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger .fa-chevron-down, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle .fa-chevron-down { margin-left: auto !important; color: color-mix(in srgb, var(--on-surface-variant) 88%, transparent) !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a span, body.theme-dark .navbar .navbar-nav .blog-dropdown-trigger span, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle span, body.theme-dark .navbar .navbar-nav .userpanel-nav-toggle .sr-only { text-align: left !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard'] { border-color: color-mix(in srgb, var(--secondary-container) 66%, var(--outline-variant) 34%) !important; background: color-mix(in srgb, var(--surface-container-highest) 70%, var(--secondary-container) 30%) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--secondary-container) 6%) !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard']:hover, body.theme-dark .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard']:active { border-color: color-mix(in srgb, var(--secondary-container) 66%, var(--outline-variant) 34%) !important; background: color-mix(in srgb, var(--surface-container-highest) 70%, var(--secondary-container) 30%) !important; color: color-mix(in srgb, var(--on-surface) 94%, var(--secondary-container) 6%) !important; } body.theme-dark .navbar .navbar-nav .navbar-section > li > a[href*='/dashboard'] i:not(.fa-chevron-down) { background: color-mix(in srgb, var(--secondary-container) 54%, var(--surface-container-highest) 46%) !important; color: color-mix(in srgb, var(--on-surface) 92%, var(--secondary-container) 8%) !important; } } body.theme-dark .navbar { background: color-mix(in srgb, var(--surface-container-highest) 64%, black 36%) !important; background-image: none !important; } @media (max-width: 900px) { body.theme-dark .navbar #nav-menu.navbar-nav.is-open, body.theme-dark .navbar .navbar-nav.is-open { background: color-mix(in srgb, var(--surface-container-highest) 68%, black 32%) !important; background-image: none !important; } } :root { --eduloo-sidebar-width: 286px; --eduloo-sidebar-collapsed-width: 84px; --eduloo-sidebar-gap: 22px; --eduloo-sidebar-nav-offset: var(--eduloo-nav-height, var(--navbar-offset, 60px)); --base-sidebar-width: var(--eduloo-sidebar-width); --base-sidebar-collapsed-width: var(--eduloo-sidebar-collapsed-width); --base-sidebar-gap: var(--eduloo-sidebar-gap); --eduloo-sidebar-bg: color-mix(in srgb, var(--surface-container-low) 93%, var(--surface) 7%); --eduloo-sidebar-bg-elevated: color-mix(in srgb, var(--surface-container) 88%, var(--surface-container-low) 12%); --eduloo-sidebar-card: color-mix(in srgb, var(--surface-container-lowest) 82%, var(--surface-container-low) 18%); --eduloo-sidebar-card-strong: color-mix(in srgb, var(--surface-container-lowest) 74%, var(--surface-container) 26%); --eduloo-sidebar-card-border: color-mix(in srgb, var(--outline-variant) 38%, transparent); --eduloo-sidebar-border: color-mix(in srgb, var(--outline-variant) 46%, transparent); --eduloo-sidebar-text: var(--on-surface); --eduloo-sidebar-muted: var(--on-surface-variant); --eduloo-sidebar-icon: color-mix(in srgb, var(--primary) 74%, var(--on-primary-container) 26%); --eduloo-sidebar-item-hover: color-mix(in srgb, var(--surface-container) 76%, var(--primary-container) 24%); --eduloo-sidebar-item-active: color-mix(in srgb, var(--surface-container-lowest) 58%, var(--primary-container) 42%); --eduloo-sidebar-focus: color-mix(in srgb, var(--secondary-container) 58%, transparent); --eduloo-sidebar-shadow: 0 18px 34px -20px color-mix(in srgb, var(--on-surface) 46%, transparent); --eduloo-sidebar-card-shadow: 0 12px 24px -18px color-mix(in srgb, var(--on-surface) 42%, transparent); } body.theme-dark { --eduloo-sidebar-bg: color-mix(in srgb, var(--surface-container) 88%, var(--surface-container-high) 12%); --eduloo-sidebar-bg-elevated: color-mix(in srgb, var(--surface-container-high) 86%, var(--surface-container-highest) 14%); --eduloo-sidebar-card: color-mix(in srgb, var(--surface-container-high) 76%, var(--surface-container-highest) 24%); --eduloo-sidebar-card-strong: color-mix(in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28%); --eduloo-sidebar-card-border: color-mix(in srgb, var(--outline-variant) 60%, transparent); --eduloo-sidebar-border: color-mix(in srgb, var(--outline-variant) 66%, transparent); --eduloo-sidebar-text: color-mix(in srgb, var(--on-surface) 94%, var(--on-primary) 6%); --eduloo-sidebar-muted: color-mix(in srgb, var(--on-surface-variant) 88%, var(--on-primary) 12%); --eduloo-sidebar-icon: color-mix(in srgb, var(--on-surface) 82%, var(--secondary-container) 18%); --eduloo-sidebar-item-hover: color-mix(in srgb, var(--surface-container-highest) 58%, var(--primary-container) 42%); --eduloo-sidebar-item-active: color-mix(in srgb, var(--surface-container-highest) 54%, var(--primary-container) 46%); --eduloo-sidebar-focus: color-mix(in srgb, var(--secondary-container) 50%, transparent); --eduloo-sidebar-play-indigo: rgba(97, 121, 228, 0.24); --eduloo-sidebar-play-rose: rgba(190, 101, 159, 0.22); --eduloo-sidebar-play-mint: rgba(44, 191, 173, 0.18); --eduloo-sidebar-panel-border: rgba(141, 152, 230, 0.34); --eduloo-sidebar-shadow: 0 20px 36px -20px color-mix(in srgb, black 70%, transparent); --eduloo-sidebar-card-shadow: 0 14px 24px -18px color-mix(in srgb, black 72%, transparent); } body.theme-dark .base-sidebar__item-link:hover .base-sidebar__item-icon, body.theme-dark .base-sidebar__item-toggle:hover .base-sidebar__item-icon, body.theme-dark .base-sidebar__item-link.active .base-sidebar__item-icon, body.theme-dark .base-sidebar__item-toggle.active .base-sidebar__item-icon { color: var(--eduloo-sidebar-icon) !important; } body.theme-dark .base-sidebar { background: radial-gradient(circle at 0 4%, rgba(97, 121, 228, 0.18) 0%, transparent 36%), radial-gradient(circle at 100% 14%, rgba(44, 191, 173, 0.12) 0%, transparent 34%), radial-gradient(circle at 100% 100%, rgba(190, 101, 159, 0.16) 0%, transparent 40%), linear-gradient( 160deg, color-mix(in srgb, var(--surface-container) 88%, rgba(97, 121, 228, 0.12) 12%) 0%, color-mix(in srgb, var(--surface-container-high) 86%, rgba(190, 101, 159, 0.1) 14%) 100% ) !important; border-right-color: var(--eduloo-sidebar-panel-border) !important; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06), 0 22px 40px -24px rgba(0, 0, 0, 0.8) !important; } body.theme-dark .base-sidebar__header, body.theme-dark .base-sidebar__footer, body.theme-dark .base-sidebar__controls { border-color: rgba(141, 152, 230, 0.24) !important; } body.theme-dark .base-sidebar__title-card, body.theme-dark .base-sidebar__welcome-panel, body.theme-dark .base-sidebar__controls--placeholder { border-color: rgba(141, 152, 230, 0.28) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 80%, rgba(97, 121, 228, 0.2) 20%) 0%, color-mix(in srgb, var(--surface-container-highest) 84%, rgba(190, 101, 159, 0.16) 16%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 14px 24px -20px rgba(0, 0, 0, 0.72) !important; } body.theme-dark .base-sidebar__item-link:hover, body.theme-dark .base-sidebar__item-toggle:hover { border-color: rgba(141, 152, 230, 0.28) !important; background: linear-gradient(135deg, rgba(97, 121, 228, 0.2) 0%, rgba(44, 191, 173, 0.12) 50%, rgba(190, 101, 159, 0.16) 100%) !important; } body.theme-dark .base-sidebar__item-link.active, body.theme-dark .base-sidebar__item-toggle.active { border-color: rgba(159, 169, 241, 0.38) !important; background: linear-gradient(135deg, rgba(97, 121, 228, 0.26) 0%, rgba(44, 191, 173, 0.12) 52%, rgba(190, 101, 159, 0.2) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 24px -20px rgba(0, 0, 0, 0.68) !important; } body.theme-dark .base-sidebar__item-link.active .base-sidebar__item-icon, body.theme-dark .base-sidebar__item-toggle.active .base-sidebar__item-icon { background: linear-gradient(135deg, rgba(97, 121, 228, 0.3) 0%, rgba(44, 191, 173, 0.14) 52%, rgba(190, 101, 159, 0.24) 100%) !important; color: color-mix(in srgb, var(--on-surface) 90%, var(--on-primary) 10%) !important; } body .base-sidebar { --base-sidebar-width: var(--eduloo-sidebar-width); --base-sidebar-collapsed-width: var(--eduloo-sidebar-collapsed-width); --base-sidebar-gap: var(--eduloo-sidebar-gap); width: var(--base-sidebar-width) !important; background: var(--eduloo-sidebar-bg) !important; border-right: 1px solid var(--eduloo-sidebar-border) !important; color: var(--eduloo-sidebar-text) !important; box-shadow: var(--eduloo-sidebar-shadow) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; border-radius: 0 !important; } @media (min-width: 901px) { body .base-sidebar.base-sidebar--floating-left { top: var(--eduloo-sidebar-nav-offset) !important; height: calc(100vh - var(--eduloo-sidebar-nav-offset)) !important; padding-top: 0 !important; } } body .base-sidebar__header { padding: 16px 12px 10px !important; border-bottom: 1px solid var(--eduloo-sidebar-border) !important; } body .base-sidebar__title-card, body .base-sidebar__welcome-panel, body .base-sidebar__controls--placeholder { margin: 0 0 10px !important; border-radius: 22px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; box-shadow: var(--eduloo-sidebar-card-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body .base-sidebar__title-card { padding: 12px !important; } body .base-sidebar__title-name { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; font-weight: 800 !important; color: var(--eduloo-sidebar-text) !important; } body .base-sidebar__title-subtext { font-size: 11px !important; font-weight: 600 !important; color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar__welcome-panel { margin: 0 auto 10px !important; padding: 10px 12px !important; gap: 10px !important; } body .base-sidebar__welcome-avatar { width: 38px !important; height: 38px !important; border-radius: 14px !important; background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 90%, transparent) 0%, color-mix(in srgb, var(--primary-container) 70%, var(--secondary-container) 30%) 100% ) !important; color: var(--on-primary) !important; font-size: 13px !important; font-weight: 800 !important; box-shadow: none !important; } body .base-sidebar__welcome-greeting { font-size: 10px !important; letter-spacing: 0.6px !important; color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar__welcome-email { font-size: 12px !important; font-weight: 700 !important; color: var(--eduloo-sidebar-text) !important; } body .base-sidebar__search { padding: 6px !important; border-radius: 18px !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; } body .base-sidebar__search:hover { background: var(--eduloo-sidebar-item-hover) !important; border-color: var(--eduloo-sidebar-card-border) !important; box-shadow: none !important; } body .base-sidebar__search-icon-wrap { width: 34px !important; height: 34px !important; border-radius: 12px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card-strong) !important; box-shadow: none !important; } body .base-sidebar__search-icon-wrap i { color: var(--eduloo-sidebar-icon) !important; font-size: 13px !important; } body .base-sidebar__search-label { font-size: 12px !important; font-weight: 700 !important; color: var(--eduloo-sidebar-text) !important; } body .base-sidebar__search-kbd { border-radius: 10px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; color: var(--eduloo-sidebar-muted) !important; font-size: 10px !important; padding: 3px 7px !important; } body .base-sidebar__search .search-field__input, body .base-sidebar__search-input { height: 38px !important; min-height: 38px !important; border-radius: 12px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; color: var(--eduloo-sidebar-text) !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } body .base-sidebar__search .search-field__input:focus, body .base-sidebar__search-input:focus { border-color: color-mix(in srgb, var(--primary-container) 60%, transparent) !important; box-shadow: 0 0 0 3px var(--eduloo-sidebar-focus) !important; background: var(--eduloo-sidebar-card-strong) !important; } body .base-sidebar__content { padding: 10px 0 12px !important; } body .base-sidebar__content::-webkit-scrollbar { width: 8px !important; } body .base-sidebar__content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--outline-variant) 56%, transparent) !important; border-radius: 999px !important; } body .base-sidebar__menu { padding: 0 !important; } body .base-sidebar__group { margin-bottom: 2px !important; } body .base-sidebar__group-header { padding: 12px 14px 7px !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.7px !important; color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar__item { margin: 3px 8px !important; } body .base-sidebar__item-link, body .base-sidebar__item-toggle { min-height: 44px !important; padding: 6px 10px !important; border-radius: 16px !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; color: var(--eduloo-sidebar-text) !important; font-size: 13px !important; font-weight: 700 !important; gap: 10px !important; } body .base-sidebar__item-link:hover, body .base-sidebar__item-toggle:hover { background: var(--eduloo-sidebar-item-hover) !important; border-color: var(--eduloo-sidebar-card-border) !important; color: var(--eduloo-sidebar-text) !important; box-shadow: none !important; } body .base-sidebar__item-icon { width: 28px !important; min-width: 28px !important; height: 28px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; color: var(--eduloo-sidebar-icon) !important; background: color-mix(in srgb, var(--surface-container-lowest) 70%, var(--primary-container) 30%) !important; } body .base-sidebar__item-link:hover .base-sidebar__item-icon, body .base-sidebar__item-toggle:hover .base-sidebar__item-icon { background: color-mix(in srgb, var(--surface-container-lowest) 58%, var(--primary-container) 42%) !important; color: var(--primary) !important; } body .base-sidebar__item-text { font-size: 13px !important; line-height: 1.35 !important; } body .base-sidebar__item-link.active, body .base-sidebar__item-toggle.active { border-color: color-mix(in srgb, var(--primary-container) 66%, transparent) !important; background: var(--eduloo-sidebar-item-active) !important; color: var(--eduloo-sidebar-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-container) 34%, transparent) !important; } body .base-sidebar__item-link.active::before, body .base-sidebar__item-toggle.active::before { content: none !important; } body .base-sidebar__item-link.active .base-sidebar__item-icon, body .base-sidebar__item-toggle.active .base-sidebar__item-icon { background: color-mix(in srgb, var(--primary-container) 68%, var(--surface-container-lowest) 32%) !important; color: var(--primary) !important; } body .base-sidebar__item-chevron { width: 14px !important; font-size: 11px !important; color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar__context-trigger { width: 20px !important; height: 20px !important; border-radius: 7px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; color: var(--eduloo-sidebar-muted) !important; box-shadow: none !important; } body .base-sidebar__context-trigger:hover, body .base-sidebar__context-trigger:focus-visible { background: var(--eduloo-sidebar-item-hover) !important; border-color: color-mix(in srgb, var(--primary-container) 60%, transparent) !important; color: var(--eduloo-sidebar-text) !important; transform: translateY(-50%) !important; } body .base-sidebar__submenu { padding-left: 0 !important; } body .base-sidebar__submenu .base-sidebar__item { margin-left: 26px !important; } body .base-sidebar__submenu .base-sidebar__item-link, body .base-sidebar__submenu .base-sidebar__item-toggle { min-height: 40px !important; border-radius: 14px !important; font-size: 12px !important; padding: 5px 9px !important; } body .base-sidebar__item--with-line.expanded > .base-sidebar__submenu::before { left: 23px !important; background: color-mix(in srgb, var(--outline-variant) 48%, transparent) !important; } body .base-sidebar__item-badge { min-height: 18px !important; padding: 0 7px !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 800 !important; } body .base-sidebar__separator { margin: 8px 12px !important; background: var(--eduloo-sidebar-border) !important; } body .base-sidebar__controls { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid var(--eduloo-sidebar-border) !important; gap: 8px !important; } body .base-sidebar__control-caption { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.7px !important; color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar__control-label { font-size: 10px !important; font-weight: 700 !important; color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar__control-shell { min-height: 40px !important; border-radius: 14px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; box-shadow: none !important; } body .base-sidebar__control-shell:hover { background: var(--eduloo-sidebar-card-strong) !important; border-color: color-mix(in srgb, var(--primary-container) 52%, transparent) !important; box-shadow: none !important; } body .base-sidebar__control-shell:focus-within { background: var(--eduloo-sidebar-card-strong) !important; border-color: color-mix(in srgb, var(--primary-container) 62%, transparent) !important; box-shadow: 0 0 0 3px var(--eduloo-sidebar-focus) !important; transform: none !important; } body .base-sidebar__control-leading-icon { width: 22px !important; height: 22px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--surface-container-lowest) 70%, var(--primary-container) 30%) !important; border: 1px solid color-mix(in srgb, var(--primary-container) 52%, transparent) !important; color: var(--eduloo-sidebar-icon) !important; box-shadow: none !important; } body .base-sidebar__control-trailing-icon { color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar__control-input, body .base-sidebar__control-select, body .base-sidebar__control-textarea, body .base-sidebar__control-shell .custom-dropdown-trigger { min-height: 40px !important; height: 40px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--eduloo-sidebar-text) !important; padding: 8px 12px 8px 40px !important; } body .base-sidebar__control-shell .custom-dropdown-trigger { border-radius: 14px !important; } body .base-sidebar__quick-jump { margin-top: 8px !important; padding: 0 !important; } body .base-sidebar__quick-jump-input, body .base-sidebar__quick-jump-btn { height: 38px !important; border-radius: 12px !important; } body .base-sidebar__quick-jump-input { border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; color: var(--eduloo-sidebar-text) !important; font-size: 12px !important; font-weight: 600 !important; } body .base-sidebar__quick-jump-input:focus { border-color: color-mix(in srgb, var(--primary-container) 62%, transparent) !important; box-shadow: 0 0 0 3px var(--eduloo-sidebar-focus) !important; background: var(--eduloo-sidebar-card-strong) !important; } body .base-sidebar__quick-jump-btn { border: 1px solid color-mix(in srgb, var(--primary-container) 62%, transparent) !important; background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 88%, transparent) 0%, color-mix(in srgb, var(--primary-container) 70%, var(--secondary-container) 30%) 100% ) !important; color: var(--on-primary) !important; font-size: 12px !important; font-weight: 800 !important; box-shadow: none !important; } body .base-sidebar__quick-jump-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--primary) 54%, transparent) !important; } body .base-sidebar__footer { padding: 12px !important; border-top: 1px solid var(--eduloo-sidebar-border) !important; } body .base-sidebar__logout-btn { min-height: 42px !important; border-radius: 16px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; color: var(--eduloo-sidebar-text) !important; font-size: 12px !important; font-weight: 700 !important; padding: 8px 10px !important; box-shadow: none !important; } body .base-sidebar__logout-btn i { width: 24px !important; height: 24px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--error) 20%, var(--surface-container-lowest) 80%) !important; color: color-mix(in srgb, var(--error) 88%, var(--on-surface) 12%) !important; font-size: 11px !important; box-shadow: none !important; } body .base-sidebar__logout-btn:hover { background: var(--eduloo-sidebar-item-hover) !important; border-color: color-mix(in srgb, var(--error) 44%, transparent) !important; box-shadow: none !important; } body .base-sidebar__collapse-toggle { width: 38px !important; height: 38px !important; border-radius: 12px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; color: var(--eduloo-sidebar-muted) !important; box-shadow: none !important; } body .base-sidebar__collapse-toggle:hover { color: var(--eduloo-sidebar-text) !important; border-color: color-mix(in srgb, var(--primary-container) 52%, transparent) !important; background: var(--eduloo-sidebar-item-hover) !important; transform: translateY(-1px) !important; box-shadow: none !important; } body .base-sidebar__collapse-toggle-row { margin: 0 0 10px !important; } body .base-sidebar__collapse-toggle-label { font-size: 11px !important; font-weight: 700 !important; color: var(--eduloo-sidebar-muted) !important; } body .base-sidebar-toggle { border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 52%, transparent) !important; background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 90%, transparent) 0%, color-mix(in srgb, var(--primary-container) 72%, var(--secondary-container) 28%) 100% ) !important; color: var(--on-primary) !important; box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--primary) 56%, transparent) !important; } body .base-sidebar-toggle:hover { transform: translateY(-1px) !important; } body .base-sidebar-backdrop { background: color-mix(in srgb, black 58%, transparent) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; } body .base-sidebar__mobile-close { border-radius: 12px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: var(--eduloo-sidebar-card) !important; color: var(--eduloo-sidebar-text) !important; box-shadow: none !important; } body .base-sidebar--collapsed { width: var(--eduloo-sidebar-collapsed-width) !important; } body .base-sidebar--collapsed .base-sidebar__header { padding: 14px 0 10px !important; } body .base-sidebar--collapsed .base-sidebar__item { margin: 3px 0 !important; } body .base-sidebar--collapsed .base-sidebar__item-link, body .base-sidebar--collapsed .base-sidebar__item-toggle, body .base-sidebar--collapsed .base-sidebar__title-card, body .base-sidebar--collapsed .base-sidebar__welcome-panel, body .base-sidebar--collapsed .base-sidebar__logout-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 14px !important; } body .base-sidebar--collapsed .base-sidebar__item-icon { width: 18px !important; min-width: 18px !important; height: 18px !important; font-size: 16px !important; border-radius: 8px !important; background: transparent !important; } body .base-sidebar--collapsed .base-sidebar__welcome-panel { margin-left: auto !important; margin-right: auto !important; } body .base-sidebar--collapsed .base-sidebar__collapse-toggle { width: 44px !important; min-width: 44px !important; height: 44px !important; } body [data-sidebar-workspace-tree='1'] { margin: 3px 10px 0 !important; } body .st-sidebar-scope { margin: 0 !important; padding: 8px !important; border-radius: 20px !important; border: 1px solid var(--eduloo-sidebar-card-border) !important; background: color-mix(in srgb, var(--eduloo-sidebar-bg-elevated) 78%, var(--eduloo-sidebar-card) 22%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } body.theme-dark .st-sidebar-scope { border-color: var(--eduloo-sidebar-panel-border) !important; background: radial-gradient(circle at 100% 0, rgba(44, 191, 173, 0.1) 0%, transparent 44%), linear-gradient( 150deg, color-mix(in srgb, var(--surface-container-highest) 84%, rgba(97, 121, 228, 0.16) 16%) 0%, color-mix(in srgb, var(--surface-container-highest) 86%, rgba(190, 101, 159, 0.14) 14%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 28px -22px rgba(0, 0, 0, 0.72) !important; } body .st-sidebar-scope__group { margin: 0 !important; border-radius: 16px !important; border: 1px solid transparent !important; background: color-mix(in srgb, var(--eduloo-sidebar-card) 84%, transparent) !important; overflow: hidden !important; transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease !important; } body .st-sidebar-scope__group:hover { border-color: var(--eduloo-sidebar-card-border) !important; background: color-mix(in srgb, var(--eduloo-sidebar-card-strong) 80%, transparent) !important; } body .st-sidebar-scope__group--expanded { border-color: color-mix(in srgb, var(--primary-container) 56%, transparent) !important; background: color-mix(in srgb, var(--eduloo-sidebar-item-active) 72%, var(--eduloo-sidebar-card) 28%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-container) 32%, transparent) !important; } body .st-sidebar-scope__group--drag-over { border-color: color-mix(in srgb, var(--primary-container) 70%, transparent) !important; background: color-mix(in srgb, var(--eduloo-sidebar-item-hover) 86%, transparent) !important; box-shadow: 0 0 0 2px var(--eduloo-sidebar-focus) !important; } body .st-sidebar-scope__workspace { min-height: 44px !important; margin: 0 !important; padding: 8px 10px !important; border-radius: 14px !important; background: transparent !important; color: var(--eduloo-sidebar-text) !important; font-size: 13px !important; font-weight: 700 !important; display: grid !important; grid-template-columns: 12px 24px minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 9px !important; border: 1px solid transparent !important; cursor: pointer !important; user-select: none !important; transition: background 200ms ease, border-color 200ms ease !important; } body .st-sidebar-scope__workspace:hover { background: color-mix(in srgb, var(--eduloo-sidebar-item-hover) 82%, transparent) !important; border-color: color-mix(in srgb, var(--primary-container) 42%, transparent) !important; } body .st-sidebar-scope__group--expanded .st-sidebar-scope__workspace { background: color-mix(in srgb, var(--eduloo-sidebar-item-active) 70%, transparent) !important; border-color: color-mix(in srgb, var(--primary-container) 52%, transparent) !important; } body .st-sidebar-scope__chevron { width: 12px !important; color: var(--eduloo-sidebar-muted) !important; font-size: 10px !important; line-height: 1 !important; transition: transform 200ms ease, color 200ms ease !important; } body .st-sidebar-scope__group--expanded .st-sidebar-scope__chevron { transform: rotate(90deg) !important; color: var(--eduloo-sidebar-icon) !important; } body .st-sidebar-scope__icon { width: 24px !important; height: 24px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix(in srgb, var(--surface-container-lowest) 70%, var(--primary-container) 30%) !important; color: var(--eduloo-sidebar-icon) !important; font-size: 11px !important; } body .st-sidebar-scope__workspace-name { font-size: 13px !important; font-weight: 700 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body .st-sidebar-scope__demo-badge { border-radius: 999px !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; padding: 0 7px !important; min-height: 18px !important; display: inline-flex !important; align-items: center !important; background: color-mix(in srgb, var(--secondary-container) 54%, var(--surface-container-lowest) 46%) !important; color: color-mix(in srgb, var(--secondary) 76%, var(--on-surface) 24%) !important; } body .st-sidebar-scope__subjects { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; padding: 0 8px !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transition: max-height 260ms ease, opacity 220ms ease, padding 220ms ease !important; } body .st-sidebar-scope__group--expanded .st-sidebar-scope__subjects { padding: 4px 8px 8px !important; max-height: 680px !important; opacity: 1 !important; } body .st-sidebar-scope__subjects::before { content: none !important; } body .st-sidebar-scope__subject { margin: 0 !important; padding: 9px 10px !important; border-radius: 13px !important; background: color-mix(in srgb, var(--eduloo-sidebar-card) 88%, transparent) !important; border: 1px solid transparent !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; cursor: pointer !important; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease !important; } body .st-sidebar-scope__subject:hover { background: color-mix(in srgb, var(--eduloo-sidebar-item-hover) 82%, transparent) !important; border-color: var(--eduloo-sidebar-card-border) !important; transform: translateY(-1px) !important; } body .st-sidebar-scope__subject--active { background: color-mix(in srgb, var(--eduloo-sidebar-item-active) 80%, var(--eduloo-sidebar-card) 20%) !important; border-color: color-mix(in srgb, var(--primary-container) 64%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-container) 30%, transparent) !important; transform: translateY(0) !important; } body .st-sidebar-scope__subject--dragging { opacity: 0.58 !important; transform: scale(0.985) !important; } body .st-sidebar-scope__subject-name { font-size: 12px !important; font-weight: 700 !important; line-height: 1.32 !important; color: var(--eduloo-sidebar-text) !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body .st-sidebar-scope__stats { display: flex !important; gap: 4px !important; flex-wrap: wrap !important; } body .st-sidebar-scope__stat { min-height: 20px !important; border-radius: 999px !important; padding: 0 6px !important; background: color-mix(in srgb, var(--surface-container-lowest) 72%, var(--eduloo-sidebar-card) 28%) !important; color: var(--eduloo-sidebar-muted) !important; font-size: 10px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } body .st-sidebar-scope__stat i { color: var(--eduloo-sidebar-icon) !important; font-size: 9px !important; } body .st-sidebar-scope__empty { margin: 0 !important; padding: 8px 10px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--eduloo-sidebar-card) 90%, transparent) !important; color: var(--eduloo-sidebar-muted) !important; font-size: 11px !important; font-weight: 700 !important; } body .st-sidebar-scope__create { min-height: 40px !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 56%, transparent) !important; background: linear-gradient( 136deg, color-mix(in srgb, var(--surface-container-lowest) 78%, var(--primary-container) 22%) 0%, color-mix(in srgb, var(--surface-container-lowest) 68%, var(--secondary-container) 32%) 100% ) !important; color: color-mix(in srgb, var(--primary) 78%, var(--on-surface) 22%) !important; font-size: 12px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; cursor: pointer !important; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease !important; } body .st-sidebar-scope__create i { font-size: 11px !important; } body .st-sidebar-scope__create:hover { border-color: color-mix(in srgb, var(--primary-container) 66%, transparent) !important; background: linear-gradient( 136deg, color-mix(in srgb, var(--surface-container-lowest) 72%, var(--primary-container) 28%) 0%, color-mix(in srgb, var(--surface-container-lowest) 62%, var(--secondary-container) 38%) 100% ) !important; transform: translateY(-1px) !important; } body.theme-dark .st-sidebar-scope__group { border-color: rgba(141, 152, 230, 0.16) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 88%, rgba(97, 121, 228, 0.1) 12%) 0%, color-mix(in srgb, var(--surface-container-highest) 90%, rgba(190, 101, 159, 0.08) 10%) 100% ) !important; } body.theme-dark .st-sidebar-scope__group:hover { border-color: rgba(141, 152, 230, 0.3) !important; background: linear-gradient(135deg, rgba(97, 121, 228, 0.18) 0%, rgba(44, 191, 173, 0.1) 52%, rgba(190, 101, 159, 0.15) 100%) !important; } body.theme-dark .st-sidebar-scope__group--expanded { border-color: rgba(159, 169, 241, 0.38) !important; background: radial-gradient(circle at 100% 0, rgba(44, 191, 173, 0.1) 0%, transparent 44%), linear-gradient(135deg, rgba(97, 121, 228, 0.22) 0%, rgba(44, 191, 173, 0.1) 52%, rgba(190, 101, 159, 0.18) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 14px 22px -18px rgba(0, 0, 0, 0.68) !important; } body.theme-dark .st-sidebar-scope__workspace:hover, body.theme-dark .st-sidebar-scope__group--expanded .st-sidebar-scope__workspace { border-color: rgba(159, 169, 241, 0.34) !important; background: linear-gradient(135deg, rgba(97, 121, 228, 0.22) 0%, rgba(44, 191, 173, 0.12) 50%, rgba(190, 101, 159, 0.18) 100%) !important; } body.theme-dark .st-sidebar-scope__icon { background: linear-gradient(135deg, rgba(97, 121, 228, 0.3) 0%, rgba(44, 191, 173, 0.16) 52%, rgba(190, 101, 159, 0.26) 100%) !important; color: color-mix(in srgb, var(--on-surface) 90%, var(--on-primary) 10%) !important; } body.theme-dark .st-sidebar-scope__subject { border-color: rgba(141, 152, 230, 0.18) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--surface-container-highest) 88%, rgba(97, 121, 228, 0.12) 12%) 0%, color-mix(in srgb, var(--surface-container-highest) 90%, rgba(190, 101, 159, 0.1) 10%) 100% ) !important; } body.theme-dark .st-sidebar-scope__subject:hover { border-color: rgba(159, 169, 241, 0.34) !important; background: linear-gradient(135deg, rgba(97, 121, 228, 0.2) 0%, rgba(44, 191, 173, 0.1) 52%, rgba(190, 101, 159, 0.16) 100%) !important; } body.theme-dark .st-sidebar-scope__subject--active { border-color: rgba(168, 177, 246, 0.4) !important; background: radial-gradient(circle at 100% 0, rgba(44, 191, 173, 0.1) 0%, transparent 42%), linear-gradient(135deg, rgba(97, 121, 228, 0.24) 0%, rgba(44, 191, 173, 0.12) 52%, rgba(190, 101, 159, 0.2) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 24px -20px rgba(0, 0, 0, 0.7) !important; } body.theme-dark .st-sidebar-scope__stat { border: 1px solid rgba(141, 152, 230, 0.22) !important; background: linear-gradient(135deg, rgba(97, 121, 228, 0.16) 0%, rgba(44, 191, 173, 0.08) 50%, rgba(190, 101, 159, 0.13) 100%) !important; color: color-mix(in srgb, var(--on-surface-variant) 84%, var(--on-primary) 16%) !important; } body.theme-dark .st-sidebar-scope__create { border-color: rgba(159, 169, 241, 0.4) !important; background: linear-gradient(136deg, rgba(97, 121, 228, 0.32) 0%, rgba(44, 191, 173, 0.16) 52%, rgba(190, 101, 159, 0.24) 100%) !important; color: color-mix(in srgb, var(--on-surface) 90%, var(--on-primary) 10%) !important; } body.theme-dark .st-sidebar-scope__create:hover { border-color: rgba(173, 182, 248, 0.48) !important; background: linear-gradient(136deg, rgba(97, 121, 228, 0.38) 0%, rgba(44, 191, 173, 0.2) 52%, rgba(190, 101, 159, 0.3) 100%) !important; } @media (min-width: 901px) { body .base-sidebar--collapsed [data-sidebar-workspace-separator='1'], body .base-sidebar--collapsed [data-sidebar-workspace-tree='1'] { display: none !important; } } @media (max-width: 900px) { body .base-sidebar { width: min(352px, calc(100vw - 12px)) !important; max-width: calc(100vw - 12px) !important; border-radius: 0 24px 24px 0 !important; top: 0 !important; height: 100dvh !important; } body .base-sidebar--floating-left { padding-top: 0 !important; } body .base-sidebar__header { padding: calc(12px + env(safe-area-inset-top)) 12px 10px !important; } body .base-sidebar__content { padding: 8px 0 calc(12px + env(safe-area-inset-bottom)) !important; } body .base-sidebar__footer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) !important; } body .base-sidebar__item-link, body .base-sidebar__item-toggle { min-height: 46px !important; } body .base-sidebar-toggle { width: 48px !important; min-width: 48px !important; height: 48px !important; border-radius: 16px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; padding: 0 !important; } body .base-sidebar-toggle.base-sidebar-toggle--inline { width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 12px !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: -6px 0 0 !important; align-self: center !important; justify-self: center !important; border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--outline) 56%) !important; background: color-mix(in srgb, var(--primary) 34%, var(--surface-container-high) 66%) !important; color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 16px -14px color-mix(in srgb, var(--primary) 36%, transparent) !important; } body .base-sidebar-toggle.base-sidebar-toggle--inline .icon, body .base-sidebar-toggle.base-sidebar-toggle--inline i { margin: 0 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; transform: none !important; color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; } body .base-sidebar-toggle.base-sidebar-toggle--inline:hover { border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--outline) 56%) !important; background: color-mix(in srgb, var(--primary) 34%, var(--surface-container-high) 66%) !important; color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 16px -14px color-mix(in srgb, var(--primary) 36%, transparent) !important; transform: none !important; } body .base-sidebar--collapsed { width: min(352px, calc(100vw - 12px)) !important; max-width: calc(100vw - 12px) !important; } body .base-sidebar--collapsed .base-sidebar__item-text, body .base-sidebar--collapsed .base-sidebar__item-chevron, body .base-sidebar--collapsed .base-sidebar__submenu, body .base-sidebar--collapsed .base-sidebar__separator, body .base-sidebar--collapsed .base-sidebar__logout-btn span, body .base-sidebar--collapsed .base-sidebar__item-badge { display: revert !important; } body .base-sidebar--collapsed .base-sidebar__group-header, body .base-sidebar--collapsed .base-sidebar__search, body .base-sidebar--collapsed .base-sidebar__controls, body .base-sidebar--collapsed .base-sidebar__quick-jump, body .base-sidebar--collapsed .base-sidebar__title-text, body .base-sidebar--collapsed .base-sidebar__welcome-text { display: flex !important; } body .base-sidebar--collapsed .base-sidebar__item-link, body .base-sidebar--collapsed .base-sidebar__item-toggle { width: 100% !important; min-width: 0 !important; min-height: 46px !important; justify-content: flex-start !important; gap: 10px !important; padding: 6px 10px !important; } body .base-sidebar--collapsed .base-sidebar__item-icon { background: color-mix(in srgb, var(--surface-container-lowest) 70%, var(--primary-container) 30%) !important; } body [data-sidebar-workspace-tree='1'] { margin: 3px 12px 0 !important; } body .st-sidebar-scope { border-radius: 18px !important; padding: 8px !important; } body .st-sidebar-scope__workspace { min-height: 46px !important; } body .st-sidebar-scope__subject { padding: 10px !important; } body .st-sidebar-scope__subject-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } @media (max-width: 520px) { body .base-sidebar { width: calc(100vw - 8px) !important; max-width: calc(100vw - 8px) !important; border-radius: 0 20px 20px 0 !important; } body .base-sidebar-toggle { width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 12px !important; right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; } body .base-sidebar-toggle.base-sidebar-toggle--inline { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 11px !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: -6px 0 0 !important; align-self: center !important; justify-self: center !important; border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--outline) 56%) !important; background: color-mix(in srgb, var(--primary) 34%, var(--surface-container-high) 66%) !important; color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; } body .base-sidebar-toggle.base-sidebar-toggle--inline:hover { border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--outline) 56%) !important; background: color-mix(in srgb, var(--primary) 34%, var(--surface-container-high) 66%) !important; color: color-mix(in srgb, white 96%, var(--primary-container) 4%) !important; transform: none !important; } } @media (max-width: 900px) { body.theme-dark .base-sidebar-toggle.base-sidebar-toggle--inline { border-color: color-mix(in srgb, var(--eduloo-nav-border-strong) 86%, transparent) !important; background: color-mix(in srgb, var(--surface-container-high) 94%, var(--primary-container) 6%) !important; color: color-mix(in srgb, var(--on-surface-variant) 80%, var(--on-surface) 20%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 18px -14px color-mix(in srgb, black 72%, transparent) !important; } body.theme-dark .base-sidebar-toggle.base-sidebar-toggle--inline .icon, body.theme-dark .base-sidebar-toggle.base-sidebar-toggle--inline i { color: color-mix(in srgb, var(--on-surface-variant) 80%, var(--on-surface) 20%) !important; } body.theme-dark .base-sidebar-toggle.base-sidebar-toggle--inline:hover { border-color: color-mix(in srgb, var(--eduloo-nav-border-strong) 86%, transparent) !important; background: color-mix(in srgb, var(--surface-container-high) 94%, var(--primary-container) 6%) !important; color: color-mix(in srgb, var(--on-surface-variant) 80%, var(--on-surface) 20%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 18px -14px color-mix(in srgb, black 72%, transparent) !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { body .base-sidebar, body .st-sidebar-scope, body .st-sidebar-scope__group, body .st-sidebar-scope__subjects, body .base-sidebar__item-link, body .base-sidebar__item-toggle, body .base-sidebar-toggle, body .base-sidebar__mobile-close, body .base-sidebar-backdrop, body .st-sidebar-scope__chevron, body .st-sidebar-scope__workspace, body .st-sidebar-scope__subject, body .st-sidebar-scope__create { transition: none !important; } } @media (max-width: 900px) { body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline), body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline), body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; height: var(--eduloo-nav-height, 78px) !important; min-height: var(--eduloo-nav-height, 78px) !important; max-height: var(--eduloo-nav-height, 78px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translate(-50%, -50%) !important; z-index: 1002 !important; height: auto !important; min-height: 58px !important; max-height: none !important; max-width: none !important; padding: 12px 18px !important; } body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:hover, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:hover, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:hover, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:focus, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:focus, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:focus, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:focus-visible, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:focus-visible, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:focus-visible, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:active, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:active, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .navbar-logo:active { left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translate(-50%, -50%) !important; padding: 12px 18px !important; } body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline { position: absolute !important; left: 16px !important; top: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translateY(-50%) !important; z-index: 1003 !important; } body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle { position: absolute !important; right: 16px !important; top: 50% !important; left: auto !important; bottom: auto !important; margin: 0 !important; transform: translateY(-50%) !important; z-index: 1003 !important; } body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle:hover, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle:hover, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .nav-toggle:hover, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover { transform: translateY(-50%) !important; } } @media (max-width: 900px) { body .base-sidebar-toggle, body .base-sidebar-toggle:hover, body .base-sidebar-toggle:active, body .base-sidebar-toggle:focus, body .base-sidebar-toggle:focus-visible, body .base-sidebar-toggle.base-sidebar-toggle--inline, body .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .base-sidebar-toggle.base-sidebar-toggle--inline:active, body .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible { transform: none !important; translate: 0 0 !important; } body .navbar .base-sidebar-toggle, body .navbar .base-sidebar-toggle:hover, body .navbar .base-sidebar-toggle:active, body .navbar .base-sidebar-toggle:focus, body .navbar .base-sidebar-toggle:focus-visible, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:active, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible, body.theme-dark .navbar .base-sidebar-toggle, body.theme-dark .navbar .base-sidebar-toggle:hover, body.theme-dark .navbar .base-sidebar-toggle:active, body.theme-dark .navbar .base-sidebar-toggle:focus, body.theme-dark .navbar .base-sidebar-toggle:focus-visible, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:active, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body.theme-dark .navbar .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:active, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:active, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:active, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible, body .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible, body .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible, body.theme-dark .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body.theme-dark .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body.theme-dark .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline, body.theme-dark .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body.theme-dark .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body.theme-dark .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:hover, body.theme-dark .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:active, body.theme-dark .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:active, body.theme-dark .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:active, body.theme-dark .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body.theme-dark .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body.theme-dark .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus, body.theme-dark .navbar .navbar-wrapper:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible, body.theme-dark .navbar .navbar-wrapper.navbar-space-between:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible, body.theme-dark .navbar .navbar-inner:has(.base-sidebar-toggle.base-sidebar-toggle--inline) .base-sidebar-toggle.base-sidebar-toggle--inline:focus-visible { position: absolute !important; left: 16px !important; top: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; align-self: center !important; justify-self: auto !important; transform: none !important; translate: 0 -50% !important; } body .base-sidebar-toggle, body .base-sidebar-toggle.base-sidebar-toggle--inline { transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease !important; } } :root { --primary: #fb596e; --primary-dim: #9f0f31; --primary-container: #ff7482; --on-primary: #ffefef; --on-primary-container: #4e0012; --secondary: #006386; --secondary-container: #9adaff; --on-secondary: #e7f5ff; --tertiary: #705900; --tertiary-container: #fdd34d; --on-tertiary-container: #5c4900; --surface: #fff4f5; --surface-bright: #fff4f5; --surface-dim: #ffc5d4; --surface-container-lowest: #ffffff; --surface-container-low: #ffecef; --surface-container: #ffe1e7; --surface-container-high: #ffd9e2; --surface-container-highest: #ffd1dc; --on-surface: #4b212f; --on-surface-variant: #7f4c5c; --on-background: #4b212f; --outline: #9e6777; --outline-variant: #da9cae; --inverse-surface: #23020f; --inverse-primary: #f9576d; --error: #b02500; --cta-gradient-start: #fb596e; --cta-gradient-mid: #ff7482; --cta-gradient-end: #9adaff; --cta-text-strong: #ffffff; --cta-text-soft: #ffefef; --cta-deco-strong: rgba(255, 255, 255, 0.9); --cta-deco-soft: rgba(255, 255, 255, 0.32); --cta-shadow: rgba(251, 89, 110, 0.4); --cta-btn-bg: #ffffff; --cta-btn-fg: #9f0f31; --cta-btn-shadow: rgba(78, 0, 18, 0.2); --cta-btn-shadow-hover: rgba(255, 255, 255, 0.3); } *, *::before, *::after { box-sizing: border-box !important; margin: 0 !important; } html { scroll-behavior: smooth !important; } html:has(main.eduloo-page) { font-size: 100% !important; } body { font-family: 'Be Vietnam Pro', sans-serif !important; color: var(--on-surface) !important; background: var(--surface) !important; overflow-x: hidden !important; line-height: 1.6 !important; } body.theme-light::before, body.theme-dark::before { content: ''; background: none !important; } img { max-width: 100% !important; height: auto !important; display: block !important; } a { text-decoration: none !important; color: inherit !important; } button { cursor: pointer !important; border: none !important; background: none !important; font-family: inherit !important; } .headline { font-family: 'Plus Jakarta Sans', sans-serif !important; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; } .container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 32px !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-top: none !important; } .container-narrow { max-width: 896px !important; margin: 0 auto !important; padding: 0 32px !important; } .glass-nav { background: rgba(255, 244, 245, 0.85) !important; backdrop-filter: blur(24px) !important; } .primary-gradient { background: linear-gradient(135deg, #fb596e 0%, #ff8993 100%) !important; } .secondary-gradient { background: linear-gradient(135deg, #006386 0%, #00a4db 100%) !important; } .hero-pattern { background-color: #fff4f5 !important; background-image: radial-gradient(#ffd1dc 2px, transparent 2px) !important; background-size: 40px 40px !important; } .blob-shape { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% !important; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(5deg); } } @keyframes bubble { 0% { transform: translateY(100vh) scale(0.42); opacity: 0; } 8% { opacity: 0.04; } 18% { opacity: 0.12; } 32% { opacity: 0.22; } 48% { opacity: 0.32; } 60% { opacity: 0.24; } 68% { opacity: 0.15; } 74% { opacity: 0.08; } 80% { opacity: 0.03; } 86% { opacity: 0; } 100% { transform: translateY(-140px) scale(1.14); opacity: 0; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .animate-float { animation: float 6s ease-in-out infinite !important; } .animate-bubble { animation: bubble 13s infinite linear !important; } .animate-bounce-slow { animation: bounce 3s infinite !important; } .animate-wiggle { animation: wiggle 1s ease-in-out infinite !important; } .bubble-bg { position: absolute !important; background: white !important; border-radius: 50% !important; pointer-events: none !important; opacity: 0; transition: opacity 1.2s ease-out, transform 1.2s ease-out !important; will-change: transform, opacity !important; } .bubbles-fixed { position: fixed !important; inset: 0 !important; overflow: hidden !important; pointer-events: none !important; z-index: 0 !important; } .hero { position: relative !important; padding-top: 160px !important; padding-bottom: 96px !important; overflow: hidden !important; } .hero-grid { display: grid !important; gap: 64px !important; align-items: center !important; position: relative !important; z-index: 2 !important; } .hero-content { position: relative !important; z-index: 10 !important; } .hero-badge { display: inline-block !important; background: rgba(251, 89, 110, 0.1) !important; color: var(--primary) !important; padding: 8px 20px !important; border-radius: 9999px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 1.6px !important; margin-bottom: 32px !important; border: 1px solid rgba(251, 89, 110, 0.2) !important; } .hero-title { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 48px !important; font-weight: 800 !important; color: var(--on-background) !important; line-height: 1.1 !important; margin-bottom: 32px !important; } .hero-title .accent { color: var(--primary) !important; font-style: italic !important; position: relative !important; } .hero-title .accent::after { content: '' !important; position: absolute !important; bottom: -8px !important; left: 0 !important; width: 100% !important; height: 8px !important; background: rgba(251, 89, 110, 0.2) !important; border-radius: 9999px !important; } .hero-subtitle { font-size: 18px !important; color: var(--on-surface-variant) !important; margin-bottom: 48px !important; max-width: 512px !important; line-height: 1.7 !important; } .hero-subtitle .bold { font-weight: 700 !important; color: var(--primary) !important; } .hero-buttons { display: flex !important; flex-direction: column !important; gap: 20px !important; } .btn-hero-primary { background: linear-gradient(135deg, #fb596e 0%, #ff8993 100%) !important; color: white !important; padding: 20px 40px !important; border-radius: 9999px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 900 !important; font-size: 18px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important; transition: transform 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; } .btn-hero-primary:hover { border-color: transparent !important; background: linear-gradient(135deg, #fb596e 0%, #ff8993 100%) !important; color: white !important; transform: scale(1.05) !important; } .btn-hero-primary:active { transform: scale(0.95) !important; } .btn-hero-secondary { background: white !important; color: var(--on-surface) !important; border: 2px solid rgba(251, 89, 110, 0.1) !important; padding: 20px 40px !important; border-radius: 9999px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; font-size: 18px !important; transition: all 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; } .btn-hero-secondary:hover { color: var(--on-surface) !important; background: var(--surface-bright) !important; border-color: rgba(251, 89, 110, 0.3) !important; } .hero-visual { position: relative !important; } .hero-glow-1 { position: absolute !important; top: -64px !important; right: -64px !important; width: 320px !important; height: 320px !important; background: rgba(154, 218, 255, 0.3) !important; filter: blur(100px) !important; border-radius: 50% !important; } .hero-glow-2 { position: absolute !important; bottom: -64px !important; left: -64px !important; width: 256px !important; height: 256px !important; background: rgba(255, 116, 130, 0.2) !important; filter: blur(80px) !important; border-radius: 50% !important; } .hero-mockup-group { position: relative !important; } .hero-mockup-blur { position: absolute !important; inset: -16px !important; background: linear-gradient( to top right, var(--primary), var(--secondary) ) !important; opacity: 0.1 !important; filter: blur(24px) !important; transition: opacity 0.7s !important; } .hero-mockup-group:hover .hero-mockup-blur { opacity: 0.2 !important; } .hero-mockup { position: relative !important; background: white !important; border-radius: 48px !important; padding: 16px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important; border: 8px solid rgba(255, 225, 231, 0.5) !important; transition: all 0.7s !important; } .hero-mockup-inner { position: relative !important; border-radius: 40px !important; overflow: hidden !important; background: rgba(251, 89, 110, 0.05) !important; aspect-ratio: 4/5 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 32px !important; } .hero-phone-scene { position: relative !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .hero-phone-svg { width: min(280px, 86%) !important; height: auto !important; filter: drop-shadow(0 30px 40px rgba(75, 33, 47, 0.2)) !important; transform-origin: 50% 50% !important; animation: phoneTilt 9s ease-in-out infinite !important; } .hero-loo-sticker { position: absolute !important; right: 10% !important; bottom: 11% !important; width: 120px !important; height: 120px !important; border-radius: 9999px !important; background: rgba(255, 255, 255, 0.9) !important; border: 4px solid rgba(255, 116, 130, 0.35) !important; box-shadow: 0 24px 40px rgba(75, 33, 47, 0.16) !important; padding: 12px !important; transform: rotate(8deg) !important; } .hero-loo-sticker img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .hero-notification { position: absolute !important; left: 8% !important; top: 12% !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(154, 218, 255, 0.8) !important; box-shadow: 0 14px 30px rgba(0, 99, 134, 0.15) !important; border-radius: 9999px !important; padding: 10px 16px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.64px !important; text-transform: uppercase !important; color: var(--secondary) !important; transform: rotate(-6deg) !important; } .hero-phone-spark { position: absolute !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: radial-gradient( circle at 35% 35%, #ffffff 0%, #ffd1dc 50%, rgba(255, 209, 220, 0) 100% ) !important; opacity: 0.85 !important; pointer-events: none !important; animation: sparkDrift 5s ease-in-out infinite !important; } .hero-phone-spark.spark-a { top: 24%; right: 18%; } .hero-phone-spark.spark-b { bottom: 19%; left: 16%; animation-delay: 1.2s; } .hero-badge-float { position: absolute !important; bottom: -32px !important; right: -32px !important; background: var(--tertiary-container) !important; color: var(--on-tertiary-container) !important; padding: 20px 32px !important; border-radius: 24px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 900 !important; font-size: 14px !important; border: 4px solid white !important; transform: rotate(6deg) !important; } .features-section { padding: 128px 0 !important; background: var(--surface) !important; position: relative !important; overflow: hidden !important; isolation: isolate !important; } .features-blob { position: absolute !important; top: 0 !important; right: 0 !important; width: 256px !important; height: 256px !important; background: rgba(251, 89, 110, 0.05) !important; transform: translate(50%, -50%) !important; } .features-header { text-align: center !important; margin-bottom: 96px !important; } .features-header h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 48px !important; font-weight: 800 !important; color: var(--on-background) !important; margin-bottom: 24px !important; border: none !important; padding: 0 !important; } .features-header p { color: var(--on-surface-variant) !important; font-size: 20px !important; } .features-grid { display: grid !important; gap: 40px !important; } .feature-card { position: relative !important; padding: 40px !important; border-radius: 32px !important; background: var(--surface-container-low) !important; border: 1px solid transparent !important; transition: all 0.5s !important; } .feature-card:hover { background: white !important; box-shadow: 0 25px 50px -12px rgba(251, 89, 110, 0.1) !important; border-color: rgba(251, 89, 110, 0.2) !important; } .feature-card.secondary-hover:hover { box-shadow: 0 25px 50px -12px rgba(0, 99, 134, 0.1) !important; border-color: rgba(0, 99, 134, 0.2) !important; } .feature-card.tertiary-hover:hover { box-shadow: 0 25px 50px -12px rgba(112, 89, 0, 0.1) !important; border-color: rgba(112, 89, 0, 0.2) !important; } .feature-icon { width: 80px !important; height: 80px !important; border-radius: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 40px !important; transition: transform 0.3s !important; } .feature-card:hover .feature-icon { transform: scale(1.1) rotate(6deg) !important; } .feature-card.secondary-hover:hover .feature-icon { transform: scale(1.1) rotate(-6deg) !important; } .feature-icon.primary-bg { background: rgba(251, 89, 110, 0.1) !important; } .feature-icon.secondary-bg { background: rgba(0, 99, 134, 0.1) !important; } .feature-icon.tertiary-bg { background: rgba(253, 211, 77, 0.3) !important; } .feature-icon .material-symbols-outlined { font-size: 32px !important; } .icon-primary { color: var(--primary) !important; } .icon-secondary { color: var(--secondary) !important; } .icon-tertiary { color: var(--tertiary) !important; } .feature-card h3 { color: var(--on-background) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 24px !important; font-weight: 700 !important; margin-bottom: 20px !important; } .feature-card p { color: var(--on-surface-variant) !important; line-height: 1.7 !important; margin-bottom: 32px !important; font-size: 18px !important; } .feature-link { font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 8px !important; transition: gap 0.3s !important; } .feature-card:hover .feature-link { gap: 16px !important; } .feature-link.primary-link { color: var(--primary) !important; } .feature-link.secondary-link { color: var(--secondary) !important; } .feature-link.tertiary-link { color: var(--tertiary) !important; } .feature-card .feature-loo { position: absolute !important; top: 16px !important; right: 16px !important; width: 48px !important; height: 48px !important; opacity: 0 !important; transition: opacity 0.3s !important; } .feature-card:hover .feature-loo { opacity: 0.1 !important; } .meet-loo-section { padding: 96px 0 !important; background: var(--surface-container-high) !important; color: var(--on-background) !important; overflow: hidden !important; position: relative !important; } .meet-loo-grid { display: grid !important; gap: 80px !important; align-items: center !important; } .meet-loo-visual { position: relative !important; display: flex !important; justify-content: center !important; height: 300px !important; } .meet-loo-mascot { width: 100% !important; max-width: 384px !important; animation: float 6s ease-in-out infinite !important; z-index: 1 !important; } .loo-pupils { transform-origin: 95px 138px; animation: lookDownLeft 7s ease-in-out infinite; } .loo-pupils-right { transform-origin: 153px 138px; animation: lookDownLeft 7s ease-in-out infinite; } .loo-mouth { transform-origin: 125px 150px; animation: surpriseMouth 7s ease-in-out infinite; } @keyframes lookDownLeft { 0%, 10%, 80%, 100% { transform: translate(0, 0); } 25%, 65% { transform: translate(-1.5px, 1.5px); } } @keyframes surpriseMouth { 0%, 10%, 80%, 100% { transform: scale(1); } 25%, 65% { transform: scale(1.1, 1.4) translateY(1px); } } .meet-loo-speech { position: absolute !important; top: 20% !important; right: 10% !important; background: white !important; color: var(--primary) !important; padding: 16px 24px !important; border-radius: 24px !important; font-weight: 900 !important; font-size: 18px !important; transform: rotate(-12deg) !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2) !important; z-index: 2 !important; } .meet-loo-content h2 { color: var(--on-background) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 48px !important; font-weight: 900 !important; margin-bottom: 40px !important; border: none !important; padding: 0 !important; } .meet-loo-tips { display: flex !important; flex-direction: column !important; gap: 32px !important; } .tip-card { background: white !important; padding: 32px !important; border-radius: 24px !important; border: 1px solid rgba(251, 89, 110, 0.1) !important; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important; } .tip-card h4 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 24px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: var(--primary) !important; } .tip-card p { color: var(--on-surface-variant) !important; font-size: 18px !important; } .how-section { padding: 128px 0 !important; background: var(--surface-container-low) !important; overflow: hidden !important; position: relative !important; } .how-header { display: flex !important; flex-direction: column !important; gap: 48px !important; margin-bottom: 96px !important; } .how-header-text h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 48px !important; font-weight: 800 !important; color: var(--on-background) !important; margin-bottom: 32px !important; border: none !important; padding: 0 !important; } .how-header-text p { color: var(--on-surface-variant) !important; font-size: 20px !important; line-height: 1.7 !important; } .how-header-loo { display: none !important; padding-bottom: 24px !important; color: var(--primary) !important; } .how-header-loo img { width: 96px !important; height: 96px !important; } .how-steps { display: grid !important; gap: 64px !important; position: relative !important; } .how-dashed-line { display: none !important; position: absolute !important; top: 48px !important; left: 0 !important; width: 100% !important; height: 1px !important; border-top: 4px dashed rgba(251, 89, 110, 0.2) !important; z-index: 0 !important; } .how-step { position: relative !important; z-index: 10 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .step-number { width: 96px !important; height: 96px !important; background: white !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 36px !important; font-weight: 900 !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important; margin-bottom: 32px !important; outline: 12px solid var(--surface-container-low) !important; } .step-number.primary-num { color: var(--primary) !important; border: 4px solid rgba(251, 89, 110, 0.1) !important; } .step-number.secondary-num { color: var(--secondary) !important; border: 4px solid rgba(0, 99, 134, 0.1) !important; } .step-number.tertiary-num { color: var(--tertiary) !important; border: 4px solid rgba(112, 89, 0, 0.1) !important; } .how-step h4 { color: var(--on-background) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 24px !important; font-weight: 700 !important; margin-bottom: 16px !important; } .how-step p { color: var(--on-surface-variant) !important; font-size: 18px !important; } .why-section { padding: 144px 0 !important; background: linear-gradient(180deg, #fff4f5 0%, #fff8f9 100%) !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; } .why-bg-glow { position: absolute !important; top: 40% !important; left: 50% !important; width: 680px !important; height: 680px !important; background: radial-gradient( circle, rgba(251, 89, 110, 0.08) 0%, rgba(251, 89, 110, 0) 72% ) !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; z-index: 0 !important; } .why-grid { display: grid !important; gap: 64px !important; align-items: start !important; } .why-stats-wrap { position: relative !important; } .stat-grid-bg { position: absolute !important; inset: -16px !important; background: linear-gradient( 160deg, rgba(251, 89, 110, 0.08), rgba(0, 99, 134, 0.08) ) !important; border-radius: 40px !important; z-index: 0 !important; } .stat-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; position: relative !important; z-index: 10 !important; } .stat-card { background: #ffffff !important; border-radius: 24px !important; padding: 24px !important; min-height: 188px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; border: 1px solid rgba(127, 76, 92, 0.12) !important; box-shadow: 0 18px 36px -28px rgba(75, 33, 47, 0.28) !important; } .stat-card:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 44px -28px rgba(75, 33, 47, 0.34) !important; } .stat-icon-wrapper { width: 56px !important; height: 56px !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 16px !important; } .stat-icon-wrapper.primary-bg { background: rgba(251, 89, 110, 0.12) !important; } .stat-icon-wrapper.secondary-bg { background: rgba(0, 99, 134, 0.12) !important; } .stat-icon-wrapper.tertiary-bg { background: rgba(253, 211, 77, 0.25) !important; } .stat-icon-wrapper.neutral-bg { background: rgba(127, 76, 92, 0.12) !important; } .stat-icon-wrapper .material-symbols-outlined { font-size: 30.4px !important; } .icon-neutral { color: var(--on-surface) !important; } .stat-value { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 900 !important; font-size: 32px !important; color: var(--on-background) !important; line-height: 1.1 !important; margin-bottom: 5.6px !important; } .stat-label { font-size: 15.2px !important; font-weight: 600 !important; color: var(--on-surface-variant) !important; line-height: 1.4 !important; } .stat-card.primary-stat { border-top: 4px solid var(--primary) !important; } .stat-card.secondary-stat { border-top: 4px solid var(--secondary) !important; } .stat-card.tertiary-stat { border-top: 4px solid var(--tertiary) !important; } .stat-card.loo-stat { border-top: 4px solid var(--outline) !important; } .why-content { max-width: 620px !important; } .why-kicker { display: inline-flex !important; align-items: center !important; padding: 8px 14.4px !important; border-radius: 9999px !important; background: rgba(251, 89, 110, 0.1) !important; color: var(--primary) !important; font-size: 11.52px !important; font-weight: 800 !important; letter-spacing: 1.28px !important; text-transform: uppercase !important; margin-bottom: 20px !important; } .why-content h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 48px !important; font-weight: 800 !important; color: var(--on-background) !important; margin-bottom: 17.6px !important; line-height: 1.15 !important; border: none !important; padding: 0 !important; } .why-content h2 .accent { color: var(--primary) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; font-style: normal !important; } .why-intro { color: var(--on-surface-variant) !important; font-size: 16.8px !important; line-height: 1.7 !important; margin-bottom: 28px !important; } .why-list { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 12.8px !important; } .why-list li { display: flex !important; gap: 16px !important; padding: 18.4px !important; border-radius: 20px !important; border: 1px solid rgba(127, 76, 92, 0.15) !important; background: rgba(255, 255, 255, 0.86) !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .why-list li:hover { border-color: rgba(251, 89, 110, 0.28) !important; box-shadow: 0 12px 28px -18px rgba(75, 33, 47, 0.32) !important; transform: translateY(-2px) !important; } .why-check { background: rgba(251, 89, 110, 0.1) !important; color: var(--primary) !important; width: 40px !important; height: 40px !important; border-radius: 13.6px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .why-list li:hover .why-check { transform: none !important; } .why-text { display: flex !important; flex-direction: column !important; justify-content: center !important; } .why-list h5 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 750 !important; font-size: 17.6px !important; margin-bottom: 5.6px !important; color: var(--on-background) !important; } .why-list p { color: var(--on-surface-variant) !important; font-size: 15.68px !important; line-height: 1.55 !important; } .showcase-section { padding: 128px 0 !important; position: relative !important; overflow: hidden !important; isolation: isolate !important; background: linear-gradient(180deg, #fff6f8 0%, #fff3f6 100%) !important; } .showcase-svg-aura { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; } .showcase-svg-aura svg { width: 100% !important; height: 100% !important; } .showcase-aura-ring { fill: none !important; stroke: url(#auraRingStroke) !important; stroke-width: 2px !important; opacity: 0.46 !important; } .showcase-aura-ring.alt { opacity: 0.24 !important; } .showcase-aura-dot { fill: rgba(251, 89, 110, 0.42) !important; animation: showcaseDotPulse 5.8s ease-in-out infinite !important; } .showcase-aura-dot.dot-b { fill: rgba(0, 99, 134, 0.4) !important; animation-delay: 1.2s !important; } .showcase-aura-dot.dot-c { fill: rgba(253, 211, 77, 0.52) !important; animation-delay: 2.4s !important; } @keyframes showcaseDotPulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.26); opacity: 0.85; } } .showcase-section .layer-content { position: relative !important; z-index: 2 !important; } .showcase-header { text-align: center !important; margin-bottom: 48px !important; } .showcase-header h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; color: var(--on-background) !important; font-size: 52px !important; font-weight: 800 !important; margin-bottom: 16px !important; border: none !important; padding: 0 !important; } .showcase-header p { color: var(--on-surface-variant) !important; font-size: 19px !important; max-width: 640px !important; margin: 0 auto !important; } .showcase-slider-container { position: relative !important; overflow: hidden !important; border-radius: 36px !important; border: 1px solid rgba(251, 89, 110, 0.18) !important; background: linear-gradient( 160deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 240, 244, 0.92) 100% ) !important; box-shadow: 0 34px 72px -44px rgba(75, 33, 47, 0.44) !important; } .showcase-slider-container--single + .showcase-dots { display: none !important; } .showcase-slider-track { display: flex !important; transition: transform 0.72s cubic-bezier(0.33, 1, 0.68, 1) !important; will-change: transform !important; } .showcase-slide { flex: 0 0 100% !important; min-width: 0 !important; padding: 20px !important; opacity: 0.72 !important; transition: opacity 0.4s ease !important; } .showcase-slide.is-active { opacity: 1 !important; } .showcase-slide-shell { border-radius: 28px !important; padding: 32px !important; min-height: 380px !important; display: grid !important; gap: 28px !important; align-items: center !important; border: 1px solid rgba(251, 89, 110, 0.14) !important; background: rgba(255, 255, 255, 0.84) !important; } .showcase-slide--dashboard .showcase-slide-shell { background: linear-gradient( 145deg, rgba(251, 89, 110, 0.12) 0%, rgba(255, 255, 255, 0.88) 58%, rgba(154, 218, 255, 0.2) 100% ) !important; } .showcase-slide--quizzes .showcase-slide-shell { background: linear-gradient( 145deg, rgba(0, 99, 134, 0.16) 0%, rgba(255, 255, 255, 0.9) 56%, rgba(253, 211, 77, 0.18) 100% ) !important; } .showcase-slide--flashcards .showcase-slide-shell { background: linear-gradient( 145deg, rgba(253, 211, 77, 0.24) 0%, rgba(255, 255, 255, 0.94) 60%, rgba(251, 89, 110, 0.12) 100% ) !important; } .showcase-slide--podcasts .showcase-slide-shell { background: linear-gradient( 145deg, rgba(255, 182, 193, 0.24) 0%, rgba(255, 255, 255, 0.92) 56%, rgba(0, 99, 134, 0.12) 100% ) !important; } .showcase-slide-kicker { display: inline-flex !important; align-items: center !important; padding: 9px 14px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.76) !important; border: 1px solid rgba(251, 89, 110, 0.24) !important; color: var(--primary) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 16px !important; } .showcase-slide-title { font-family: 'Plus Jakarta Sans', sans-serif !important; color: var(--on-background) !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1.1 !important; margin-bottom: 16px !important; } .showcase-slide-text { color: var(--on-surface-variant) !important; font-size: 18px !important; line-height: 1.7 !important; margin-bottom: 22px !important; max-width: 620px !important; } .showcase-slide-tags { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } .showcase-slide-tag { display: inline-flex !important; align-items: center !important; padding: 8px 12px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--on-background) !important; background: rgba(255, 255, 255, 0.76) !important; border: 1px solid rgba(127, 76, 92, 0.16) !important; } .showcase-slide-media { border-radius: 24px !important; overflow: hidden !important; border: 1px solid rgba(251, 89, 110, 0.16) !important; background: rgba(255, 255, 255, 0.72) !important; box-shadow: 0 22px 38px -30px rgba(75, 33, 47, 0.4) !important; } .showcase-slide-media img { display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; } .showcase-dots { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin-top: 24px !important; } .showcase-dot { width: 12px !important; height: 12px !important; border-radius: 999px !important; border: 1px solid rgba(127, 76, 92, 0.24) !important; background: rgba(255, 255, 255, 0.7) !important; transition: width 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, transform 0.28s ease !important; } .showcase-dot.inactive:hover { transform: scale(1.12) !important; } .showcase-dot.active { width: 34px !important; background: linear-gradient( 135deg, var(--primary) 0%, var(--secondary) 100% ) !important; border-color: rgba(251, 89, 110, 0.4) !important; } .faq-section { padding: 128px 0 !important; background: var(--surface) !important; } .faq-section h2 { color: var(--on-background) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 48px !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 80px !important; border: none !important; padding: 0 !important; } .faq-list { display: flex !important; flex-direction: column !important; gap: 24px !important; } .faq-item { background: var(--surface-container-low) !important; border-radius: 32px !important; overflow: hidden !important; border: 1px solid rgba(251, 89, 110, 0.05) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } .faq-item:hover { border-color: rgba(251, 89, 110, 0.2) !important; } .faq-item[aria-expanded='true'] { border-color: rgba(251, 89, 110, 0.26) !important; box-shadow: 0 20px 34px -26px rgba(75, 33, 47, 0.38) !important; } .faq-button { width: 100% !important; padding: 32px 40px !important; text-align: left !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; } .faq-button:hover { border-color: transparent !important; background: transparent !important; color: var(--on-surface) !important; box-shadow: none !important; } .faq-button span:first-child { flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; color: var(--on-background) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1.4 !important; } .faq-button .material-symbols-outlined { color: var(--primary) !important; transition: transform 0.35s ease !important; transform-origin: center !important; flex-shrink: 0 !important; } .faq-item[aria-expanded='true'] .faq-button .material-symbols-outlined { transform: rotate(180deg) !important; } .faq-item:hover { background: var(--surface-container-low) !important; } .faq-answer { display: grid !important; grid-template-rows: 0fr !important; opacity: 0 !important; overflow: hidden !important; padding: 0 40px !important; transition: grid-template-rows 0.45s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease, padding 0.45s cubic-bezier(0.33, 1, 0.68, 1) !important; } .faq-answer-inner { overflow: hidden !important; color: var(--on-surface-variant) !important; font-size: 18px !important; line-height: 1.72 !important; } .faq-item[aria-expanded='true'] .faq-answer { grid-template-rows: 1fr !important; opacity: 1 !important; padding: 0 40px 32px !important; } .cta-section { padding: 96px 32px !important; position: relative !important; } .cta-box { max-width: 1152px !important; margin: 0 auto !important; background: linear-gradient( 135deg, var(--cta-gradient-start) 0%, var(--cta-gradient-mid) 52%, var(--cta-gradient-end) 100% ) !important; border-radius: 48px !important; padding: 64px !important; text-align: center !important; position: relative !important; overflow: hidden !important; box-shadow: 0 40px 100px -20px var(--cta-shadow) !important; } .cta-decorations { position: absolute !important; inset: 0 !important; opacity: 0.18 !important; pointer-events: none !important; } .cta-circle-1 { position: absolute !important; top: 40px !important; left: 40px !important; width: 96px !important; height: 96px !important; border: 8px solid var(--cta-deco-strong) !important; border-radius: 50% !important; } .cta-rect-1 { position: absolute !important; bottom: 80px !important; right: 80px !important; width: 160px !important; height: 160px !important; border: 8px solid var(--cta-deco-soft) !important; transform: rotate(12deg) !important; border-radius: 24px !important; } .cta-loo { width: 128px !important; height: 128px !important; margin: 0 auto 40px !important; filter: brightness(0) invert(1) !important; } .cta-box h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 48px !important; font-weight: 800 !important; color: var(--cta-text-strong) !important; margin-bottom: 40px !important; line-height: 1.15 !important; border: none !important; padding: 0 !important; } .cta-box > p { color: var(--cta-text-soft) !important; font-size: 20px !important; margin-bottom: 56px !important; max-width: 768px !important; margin-left: auto !important; margin-right: auto !important; font-weight: 500 !important; opacity: 0.95 !important; } .btn-cta { background: var(--cta-btn-bg) !important; color: var(--cta-btn-fg) !important; padding: 24px 56px !important; border-radius: 9999px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 900 !important; font-size: 24px !important; box-shadow: 0 25px 50px -12px var(--cta-btn-shadow) !important; transition: transform 0.2s, box-shadow 0.2s !important; position: relative !important; z-index: 1 !important; } .btn-cta:hover { background: var(--cta-btn-bg) !important; color: var(--cta-btn-fg) !important; border: none !important; transform: scale(1.05) !important; box-shadow: 0 25px 50px -12px var(--cta-btn-shadow-hover) !important; } .btn-cta:focus-visible { outline: 3px solid var(--cta-deco-strong) !important; outline-offset: 4px !important; } .btn-cta:active { transform: scale(0.95) !important; } .hero-svg-scene { position: absolute !important; top: -180px !important; right: -220px !important; width: min(760px, 68vw) !important; aspect-ratio: 1 / 1 !important; pointer-events: none !important; z-index: 1 !important; opacity: 0.9 !important; } .hero-svg-ribbons { width: 100% !important; height: 100% !important; overflow: visible !important; } .hero-ribbon { fill: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 50%; } .hero-ribbon-a { stroke: url(#heroRibbonGradientA); stroke-width: 32px; stroke-dasharray: 60 30; animation: ribbonOrbitA 30s linear infinite; } .hero-ribbon-b { stroke: url(#heroRibbonGradientB); stroke-width: 24px; stroke-dasharray: 40 20; opacity: 0.8; animation: ribbonOrbitB 40s linear infinite; } .hero-ribbon-c { stroke: url(#heroRibbonGradientA); stroke-width: 16px; stroke-dasharray: 20 40; opacity: 0.6; animation: ribbonOrbitA 25s linear infinite reverse; } .hero-orb { mix-blend-mode: multiply; opacity: 0.8; } .hero-orb-a { transform-origin: 220px 220px; animation: orbPulse 7s ease-in-out infinite; } .hero-orb-b { transform-origin: 760px 710px; animation: orbPulse 9s ease-in-out infinite reverse; } .hero-noise { opacity: 0.6; mix-blend-mode: soft-light; animation: noiseDrift 22s linear infinite; } .features-svg-flow { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 1 !important; } .features-svg-flow svg { position: absolute !important; top: -36px !important; left: 0 !important; width: 100% !important; height: 260px !important; } .features-flow-path { fill: none; stroke: url(#flowGradient); stroke-width: 4px; stroke-linecap: round; stroke-dasharray: 1 12; animation: flowSlide 18s linear infinite; } .features-flow-glow { fill: none; stroke: url(#flowGradient); stroke-width: 24px; opacity: 0.4; filter: url(#flowBlur); } .features-flow-glow.alt { stroke-width: 16px; opacity: 0.2; animation: flowSlide 24s linear infinite reverse; } @keyframes ribbonOrbitA { from { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-10px); } to { transform: rotate(360deg) translateY(0); } } @keyframes ribbonOrbitB { from { transform: rotate(360deg) translateY(0); } 50% { transform: rotate(180deg) translateY(14px); } to { transform: rotate(0deg) translateY(0); } } @keyframes orbPulse { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.14); opacity: 0.95; } } @keyframes noiseDrift { from { transform: translate(0, 0); } 50% { transform: translate(-18px, 12px); } to { transform: translate(0, 0); } } @keyframes flowSlide { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -640; } } @keyframes phoneTilt { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } } @keyframes sparkDrift { 0%, 100% { transform: translateY(0) scale(0.9); opacity: 0.7; } 50% { transform: translateY(-12px) scale(1.1); opacity: 1; } } @keyframes peekHappy { 0%, 85%, 100% { transform: translateY(100%); } 15%, 70% { transform: translateY(30%); } 25%, 45%, 65% { transform: translateY(30%) rotate(8deg); } 35%, 55% { transform: translateY(20%) rotate(-8deg); } } .layer-content { position: relative !important; z-index: 10 !important; } .icon-fill { font-variation-settings: 'FILL' 1 !important; } .icon-arrow { font-size: 14px !important; } .icon-inline-xs { font-size: 14px !important; vertical-align: text-bottom !important; } .icon-inline-sm { font-size: 18px !important; vertical-align: text-bottom !important; } .bubble-fixed-1 { width: 20px; height: 20px; left: 10%; animation-delay: 0s; } .bubble-fixed-2 { width: 40px; height: 40px; left: 30%; animation-delay: 2s; } .bubble-fixed-3 { width: 15px; height: 15px; left: 70%; animation-delay: 4s; } .bubble-fixed-4 { width: 30px; height: 30px; left: 90%; animation-delay: 1s; } .bubble-fixed-5 { width: 25px; height: 25px; left: 50%; animation-delay: 6s; } .hero-mockup-bubbles { position: absolute !important; inset: 0 !important; opacity: 0.2 !important; pointer-events: none !important; } .bubble-hero-1 { width: 20px; height: 20px; left: 10%; bottom: -50px; } .bubble-hero-2 { width: 30px; height: 30px; right: 20%; bottom: -100px; animation-delay: 2s; } .meet-loo-bubbles { position: absolute !important; inset: 0 !important; opacity: 1 !important; } .peeking-loo { position: absolute !important; bottom: -20px !important; left: 15% !important; width: 280px !important; height: auto !important; transform-origin: bottom center !important; animation: peekHappy 7s ease-in-out infinite !important; z-index: 1 !important; } .bubble-meet-1 { width: 100px; height: 100px; left: 5%; bottom: -100px; } .bubble-meet-2 { width: 150px; height: 150px; right: 10%; bottom: -200px; animation-delay: 3s; } .bubble-cta-1 { width: 80px; height: 80px; left: 10%; bottom: -40px; } .bubble-cta-2 { width: 120px; height: 120px; right: 5%; bottom: -80px; animation-delay: 4s; } @media (min-width: 640px) { .hero-buttons { flex-direction: row !important; } } @media (min-width: 768px) { .hero { padding-top: 224px !important; padding-bottom: 160px !important; } .hero-title { font-size: 72px !important; } .hero-subtitle { font-size: 20px !important; } .hero-grid { grid-template-columns: 1fr 1fr !important; } .features-header h2 { font-size: 60px !important; } .features-grid { grid-template-columns: 1fr 1fr 1fr !important; } .feature-card.offset-down { transform: translateY(48px) !important; } .meet-loo-grid { grid-template-columns: 1fr 1fr !important; } .how-header { flex-direction: row !important; justify-content: space-between !important; align-items: flex-end !important; } .how-header-text { max-width: 640px !important; } .how-header-text h2 { font-size: 60px !important; } .how-steps { grid-template-columns: 1fr 1fr 1fr !important; } .how-dashed-line { display: block !important; } .showcase-slide-shell { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important; min-height: 430px !important; } .showcase-slide-title { font-size: 46px !important; } .cta-box { padding: 112px !important; } .cta-box h2 { font-size: 72px !important; } .cta-box > p { font-size: 24px !important; } } @media (min-width: 1024px) { .why-grid { grid-template-columns: 1fr 1fr !important; } .why-stats-wrap { order: 1 !important; } .why-content { order: 2 !important; } .how-header-loo { display: block !important; } .why-content h2 { font-size: 52px !important; } } @media (max-width: 767px) { .hero-svg-scene { top: -120px !important; right: -260px !important; width: 600px !important; opacity: 0.74 !important; } .features-svg-flow svg { top: -48px !important; height: 200px !important; } .hero-phone-svg { width: min(240px, 82%) !important; } .hero-loo-sticker { width: 92px !important; height: 92px !important; right: 7% !important; bottom: 9% !important; padding: 9px !important; } .hero-notification { font-size: 10px !important; padding: 8px 12px !important; } .showcase-section { padding: 92px 0 !important; } .showcase-header { margin-bottom: 30px !important; } .showcase-header h2 { font-size: 36px !important; margin-bottom: 12px !important; } .showcase-header p { font-size: 16px !important; } .showcase-slider-container { border-radius: 24px !important; } .showcase-slide { padding: 12px !important; } .showcase-slide-shell { min-height: auto !important; padding: 22px !important; border-radius: 18px !important; gap: 20px !important; } .showcase-slide-title { font-size: 31px !important; line-height: 1.14 !important; } .showcase-slide-text { font-size: 15px !important; line-height: 1.65 !important; margin-bottom: 16px !important; } .showcase-slide-kicker { font-size: 11px !important; margin-bottom: 12px !important; } .showcase-slide-tag { font-size: 12px !important; padding: 7px 10px !important; } .showcase-slide-media { border-radius: 16px !important; } .showcase-dots { margin-top: 14px !important; gap: 8px !important; } .faq-section { padding: 92px 0 !important; } .faq-section h2 { font-size: 36px !important; margin-bottom: 42px !important; } .faq-list { gap: 14px !important; } .faq-item { border-radius: 24px !important; } .faq-button { padding: 20px 22px !important; gap: 12px !important; align-items: flex-start !important; } .faq-button span:first-child { font-size: 16px !important; line-height: 1.42 !important; } .faq-button .material-symbols-outlined { font-size: 28px !important; margin-top: 1px !important; } .faq-answer { padding: 0 22px !important; } .faq-answer-inner { font-size: 15px !important; line-height: 1.68 !important; } .faq-item[aria-expanded='true'] .faq-answer { padding: 0 22px 22px !important; } .cta-section { padding: 72px 20px !important; } .cta-box { border-radius: 32px !important; padding: 44px 24px !important; } .cta-loo { width: 96px !important; height: 96px !important; margin-bottom: 26px !important; } .cta-box h2 { font-size: 37px !important; line-height: 1.12 !important; margin-bottom: 22px !important; } .cta-box > p { font-size: 16px !important; line-height: 1.62 !important; margin-bottom: 28px !important; } .btn-cta, .btn-cta.headline { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; justify-content: center !important; padding: 16px 22px !important; font-size: 17px !important; line-height: 1.24 !important; } } @media (prefers-reduced-motion: reduce) { .hero-ribbon-a, .hero-ribbon-b, .hero-orb-a, .hero-orb-b, .hero-noise, .features-flow-path, .features-spark { animation: none !important; } .hero-phone-svg, .hero-phone-spark, .peeking-loo { animation: none !important; } } ::-webkit-scrollbar { width: 10px !important; height: 10px !important; } ::-webkit-scrollbar-track { background: #ffffff !important; } ::-webkit-scrollbar-thumb { background: #b0b0b0 !important; border-radius: 5px !important; border: 2px solid #ffffff !important; } ::-webkit-scrollbar-thumb:hover { background: #888888 !important; } * { scrollbar-width: thin !important; scrollbar-color: #b0b0b0 #ffffff !important; } body.theme-dark { --primary: #ff8ea2; --primary-dim: #ff6f88; --primary-container: #7c3046; --on-primary: #2a0712; --on-primary-container: #ffdce6; --secondary: #7bd8ff; --secondary-container: #18495f; --on-secondary: #031922; --tertiary: #ffd370; --tertiary-container: #5f4b14; --on-tertiary-container: #fff2cc; --surface: #1b1218; --surface-bright: #24171f; --surface-dim: #140d12; --surface-container-lowest: #291922; --surface-container-low: #31202a; --surface-container: #382530; --surface-container-high: #432b37; --surface-container-highest: #4d3140; --on-surface: #ffe5ee; --on-surface-variant: #dfb7c5; --on-background: #ffeef5; --outline: #8f6372; --outline-variant: #6b4754; --inverse-surface: #fff4f5; --inverse-primary: #fb596e; --error: #ff867f; --cta-gradient-start: #82475d; --cta-gradient-mid: #64364c; --cta-gradient-end: #325f78; --cta-text-strong: #fff2f7; --cta-text-soft: #f5dce8; --cta-deco-strong: rgba(255, 245, 248, 0.5); --cta-deco-soft: rgba(123, 216, 255, 0.28); --cta-shadow: rgba(4, 2, 8, 0.72); --cta-btn-bg: #ffe0ea; --cta-btn-fg: #5d1830; --cta-btn-shadow: rgba(7, 3, 11, 0.44); --cta-btn-shadow-hover: rgba(7, 3, 11, 0.56); --theme-switch-shell-bg: linear-gradient( 140deg, rgba(63, 42, 53, 0.9) 0%, rgba(42, 29, 38, 0.94) 52%, rgba(27, 70, 91, 0.88) 100% ); --theme-switch-shell-border: rgba(255, 142, 162, 0.28); --theme-switch-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.08); --theme-switch-slot-bg: rgba(255, 245, 248, 0.1); --theme-switch-hover-bg: linear-gradient( 140deg, rgba(91, 63, 77, 0.68) 0%, rgba(70, 48, 60, 0.64) 52%, rgba(37, 87, 111, 0.6) 100% ); --theme-switch-hover-shadow: inset 0 0 0 1px rgba(255, 245, 248, 0.16), 0 8px 16px -12px rgba(0, 0, 0, 0.64); --theme-switch-icon-muted: rgba(255, 229, 238, 0.8); --theme-switch-knob-bg: #fff4f7; --theme-switch-knob-active: linear-gradient(130deg, #ff8ea2 0%, #7bd8ff 100%); --theme-switch-knob-shadow: 0 9px 18px -14px rgba(5, 3, 8, 0.7); --theme-switch-ring: rgba(123, 216, 255, 0.65); color-scheme: dark; } body.theme-dark { background: radial-gradient( circle at 8% 10%, rgba(251, 89, 110, 0.2) 0%, rgba(251, 89, 110, 0) 34% ), radial-gradient( circle at 86% 12%, rgba(0, 99, 134, 0.24) 0%, rgba(0, 99, 134, 0) 38% ), linear-gradient(180deg, #1b1218 0%, #21151d 46%, #170f15 100%) !important; color: var(--on-surface) !important; } body.theme-dark .glass-nav { background: rgba(36, 23, 31, 0.78) !important; backdrop-filter: blur(24px) !important; border-bottom-color: rgba(255, 142, 162, 0.2) !important; } body.theme-dark .navbar-links a, body.theme-dark .btn-login, body.theme-dark .hero-subtitle, body.theme-dark .features-header p, body.theme-dark .why-intro, body.theme-dark .faq-answer { color: var(--on-surface-variant) !important; } body.theme-dark .hero-pattern, body.theme-dark .pricing-page { background: radial-gradient( circle at 14% 18%, rgba(251, 89, 110, 0.2), rgba(251, 89, 110, 0) 42% ), radial-gradient( circle at 82% 16%, rgba(154, 218, 255, 0.2), rgba(154, 218, 255, 0) 40% ), var(--surface) !important; } body.theme-dark .hero-mockup, body.theme-dark .hero-mockup-inner, body.theme-dark .feature-card, body.theme-dark .tip-card, body.theme-dark .faq-item, body.theme-dark .pricing-cta-card, body.theme-dark .plan-card, body.theme-dark .comparison-wrap { background: var(--surface-container-lowest) !important; border-color: rgba(255, 142, 162, 0.18) !important; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.5) !important; } body.theme-dark .cta-section { background: radial-gradient( circle at 18% 20%, rgba(255, 142, 162, 0.1), rgba(255, 142, 162, 0) 46% ), radial-gradient( circle at 82% 76%, rgba(123, 216, 255, 0.1), rgba(123, 216, 255, 0) 44% ), linear-gradient( 180deg, rgba(37, 25, 33, 0.82) 0%, rgba(29, 20, 27, 0.92) 100% ) !important; } body.theme-dark .cta-box { background: linear-gradient( 165deg, rgba(20, 13, 18, 0.36) 0%, rgba(17, 11, 16, 0.22) 100% ), linear-gradient( 135deg, var(--cta-gradient-start) 0%, var(--cta-gradient-mid) 52%, var(--cta-gradient-end) 100% ) !important; border: 1px solid rgba(255, 214, 227, 0.14) !important; box-shadow: 0 44px 96px -30px var(--cta-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.theme-dark .cta-decorations { opacity: 0.12 !important; } body.theme-dark .cta-loo { filter: brightness(0) invert(1) saturate(0) contrast(1.1) !important; } body.theme-dark .btn-cta { background: var(--cta-btn-bg) !important; color: var(--cta-btn-fg) !important; box-shadow: 0 24px 44px -18px var(--cta-btn-shadow) !important; } body.theme-dark .btn-cta:hover { color: var(--cta-btn-fg) !important; box-shadow: 0 24px 52px -16px var(--cta-btn-shadow-hover) !important; } body.theme-dark .how-section { background: radial-gradient( circle at 16% 14%, rgba(251, 89, 110, 0.18), rgba(251, 89, 110, 0) 46% ), radial-gradient( circle at 86% 18%, rgba(123, 216, 255, 0.16), rgba(123, 216, 255, 0) 44% ), var(--surface-container-low) !important; } body.theme-dark .how-step { background: rgba(41, 25, 34, 0.84) !important; border: 1px solid rgba(255, 142, 162, 0.24) !important; border-radius: 24px !important; padding: 24px 18px !important; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.5) !important; } body.theme-dark .how-header-text h2, body.theme-dark .how-step h4, body.theme-dark .why-content h2, body.theme-dark .why-list h5, body.theme-dark .stat-value { color: var(--on-background) !important; } body.theme-dark .how-header-text p, body.theme-dark .how-step p, body.theme-dark .why-intro, body.theme-dark .why-list p, body.theme-dark .stat-label { color: var(--on-surface-variant) !important; } body.theme-dark .step-number { background: var(--surface-container-high) !important; outline-color: var(--surface-container-low) !important; box-shadow: 0 20px 38px -22px rgba(0, 0, 0, 0.62) !important; } body.theme-dark .step-number.primary-num { color: var(--primary) !important; border-color: rgba(255, 142, 162, 0.42) !important; } body.theme-dark .step-number.secondary-num { color: var(--secondary) !important; border-color: rgba(123, 216, 255, 0.38) !important; } body.theme-dark .step-number.tertiary-num { color: var(--tertiary) !important; border-color: rgba(255, 211, 112, 0.4) !important; } body.theme-dark .why-section { background: radial-gradient( circle at 82% 18%, rgba(123, 216, 255, 0.14), rgba(123, 216, 255, 0) 45% ), linear-gradient(180deg, #21151d 0%, #1b1218 100%) !important; } body.theme-dark .why-bg-glow { background: radial-gradient( circle, rgba(251, 89, 110, 0.2) 0%, rgba(123, 216, 255, 0.06) 44%, rgba(251, 89, 110, 0) 76% ) !important; } body.theme-dark .stat-grid-bg { background: linear-gradient( 160deg, rgba(251, 89, 110, 0.16), rgba(123, 216, 255, 0.12) ) !important; } body.theme-dark .stat-card { background: var(--surface-container-lowest) !important; border-color: rgba(255, 142, 162, 0.2) !important; box-shadow: 0 20px 36px -22px rgba(0, 0, 0, 0.56) !important; } body.theme-dark .stat-card.primary-stat { border-top-color: var(--primary) !important; } body.theme-dark .stat-card.secondary-stat { border-top-color: var(--secondary) !important; } body.theme-dark .stat-card.tertiary-stat { border-top-color: var(--tertiary) !important; } body.theme-dark .stat-card.loo-stat { border-top-color: var(--outline) !important; } body.theme-dark .why-list li { background: rgba(41, 25, 34, 0.86) !important; border-color: rgba(255, 142, 162, 0.22) !important; box-shadow: 0 16px 30px -22px rgba(0, 0, 0, 0.5) !important; } body.theme-dark .why-list li:hover { border-color: rgba(123, 216, 255, 0.34) !important; box-shadow: 0 20px 34px -22px rgba(0, 0, 0, 0.56) !important; } body.theme-dark .why-check { background: rgba(255, 142, 162, 0.16) !important; color: var(--primary) !important; } body.theme-dark .btn-hero-secondary { background: var(--surface-container-lowest) !important; color: var(--on-surface) !important; border-color: rgba(255, 142, 162, 0.24) !important; } body.theme-dark .comparison-table thead th { background: var(--surface-container-high) !important; } body.theme-dark .comparison-table tbody tr:nth-child(even) td { background: var(--surface-container-low) !important; } body.theme-dark .showcase-section { background: radial-gradient( circle at 14% 18%, rgba(251, 89, 110, 0.16), transparent 46% ), radial-gradient( circle at 84% 24%, rgba(123, 216, 255, 0.16), transparent 52% ), linear-gradient(180deg, #1f141b 0%, #1b1218 100%) !important; } body.theme-dark .showcase-slider-container { border-color: rgba(255, 142, 162, 0.26) !important; background: linear-gradient( 160deg, rgba(41, 25, 34, 0.94) 0%, rgba(34, 22, 30, 0.95) 100% ) !important; box-shadow: 0 34px 72px -44px rgba(0, 0, 0, 0.66) !important; } body.theme-dark .showcase-slide-shell { border-color: rgba(255, 142, 162, 0.26) !important; background: rgba(35, 23, 31, 0.92) !important; } body.theme-dark .showcase-slide--dashboard .showcase-slide-shell { background: linear-gradient( 145deg, rgba(124, 48, 70, 0.54) 0%, rgba(41, 25, 34, 0.94) 58%, rgba(24, 73, 95, 0.52) 100% ) !important; } body.theme-dark .showcase-slide--quizzes .showcase-slide-shell { background: linear-gradient( 145deg, rgba(24, 73, 95, 0.56) 0%, rgba(41, 25, 34, 0.94) 56%, rgba(95, 75, 20, 0.5) 100% ) !important; } body.theme-dark .showcase-slide--flashcards .showcase-slide-shell { background: linear-gradient( 145deg, rgba(95, 75, 20, 0.52) 0%, rgba(41, 25, 34, 0.92) 56%, rgba(124, 48, 70, 0.48) 100% ) !important; } body.theme-dark .showcase-slide--podcasts .showcase-slide-shell { background: linear-gradient( 145deg, rgba(124, 48, 70, 0.52) 0%, rgba(41, 25, 34, 0.94) 56%, rgba(24, 73, 95, 0.48) 100% ) !important; } body.theme-dark .showcase-slide-kicker { background: rgba(35, 23, 31, 0.88) !important; border-color: rgba(123, 216, 255, 0.26) !important; } body.theme-dark .showcase-slide-tag { background: rgba(35, 23, 31, 0.82) !important; border-color: rgba(255, 142, 162, 0.3) !important; color: var(--on-surface) !important; } body.theme-dark .showcase-slide-media { border-color: rgba(123, 216, 255, 0.26) !important; background: rgba(23, 16, 22, 0.92) !important; } body.theme-dark .showcase-dot.inactive { border-color: rgba(255, 142, 162, 0.24) !important; background: rgba(255, 142, 162, 0.24) !important; } body.theme-dark .showcase-dot.active { border-color: rgba(123, 216, 255, 0.42) !important; background: linear-gradient( 135deg, var(--primary) 0%, var(--secondary) 100% ) !important; } body.theme-dark .hero-notification, body.theme-dark .hero-badge-float, body.theme-dark .meta-pill, body.theme-dark .pricing-kicker, body.theme-dark .why-kicker { background: rgba(41, 25, 34, 0.9) !important; border-color: rgba(123, 216, 255, 0.34) !important; color: var(--secondary) !important; } body.theme-dark ::-webkit-scrollbar-track { background: #1a1016 !important; } body.theme-dark ::-webkit-scrollbar-thumb { background: #7f4b5c !important; border-color: #1a1016 !important; } body.theme-dark * { scrollbar-color: #7f4b5c #1a1016 !important; } body .st-container.st-fs-container .st-panel-workspace-controls.st-study-tabs-filters .st-study-tabs-filter-item .st-panel-workspace-select .custom-dropdown, body .st-container.st-fs-container .st-panel-workspace-controls.st-study-tabs-filters .st-study-tabs-filter-item .st-panel-workspace-select select { width: 100% !important; } body .st-doc-mode-overlay { position: fixed !important; inset: 0 !important; z-index: 99999 !important; padding: 16px !important; display: grid !important; place-items: center !important; background: color-mix(in srgb, var(--on-surface) 52%, transparent) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body .st-doc-mode-choice { width: min(560px, 100%) !important; margin: 0 !important; padding: 22px !important; border: none !important; border-radius: 22px !important; background: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--surface-container-low) 10% ) !important; box-shadow: 0 36px 64px -44px color-mix(in srgb, var(--on-surface) 74%, transparent) !important; text-align: left !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important; } body .st-doc-mode-choice h3 { margin: 0 0 6px !important; font-size: 24px !important; line-height: 1.24 !important; font-weight: 800 !important; color: color-mix( in srgb, var(--on-surface) 92%, var(--primary) 8% ) !important; } body .st-doc-mode-choice p { margin: 0 !important; font-size: 14px !important; line-height: 1.58 !important; color: var(--on-surface-variant) !important; } body .st-doc-mode-options { margin-top: 14px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; } body .st-doc-mode-btn { width: 100% !important; min-height: 124px !important; border: none !important; border-radius: 16px !important; padding: 14px 12px !important; display: grid !important; justify-items: center !important; align-content: start !important; gap: 8px !important; text-align: center !important; background: color-mix( in srgb, var(--surface-container-lowest) 84%, var(--surface-container-low) 16% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 46%, transparent) !important; color: color-mix( in srgb, var(--on-surface) 90%, var(--primary) 10% ) !important; } body .st-doc-mode-btn i { width: 42px; min-width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; font-size: 18px !important; background: color-mix( in srgb, var(--surface-container-lowest) 72%, var(--primary-container) 28% ); } body .st-doc-mode-btn span { font-size: 15px !important; line-height: 1.35 !important; font-weight: 800 !important; } body .st-doc-mode-btn small { font-size: 12px !important; line-height: 1.45 !important; font-weight: 600 !important; color: var(--on-surface-variant) !important; } body .st-doc-mode-btn:hover, body .st-doc-mode-btn:focus-visible { transform: translateY(-2px); background: color-mix( in srgb, var(--surface-container-lowest) 70%, var(--primary-container) 30% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-container) 62%, transparent) !important; } body .st-doc-mode-apply-all { margin-top: 10px !important; padding: 9px 12px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; line-height: 1.45 !important; font-weight: 600 !important; color: var(--on-surface-variant) !important; background: color-mix( in srgb, var(--surface-container-lowest) 82%, var(--surface-container-low) 18% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 42%, transparent) !important; } @media (max-width: 760px) { body .st-doc-mode-choice { padding: 18px !important; border-radius: 18px !important; } body .st-doc-mode-choice h3 { font-size: 22px !important; } body .st-doc-mode-choice p { font-size: 13px !important; } body .st-doc-mode-options { grid-template-columns: 1fr; } } body.theme-dark { --primary: rgb(232 141 136); --primary-dim: rgb(199 102 98); --primary-container: rgb(128 61 66); --on-primary: rgb(43 19 23); --on-primary-container: rgb(255 223 220); --secondary: rgb(177 169 243); --secondary-container: rgb(79 69 129); --on-secondary: rgb(247 243 255); --tertiary: rgb(144 216 197); --tertiary-container: rgb(49 90 77); --on-tertiary-container: rgb(225 255 246); --surface: rgb(26 20 24); --surface-bright: rgb(35 27 32); --surface-dim: rgb(20 15 19); --surface-container-lowest: rgb(40 30 35); --surface-container-low: rgb(48 36 43); --surface-container: rgb(57 42 50); --surface-container-high: rgb(67 49 58); --surface-container-highest: rgb(77 57 67); --on-surface: rgb(245 229 232); --on-surface-variant: rgb(208 183 188); --on-background: rgb(252 239 242); --outline: rgb(146 111 121); --outline-variant: rgb(108 81 90); --inverse-surface: rgb(255 244 245); --inverse-primary: rgb(207 99 95); --error: rgb(255 142 136); --cta-gradient-start: color-mix( in srgb, var(--primary-container) 84%, var(--surface-container-high) 16% ); --cta-gradient-mid: color-mix( in srgb, var(--primary-container) 62%, var(--secondary-container) 38% ); --cta-gradient-end: color-mix( in srgb, var(--secondary-container) 84%, var(--surface-container-high) 16% ); --cta-text-strong: var(--on-surface); --cta-text-soft: color-mix( in srgb, var(--on-surface) 84%, var(--on-primary) 16% ); --cta-deco-strong: color-mix(in srgb, var(--on-surface) 42%, transparent); --cta-deco-soft: color-mix(in srgb, var(--secondary) 32%, transparent); --cta-shadow: color-mix(in srgb, black 74%, transparent); --cta-btn-bg: color-mix( in srgb, var(--surface-container-lowest) 66%, var(--primary-container) 34% ); --cta-btn-fg: color-mix(in srgb, var(--on-surface) 92%, var(--on-primary) 8%); --cta-btn-shadow: color-mix(in srgb, black 70%, transparent); --cta-btn-shadow-hover: color-mix(in srgb, black 78%, transparent); --eduloo-dark-page-bg: radial-gradient( circle at 10% 10%, color-mix(in srgb, var(--primary) 24%, transparent) 0%, transparent 40% ), radial-gradient( circle at 88% 14%, color-mix(in srgb, var(--secondary) 20%, transparent) 0%, transparent 42% ), linear-gradient( 180deg, color-mix(in srgb, var(--surface-dim) 88%, black 12%) 0%, var(--surface) 46%, color-mix(in srgb, var(--surface-dim) 74%, black 26%) 100% ); --eduloo-dark-surface-card: linear-gradient( 150deg, color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ) 0%, color-mix( in srgb, var(--surface-container-highest) 88%, var(--secondary-container) 12% ) 100% ); --eduloo-dark-surface-card-soft: color-mix( in srgb, var(--surface-container-highest) 86%, var(--primary-container) 14% ); --eduloo-dark-surface-border: color-mix( in srgb, var(--outline-variant) 62%, var(--primary-container) 38% ); --eduloo-dark-surface-shadow: 0 24px 42px -28px color-mix(in srgb, black 74%, transparent); --eduloo-dark-chip-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary-container) 64%, transparent) 0%, color-mix(in srgb, var(--secondary-container) 44%, transparent) 100% ); --eduloo-dark-chip-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --eduloo-dark-btn-soft-bg: color-mix( in srgb, var(--surface-container-highest) 74%, var(--primary-container) 26% ); --eduloo-dark-btn-soft-bg-hover: color-mix( in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36% ); --eduloo-dark-btn-soft-border: color-mix( in srgb, var(--outline-variant) 54%, var(--primary-container) 46% ); --eduloo-dark-btn-soft-text: color-mix( in srgb, var(--on-surface) 92%, var(--on-primary) 8% ); --eduloo-dark-btn-primary-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 84%, rgb(239 160 154) 16%) 0%, color-mix(in srgb, var(--secondary) 62%, var(--primary) 38%) 100% ); --eduloo-dark-btn-primary-bg-hover: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 90%, rgb(245 174 168) 10%) 0%, color-mix(in srgb, var(--secondary) 70%, var(--primary) 30%) 100% ); --eduloo-dark-btn-primary-shadow: 0 18px 30px -20px color-mix(in srgb, black 70%, transparent); --eduloo-dark-focus-ring: color-mix( in srgb, var(--secondary) 52%, transparent ); color-scheme: dark; } body.theme-dark { background: var(--eduloo-dark-page-bg) !important; color: var(--on-surface) !important; } body.theme-dark .glass-nav { background: color-mix( in srgb, var(--surface-container-low) 78%, transparent ) !important; border-bottom-color: var(--eduloo-dark-surface-border) !important; box-shadow: 0 14px 26px -24px color-mix(in srgb, black 74%, transparent) !important; } body.theme-dark .hero-pattern, body.theme-dark .pricing-page, body.theme-dark .how-section, body.theme-dark .why-section { background: radial-gradient( circle at 14% 16%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 44% ), radial-gradient( circle at 82% 18%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 46% ), color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-dim) 14%) !important; } body.theme-dark .hero-mockup, body.theme-dark .hero-mockup-inner, body.theme-dark .feature-card, body.theme-dark .tip-card, body.theme-dark .faq-item, body.theme-dark .pricing-cta-card, body.theme-dark .plan-card, body.theme-dark .comparison-wrap, body.theme-dark .how-step, body.theme-dark .stat-card, body.theme-dark .why-list li { background: var(--eduloo-dark-surface-card) !important; border: 1px solid var(--eduloo-dark-surface-border) !important; box-shadow: var(--eduloo-dark-surface-shadow) !important; } body.theme-dark .btn, body.theme-dark .btn-login, body.theme-dark .btn-hero-secondary { background: var(--eduloo-dark-btn-soft-bg) !important; border: 1px solid var(--eduloo-dark-btn-soft-border) !important; color: var(--eduloo-dark-btn-soft-text) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 12px 24px -18px color-mix(in srgb, black 68%, transparent) !important; } body.theme-dark .btn:hover, body.theme-dark .btn-login:hover, body.theme-dark .btn-hero-secondary:hover { background: var(--eduloo-dark-btn-soft-bg-hover) !important; border-color: color-mix( in srgb, var(--eduloo-dark-btn-soft-border) 66%, var(--secondary) 34% ) !important; color: var(--on-surface) !important; } body.theme-dark .btn-hero-primary, body.theme-dark .btn-cta { background: var(--eduloo-dark-btn-primary-bg) !important; color: var(--on-primary) !important; border: 1px solid color-mix(in srgb, var(--secondary) 44%, transparent) !important; box-shadow: var(--eduloo-dark-btn-primary-shadow) !important; } body.theme-dark .btn-hero-primary:hover, body.theme-dark .btn-cta:hover { background: var(--eduloo-dark-btn-primary-bg-hover) !important; color: var(--on-primary) !important; } body.theme-dark .hero-notification, body.theme-dark .hero-badge-float, body.theme-dark .meta-pill, body.theme-dark .pricing-kicker, body.theme-dark .why-kicker { background: var(--eduloo-dark-chip-bg) !important; color: var(--eduloo-dark-chip-text) !important; border: 1px solid var(--eduloo-dark-surface-border) !important; } body.theme-dark .why-check { background: color-mix( in srgb, var(--primary-container) 74%, transparent ) !important; color: color-mix( in srgb, var(--on-surface) 92%, var(--on-primary) 8% ) !important; } body.theme-dark a:focus-visible, body.theme-dark button:focus-visible { outline: 2px solid var(--eduloo-dark-focus-ring) !important; outline-offset: 2px !important; } body.theme-dark input:focus-visible, body.theme-dark select:focus-visible, body.theme-dark textarea:focus-visible { outline: none !important; } body.theme-dark ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--surface-dim) 88%, black 12%) !important; } body.theme-dark ::-webkit-scrollbar-thumb { background: color-mix( in srgb, var(--outline) 74%, var(--primary-container) 26% ) !important; border-color: color-mix( in srgb, var(--surface-dim) 88%, black 12% ) !important; } body.theme-dark * { scrollbar-color: color-mix( in srgb, var(--outline) 74%, var(--primary-container) 26% ) color-mix(in srgb, var(--surface-dim) 88%, black 12%) !important; } body.theme-dark .theme-switcher, body.theme-dark .theme-toggle, body.theme-dark [data-theme-switcher], body.theme-dark .base-theme-switcher, body.theme-dark .base-theme-toggle, body.theme-dark .st-theme-switcher { --theme-switch-shell-bg: linear-gradient( 140deg, color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ) 0%, color-mix( in srgb, var(--surface-container-highest) 86%, var(--secondary-container) 14% ) 100% ); --theme-switch-shell-border: color-mix( in srgb, var(--outline-variant) 56%, var(--primary-container) 44% ); --theme-switch-shadow: 0 10px 20px -14px color-mix(in srgb, black 70%, transparent), inset 0 1px 0 color-mix(in srgb, white 10%, transparent); --theme-switch-slot-bg: color-mix( in srgb, var(--surface-container-highest) 76%, transparent ); --theme-switch-hover-bg: linear-gradient( 140deg, color-mix( in srgb, var(--surface-container-highest) 70%, var(--primary-container) 30% ) 0%, color-mix( in srgb, var(--surface-container-highest) 74%, var(--secondary-container) 26% ) 100% ); --theme-switch-hover-shadow: inset 0 0 0 1px color-mix(in srgb, white 14%, transparent), 0 8px 16px -12px color-mix(in srgb, black 68%, transparent); --theme-switch-icon-muted: color-mix( in srgb, var(--on-surface) 84%, var(--secondary) 16% ); --theme-switch-knob-bg: color-mix( in srgb, var(--surface-container-lowest) 90%, white 10% ); --theme-switch-knob-active: linear-gradient( 130deg, color-mix(in srgb, var(--primary) 86%, rgb(245 174 168) 14%) 0%, color-mix(in srgb, var(--secondary) 66%, var(--primary) 34%) 100% ); --theme-switch-knob-shadow: 0 9px 18px -14px color-mix(in srgb, black 72%, transparent); --theme-switch-ring: color-mix(in srgb, var(--secondary) 56%, transparent); } body h2, body h2::before, body h2::after { border-bottom: none !important; } main.container:has(.blog-overview-title) { --st-bo-bg: linear-gradient( 155deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface) 14%) 0%, color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%) 100% ); --st-bo-shell-border: color-mix( in srgb, var(--outline-variant) 54%, transparent ); --st-bo-shell-shadow: 0 28px 52px -42px color-mix(in srgb, var(--on-surface) 44%, transparent); position: relative; overflow: hidden; box-sizing: border-box; max-width: 1200px !important; margin: calc(var(--eduloo-main-offset, 122px) + 16px) auto 30px auto !important; padding: 34px 20px 28px 20px !important; border-radius: 30px !important; border: 1px solid var(--st-bo-shell-border) !important; background: radial-gradient( circle at 10% 0%, color-mix(in srgb, var(--primary-container) 24%, transparent) 0%, transparent 42% ), radial-gradient( circle at 92% 100%, color-mix(in srgb, var(--primary-container) 18%, transparent) 0%, transparent 46% ), var(--st-bo-bg) !important; box-shadow: var(--st-bo-shell-shadow) !important; } body main.container:has(.blog-overview-title) .blog-overview-title, body main.container:has(.blog-overview-title) .blog-overview-subtitle, body main.container:has(.blog-overview-title) .blog-overview-filters, body main.container:has(.blog-overview-title) #blog-overview-list, body main.container:has(.blog-overview-title) #blog-overview-empty-filter, body main.container:has(.blog-overview-title) #blog-overview-pagination { width: min(1080px, 100%) !important; margin-left: auto !important; margin-right: auto !important; } body .blog-overview-title { margin: 0 0 8px 0 !important; text-align: left !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important; font-size: 44px !important; line-height: 1.12 !important; letter-spacing: -0.7px !important; font-weight: 800 !important; color: var(--on-surface) !important; } body .blog-overview-subtitle { margin: 0 0 14px 0 !important; max-width: 760px !important; text-align: left !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--on-surface-variant) !important; } body .blog-overview-filters { margin: 0 0 14px 0 !important; gap: 10px !important; } body .blog-overview-toolbar { margin: 0 !important; width: min(460px, 100%) !important; } body .blog-overview-search { max-width: none !important; width: 100% !important; } body .blog-overview-search .search-field__input { min-height: 44px !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 56%, transparent) !important; background: var(--surface-container-lowest) !important; color: var(--on-surface) !important; font-size: 14px !important; font-weight: 600 !important; padding-left: 40px !important; } body .blog-overview-search .search-field__input:focus { border-color: color-mix( in srgb, var(--outline-variant) 42%, var(--primary-container) 58% ) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-container) 50%, transparent) !important; } body .tag-filter-chips { padding: 8px !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 56%, transparent) !important; background: var(--surface-container-lowest) !important; box-shadow: none !important; gap: 8px !important; } body .filter-chip { min-height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 54%, transparent) !important; background: var(--surface-container-low) !important; color: var(--on-surface) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important; transform: none !important; } body .filter-chip .count-badge { min-width: 20px !important; height: 18px !important; padding: 0 6px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 800 !important; background: color-mix( in srgb, var(--surface-container-lowest) 70%, var(--primary-container) 30% ) !important; color: var(--on-surface) !important; } body .filter-chip.active { border-color: color-mix( in srgb, var(--outline-variant) 40%, var(--primary-container) 60% ) !important; background: color-mix( in srgb, var(--primary-container) 28%, var(--surface-container-low) 72% ) !important; } body .filter-chip:hover { border-color: color-mix( in srgb, var(--outline-variant) 40%, var(--primary-container) 60% ) !important; background: color-mix( in srgb, var(--primary-container) 22%, var(--surface-container-low) 78% ) !important; } body .blog-post-card { margin-bottom: 14px !important; border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 56%, transparent) !important; background: var(--surface-container-lowest) !important; box-shadow: 0 14px 24px -22px color-mix(in srgb, var(--on-surface) 34%, transparent) !important; overflow: hidden !important; } body .blog-post-card:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--on-surface) 38%, transparent) !important; } body .blog-post-card .row { display: grid !important; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; } body .blog-post-card .four.columns, body .blog-post-card .eight.columns { width: auto !important; margin: 0 !important; } body .blog-post-card-media { max-width: none !important; } body .blog-post-card-thumb { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 220px !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 0 !important; } body .blog-post-card-content { padding: 16px !important; height: 100% !important; display: flex !important; flex-direction: column !important; } body .blog-post-card-content > div:first-child { color: var(--on-surface-variant) !important; font-size: 13px !important; line-height: 1.45 !important; margin-bottom: 8px !important; } body .blog-post-card-content .blog-tag-link { border-radius: 999px !important; font-size: 12px !important; line-height: 1.2 !important; min-height: 26px !important; padding: 4px 9px !important; } body .blog-post-card-content .blog-post-link h2 { margin: 0 0 6px 0 !important; color: var(--on-surface) !important; font-size: 27px !important; line-height: 1.25 !important; letter-spacing: -0.3px !important; } body .blog-post-card-content .blog-post-link p { margin: 0 !important; color: var(--on-surface-variant) !important; font-size: 15px !important; line-height: 1.62 !important; } body .blog-post-card-actions { margin-top: 14px !important; padding-top: 0 !important; } body .blog-post-read-more { min-height: 34px !important; padding: 0 12px !important; border-radius: 10px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 56%, transparent) !important; background: var(--surface-container-low) !important; color: var(--on-surface) !important; font-size: 13px !important; font-weight: 700 !important; } body .blog-post-read-more:hover { border-color: color-mix( in srgb, var(--outline-variant) 40%, var(--primary-container) 60% ) !important; background: color-mix( in srgb, var(--primary-container) 24%, var(--surface-container-low) 76% ) !important; } body .blog-overview-filter-empty, body main.container:has(.blog-overview-title) > .card[style*='text-align: center'] { border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 56%, transparent) !important; background: var(--surface-container-lowest) !important; box-shadow: none !important; padding: 24px !important; } body .blog-overview-filter-empty h2, body main.container:has(.blog-overview-title) > .card[style*='text-align: center'] h2 { font-size: 27px !important; line-height: 1.3 !important; margin: 0 0 6px 0 !important; color: var(--on-surface) !important; } body .blog-pagination { margin-top: 18px !important; text-align: left !important; } body .blog-pagination__list { gap: 8px !important; } body .blog-pagination .blog-pagination__button { min-width: 36px !important; min-height: 34px !important; border-radius: 10px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 56%, transparent) !important; background: var(--surface-container-lowest) !important; color: var(--on-surface) !important; font-size: 13px !important; font-weight: 700 !important; } body .blog-pagination .blog-pagination__button:hover { border-color: color-mix( in srgb, var(--outline-variant) 40%, var(--primary-container) 60% ) !important; background: color-mix( in srgb, var(--primary-container) 24%, var(--surface-container-low) 76% ) !important; } body .blog-pagination .blog-pagination__button.current { border-color: color-mix( in srgb, var(--outline-variant) 40%, var(--primary-container) 60% ) !important; background: color-mix( in srgb, var(--primary-container) 28%, var(--surface-container-low) 72% ) !important; } body.theme-dark .blog-overview-search .search-field__input, body.theme-dark .tag-filter-chips, body.theme-dark .blog-post-card, body.theme-dark .blog-overview-filter-empty, body.theme-dark main.container:has(.blog-overview-title) > .card[style*='text-align: center'], body.theme-dark .blog-pagination .blog-pagination__button { background: var(--surface-container-high) !important; border-color: color-mix( in srgb, var(--outline-variant) 64%, transparent ) !important; color: var(--on-surface) !important; } body.theme-dark main.container:has(.blog-overview-title) { --st-bo-bg: linear-gradient( 158deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-dim) 14%) 0%, color-mix( in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22% ) 100% ); --st-bo-shell-border: color-mix( in srgb, var(--outline-variant) 64%, transparent ); --st-bo-shell-shadow: 0 30px 56px -44px color-mix(in srgb, black 74%, transparent); background: radial-gradient( circle at 8% 0%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 42% ), radial-gradient( circle at 95% 8%, color-mix(in srgb, var(--secondary) 14%, transparent) 0%, transparent 38% ), radial-gradient( circle at 94% 100%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 46% ), var(--st-bo-bg) !important; } body.theme-dark .filter-chip, body.theme-dark .blog-post-read-more { background: var(--surface-container-highest) !important; border-color: color-mix( in srgb, var(--outline-variant) 64%, transparent ) !important; color: var(--on-surface) !important; } body.theme-dark .filter-chip.active, body.theme-dark .filter-chip:hover, body.theme-dark .blog-post-read-more:hover, body.theme-dark .blog-pagination .blog-pagination__button:hover, body.theme-dark .blog-pagination .blog-pagination__button.current { background: color-mix( in srgb, var(--primary-container) 34%, var(--surface-container-highest) 66% ) !important; border-color: color-mix( in srgb, var(--outline-variant) 48%, var(--primary-container) 52% ) !important; } @media (max-width: 980px) { main.container:has(.blog-overview-title) { margin: calc(var(--eduloo-main-offset, 122px) + 12px) auto 24px auto !important; padding: 24px 16px 22px 16px !important; border-radius: 24px !important; } body .blog-overview-title { font-size: 38px !important; } body .blog-post-card .row { grid-template-columns: minmax(0, 1fr) !important; } body .blog-post-card-thumb { min-height: 210px !important; } } @media (max-width: 640px) { main.container:has(.blog-overview-title) { margin: calc(var(--eduloo-main-offset, 122px) + 8px) auto 18px auto !important; padding: 18px 10px 18px 10px !important; border-radius: 18px !important; } body .blog-overview-title { font-size: 31px !important; } body .blog-overview-subtitle { font-size: 15px !important; line-height: 1.55 !important; } body .blog-overview-toolbar { width: 100% !important; } body .blog-overview-search .search-field__input { min-height: 42px !important; font-size: 14px !important; } body .blog-post-card-content { padding: 12px !important; } body .blog-post-card-content .blog-post-link h2 { font-size: 22px !important; } body .blog-post-card-content .blog-post-link p { font-size: 14px !important; line-height: 1.58 !important; } body .blog-pagination { margin-top: 14px !important; } body .blog-pagination__list { justify-content: flex-start !important; } } @media (prefers-reduced-motion: reduce) { body .blog-article .blog-meta-card-link { transition: none !important; } } main.container:has(.blog-article) { max-width: 1200px !important; padding: 0 20px !important; } body .blog-article { --ed-blog-simple-shell: var(--surface-container-lowest); --ed-blog-simple-card: var(--surface-container-lowest); --ed-blog-simple-soft: var(--surface-container-low); --ed-blog-simple-border: color-mix( in srgb, var(--outline-variant) 56%, transparent ); --ed-blog-simple-border-strong: color-mix( in srgb, var(--outline-variant) 40%, var(--primary-container) 60% ); --ed-blog-simple-title: var(--on-surface); --ed-blog-simple-text: var(--on-surface); --ed-blog-simple-muted: var(--on-surface-variant); --ed-blog-simple-focus: color-mix( in srgb, var(--primary-container) 52%, transparent ); width: min(1080px, 100%) !important; margin: 0 auto 30px auto !important; padding: 24px !important; border-radius: 22px !important; border: 1px solid var(--ed-blog-simple-border) !important; background: var(--ed-blog-simple-shell) !important; box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--on-surface) 36%, transparent) !important; gap: 16px !important; } body.theme-dark .blog-article { --ed-blog-simple-shell: var(--surface-container-high); --ed-blog-simple-card: var(--surface-container-high); --ed-blog-simple-soft: var(--surface-container-highest); --ed-blog-simple-border: color-mix( in srgb, var(--outline-variant) 64%, transparent ); --ed-blog-simple-border-strong: color-mix( in srgb, var(--outline-variant) 48%, var(--primary-container) 52% ); --ed-blog-simple-title: color-mix( in srgb, var(--on-surface) 95%, var(--on-primary) 5% ); --ed-blog-simple-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --ed-blog-simple-muted: color-mix( in srgb, var(--on-surface-variant) 90%, var(--on-primary) 10% ); --ed-blog-simple-focus: color-mix( in srgb, var(--primary-container) 48%, transparent ); background: var(--ed-blog-simple-shell) !important; box-shadow: 0 20px 36px -24px color-mix(in srgb, black 68%, transparent) !important; } body .blog-article .blog-article-header { margin: 0 auto 4px auto !important; width: 100% !important; max-width: 920px !important; text-align: left !important; } body .blog-article .blog-article-header h1 { font-size: 44px !important; line-height: 1.12 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important; letter-spacing: -0.7px !important; font-weight: 800 !important; color: var(--ed-blog-simple-title) !important; background: none !important; -webkit-text-fill-color: currentColor !important; } body .blog-article .blog-article-meta-cards { width: 100% !important; max-width: 920px !important; margin: 14px auto 0 auto !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; } body .blog-article .blog-meta-card { min-height: 78px !important; border-radius: 14px !important; border: 1px solid var(--ed-blog-simple-border) !important; background: var(--ed-blog-simple-card) !important; box-shadow: none !important; padding: 12px 14px !important; align-items: center !important; gap: 10px !important; } body .blog-article .blog-meta-card i { width: 28px !important; font-size: 15px !important; color: color-mix( in srgb, var(--primary) 76%, var(--ed-blog-simple-title) 24% ) !important; } body .blog-article .blog-meta-card-label { font-size: 11px !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; color: var(--ed-blog-simple-muted) !important; } body .blog-article .blog-meta-card-value { font-size: 14px !important; line-height: 1.35 !important; font-weight: 700 !important; color: var(--ed-blog-simple-title) !important; } body .blog-article .blog-meta-card-primary { border-color: var(--ed-blog-simple-border-strong) !important; background: var(--ed-blog-simple-soft) !important; } body .blog-article .blog-meta-card-link:hover { transform: translateY(-1px) !important; border-color: var(--ed-blog-simple-border-strong) !important; background: var(--ed-blog-simple-soft) !important; } body .blog-article .blog-meta-card-link:focus-visible { box-shadow: 0 0 0 3px var(--ed-blog-simple-focus) !important; } body .blog-article .blog-article-hero-wrap { width: 100% !important; max-width: 920px !important; margin: 12px auto 0 auto !important; border-radius: 16px !important; border: 1px solid var(--ed-blog-simple-border) !important; background: var(--ed-blog-simple-card) !important; } body .blog-article .blog-article-hero-image { aspect-ratio: 16 / 9 !important; } body .blog-article .blog-post-content { width: 100% !important; max-width: 920px !important; margin: 0 auto !important; padding: 22px !important; border-radius: 18px !important; border: 1px solid var(--ed-blog-simple-border) !important; background: var(--ed-blog-simple-card) !important; box-shadow: none !important; color: var(--ed-blog-simple-text) !important; } body .blog-article .blog-post-content p, body .blog-article .blog-post-content li { font-size: 16px !important; line-height: 1.72 !important; color: var(--ed-blog-simple-text) !important; } body .blog-article .blog-post-content h2 { font-size: 34px !important; line-height: 1.2 !important; margin: 30px 0 12px 0 !important; letter-spacing: -0.3px !important; } body .blog-article .blog-post-content h3 { font-size: 26px !important; line-height: 1.25 !important; margin: 24px 0 10px 0 !important; } body .blog-article .blog-post-content h4 { font-size: 20px !important; line-height: 1.35 !important; margin: 18px 0 8px 0 !important; } body .blog-article .blog-post-content .data-table-wrap, body .blog-article .blog-toc, body .blog-article .blog-post-content blockquote, body .blog-article .blog-post-content pre, body .blog-article .blog-post-content .alert { border-radius: 12px !important; border: 1px solid var(--ed-blog-simple-border) !important; background: var(--ed-blog-simple-soft) !important; } @media (max-width: 980px) { body .blog-article { width: 100% !important; padding: 18px !important; } body .blog-article .blog-article-header h1 { font-size: 38px !important; } body .blog-article .blog-article-meta-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body .blog-article .blog-post-content { padding: 18px !important; } body .blog-article .blog-post-content h2 { font-size: 30px !important; } body .blog-article .blog-post-content h3 { font-size: 23px !important; } body .blog-article .blog-post-content h4 { font-size: 19px !important; } } @media (max-width: 640px) { main.container:has(.blog-article) { padding: 0 10px !important; } body .blog-article { padding: 12px !important; border-radius: 16px !important; } body .blog-article .blog-article-header h1 { font-size: 31px !important; } body .blog-article .blog-article-meta-cards { grid-template-columns: 1fr !important; gap: 8px !important; } body .blog-article .blog-meta-card { min-height: 72px !important; } body .blog-article .blog-post-content { padding: 14px !important; } body .blog-article .blog-post-content p, body .blog-article .blog-post-content li { font-size: 15px !important; line-height: 1.68 !important; } body .blog-article .blog-post-content h2 { font-size: 25px !important; } body .blog-article .blog-post-content h3 { font-size: 21px !important; } body .blog-article .blog-post-content h4 { font-size: 18px !important; } } main.container:has(.blog-overview-title) { --ed-bo-shell-bg: linear-gradient( 156deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface) 14%) 0%, color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%) 100% ); --ed-bo-shell-border: color-mix( in srgb, var(--outline-variant) 52%, transparent ); --ed-bo-shell-shadow: 0 30px 56px -44px color-mix(in srgb, var(--on-surface) 44%, transparent); --ed-bo-card-bg: color-mix( in srgb, var(--surface-container-lowest) 90%, transparent ); --ed-bo-card-border: color-mix( in srgb, var(--outline-variant) 44%, transparent ); --ed-bo-card-shadow: 0 18px 32px -24px color-mix(in srgb, var(--on-surface) 30%, transparent); --ed-bo-title: var(--on-surface); --ed-bo-text: var(--on-surface); --ed-bo-muted: var(--on-surface-variant); --ed-bo-control-wrap-bg: color-mix( in srgb, var(--surface-container-lowest) 84%, var(--surface-container-low) 16% ); --ed-bo-control-wrap-border: color-mix( in srgb, var(--outline-variant) 48%, transparent ); --ed-bo-control-wrap-shadow: inset 0 1px 0 color-mix(in srgb, white 34%, transparent); --ed-bo-control-bg: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--surface-container-low) 10% ); --ed-bo-control-border: color-mix( in srgb, var(--outline-variant) 42%, transparent ); --ed-bo-control-bg-hover: color-mix( in srgb, var(--surface-container-lowest) 74%, var(--primary-container) 26% ); --ed-bo-control-border-strong: color-mix( in srgb, var(--primary-container) 56%, transparent ); --ed-bo-primary-bg: linear-gradient( 136deg, rgba(85, 124, 224, 0.2) 0%, rgba(188, 102, 165, 0.18) 100% ); --ed-bo-primary-bg-hover: linear-gradient( 136deg, rgba(85, 124, 224, 0.26) 0%, rgba(188, 102, 165, 0.24) 100% ); --ed-bo-primary-border: rgba(112, 105, 198, 0.28); --ed-bo-primary-text: color-mix( in srgb, var(--primary) 78%, var(--on-surface) 22% ); --ed-bo-focus: color-mix(in srgb, var(--primary-container) 54%, transparent); max-width: 1240px !important; margin: calc(var(--eduloo-main-offset, 122px) + 16px) auto 34px auto !important; padding: 30px 20px 28px 20px !important; border-radius: 34px !important; border: 1px solid var(--ed-bo-shell-border) !important; background: radial-gradient( circle at 10% 0%, color-mix(in srgb, var(--primary-container) 22%, transparent) 0%, transparent 40% ), radial-gradient( circle at 92% 100%, color-mix(in srgb, var(--secondary-container) 16%, transparent) 0%, transparent 44% ), var(--ed-bo-shell-bg) !important; box-shadow: var(--ed-bo-shell-shadow) !important; } body main.container:has(.blog-overview-title) .blog-overview-title, body main.container:has(.blog-overview-title) .blog-overview-subtitle, body main.container:has(.blog-overview-title) .blog-overview-filters, body main.container:has(.blog-overview-title) #blog-overview-list, body main.container:has(.blog-overview-title) #blog-overview-empty-filter, body main.container:has(.blog-overview-title) #blog-overview-pagination { width: min(1100px, 100%) !important; margin-left: auto !important; margin-right: auto !important; } body .blog-overview-title { margin: 0 0 10px 0 !important; text-align: left !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 46px !important; line-height: 1.1 !important; letter-spacing: -0.9px !important; font-weight: 800 !important; color: var(--ed-bo-title) !important; } body .blog-overview-subtitle { display: block !important; margin: 0 0 18px 0 !important; text-align: left !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 18px !important; line-height: 1.58 !important; font-weight: 600 !important; letter-spacing: -0.1px !important; color: color-mix( in srgb, var(--ed-bo-muted) 88%, var(--ed-bo-title) 12% ) !important; } body .blog-overview-toolbar { margin: 0 !important; width: min(560px, 100%) !important; padding: 8px !important; border-radius: 18px !important; border: 1px solid var(--ed-bo-control-wrap-border) !important; background: var(--ed-bo-control-wrap-bg) !important; box-shadow: var(--ed-bo-control-wrap-shadow) !important; } body .blog-overview-search .search-field__input { min-height: 46px !important; border-radius: 14px !important; border: 1px solid var(--ed-bo-control-border) !important; background: var(--ed-bo-control-bg) !important; color: var(--ed-bo-text) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; padding-left: 42px !important; } body .blog-overview-search .search-field__input:hover { background: var(--ed-bo-control-bg-hover) !important; border-color: var(--ed-bo-control-border-strong) !important; } body .blog-overview-search .search-field__input:focus, body .blog-overview-search .search-field__input:focus-visible { border-color: var(--ed-bo-control-border-strong) !important; box-shadow: 0 0 0 3px var(--ed-bo-focus) !important; } body .blog-post-card { margin-bottom: 16px !important; border-radius: 24px !important; border: 1px solid var(--ed-bo-card-border) !important; background: var(--ed-bo-card-bg) !important; box-shadow: var(--ed-bo-card-shadow) !important; overflow: hidden !important; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important; } body .blog-post-card:hover { transform: translateY(-2px) !important; border-color: color-mix( in srgb, var(--ed-bo-primary-border) 84%, transparent ) !important; box-shadow: 0 22px 34px -24px color-mix(in srgb, var(--on-surface) 34%, transparent) !important; } body .blog-post-card .row { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important; } body .blog-post-card-thumb { min-height: 232px !important; } body .blog-post-card-content { padding: 20px !important; } body .blog-post-card-content > div:first-child { color: var(--ed-bo-muted) !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 13px !important; line-height: 1.45 !important; margin-bottom: 10px !important; } body .blog-post-card-content .blog-post-link h2 { margin: 0 0 8px 0 !important; color: var(--ed-bo-title) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } body .blog-post-card-content .blog-post-link p { color: var(--ed-bo-muted) !important; font-family: 'Be Vietnam Pro', sans-serif !important; line-height: 1.64 !important; } body .blog-post-read-more { min-height: 36px !important; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid var(--ed-bo-primary-border) !important; background: var(--ed-bo-primary-bg) !important; color: var(--ed-bo-primary-text) !important; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important; } body .blog-post-read-more:hover, body .blog-post-read-more:focus-visible { border-color: color-mix( in srgb, var(--ed-bo-primary-border) 82%, var(--primary) 18% ) !important; background: var(--ed-bo-primary-bg-hover) !important; transform: translateY(-1px) !important; } main.container:has(.blog-article) { --ed-ba-shell-bg: linear-gradient( 156deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface) 14%) 0%, color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%) 100% ); --ed-ba-shell-border: color-mix( in srgb, var(--outline-variant) 54%, transparent ); --ed-ba-shell-shadow: 0 30px 56px -44px color-mix(in srgb, var(--on-surface) 44%, transparent); --ed-ba-surface: color-mix( in srgb, var(--surface-container-lowest) 90%, transparent ); --ed-ba-surface-soft: color-mix( in srgb, var(--surface-container-low) 88%, var(--surface-container) 12% ); --ed-ba-surface-border: color-mix( in srgb, var(--outline-variant) 42%, transparent ); --ed-ba-surface-border-strong: color-mix( in srgb, var(--outline-variant) 38%, var(--primary-container) 62% ); --ed-ba-title: var(--on-surface); --ed-ba-text: var(--on-surface); --ed-ba-muted: var(--on-surface-variant); --ed-ba-focus: color-mix(in srgb, var(--primary-container) 54%, transparent); max-width: 1240px !important; margin: calc(var(--eduloo-main-offset, 122px) + 16px) auto 34px auto !important; padding: 0 20px !important; } body .blog-article { width: min(1120px, 100%) !important; margin: 0 auto !important; padding: 30px 24px !important; border-radius: 32px !important; border: 1px solid var(--ed-ba-shell-border) !important; background: radial-gradient( circle at 11% 0%, color-mix(in srgb, var(--primary-container) 22%, transparent) 0%, transparent 40% ), radial-gradient( circle at 92% 100%, color-mix(in srgb, var(--secondary-container) 16%, transparent) 0%, transparent 44% ), var(--ed-ba-shell-bg) !important; box-shadow: var(--ed-ba-shell-shadow) !important; } body .blog-article .blog-article-header h1 { margin: 0 !important; font-size: 46px !important; line-height: 1.1 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; letter-spacing: -0.9px !important; color: var(--ed-ba-title) !important; } body .blog-article .blog-post-content { max-width: 940px !important; border-radius: 24px !important; border: 1px solid var(--ed-ba-surface-border) !important; background: var(--ed-ba-surface) !important; font-family: 'Be Vietnam Pro', sans-serif !important; } body .tag-filter-chips { border-radius: 18px !important; border: 1px solid var(--ed-bo-control-wrap-border) !important; background: var(--ed-bo-control-wrap-bg) !important; box-shadow: var(--ed-bo-control-wrap-shadow) !important; } body .filter-chip { min-height: 36px !important; border-radius: 999px !important; border: 1px solid var(--ed-bo-control-border) !important; background: var(--ed-bo-control-bg) !important; color: var(--ed-bo-text) !important; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important; } body .filter-chip.active { border-color: var(--ed-bo-primary-border) !important; background: var(--ed-bo-primary-bg) !important; color: var(--ed-bo-primary-text) !important; } body .filter-chip:hover { border-color: var(--ed-bo-primary-border) !important; background: color-mix( in srgb, var(--ed-bo-primary-bg) 72%, var(--ed-bo-control-bg) 28% ) !important; transform: translateY(-1px) !important; } body .blog-pagination .blog-pagination__button { border-radius: 12px !important; border: 1px solid var(--ed-bo-control-border) !important; background: var(--ed-bo-control-bg) !important; color: var(--ed-bo-text) !important; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important; } body .blog-pagination .blog-pagination__button:hover { border-color: var(--ed-bo-control-border-strong) !important; background: var(--ed-bo-control-bg-hover) !important; transform: translateY(-1px) !important; } body .blog-pagination .blog-pagination__button.current { border-color: var(--ed-bo-primary-border) !important; background: var(--ed-bo-primary-bg) !important; color: var(--ed-bo-primary-text) !important; } body .blog-overview-filter-empty, body main.container:has(.blog-overview-title) > .card[style*='text-align: center'] { border-radius: 20px !important; border: 1px solid var(--ed-bo-card-border) !important; background: var(--ed-bo-card-bg) !important; box-shadow: var(--ed-bo-card-shadow) !important; } body .blog-overview-filter-empty h2, body main.container:has(.blog-overview-title) > .card[style*='text-align: center'] h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 30px !important; line-height: 1.22 !important; } body .blog-article .blog-article-header, body .blog-article .blog-article-meta-cards, body .blog-article .blog-article-hero-wrap, body .blog-article .blog-post-content { width: 100% !important; max-width: 940px !important; margin-left: auto !important; margin-right: auto !important; } body .blog-article .blog-article-meta-cards { margin-top: 14px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; } body .blog-article .blog-meta-card { min-height: 82px !important; border-radius: 16px !important; border: 1px solid var(--ed-ba-surface-border) !important; background: var(--ed-ba-surface) !important; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important; } body .blog-article .blog-meta-card i { color: color-mix( in srgb, var(--primary) 76%, var(--ed-ba-title) 24% ) !important; } body .blog-article .blog-meta-card-label { color: var(--ed-ba-muted) !important; } body .blog-article .blog-meta-card-value { color: var(--ed-ba-title) !important; } body .blog-article .blog-meta-card-primary { border-color: var(--ed-ba-surface-border-strong) !important; background: var(--ed-ba-surface-soft) !important; } body .blog-article .blog-meta-card-link:hover { transform: translateY(-1px) !important; border-color: var(--ed-ba-surface-border-strong) !important; background: var(--ed-ba-surface-soft) !important; } body .blog-article .blog-meta-card-link:focus-visible { box-shadow: 0 0 0 3px var(--ed-ba-focus) !important; } body .blog-article .blog-article-hero-wrap { border-radius: 22px !important; border: 1px solid var(--ed-ba-surface-border) !important; background: var(--ed-ba-surface) !important; } body .blog-article .blog-post-content p, body .blog-article .blog-post-content li { color: var(--ed-ba-text) !important; line-height: 1.74 !important; } body .blog-article .blog-post-content h2, body .blog-article .blog-post-content h3, body .blog-article .blog-post-content h4 { font-family: 'Plus Jakarta Sans', sans-serif !important; color: var(--ed-ba-title) !important; } body .blog-article .blog-post-content h2 { font-size: 34px !important; line-height: 1.2 !important; letter-spacing: -0.4px !important; } body .blog-article .blog-post-content h3 { font-size: 27px !important; line-height: 1.24 !important; } body .blog-article .blog-post-content h4 { font-size: 21px !important; line-height: 1.32 !important; } body .blog-article .blog-post-content a { color: color-mix( in srgb, var(--primary) 82%, var(--ed-ba-title) 18% ) !important; text-decoration-thickness: 1px; } body .blog-article .blog-post-content .data-table-wrap, body .blog-article .blog-toc, body .blog-article .blog-post-content blockquote, body .blog-article .blog-post-content pre, body .blog-article .blog-post-content .alert { border-radius: 14px !important; border: 1px solid var(--ed-ba-surface-border) !important; background: var(--ed-ba-surface-soft) !important; } body.theme-dark main.container:has(.blog-overview-title) { --ed-bo-shell-bg: linear-gradient( 158deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-dim) 14%) 0%, color-mix( in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22% ) 100% ); --ed-bo-shell-border: color-mix( in srgb, var(--outline-variant) 60%, transparent ); --ed-bo-shell-shadow: 0 32px 58px -44px color-mix(in srgb, black 74%, transparent); --ed-bo-card-bg: color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ); --ed-bo-card-border: color-mix( in srgb, var(--outline-variant) 58%, transparent ); --ed-bo-card-shadow: 0 22px 34px -24px color-mix(in srgb, black 76%, transparent); --ed-bo-title: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --ed-bo-text: color-mix(in srgb, var(--on-surface) 92%, var(--on-primary) 8%); --ed-bo-muted: color-mix( in srgb, var(--on-surface-variant) 88%, var(--secondary-container) 12% ); --ed-bo-control-wrap-bg: color-mix( in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28% ); --ed-bo-control-wrap-border: color-mix( in srgb, var(--outline-variant) 56%, var(--primary-container) 44% ); --ed-bo-control-wrap-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent); --ed-bo-control-bg: color-mix( in srgb, var(--surface-container-highest) 76%, var(--surface-container-high) 24% ); --ed-bo-control-border: color-mix( in srgb, var(--outline-variant) 54%, transparent ); --ed-bo-control-bg-hover: color-mix( in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36% ); --ed-bo-control-border-strong: color-mix( in srgb, var(--outline-variant) 46%, var(--primary-container) 54% ); --ed-bo-primary-bg: linear-gradient( 136deg, rgba(97, 121, 228, 0.34) 0%, rgba(44, 191, 173, 0.14) 50%, rgba(190, 101, 159, 0.3) 100% ); --ed-bo-primary-bg-hover: linear-gradient( 136deg, rgba(97, 121, 228, 0.42) 0%, rgba(44, 191, 173, 0.2) 50%, rgba(190, 101, 159, 0.36) 100% ); --ed-bo-primary-border: rgba(146, 156, 232, 0.42); --ed-bo-primary-text: color-mix( in srgb, var(--on-surface) 90%, var(--on-primary) 10% ); --ed-bo-focus: color-mix( in srgb, var(--secondary-container) 48%, transparent ); } body.theme-dark main.container:has(.blog-article) { --ed-ba-shell-bg: linear-gradient( 158deg, color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-dim) 14%) 0%, color-mix( in srgb, var(--surface-container-high) 78%, var(--surface-container-highest) 22% ) 100% ); --ed-ba-shell-border: color-mix( in srgb, var(--outline-variant) 60%, transparent ); --ed-ba-shell-shadow: 0 32px 58px -44px color-mix(in srgb, black 74%, transparent); --ed-ba-surface: color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ); --ed-ba-surface-soft: color-mix( in srgb, var(--surface-container-highest) 76%, var(--primary-container) 24% ); --ed-ba-surface-border: color-mix( in srgb, var(--outline-variant) 58%, transparent ); --ed-ba-surface-border-strong: color-mix( in srgb, var(--outline-variant) 48%, var(--primary-container) 52% ); --ed-ba-title: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --ed-ba-text: color-mix(in srgb, var(--on-surface) 92%, var(--on-primary) 8%); --ed-ba-muted: color-mix( in srgb, var(--on-surface-variant) 88%, var(--secondary-container) 12% ); --ed-ba-focus: color-mix( in srgb, var(--secondary-container) 48%, transparent ); } @media (max-width: 980px) { main.container:has(.blog-overview-title) { margin: calc(var(--eduloo-main-offset, 122px) + 12px) auto 24px auto !important; padding: 24px 16px 22px 16px !important; border-radius: 24px !important; } body .blog-overview-title { font-size: 40px !important; } body .blog-overview-subtitle { font-size: 17px !important; } body .blog-post-card .row { grid-template-columns: minmax(0, 1fr) !important; } body .blog-post-card-thumb { min-height: 216px !important; } main.container:has(.blog-article) { margin: calc(var(--eduloo-main-offset, 122px) + 12px) auto 24px auto !important; } body .blog-article { padding: 22px 16px !important; border-radius: 24px !important; } body .blog-article .blog-article-header h1 { font-size: 40px !important; } body .blog-article .blog-article-meta-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body .blog-article .blog-post-content { padding: 20px !important; } body .blog-article .blog-post-content h2 { font-size: 31px !important; } body .blog-article .blog-post-content h3 { font-size: 24px !important; } body .blog-article .blog-post-content h4 { font-size: 19px !important; } } @media (max-width: 640px) { main.container:has(.blog-overview-title) { margin: calc(var(--eduloo-main-offset, 122px) + 8px) auto 18px auto !important; padding: 16px 10px 16px 10px !important; border-radius: 18px !important; } body .blog-overview-title { font-size: 32px !important; } body .blog-overview-subtitle { margin: 0 0 14px 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.58 !important; } body .blog-overview-toolbar { width: 100% !important; padding: 7px !important; border-radius: 14px !important; } body .blog-overview-search .search-field__input { min-height: 44px !important; font-size: 14px !important; } body .blog-post-card { border-radius: 18px !important; } body .blog-post-card-content { padding: 14px !important; } body .blog-post-card-content .blog-post-link h2 { font-size: 24px !important; line-height: 1.22 !important; } body .blog-post-card-content .blog-post-link p { font-size: 14px !important; line-height: 1.58 !important; } body .blog-pagination { margin-top: 16px !important; } main.container:has(.blog-article) { margin: calc(var(--eduloo-main-offset, 122px) + 8px) auto 18px auto !important; padding: 0 10px !important; } body .blog-article { padding: 14px 10px !important; border-radius: 18px !important; } body .blog-article .blog-article-header h1 { font-size: 32px !important; } body .blog-article .blog-article-meta-cards { grid-template-columns: 1fr !important; gap: 8px !important; } body .blog-article .blog-meta-card { min-height: 72px !important; border-radius: 14px !important; } body .blog-article .blog-article-hero-wrap { border-radius: 16px !important; } body .blog-article .blog-post-content { padding: 14px !important; border-radius: 16px !important; } body .blog-article .blog-post-content p, body .blog-article .blog-post-content li { font-size: 15px !important; line-height: 1.68 !important; } body .blog-article .blog-post-content h2 { font-size: 26px !important; } body .blog-article .blog-post-content h3 { font-size: 22px !important; } body .blog-article .blog-post-content h4 { font-size: 18px !important; } } @media (prefers-reduced-motion: reduce) { body .blog-post-card, body .filter-chip, body .blog-post-read-more, body .blog-pagination .blog-pagination__button, body .blog-article .blog-meta-card, body .blog-article .blog-meta-card-link { transition: none !important; } } body main.container:has(.blog-overview-title) .blog-overview-title { width: min(1100px, 100%) !important; max-width: min(1100px, 100%) !important; margin-left: auto !important; margin-right: auto !important; text-align: left !important; } body main.container:has(.blog-overview-title) .blog-overview-subtitle, body main.container:has(.blog-overview-title) .blog-overview-title + p, body main.container:has(.blog-overview-title) .blog-overview-title + [class*='subtitle'] { display: block !important; width: min(1100px, 100%) !important; max-width: min(1100px, 100%) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 18px !important; text-align: left !important; } @media (max-width: 980px) { body main.container:has(.blog-overview-title) .blog-overview-subtitle, body main.container:has(.blog-overview-title) .blog-overview-title + p, body main.container:has(.blog-overview-title) .blog-overview-title + [class*='subtitle'] { margin-bottom: 16px !important; } } @media (max-width: 640px) { body main.container:has(.blog-overview-title) .blog-overview-subtitle, body main.container:has(.blog-overview-title) .blog-overview-title + p, body main.container:has(.blog-overview-title) .blog-overview-title + [class*='subtitle'] { margin-bottom: 14px !important; } } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] { --st-share-deck-shell-bg: var( --st-fs-shell-bg, color-mix( in srgb, var(--surface-container-lowest, var(--container-bg)) 88%, var(--surface-container-low, var(--table-header-bg)) 12% ) ); --st-share-deck-shell-border: var( --st-fs-shell-border, color-mix( in srgb, var(--outline-variant, var(--border-color)) 52%, transparent ) ); --st-share-deck-shell-shadow: var( --st-fs-shell-shadow, 0 32px 62px -48px color-mix( in srgb, var(--on-surface, var(--heading-color)) 50%, transparent ) ); --st-share-deck-panel-bg: var( --st-fs-panel-bg, color-mix( in srgb, var(--surface-container-lowest, var(--container-bg)) 86%, var(--surface-container-low, var(--table-header-bg)) 14% ) ); --st-share-deck-panel-border: var( --st-fs-panel-border, color-mix( in srgb, var(--outline-variant, var(--border-color)) 44%, transparent ) ); --st-share-deck-panel-soft: color-mix( in srgb, var(--st-share-deck-panel-bg) 84%, var(--surface-container-lowest, var(--container-bg)) 16% ); --st-share-deck-title: color-mix( in srgb, var(--heading-color, var(--on-surface, var(--text-color))) 74%, var(--primary-container, var(--primary, var(--link))) 26% ); --st-share-deck-text: color-mix( in srgb, var(--text-color, var(--on-surface, var(--heading-color))) 92%, var(--heading-color, var(--on-surface, var(--text-color))) 8% ); --st-share-deck-muted: color-mix( in srgb, var(--muted-text, var(--on-surface-variant, var(--text-color))) 88%, var(--st-share-deck-title) 12% ); --st-share-deck-focus: color-mix( in srgb, var(--primary, var(--link)) 42%, transparent ); --st-share-deck-button-bg: color-mix( in srgb, var(--button-primary-bg, var(--primary, var(--link))) 86%, var(--primary-container, var(--primary, var(--link))) 14% ); --st-share-deck-button-bg-hover: color-mix( in srgb, var(--button-primary-bg, var(--primary, var(--link))) 74%, var(--primary-container, var(--primary, var(--link))) 26% ); --st-share-deck-button-text: var( --button-primary-text, var(--on-primary, var(--container-bg)) ); --st-share-deck-button-border: color-mix( in srgb, var(--button-primary-bg, var(--primary, var(--link))) 62%, transparent ); width: min(100%, 920px) !important; max-width: 920px !important; margin: calc(var(--eduloo-main-offset, 122px) + 14px) auto 28px auto !important; padding: 22px !important; border-radius: 30px !important; border: 1px solid var(--st-share-deck-shell-border) !important; background: var(--st-share-deck-shell-bg) !important; box-shadow: var(--st-share-deck-shell-shadow) !important; display: flex !important; flex-direction: column !important; gap: 18px !important; position: relative !important; overflow: hidden !important; } body.theme-dark .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] { --st-share-deck-shell-bg: var( --st-fs-shell-bg, color-mix( in srgb, var(--surface-container-low, var(--container-bg)) 78%, var(--surface-container-high, var(--table-header-bg)) 22% ) ); --st-share-deck-shell-border: var( --st-fs-shell-border, color-mix( in srgb, var(--outline-variant, var(--border-color)) 58%, transparent ) ); --st-share-deck-shell-shadow: var( --st-fs-shell-shadow, 0 34px 66px -48px color-mix(in srgb, black 80%, transparent) ); --st-share-deck-panel-bg: var( --st-fs-panel-bg, color-mix( in srgb, var(--surface-container-low, var(--container-bg)) 84%, var(--surface-container-high, var(--table-header-bg)) 16% ) ); --st-share-deck-panel-border: var( --st-fs-panel-border, color-mix( in srgb, var(--outline-variant, var(--border-color)) 54%, transparent ) ); --st-share-deck-panel-soft: color-mix( in srgb, var(--st-share-deck-panel-bg) 82%, var(--surface-container-highest, var(--table-header-bg)) 18% ); --st-share-deck-title: color-mix( in srgb, var(--on-background, var(--heading-color)) 86%, var(--primary, var(--link)) 14% ); --st-share-deck-text: color-mix( in srgb, var(--on-surface, var(--text-color)) 92%, white 8% ); --st-share-deck-muted: color-mix( in srgb, var(--on-surface-variant, var(--muted-text)) 88%, var(--on-surface, var(--heading-color)) 12% ); } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck']::before, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck']::after { content: '' !important; position: absolute !important; pointer-events: none !important; z-index: 0 !important; display: block !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck']::before { width: 186px !important; height: 186px !important; right: -66px !important; top: -96px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--secondary-container, var(--st-share-deck-panel-border)) 18%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck']::after { width: 154px !important; height: 154px !important; left: -56px !important; bottom: -84px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--primary-container, var(--st-share-deck-panel-border)) 24%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] > * { position: relative !important; z-index: 1 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__head--deck { margin: 0 !important; padding: 0 !important; text-align: left !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section-title.st-share-page__title, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section h1.tools-section-title.st-share-page__title { margin: 0 0 10px 0 !important; text-align: left !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(46px, 5.2vw, 68px) !important; line-height: 1.04 !important; letter-spacing: -0.72px !important; font-weight: 800 !important; color: var(--st-share-deck-title) !important; background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section-description.st-share-page__subtitle { margin: 0 !important; max-width: 62ch !important; text-align: left !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.55 !important; color: var(--st-share-deck-muted) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-shell { margin: 0 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta--deck { margin: 0 !important; padding: 12px !important; border-radius: 20px !important; border: 1px solid var(--st-share-deck-panel-border) !important; background: var(--st-share-deck-panel-bg) !important; box-shadow: 0 16px 28px -24px color-mix(in srgb, var(--on-surface, var(--heading-color)) 58%, transparent) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck { min-height: 98px !important; padding: 14px 12px !important; border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--st-share-deck-panel-border) 88%, transparent) !important; background: var(--st-share-deck-panel-soft) !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-align: center !important; transition: border-color 0.2s ease, transform 0.2s ease !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck:hover { transform: translateY(-1px) !important; border-color: color-mix( in srgb, var(--primary, var(--link)) 34%, var(--st-share-deck-panel-border) 66% ) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck .st-fs-stat-top { justify-content: center !important; width: 100% !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck .st-fs-stat-count { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(30px, 3.2vw, 44px) !important; line-height: 1 !important; color: var(--st-share-deck-title) !important; overflow-wrap: anywhere !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck .st-share-page__meta-count--text { font-size: clamp(18px, 2vw, 24px) !important; line-height: 1.16 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-copy--deck { display: block !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-label--deck { font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--st-share-deck-muted) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__stack { gap: 36px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box { margin: 0 0 10px 0 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-shell--deck, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck { border-radius: 22px !important; border: 1px solid var(--st-share-deck-panel-border) !important; background: var(--st-share-deck-panel-bg) !important; box-shadow: 0 18px 30px -26px color-mix(in srgb, var(--on-surface, var(--heading-color)) 56%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-shell--deck { padding: 30px !important; margin: 0 !important; border-radius: 24px !important; background: linear-gradient( 180deg, color-mix( in srgb, var(--st-share-deck-panel-bg) 94%, var(--surface-container-lowest, var(--container-bg)) 6% ) 0%, var(--st-share-deck-panel-bg) 100% ) !important; box-shadow: 0 20px 34px -28px color-mix(in srgb, var(--on-surface, var(--heading-color)) 54%, transparent) !important; display: flex !important; flex-direction: column !important; gap: 28px !important; position: relative !important; overflow: hidden !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-shell--deck::after { content: '' !important; position: absolute !important; inset: 1px !important; border-radius: 22px !important; border: 1px solid color-mix(in srgb, var(--st-share-deck-panel-border) 56%, transparent) !important; pointer-events: none !important; opacity: 0.72 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-copy { margin: 0 !important; max-width: 42ch !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--st-share-deck-title) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-inline--deck { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: 'workspace subject' 'action action' !important; column-gap: 18px !important; row-gap: 20px !important; align-items: stretch !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-field--workspace { grid-area: workspace !important; grid-column: 1 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-field--subject { grid-area: subject !important; grid-column: 2 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-inline--deck > .st-modal-form-group { width: 100% !important; min-width: 0 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-modal-form-group { margin-bottom: 0 !important; min-height: 126px !important; padding: 16px !important; border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--st-share-deck-panel-border) 86%, transparent) !important; background: color-mix( in srgb, var(--st-share-deck-panel-soft) 92%, var(--st-share-deck-panel-bg) 8% ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 16%, transparent) !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 10px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-modal-form-group:focus-within { border-color: color-mix( in srgb, var(--primary, var(--link)) 42%, var(--st-share-deck-panel-border) 58% ) !important; box-shadow: 0 0 0 3px var(--st-share-deck-focus), inset 0 1px 0 color-mix(in srgb, white 20%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-modal-form-group label { margin: 0 !important; font-family: 'Be Vietnam Pro', sans-serif !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0.22px !important; text-transform: uppercase !important; color: var(--st-share-deck-muted) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-panel-workspace-select, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .custom-dropdown-wrapper, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .custom-dropdown { width: 100% !important; max-width: none !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-panel-workspace-select .custom-dropdown-trigger, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-panel-workspace-select select { width: 100% !important; max-width: none !important; min-height: 58px !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--st-share-deck-panel-border) 92%, transparent) !important; background: color-mix( in srgb, var(--st-share-deck-panel-bg) 78%, var(--st-share-deck-panel-soft) 22% ) !important; box-shadow: none !important; font-size: 16px !important; font-weight: 700 !important; color: var(--st-share-deck-text) !important; padding: 0 16px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-panel-workspace-select .custom-dropdown-trigger { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-panel-workspace-select .custom-dropdown-trigger:focus-visible, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-panel-workspace-select select:focus-visible { border-color: color-mix( in srgb, var(--primary, var(--link)) 48%, var(--st-share-deck-panel-border) 52% ) !important; box-shadow: 0 0 0 2px var(--st-share-deck-focus) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-actions { grid-area: action !important; grid-column: 1 / -1 !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; align-self: stretch !important; padding: 16px !important; margin-top: 6px !important; border-radius: 16px !important; border: 1px solid color-mix( in srgb, var(--primary, var(--link)) 24%, var(--st-share-deck-panel-border) 76% ) !important; background: color-mix( in srgb, var(--st-share-deck-panel-soft) 76%, var(--primary-container, var(--primary, var(--link))) 24% ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 16%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .button.button-primary.st-btn.st-share-page__save-btn, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn { width: auto !important; min-width: 230px !important; min-height: 56px !important; padding: 0 20px !important; border-radius: 15px !important; border: 1px solid var(--st-share-deck-button-border) !important; background: linear-gradient( 180deg, color-mix( in srgb, var(--st-share-deck-button-bg) 92%, var(--surface-container-lowest, var(--container-bg)) 8% ) 0%, var(--st-share-deck-button-bg) 100% ) !important; color: var(--st-share-deck-button-text) !important; box-shadow: 0 14px 24px -16px color-mix( in srgb, var(--button-primary-bg, var(--primary, var(--link))) 64%, transparent ) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0.08px !important; gap: 8px !important; justify-content: center !important; transform: none !important; will-change: box-shadow, background-color !important; transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn i, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn .icon { color: inherit !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .button.button-primary.st-btn.st-share-page__save-btn:hover:not(:disabled), body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .button.button-primary.st-btn.st-share-page__save-btn:focus-visible, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn:hover:not(:disabled), body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn:focus-visible { background: linear-gradient( 180deg, color-mix( in srgb, var(--st-share-deck-button-bg-hover) 92%, var(--surface-container-lowest, var(--container-bg)) 8% ) 0%, var(--st-share-deck-button-bg-hover) 100% ) !important; border-color: color-mix( in srgb, var(--st-share-deck-button-border) 70%, var(--secondary, var(--primary, var(--link))) 30% ) !important; box-shadow: 0 16px 28px -18px color-mix( in srgb, var(--button-primary-bg, var(--primary, var(--link))) 66%, transparent ) !important; transform: none !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--st-share-deck-focus), 0 14px 24px -16px color-mix( in srgb, var(--button-primary-bg, var(--primary, var(--link))) 64%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn:active { transform: none !important; box-shadow: 0 10px 18px -16px color-mix( in srgb, var(--button-primary-bg, var(--primary, var(--link))) 58%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck { padding: 34px 28px 28px !important; margin-top: 8px !important; display: flex !important; flex-direction: column !important; gap: 28px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck > h2 { margin: 0 !important; padding: 0 !important; border-bottom: none !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(36px, 4vw, 50px) !important; line-height: 1.08 !important; letter-spacing: -0.52px !important; font-weight: 800 !important; color: var(--st-share-deck-title) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage { width: min(100%, 736px) !important; margin: 8px auto 0 auto !important; padding-top: 40px !important; padding-bottom: 8px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage .st-fs-deck-back--3 { width: calc(100% - 28px) !important; height: 276px !important; background: color-mix( in srgb, var(--primary-container, var(--table-header-bg)) 42%, var(--container-bg) 58% ) !important; transform: translateX(-50%) translateY(-18px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage .st-fs-deck-back--2 { width: calc(100% - 18px) !important; height: 284px !important; background: color-mix( in srgb, var(--secondary-container, var(--table-header-bg)) 36%, var(--container-bg) 64% ) !important; transform: translateX(-50%) translateY(-11px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage .st-fs-deck-back--1 { width: calc(100% - 8px) !important; height: 292px !important; background: color-mix( in srgb, var(--primary-container, var(--table-header-bg)) 30%, var(--container-bg) 70% ) !important; transform: translateX(-50%) translateY(-5px) !important; } body.theme-dark .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage .st-fs-deck-back--3 { background: color-mix( in srgb, var(--surface-container-high, var(--container-bg)) 88%, var(--primary-container, var(--table-header-bg)) 12% ) !important; } body.theme-dark .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage .st-fs-deck-back--2 { background: color-mix( in srgb, var(--surface-container-high, var(--container-bg)) 80%, var(--secondary-container, var(--table-header-bg)) 20% ) !important; } body.theme-dark .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage .st-fs-deck-back--1 { background: color-mix( in srgb, var(--surface-container-highest, var(--table-header-bg)) 76%, var(--primary-container, var(--table-header-bg)) 24% ) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-card { min-height: 298px !important; padding: 22px 22px 18px !important; border-radius: 20px !important; border: 1px solid var(--st-share-deck-panel-border) !important; background: var(--st-share-deck-panel-soft) !important; box-shadow: 0 18px 30px -28px color-mix(in srgb, var(--on-surface, var(--heading-color)) 58%, transparent) !important; cursor: default !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-card .st-fs-card-meta-right { font-size: 15px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-card .st-fs-card-question { align-items: flex-start !important; justify-content: flex-start !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-card .st-fs-card-question p { width: 100% !important; margin: 0 !important; text-align: left !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(27px, 2.9vw, 36px) !important; line-height: 1.2 !important; letter-spacing: -0.2px !important; color: var(--st-share-deck-title) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-answer { margin-top: 2px !important; border-color: var(--st-share-deck-panel-border) !important; background: var(--st-share-deck-panel-bg) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-answer .st-fs-inline-edit-value { font-size: 16px !important; line-height: 1.5 !important; color: var(--st-share-deck-text) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-card .st-fs-card-hint { justify-content: flex-start !important; font-size: 13.5px !important; color: var(--st-share-deck-muted) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra { margin-top: 30px !important; gap: 18px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card { position: relative !important; overflow: hidden !important; min-height: 230px !important; border-radius: 18px !important; border: 1px solid var(--st-share-deck-panel-border) !important; background: color-mix( in srgb, var(--st-share-deck-panel-soft) 90%, var(--st-share-deck-panel-bg) 10% ) !important; box-shadow: 0 12px 22px -18px color-mix(in srgb, var(--on-surface, var(--heading-color)) 58%, transparent) !important; padding: 20px !important; gap: 14px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 18px !important; right: 18px !important; height: 3px !important; border-radius: 0 0 999px 999px !important; background: color-mix( in srgb, var(--primary, var(--link)) 46%, var(--secondary, var(--primary, var(--link))) 54% ) !important; opacity: 0.66 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card:hover { transform: translateY(-2px) !important; border-color: color-mix( in srgb, var(--primary, var(--link)) 36%, var(--st-share-deck-panel-border) 64% ) !important; box-shadow: 0 16px 24px -18px color-mix(in srgb, var(--primary, var(--link)) 34%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card-number { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; border-radius: 12px !important; border: 1px solid color-mix( in srgb, var(--st-share-deck-panel-border) 68%, var(--primary, var(--link)) 32% ) !important; background: color-mix( in srgb, var(--st-share-deck-panel-bg) 76%, var(--primary-container, var(--primary, var(--link))) 24% ) !important; color: color-mix( in srgb, var(--st-share-deck-title) 72%, var(--primary, var(--link)) 28% ) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card h3 { margin: 0 !important; text-align: left !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(24px, 2.4vw, 30px) !important; line-height: 1.22 !important; letter-spacing: -0.24px !important; overflow-wrap: anywhere !important; color: var(--st-share-deck-title) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card-divider { width: 72px !important; margin: 2px 0 0 0 !important; border-top: 2px solid color-mix( in srgb, var(--primary, var(--link)) 34%, var(--st-share-deck-panel-border) 66% ) !important; opacity: 0.76 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card p, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card [data-flashcard-answer] { display: block !important; width: 100% !important; margin: auto 0 0 0 !important; padding: 14px !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--st-share-deck-panel-border) 84%, transparent) !important; background: color-mix( in srgb, var(--st-share-deck-panel-bg) 76%, var(--st-share-deck-panel-soft) 24% ) !important; text-align: left !important; font-size: 16px !important; line-height: 1.54 !important; color: var(--st-share-deck-text) !important; } @media (max-width: 980px) { body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] { width: min(100%, 900px) !important; padding: 20px !important; border-radius: 26px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section-title.st-share-page__title, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section h1.tools-section-title.st-share-page__title { font-size: clamp(42px, 5.5vw, 62px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck > h2 { font-size: clamp(34px, 4.9vw, 44px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-shell--deck { padding: 24px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-inline--deck { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: 'workspace subject' 'action action' !important; column-gap: 16px !important; row-gap: 18px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck { padding: 30px 24px 24px !important; gap: 24px !important; } } @media (max-width: 760px) { body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] { margin: calc(var(--eduloo-main-offset, 122px) + 8px) auto 20px auto !important; padding: 16px 14px !important; border-radius: 22px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section-title.st-share-page__title, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section h1.tools-section-title.st-share-page__title { font-size: clamp(34px, 9.4vw, 48px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta--deck { grid-template-columns: 1fr !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-shell--deck { padding: 20px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-inline--deck { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: 'workspace subject' 'action action' !important; column-gap: 12px !important; row-gap: 16px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-actions { justify-content: flex-end !important; align-items: center !important; padding: 12px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn { width: auto !important; min-width: 210px !important; min-height: 52px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck { padding: 26px 20px 20px !important; gap: 22px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck > h2 { font-size: clamp(30px, 7.2vw, 40px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage { padding-top: 34px !important; padding-bottom: 6px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-card { min-height: 252px !important; padding: 18px 16px 16px !important; border-radius: 18px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcard-stage-card .st-fs-card-question p { font-size: clamp(22px, 7.2vw, 30px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra { grid-template-columns: 1fr !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card { min-height: 0 !important; padding: 16px !important; gap: 10px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card h3 { font-size: clamp(21px, 6.6vw, 26px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card p, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card [data-flashcard-answer] { padding: 11px 12px !important; } } @media (max-width: 640px) { body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] { padding: 14px 12px !important; border-radius: 20px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .tools-section-description.st-share-page__subtitle { font-size: 14.5px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck { min-height: 92px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck .st-fs-stat-count { font-size: clamp(28px, 8.8vw, 36px) !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-copy { font-size: 17px !important; line-height: 1.32 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-shell--deck { padding: 16px !important; border-radius: 18px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-inline--deck { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: 'workspace subject' 'action action' !important; column-gap: 10px !important; row-gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-modal-form-group { min-height: 102px !important; padding: 12px !important; border-radius: 14px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn { width: auto !important; min-width: 180px !important; min-height: 48px !important; font-size: 15px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__preview-card--deck { padding: 20px 16px 16px !important; border-radius: 16px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card { padding: 14px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card-number { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 11px !important; } } @media (max-width: 520px) { body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-inline--deck { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: 'workspace' 'subject' 'action' !important; gap: 12px !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-field--workspace, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-field--subject, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-actions { grid-column: 1 !important; } body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn { width: 100% !important; min-width: 0 !important; } } @media (prefers-reduced-motion: reduce) { body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__meta-item--deck, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-btn, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__save-box .st-modal-form-group, body .st-share-page__pane.st-share-page__pane--deck[data-share-page][data-share-entity-type='deck'] .st-share-page__flashcards--extra .st-fc-card { transition: none !important; } } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] { --st-share-quiz-bg: color-mix( in srgb, var(--surface-container-lowest) 88%, var(--primary-container) 12% ); --st-share-quiz-surface: color-mix( in srgb, var(--surface-container-lowest) 92%, var(--secondary-container) 8% ); --st-share-quiz-border: color-mix( in srgb, var(--outline-variant) 40%, transparent ); --st-share-quiz-border-soft: color-mix( in srgb, var(--outline-variant) 34%, transparent ); --st-share-quiz-primary-soft: color-mix( in srgb, var(--primary-container) 42%, var(--surface-container-lowest) 58% ); --st-share-quiz-secondary-soft: color-mix( in srgb, var(--secondary-container) 34%, var(--surface-container-lowest) 66% ); --st-share-quiz-option-bg: color-mix( in srgb, var(--surface-container-lowest) 94%, var(--secondary-container) 6% ); --st-share-quiz-option-border: color-mix( in srgb, var(--outline-variant) 42%, transparent ); --st-share-quiz-text: color-mix(in srgb, var(--on-surface) 88%, transparent); --st-share-quiz-muted: color-mix(in srgb, var(--on-surface) 64%, transparent); position: relative !important; display: flex !important; flex-direction: column !important; gap: 16px !important; width: min(100%, 920px) !important; max-width: 920px !important; margin: calc(var(--eduloo-main-offset, 122px) + 12px) auto 24px !important; padding: 22px !important; border: 1px solid var(--st-share-quiz-border) !important; border-radius: 24px !important; background: var(--st-share-quiz-bg) !important; box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--on-surface) 26%, transparent) !important; overflow: hidden !important; } body.theme-dark .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] { --st-share-quiz-bg: color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ); --st-share-quiz-surface: color-mix( in srgb, var(--surface-container-high) 82%, var(--surface-container-highest) 18% ); --st-share-quiz-border: color-mix( in srgb, var(--outline-variant) 56%, transparent ); --st-share-quiz-border-soft: color-mix( in srgb, var(--outline-variant) 50%, transparent ); --st-share-quiz-primary-soft: color-mix( in srgb, var(--primary-container) 36%, var(--surface-container-high) 64% ); --st-share-quiz-secondary-soft: color-mix( in srgb, var(--secondary-container) 30%, var(--surface-container-high) 70% ); --st-share-quiz-option-bg: color-mix( in srgb, var(--surface-container-high) 86%, var(--secondary-container) 14% ); --st-share-quiz-option-border: color-mix( in srgb, var(--outline-variant) 52%, transparent ); --st-share-quiz-text: color-mix(in srgb, var(--on-surface) 90%, transparent); --st-share-quiz-muted: color-mix(in srgb, var(--on-surface) 68%, transparent); } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz']::before, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz']::after { content: '' !important; position: absolute !important; border-radius: 999px !important; pointer-events: none !important; z-index: 0 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz']::before { width: 180px !important; height: 180px !important; top: -92px !important; right: -60px !important; background: color-mix( in srgb, var(--secondary-container) 18%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz']::after { width: 150px !important; height: 150px !important; bottom: -88px !important; left: -58px !important; background: color-mix( in srgb, var(--primary-container) 20%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] > * { position: relative !important; z-index: 1 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__head.st-quizz-progress-card { margin: 0 !important; padding: 14px !important; border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 16px !important; background: var(--st-share-quiz-surface) !important; box-shadow: none !important; text-align: left !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__head-content.st-quizz-progress-content { display: flex !important; flex-direction: column !important; gap: 6px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .tools-section-title.st-share-page__title.st-quizz-question-type { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(34px, 4.4vw, 52px) !important; line-height: 1.08 !important; letter-spacing: -0.38px !important; font-weight: 800 !important; color: var(--st-share-quiz-text) !important; text-align: left !important; background: none !important; -webkit-text-fill-color: currentColor !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .tools-section-description.st-share-page__subtitle.st-quizz-current-question { margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 64ch !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--st-share-quiz-muted) !important; text-align: left !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-shell.st-quizz-progress-card { margin: 0 !important; padding: 14px !important; border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 16px !important; background: var(--st-share-quiz-surface) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta--quiz { margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-item--quiz.st-quizz-question-card { margin: 0 !important; min-height: 102px !important; padding: 12px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 14px !important; background: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--secondary-container) 10% ) !important; box-shadow: none !important; transition: border-color 0.2s ease, transform 0.2s ease !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-item--quiz.st-quizz-question-card:hover { transform: translateY(-1px) !important; border-color: color-mix( in srgb, var(--primary-container) 56%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-icon--quiz { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; margin: 0 !important; border: 1px solid color-mix(in srgb, var(--secondary-container) 58%, transparent) !important; border-radius: 10px !important; background: var(--st-share-quiz-secondary-soft) !important; color: color-mix( in srgb, var(--secondary) 80%, var(--on-surface) 20% ) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-copy--quiz { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-label--quiz.st-quizz-progress-label { margin: 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: var(--st-share-quiz-muted) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-value--quiz.st-quizz-progress-meta { margin: 0 !important; font-size: 24px !important; line-height: 1.12 !important; font-weight: 800 !important; color: var(--st-share-quiz-text) !important; font-variant-numeric: tabular-nums !important; overflow-wrap: anywhere !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__stack { display: flex !important; flex-direction: column !important; gap: 16px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-box--quiz, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__preview-card--quiz { margin: 0 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-shell--quiz.st-quizz-question-card, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__preview-card--quiz.st-quizz-question-card { margin: 0 !important; border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 18px !important; background: var(--st-share-quiz-surface) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-shell--quiz.st-quizz-question-card { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-copy--quiz.st-quizz-progress-meta { margin: 0 !important; max-width: 48ch !important; font-size: 19px !important; line-height: 1.26 !important; font-weight: 800 !important; color: var(--st-share-quiz-text) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: 'workspace subject' 'action action' !important; column-gap: 14px !important; row-gap: 14px !important; align-items: stretch !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz .st-share-page__save-field--workspace { grid-area: workspace !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz .st-share-page__save-field--subject { grid-area: subject !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-actions--quiz { grid-area: action !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; padding-top: 4px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz .st-modal-form-group { margin: 0 !important; min-height: 116px !important; padding: 14px !important; border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 14px !important; background: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--secondary-container) 10% ) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz .st-modal-form-group label { margin: 0 0 6px 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: var(--st-share-quiz-muted) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz .st-panel-workspace-select select, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz .st-panel-workspace-select .custom-dropdown-trigger { min-height: 50px !important; border-radius: 12px !important; border: 1px solid var(--st-share-quiz-border-soft) !important; background: var(--st-share-quiz-surface) !important; box-shadow: none !important; color: var(--st-share-quiz-text) !important; font-size: 16px !important; font-weight: 700 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .button.button-primary.st-btn.st-share-page__save-btn--quiz, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-btn--quiz { min-width: 228px !important; min-height: 50px !important; border: 1px solid color-mix(in srgb, var(--primary) 74%, var(--outline-variant) 26%) !important; border-radius: 13px !important; background: color-mix( in srgb, var(--primary) 88%, var(--secondary) 12% ) !important; color: var(--on-primary) !important; box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--primary) 54%, transparent) !important; text-transform: none !important; letter-spacing: 0 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .button.button-primary.st-btn.st-share-page__save-btn--quiz:hover, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .button.button-primary.st-btn.st-share-page__save-btn--quiz:focus-visible, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-btn--quiz:hover, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-btn--quiz:focus-visible { border-color: color-mix(in srgb, var(--primary) 82%, transparent) !important; background: color-mix( in srgb, var(--primary) 82%, var(--secondary) 18% ) !important; color: var(--on-primary) !important; transform: translateY(-1px) !important; box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--primary) 60%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-btn--quiz:active { border-color: color-mix(in srgb, var(--primary) 88%, transparent) !important; background: color-mix( in srgb, var(--primary) 76%, var(--secondary) 24% ) !important; color: var(--on-primary) !important; transform: translateY(0) !important; box-shadow: inset 0 2px 4px color-mix(in srgb, black 24%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__preview-card--quiz.st-quizz-question-card { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__preview-title--quiz.st-quizz-question-type { margin: 0 !important; padding: 0 !important; border-bottom: none !important; font-size: clamp(34px, 4.4vw, 50px) !important; line-height: 1.08 !important; letter-spacing: -0.34px !important; color: var(--st-share-quiz-text) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-groups { gap: 22px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-group--quiz.st-quizz-question-card { margin: 0 !important; padding: 16px !important; border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 16px !important; background: color-mix( in srgb, var(--surface-container-lowest) 94%, var(--secondary-container) 6% ) !important; box-shadow: none !important; gap: 12px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-group--quiz.st-quizz-question-card + .st-share-page__quiz-group--quiz.st-quizz-question-card { margin-top: 2px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-group-head { margin: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-group-title--quiz { margin: 0 !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--st-share-quiz-text) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-group-count { min-width: 40px !important; min-height: 32px !important; padding: 0 11px !important; margin: 2px 4px !important; display: inline-grid !important; place-items: center !important; border: 1px solid color-mix(in srgb, var(--primary-container) 56%, transparent) !important; border-radius: 999px !important; background: color-mix( in srgb, var(--primary-container) 46%, var(--surface-container-lowest) 54% ) !important; color: color-mix( in srgb, var(--primary) 82%, var(--on-surface) 18% ) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; font-variant-numeric: tabular-nums !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-list { grid-template-columns: 1fr !important; row-gap: 24px !important; column-gap: 24px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-list .st-quizz-question-card + .st-quizz-question-card { margin-top: 0 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-card--quiz { margin: 2px 0 !important; padding: 14px !important; border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 16px !important; background: var(--st-share-quiz-surface) !important; box-shadow: none !important; gap: 12px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-card--quiz .st-quizz-question-box { border: 1px solid var(--st-share-quiz-border-soft) !important; border-radius: 14px !important; background: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--secondary-container) 10% ) !important; padding: 16px !important; margin: 0 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-card--quiz .st-quizz-question-box p { margin: 0 !important; font-size: 22px !important; line-height: 1.32 !important; font-weight: 700 !important; color: var(--st-share-quiz-text) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-options { margin-top: 10px !important; gap: 10px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-options .st-quizz-hint-chip { padding: 9px 12px !important; border: 1px solid var(--st-share-quiz-option-border) !important; border-radius: 999px !important; background: var(--st-share-quiz-option-bg) !important; color: var(--st-share-quiz-text) !important; font-size: 13px !important; font-weight: 700 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-options-list { margin: 12px 0 0 0 !important; padding: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-options-list li { margin: 0 !important; display: grid !important; grid-template-columns: 30px minmax(0, 1fr) !important; align-items: flex-start !important; gap: 10px !important; padding: 10px 12px !important; border-radius: 12px !important; border: 1px solid var(--st-share-quiz-option-border) !important; background: var(--st-share-quiz-option-bg) !important; color: var(--st-share-quiz-text) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-option-prefix { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; min-width: 26px !important; height: 26px !important; border-radius: 8px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 56%, transparent) !important; background: var(--st-share-quiz-primary-soft) !important; color: color-mix( in srgb, var(--primary) 84%, var(--on-surface) 16% ) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-option-text { display: block !important; min-width: 0 !important; overflow-wrap: anywhere !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.42 !important; color: var(--st-share-quiz-text) !important; } @media (max-width: 980px) { body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] { padding: 20px !important; border-radius: 22px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .tools-section-title.st-share-page__title.st-quizz-question-type { font-size: clamp(32px, 5.2vw, 46px) !important; } } @media (max-width: 760px) { body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] { margin: calc(var(--eduloo-main-offset, 122px) + 8px) auto 18px !important; padding: 16px !important; border-radius: 18px !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__head.st-quizz-progress-card, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-shell.st-quizz-progress-card { padding: 12px !important; border-radius: 14px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta--quiz { grid-template-columns: 1fr !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-inline--quiz { grid-template-columns: 1fr !important; grid-template-areas: 'workspace' 'subject' 'action' !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-actions--quiz { justify-content: stretch !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-btn--quiz { width: 100% !important; min-width: 0 !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__preview-title--quiz.st-quizz-question-type { font-size: clamp(30px, 7.8vw, 40px) !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-card--quiz .st-quizz-question-box p { font-size: 19px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-options-list li { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 8px !important; padding: 10px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-option-prefix { width: 24px !important; min-width: 24px !important; height: 24px !important; border-radius: 7px !important; font-size: 12px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-option-text { font-size: 14px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-list { row-gap: 18px !important; column-gap: 18px !important; } body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__quiz-groups { gap: 16px !important; } } @media (prefers-reduced-motion: reduce) { body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__meta-item--quiz.st-quizz-question-card, body .st-share-page__pane.st-share-page__pane--quiz[data-share-page][data-share-entity-type='quiz'] .st-share-page__save-btn--quiz { transition: none !important; } } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] { --st-share-summary-bg: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--primary-container) 10% ); --st-share-summary-surface: color-mix( in srgb, var(--surface-container-lowest) 94%, var(--secondary-container) 6% ); --st-share-summary-surface-soft: color-mix( in srgb, var(--surface-container-lowest) 91%, var(--secondary-container) 9% ); --st-share-summary-border: color-mix( in srgb, var(--outline-variant) 42%, transparent ); --st-share-summary-border-soft: color-mix( in srgb, var(--outline-variant) 36%, transparent ); --st-share-summary-text: color-mix( in srgb, var(--on-surface) 90%, transparent ); --st-share-summary-muted: color-mix( in srgb, var(--on-surface) 66%, transparent ); --st-share-summary-chip: color-mix( in srgb, var(--primary-container) 52%, var(--surface-container-lowest) 48% ); --st-share-summary-chip-text: color-mix( in srgb, var(--primary) 84%, var(--on-surface) 16% ); position: relative !important; display: flex !important; flex-direction: column !important; gap: 16px !important; width: min(100%, 980px) !important; max-width: 980px !important; margin: calc(var(--eduloo-main-offset, 122px) + 12px) auto 24px !important; padding: 22px !important; border: 1px solid var(--st-share-summary-border) !important; border-radius: 24px !important; background: var(--st-share-summary-bg) !important; box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--on-surface) 28%, transparent) !important; overflow: hidden !important; } body.theme-dark .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] { --st-share-summary-bg: color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ); --st-share-summary-surface: color-mix( in srgb, var(--surface-container-high) 82%, var(--surface-container-highest) 18% ); --st-share-summary-surface-soft: color-mix( in srgb, var(--surface-container-high) 78%, var(--secondary-container) 22% ); --st-share-summary-border: color-mix( in srgb, var(--outline-variant) 58%, transparent ); --st-share-summary-border-soft: color-mix( in srgb, var(--outline-variant) 50%, transparent ); --st-share-summary-text: color-mix( in srgb, var(--on-surface) 90%, transparent ); --st-share-summary-muted: color-mix( in srgb, var(--on-surface) 70%, transparent ); --st-share-summary-chip: color-mix( in srgb, var(--primary-container) 42%, var(--surface-container-high) 58% ); --st-share-summary-chip-text: color-mix( in srgb, var(--primary) 88%, var(--on-surface) 12% ); } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary']::before, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary']::after { content: '' !important; position: absolute !important; border-radius: 999px !important; pointer-events: none !important; z-index: 0 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary']::before { width: 172px !important; height: 172px !important; top: -88px !important; right: -56px !important; background: color-mix( in srgb, var(--secondary-container) 16%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary']::after { width: 146px !important; height: 146px !important; bottom: -82px !important; left: -52px !important; background: color-mix( in srgb, var(--primary-container) 18%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] > * { position: relative !important; z-index: 1 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__head--summary { margin: 0 !important; padding: 16px !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 16px !important; background: var(--st-share-summary-surface) !important; box-shadow: none !important; text-align: left !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__head-content--summary { display: flex !important; flex-direction: column !important; gap: 8px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .tools-section-title.st-share-page__title--summary { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(36px, 4.7vw, 54px) !important; line-height: 1.08 !important; letter-spacing: -0.4px !important; font-weight: 800 !important; color: var(--st-share-summary-text) !important; text-align: left !important; background: none !important; -webkit-text-fill-color: currentColor !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .tools-section-description.st-share-page__subtitle--summary { margin: 0 !important; max-width: 64ch !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--st-share-summary-muted) !important; text-align: left !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-shell--summary { margin: 0 !important; padding: 16px !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 16px !important; background: var(--st-share-summary-surface) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta--summary { margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-item--summary { margin: 0 !important; min-height: 98px !important; padding: 12px !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 14px !important; background: var(--st-share-summary-surface-soft) !important; box-shadow: none !important; transition: border-color 0.2s ease, transform 0.2s ease !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-item--summary:hover { transform: translateY(-1px) !important; border-color: color-mix( in srgb, var(--primary-container) 56%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-icon--summary { width: 34px !important; height: 34px !important; min-width: 34px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 54%, transparent) !important; border-radius: 10px !important; background: color-mix( in srgb, var(--primary-container) 38%, var(--surface-container-lowest) 62% ) !important; color: color-mix( in srgb, var(--primary) 82%, var(--on-surface) 18% ) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-copy--summary { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-label--summary { margin: 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: var(--st-share-summary-muted) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-value--summary { margin: 0 !important; font-size: 22px !important; line-height: 1.15 !important; font-weight: 800 !important; color: var(--st-share-summary-text) !important; overflow-wrap: anywhere !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__stack--summary { display: flex !important; flex-direction: column !important; gap: 16px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-shell--summary, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__preview-card--summary { margin: 0 !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 18px !important; background: var(--st-share-summary-surface) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-shell--summary { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-copy--summary { margin: 0 !important; max-width: 48ch !important; font-size: 19px !important; line-height: 1.28 !important; font-weight: 800 !important; color: var(--st-share-summary-text) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: 'workspace subject' 'action action' !important; column-gap: 14px !important; row-gap: 14px !important; align-items: stretch !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary .st-share-page__save-field--workspace { grid-area: workspace !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary .st-share-page__save-field--subject { grid-area: subject !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-actions--summary { grid-area: action !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; padding-top: 4px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary .st-modal-form-group { margin: 0 !important; min-height: 116px !important; padding: 14px !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 14px !important; background: var(--st-share-summary-surface-soft) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary .st-modal-form-group label { margin: 0 0 6px 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: var(--st-share-summary-muted) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary .st-panel-workspace-select select, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary .st-panel-workspace-select .custom-dropdown-trigger { min-height: 50px !important; border-radius: 12px !important; border: 1px solid var(--st-share-summary-border-soft) !important; background: var(--st-share-summary-surface) !important; box-shadow: none !important; color: var(--st-share-summary-text) !important; font-size: 16px !important; font-weight: 700 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.button-primary.st-btn.st-share-page__save-btn--summary, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-btn--summary { min-width: 228px !important; min-height: 50px !important; border: 1px solid color-mix(in srgb, var(--primary) 74%, var(--outline-variant) 26%) !important; border-radius: 13px !important; background: color-mix( in srgb, var(--primary) 86%, var(--secondary) 14% ) !important; color: var(--on-primary) !important; box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--primary) 52%, transparent) !important; text-transform: none !important; letter-spacing: 0 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.button-primary.st-btn.st-share-page__save-btn--summary:hover, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.button-primary.st-btn.st-share-page__save-btn--summary:focus-visible, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-btn--summary:hover, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-btn--summary:focus-visible { border-color: color-mix(in srgb, var(--primary) 84%, transparent) !important; background: color-mix( in srgb, var(--primary) 80%, var(--secondary) 20% ) !important; color: var(--on-primary) !important; transform: translateY(-1px) !important; box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--primary) 60%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-btn--summary:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px color-mix(in srgb, black 24%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__preview-card--summary { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__preview-title--summary { margin: 0 !important; padding: 0 !important; border-bottom: none !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(34px, 4.5vw, 50px) !important; line-height: 1.08 !important; letter-spacing: -0.34px !important; font-weight: 800 !important; color: var(--st-share-summary-text) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points-shell, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview-shell { margin: 0 !important; padding: 14px !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 14px !important; background: var(--st-share-summary-surface-soft) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points-head, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points-title { margin: 0 !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 800 !important; color: var(--st-share-summary-text) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points-count { min-width: 34px !important; height: 34px !important; padding: 0 10px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 56%, transparent) !important; border-radius: 999px !important; background: var(--st-share-summary-chip) !important; color: var(--st-share-summary-chip-text) !important; display: inline-grid !important; place-items: center !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points { margin: 12px 0 0 0 !important; padding: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points li { margin: 0 !important; display: grid !important; grid-template-columns: 16px minmax(0, 1fr) !important; align-items: flex-start !important; gap: 8px !important; padding: 10px 12px !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 12px !important; background: var(--st-share-summary-surface) !important; color: var(--st-share-summary-text) !important; font-size: 14px !important; line-height: 1.46 !important; font-weight: 600 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points li::before { content: '' !important; width: 8px !important; height: 8px !important; margin-top: 6px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--primary) 72%, var(--secondary) 28% ) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview-head { margin-bottom: 12px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview-copy { margin: 0 !important; max-width: 58ch !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 600 !important; color: var(--st-share-summary-muted) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.st-share-page__summary-open-btn { min-height: 40px !important; padding: 0 14px !important; border-radius: 10px !important; border: 1px solid var(--st-share-summary-border-soft) !important; background: var(--st-share-summary-surface) !important; color: var(--st-share-summary-text) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.st-share-page__summary-open-btn:hover, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.st-share-page__summary-open-btn:focus-visible { border-color: color-mix( in srgb, var(--primary-container) 70%, transparent ) !important; background: color-mix( in srgb, var(--primary-container) 26%, var(--surface-container-lowest) 74% ) !important; color: var(--st-share-summary-text) !important; transform: translateY(-1px) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview { margin: 0 !important; min-height: 220px !important; padding: 12px !important; border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 12px !important; background: var(--st-share-summary-surface) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .pdf-preview-pages-wrap { margin-top: 10px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .pdf-preview-container { padding: 2px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .pdf-preview-card { border: 1px solid var(--st-share-summary-border-soft) !important; border-radius: 12px !important; background: var(--st-share-summary-surface-soft) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .preview-card-header, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .preview-card-footer { color: var(--st-share-summary-muted) !important; font-size: 12px !important; font-weight: 700 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .preview-card-image { border-radius: 10px !important; border: 1px solid var(--st-share-summary-border-soft) !important; background: color-mix( in srgb, var(--surface-container-lowest) 96%, var(--secondary-container) 4% ) !important; } @media (max-width: 980px) { body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] { padding: 20px !important; border-radius: 22px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .tools-section-title.st-share-page__title--summary { font-size: clamp(33px, 5.4vw, 46px) !important; } } @media (max-width: 760px) { body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] { margin: calc(var(--eduloo-main-offset, 122px) + 8px) auto 18px !important; padding: 16px !important; border-radius: 18px !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__head--summary, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-shell--summary, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-shell--summary, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__preview-card--summary { padding: 12px !important; border-radius: 14px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta--summary { grid-template-columns: 1fr !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-inline--summary { grid-template-columns: 1fr !important; grid-template-areas: 'workspace' 'subject' 'action' !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-actions--summary { justify-content: stretch !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-btn--summary { width: 100% !important; min-width: 0 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__preview-title--summary { font-size: clamp(30px, 7.8vw, 40px) !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-points-head, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview-head { align-items: flex-start !important; flex-direction: column !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.st-share-page__summary-open-btn { width: 100% !important; justify-content: center !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview { overflow-x: hidden !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .preview-header { width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 8px !important; padding-bottom: 10px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .preview-header-title { min-width: 0 !important; font-size: 16px !important; line-height: 1.3 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .merge-preview-size { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 10px !important; row-gap: 8px !important; padding: 10px 12px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .merge-preview-label { min-width: 0 !important; font-size: 13px !important; line-height: 1.24 !important; white-space: normal !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .merge-preview-slider { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .merge-preview-value { justify-self: end !important; min-width: 44px !important; padding: 4px 8px !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .merge-preview-total-pages { grid-column: 1 / -1 !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: 12px !important; line-height: 1.35 !important; } body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .pdf-preview-pages-wrap, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .pdf-preview-container, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__summary-preview .pdf-preview-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } @media (prefers-reduced-motion: reduce) { body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__meta-item--summary, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .st-share-page__save-btn--summary, body .st-share-page__pane.st-share-page__pane--summary[data-share-page][data-share-entity-type='summary'] .button.st-share-page__summary-open-btn { transition: none !important; } } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] { --st-share-podcast-bg: color-mix( in srgb, var(--surface-container-lowest) 89%, var(--primary-container) 11% ); --st-share-podcast-surface: color-mix( in srgb, var(--surface-container-lowest) 93%, var(--secondary-container) 7% ); --st-share-podcast-surface-soft: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--secondary-container) 10% ); --st-share-podcast-border: color-mix( in srgb, var(--outline-variant) 42%, transparent ); --st-share-podcast-border-soft: color-mix( in srgb, var(--outline-variant) 36%, transparent ); --st-share-podcast-text: color-mix( in srgb, var(--on-surface) 90%, transparent ); --st-share-podcast-muted: color-mix( in srgb, var(--on-surface) 66%, transparent ); --st-share-podcast-chip: color-mix( in srgb, var(--secondary-container) 46%, var(--surface-container-lowest) 54% ); --st-share-podcast-chip-text: color-mix( in srgb, var(--secondary) 82%, var(--on-surface) 18% ); position: relative !important; display: flex !important; flex-direction: column !important; gap: 16px !important; width: min(100%, 980px) !important; max-width: 980px !important; margin: calc(var(--eduloo-main-offset, 122px) + 12px) auto 24px !important; padding: 22px !important; border: 1px solid var(--st-share-podcast-border) !important; border-radius: 24px !important; background: var(--st-share-podcast-bg) !important; box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--on-surface) 28%, transparent) !important; overflow: hidden !important; } body.theme-dark .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] { --st-share-podcast-bg: color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ); --st-share-podcast-surface: color-mix( in srgb, var(--surface-container-high) 82%, var(--surface-container-highest) 18% ); --st-share-podcast-surface-soft: color-mix( in srgb, var(--surface-container-high) 76%, var(--secondary-container) 24% ); --st-share-podcast-border: color-mix( in srgb, var(--outline-variant) 58%, transparent ); --st-share-podcast-border-soft: color-mix( in srgb, var(--outline-variant) 50%, transparent ); --st-share-podcast-text: color-mix( in srgb, var(--on-surface) 90%, transparent ); --st-share-podcast-muted: color-mix( in srgb, var(--on-surface) 70%, transparent ); --st-share-podcast-chip: color-mix( in srgb, var(--secondary-container) 38%, var(--surface-container-high) 62% ); --st-share-podcast-chip-text: color-mix( in srgb, var(--secondary) 88%, var(--on-surface) 12% ); } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast']::before, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast']::after { content: '' !important; position: absolute !important; border-radius: 999px !important; pointer-events: none !important; z-index: 0 !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast']::before { width: 174px !important; height: 174px !important; top: -90px !important; right: -58px !important; background: color-mix( in srgb, var(--secondary-container) 18%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast']::after { width: 148px !important; height: 148px !important; bottom: -84px !important; left: -54px !important; background: color-mix( in srgb, var(--primary-container) 16%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] > * { position: relative !important; z-index: 1 !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__head--podcast { margin: 0 !important; padding: 16px !important; border: 1px solid var(--st-share-podcast-border-soft) !important; border-radius: 16px !important; background: var(--st-share-podcast-surface) !important; box-shadow: none !important; text-align: left !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__head-content--podcast { display: flex !important; flex-direction: column !important; gap: 8px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .tools-section-title.st-share-page__title--podcast { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(36px, 4.7vw, 54px) !important; line-height: 1.08 !important; letter-spacing: -0.4px !important; font-weight: 800 !important; color: var(--st-share-podcast-text) !important; text-align: left !important; background: none !important; -webkit-text-fill-color: currentColor !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .tools-section-description.st-share-page__subtitle--podcast { margin: 0 !important; max-width: 64ch !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--st-share-podcast-muted) !important; text-align: left !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-shell--podcast { margin: 0 !important; padding: 16px !important; border: 1px solid var(--st-share-podcast-border-soft) !important; border-radius: 16px !important; background: var(--st-share-podcast-surface) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta--podcast { margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-item--podcast { margin: 0 !important; min-height: 98px !important; padding: 12px !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; border: 1px solid var(--st-share-podcast-border-soft) !important; border-radius: 14px !important; background: var(--st-share-podcast-surface-soft) !important; box-shadow: none !important; transition: border-color 0.2s ease, transform 0.2s ease !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-item--podcast:hover { transform: translateY(-1px) !important; border-color: color-mix( in srgb, var(--secondary-container) 60%, transparent ) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-icon--podcast { width: 34px !important; height: 34px !important; min-width: 34px !important; border: 1px solid color-mix(in srgb, var(--secondary-container) 58%, transparent) !important; border-radius: 10px !important; background: color-mix( in srgb, var(--secondary-container) 34%, var(--surface-container-lowest) 66% ) !important; color: color-mix( in srgb, var(--secondary) 84%, var(--on-surface) 16% ) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-copy--podcast { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-label--podcast { margin: 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: var(--st-share-podcast-muted) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-value--podcast { margin: 0 !important; font-size: 22px !important; line-height: 1.15 !important; font-weight: 800 !important; color: var(--st-share-podcast-text) !important; overflow-wrap: anywhere !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__stack--podcast { display: flex !important; flex-direction: column !important; gap: 16px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-shell--podcast, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__preview-card--podcast { margin: 0 !important; border: 1px solid var(--st-share-podcast-border-soft) !important; border-radius: 18px !important; background: var(--st-share-podcast-surface) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-shell--podcast { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-copy--podcast { margin: 0 !important; max-width: 48ch !important; font-size: 19px !important; line-height: 1.28 !important; font-weight: 800 !important; color: var(--st-share-podcast-text) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: 'workspace subject' 'action action' !important; column-gap: 14px !important; row-gap: 14px !important; align-items: stretch !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast .st-share-page__save-field--workspace { grid-area: workspace !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast .st-share-page__save-field--subject { grid-area: subject !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-actions--podcast { grid-area: action !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; padding-top: 4px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast .st-modal-form-group { margin: 0 !important; min-height: 116px !important; padding: 14px !important; border: 1px solid var(--st-share-podcast-border-soft) !important; border-radius: 14px !important; background: var(--st-share-podcast-surface-soft) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast .st-modal-form-group label { margin: 0 0 6px 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: var(--st-share-podcast-muted) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast .st-panel-workspace-select select, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast .st-panel-workspace-select .custom-dropdown-trigger { min-height: 50px !important; border-radius: 12px !important; border: 1px solid var(--st-share-podcast-border-soft) !important; background: var(--st-share-podcast-surface) !important; box-shadow: none !important; color: var(--st-share-podcast-text) !important; font-size: 16px !important; font-weight: 700 !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .button.button-primary.st-btn.st-share-page__save-btn--podcast, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-btn--podcast { min-width: 228px !important; min-height: 50px !important; border: 1px solid color-mix(in srgb, var(--primary) 74%, var(--outline-variant) 26%) !important; border-radius: 13px !important; background: color-mix( in srgb, var(--primary) 84%, var(--secondary) 16% ) !important; color: var(--on-primary) !important; box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--primary) 52%, transparent) !important; text-transform: none !important; letter-spacing: 0 !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .button.button-primary.st-btn.st-share-page__save-btn--podcast:hover, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .button.button-primary.st-btn.st-share-page__save-btn--podcast:focus-visible, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-btn--podcast:hover, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-btn--podcast:focus-visible { border-color: color-mix(in srgb, var(--primary) 84%, transparent) !important; background: color-mix( in srgb, var(--primary) 80%, var(--secondary) 20% ) !important; color: var(--on-primary) !important; transform: translateY(-1px) !important; box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--primary) 60%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-btn--podcast:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px color-mix(in srgb, black 24%, transparent) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__preview-card--podcast { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__preview-title--podcast { margin: 0 !important; padding: 0 !important; border-bottom: none !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(34px, 4.5vw, 50px) !important; line-height: 1.08 !important; letter-spacing: -0.34px !important; font-weight: 800 !important; color: var(--st-share-podcast-text) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-player-shell, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript-shell { margin: 0 !important; padding: 14px !important; border: 1px solid var(--st-share-podcast-border-soft) !important; border-radius: 14px !important; background: var(--st-share-podcast-surface-soft) !important; box-shadow: none !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-player-head, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 12px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-player-title, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript-title { margin: 0 !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 800 !important; color: var(--st-share-podcast-text) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-duration, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript-count { min-width: 34px !important; height: 34px !important; padding: 0 10px !important; border: 1px solid color-mix(in srgb, var(--secondary-container) 58%, transparent) !important; border-radius: 999px !important; background: var(--st-share-podcast-chip) !important; color: var(--st-share-podcast-chip-text) !important; display: inline-grid !important; place-items: center !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-player-shell .st-share-page__podcast-audio { width: 100% !important; margin-top: 12px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript { margin-top: 12px !important; max-height: 420px !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 4px !important; border: 0 !important; background: transparent !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript .st-pod-transcription-paragraph { margin: 0 !important; padding: 10px 12px !important; border: 1px solid var(--st-share-podcast-border-soft) !important; border-radius: 12px !important; background: var(--st-share-podcast-surface) !important; color: var(--st-share-podcast-text) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 600 !important; transition: border-color 0.2s ease, background-color 0.2s ease !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript .st-pod-transcription-paragraph.is-active { border-color: color-mix( in srgb, var(--primary-container) 72%, transparent ) !important; background: color-mix( in srgb, var(--primary-container) 28%, var(--surface-container-lowest) 72% ) !important; } @media (max-width: 980px) { body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] { padding: 20px !important; border-radius: 22px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .tools-section-title.st-share-page__title--podcast { font-size: clamp(33px, 5.4vw, 46px) !important; } } @media (max-width: 760px) { body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] { margin: calc(var(--eduloo-main-offset, 122px) + 8px) auto 18px !important; padding: 16px !important; border-radius: 18px !important; gap: 14px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__head--podcast, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-shell--podcast, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-shell--podcast, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__preview-card--podcast { padding: 12px !important; border-radius: 14px !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta--podcast { grid-template-columns: 1fr !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-inline--podcast { grid-template-columns: 1fr !important; grid-template-areas: 'workspace' 'subject' 'action' !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-actions--podcast { justify-content: stretch !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-btn--podcast { width: 100% !important; min-width: 0 !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__preview-title--podcast { font-size: clamp(30px, 7.8vw, 40px) !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-player-head, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript-head { align-items: flex-start !important; flex-direction: column !important; } body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript { max-height: 360px !important; } } @media (prefers-reduced-motion: reduce) { body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__meta-item--podcast, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__save-btn--podcast, body .st-share-page__pane.st-share-page__pane--podcast[data-share-page][data-share-entity-type='podcast'] .st-share-page__podcast-transcript .st-pod-transcription-paragraph { transition: none !important; } } main.landing-container:has(.bugs-portal) { padding-top: calc(var(--eduloo-main-offset, 122px) + 4px) !important; } body .bugs-portal { --bugs-bg: linear-gradient( 145deg, color-mix( in srgb, var(--surface-container-lowest) 90%, var(--primary-container) 10% ) 0%, color-mix( in srgb, var(--surface-container-lowest) 88%, var(--secondary-container) 12% ) 100% ); --bugs-surface: color-mix( in srgb, var(--surface-container-lowest) 93%, var(--secondary-container) 7% ); --bugs-surface-soft: color-mix( in srgb, var(--surface-container-lowest) 90%, var(--secondary-container) 10% ); --bugs-border: color-mix(in srgb, var(--outline-variant) 48%, transparent); --bugs-border-strong: color-mix( in srgb, var(--outline-variant) 36%, var(--primary-container) 64% ); --bugs-text: color-mix(in srgb, var(--on-surface) 92%, transparent); --bugs-muted: color-mix(in srgb, var(--on-surface-variant) 80%, transparent); --bugs-accent-soft: color-mix( in srgb, var(--primary-container) 56%, var(--surface-container-lowest) 44% ); --bugs-accent-quiet: color-mix( in srgb, var(--primary-container) 26%, var(--surface-container-lowest) 74% ); position: relative !important; width: min(100%, 1120px) !important; max-width: 1120px !important; margin: 8px auto 28px !important; padding: 22px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; border: 1px solid var(--bugs-border) !important; border-radius: 26px !important; background: var(--bugs-bg) !important; box-shadow: 0 22px 40px -30px color-mix(in srgb, var(--on-surface) 34%, transparent) !important; overflow: hidden !important; isolation: isolate !important; } body.theme-dark .bugs-portal { --bugs-bg: linear-gradient( 148deg, color-mix( in srgb, var(--surface-container-high) 84%, var(--surface-container-highest) 16% ) 0%, color-mix( in srgb, var(--surface-container) 82%, var(--secondary-container) 18% ) 100% ); --bugs-surface: color-mix( in srgb, var(--surface-container-high) 82%, var(--surface-container-highest) 18% ); --bugs-surface-soft: color-mix( in srgb, var(--surface-container-high) 78%, var(--secondary-container) 22% ); --bugs-border: color-mix(in srgb, var(--outline-variant) 62%, transparent); --bugs-border-strong: color-mix( in srgb, var(--outline-variant) 48%, var(--primary-container) 52% ); --bugs-text: color-mix(in srgb, var(--on-surface) 94%, transparent); --bugs-muted: color-mix(in srgb, var(--on-surface-variant) 84%, transparent); --bugs-accent-soft: color-mix( in srgb, var(--primary-container) 44%, var(--surface-container-highest) 56% ); --bugs-accent-quiet: color-mix( in srgb, var(--primary-container) 24%, var(--surface-container-highest) 76% ); } body .bugs-portal::before { content: '' !important; position: absolute !important; width: 220px !important; height: 220px !important; top: -130px !important; right: -104px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--primary-container) 26%, transparent ) !important; pointer-events: none !important; z-index: 0 !important; } body .bugs-portal::after { content: '' !important; position: absolute !important; width: 192px !important; height: 192px !important; left: -92px !important; bottom: -126px !important; border-radius: 999px !important; background: color-mix( in srgb, var(--secondary-container) 24%, transparent ) !important; pointer-events: none !important; z-index: 0 !important; } body .bugs-portal > * { position: relative !important; z-index: 1 !important; } body .bugs-portal__header { margin: 0 !important; padding: 16px !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; border: 1px solid var(--bugs-border) !important; border-radius: 18px !important; background: var(--bugs-surface) !important; } body .bugs-portal__headline h1 { margin: 0 !important; padding: 0 !important; border: 0 !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(36px, 4.7vw, 56px) !important; line-height: 1.06 !important; letter-spacing: -0.5px !important; font-weight: 800 !important; color: var(--bugs-text) !important; } body .bugs-portal-title__icon { width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 64%, transparent) !important; background: linear-gradient( 140deg, color-mix(in srgb, var(--primary) 90%, var(--secondary) 10%) 0%, color-mix(in srgb, var(--primary) 76%, var(--secondary) 24%) 100% ) !important; color: var(--on-primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 12px 20px -14px color-mix(in srgb, var(--primary) 54%, transparent) !important; } body .bugs-portal-title__icon i { font-size: 18px !important; } body .bugs-portal__headline p { margin: 8px 0 0 0 !important; max-width: 68ch !important; color: var(--bugs-muted) !important; font-size: 16px !important; line-height: 1.52 !important; font-weight: 600 !important; } body .bugs-portal__signal { margin: 0 !important; padding: 10px 14px !important; border: 1px solid var(--bugs-border-strong) !important; border-radius: 999px !important; background: var(--bugs-accent-quiet) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: none !important; white-space: nowrap !important; } body .bugs-portal__signal-dot { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: var(--success) !important; box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 22%, transparent) !important; } body .bugs-portal__signal-text { font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.3px !important; color: var(--bugs-text) !important; } body .bugs-search-shell { margin: 0 !important; padding: 12px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; border: 1px solid var(--bugs-border) !important; border-radius: 16px !important; background: var(--bugs-surface) !important; } body .bug-search-field { width: 100% !important; max-width: none !important; --search-height: 48px !important; --search-icon-size: 16px !important; } body .bug-search-field .search-field__input { min-height: 48px !important; border-radius: 12px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface-soft) !important; color: var(--bugs-text) !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important; } body .bug-search-field .search-field__input::placeholder { color: var(--bugs-muted) !important; opacity: 1 !important; } body .bug-search-field .search-field__input:focus-visible { outline: none !important; border-color: var(--bugs-border-strong) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-container) 56%, transparent) !important; } body .bugs-search-shell__meta { display: inline-flex !important; align-items: center !important; gap: 10px !important; } body .bugs-result-count { min-width: 176px !important; text-align: right !important; color: var(--bugs-muted) !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 700 !important; } body .bugs-clear-search-btn.btn { margin: 0 !important; min-height: 40px !important; padding: 0 14px !important; border-radius: 11px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface-soft) !important; color: var(--bugs-text) !important; font-size: 12px !important; font-weight: 700 !important; } body .bugs-clear-search-btn.btn:hover { border-color: var(--bugs-border-strong) !important; background: var(--bugs-accent-quiet) !important; } body .bugs-tab-container { margin: 0 !important; padding: 10px !important; border-radius: 16px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface) !important; box-shadow: none !important; } body .bugs-tab-nav { margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; border: 0 !important; background: transparent !important; } body .bugs-tab-button { margin: 0 !important; min-height: 38px !important; padding: 0 12px !important; border-radius: 10px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface-soft) !important; color: var(--bugs-muted) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; text-transform: none !important; } body .bugs-tab-button:hover:not(.active), body .bugs-tab-button:focus-visible { border-color: var(--bugs-border-strong) !important; background: var(--bugs-accent-quiet) !important; color: var(--bugs-text) !important; } body .bugs-tab-button.active, body .bugs-tab-button[aria-selected='true'] { border-color: color-mix(in srgb, var(--primary) 64%, transparent) !important; background: var(--bugs-accent-soft) !important; color: var(--bugs-text) !important; } body .bugs-tab-count { min-width: 24px !important; height: 20px !important; padding: 0 7px !important; border-radius: 999px !important; border: 1px solid var(--bugs-border-strong) !important; background: color-mix( in srgb, var(--bugs-surface-soft) 88%, var(--surface-container-lowest) 12% ) !important; color: var(--bugs-text) !important; font-size: 11px !important; font-weight: 800 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .bugs-grid { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } body .bugs-grid[aria-busy='true'] { opacity: 0.86 !important; pointer-events: none !important; } body .bug-card { margin: 0 !important; min-height: 152px !important; padding: 16px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 88px !important; align-items: stretch !important; gap: 14px !important; border: 1px solid var(--bugs-border) !important; border-radius: 18px !important; background: linear-gradient( 145deg, color-mix( in srgb, var(--bugs-surface) 86%, var(--surface-container-lowest) 14% ) 0%, color-mix( in srgb, var(--bugs-surface-soft) 84%, var(--surface-container-lowest) 16% ) 100% ) !important; box-shadow: 0 16px 26px -24px color-mix(in srgb, var(--on-surface) 44%, transparent) !important; overflow: hidden !important; transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important; } body .bug-card:hover, body .bug-card:focus-within { transform: translateY(-1px) !important; border-color: var(--bugs-border-strong) !important; box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--on-surface) 46%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary-container) 30%, transparent) !important; } body .bug-card__content { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } body .bug-card__top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; } body .bug-card__chips { min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } body .bug-card .status-badge { margin: 0 !important; min-height: 22px !important; padding: 0 8px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 800 !important; } body .bug-card__id { color: var(--bugs-muted) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.35px !important; } body .bug-card__title { margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--bugs-text) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 20px !important; line-height: 1.32 !important; font-weight: 800 !important; display: -webkit-box !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } body .bug-card__summary { margin: 0 !important; padding: 9px 11px !important; border-radius: 12px !important; border: 1px solid var(--bugs-border) !important; background: color-mix( in srgb, var(--bugs-surface-soft) 84%, var(--surface-container-lowest) 16% ) !important; color: var(--bugs-muted) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 600 !important; display: -webkit-box !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } body .bug-tag { margin: 0 !important; min-height: 22px !important; padding: 0 8px !important; border-radius: 999px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface-soft) !important; color: var(--bugs-text) !important; font-size: 11px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } body .bug-tag--platform { border-color: color-mix( in srgb, var(--primary-container) 58%, transparent ) !important; background: color-mix( in srgb, var(--primary-container) 36%, var(--surface-container-lowest) 64% ) !important; } body .bug-tag--category { border-color: color-mix( in srgb, var(--secondary-container) 58%, transparent ) !important; background: color-mix( in srgb, var(--secondary-container) 34%, var(--surface-container-lowest) 66% ) !important; } body .bug-card__bottom { margin-top: auto !important; padding-top: 12px !important; border-top: 1px solid var(--bugs-border) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; } body .bug-card__meta { min-width: 0 !important; display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; } body .bug-card__author { min-height: 24px !important; padding: 0 10px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--primary-container) 54%, transparent) !important; background: color-mix( in srgb, var(--primary-container) 34%, var(--surface-container-lowest) 66% ) !important; color: var(--bugs-text) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 700 !important; } body .bug-card__stats { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; } body .bug-card__stat { color: var(--bugs-muted) !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } body .bug-card__actions { display: inline-flex !important; align-items: center !important; gap: 6px !important; } body .bug-action-btn.btn { margin: 0 !important; min-height: 34px !important; border-radius: 10px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface-soft) !important; color: var(--bugs-text) !important; padding: 0 10px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } body .bug-action-btn.btn:hover { border-color: var(--bugs-border-strong) !important; background: var(--bugs-accent-quiet) !important; transform: translateY(-1px) !important; } body .bug-action-btn.btn:focus-visible, body .bugs-clear-search-btn.btn:focus-visible, body .bugs-load-more-btn.btn:focus-visible, body .bugs-empty-state__reset.btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-container) 56%, transparent) !important; } body .bug-action-btn--bookmark, body .bug-action-btn--flag { width: 34px !important; min-width: 34px !important; padding: 0 !important; } body .bug-action-btn--vote { min-width: 64px !important; } body .bug-action-btn--active { border-color: color-mix(in srgb, var(--primary) 62%, transparent) !important; background: color-mix( in srgb, var(--primary-container) 46%, var(--surface-container-lowest) 54% ) !important; color: color-mix( in srgb, var(--primary) 84%, var(--on-surface) 16% ) !important; } body .bug-card__thumb { margin: 0 !important; width: 88px !important; min-width: 88px !important; height: 88px !important; align-self: center !important; border-radius: 14px !important; border: 1px solid var(--bugs-border) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .bug-card__thumb i { color: var(--on-primary) !important; font-size: 28px !important; } body .bug-card__thumb--open { background: color-mix( in srgb, var(--on-surface) 62%, var(--surface-container-high) 38% ) !important; } body .bug-card__thumb--progress { background: linear-gradient( 140deg, color-mix(in srgb, var(--primary) 86%, var(--secondary) 14%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ) !important; } body .bug-card__thumb--fixed { background: linear-gradient( 140deg, color-mix(in srgb, var(--success) 82%, var(--surface-container-lowest) 18%) 0%, color-mix(in srgb, var(--success) 64%, var(--surface-container-lowest) 36%) 100% ) !important; } body .bug-card__thumb--closed { background: linear-gradient( 140deg, color-mix(in srgb, var(--error) 82%, var(--surface-container-lowest) 18%) 0%, color-mix(in srgb, var(--error) 64%, var(--surface-container-lowest) 36%) 100% ) !important; } body .bugs-empty-state { margin: 0 !important; padding: 34px 20px !important; border: 1px dashed var(--bugs-border-strong) !important; border-radius: 18px !important; text-align: center !important; background: var(--bugs-surface) !important; } body .bugs-empty-state h3 { margin: 0 !important; border: 0 !important; color: var(--bugs-text) !important; font-size: 24px !important; font-weight: 800 !important; } body .bugs-empty-state p { margin: 8px 0 0 0 !important; color: var(--bugs-muted) !important; font-size: 14px !important; font-weight: 600 !important; } body .bugs-empty-state__reset.btn { margin: 14px auto 0 !important; min-width: 164px !important; min-height: 42px !important; border-radius: 11px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface-soft) !important; color: var(--bugs-text) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: none !important; } body .bugs-empty-state__reset.btn:hover { border-color: var(--bugs-border-strong) !important; background: var(--bugs-accent-quiet) !important; } body .bugs-pagination { display: flex !important; justify-content: center !important; } body .bugs-load-more-btn.btn { margin: 0 !important; min-width: 208px !important; min-height: 46px !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--primary) 62%, transparent) !important; background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 92%, var(--secondary) 8%) 0%, color-mix(in srgb, var(--primary) 80%, var(--secondary) 20%) 100% ) !important; color: var(--on-primary) !important; font-size: 14px !important; font-weight: 800 !important; text-transform: none !important; } body .bugs-load-more-btn.btn:hover { border-color: color-mix(in srgb, var(--primary) 72%, transparent) !important; background: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 96%, var(--secondary) 4%) 0%, color-mix(in srgb, var(--primary) 86%, var(--secondary) 14%) 100% ) !important; transform: translateY(-1px) !important; } body .bug-card-skeleton { margin: 0 !important; min-height: 140px !important; padding: 14px !important; border-radius: 18px !important; border: 1px solid var(--bugs-border) !important; background: var(--bugs-surface) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 88px !important; gap: 14px !important; } body .bug-card-skeleton__line, body .bug-card-skeleton__chip, body .bug-card-skeleton__btn, body .bug-card-skeleton__thumb { background: color-mix(in srgb, var(--on-surface) 14%, transparent) !important; } @media (max-width: 980px) { body .bugs-portal { width: min(100%, 1000px) !important; margin-bottom: 22px !important; padding: 18px !important; border-radius: 22px !important; } body .bugs-portal__header { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } body .bug-card, body .bug-card-skeleton { grid-template-columns: minmax(0, 1fr) 78px !important; } body .bug-card__thumb, body .bug-card-skeleton__thumb { width: 78px !important; min-width: 78px !important; height: 78px !important; } } @media (max-width: 760px) { body .bugs-portal { margin: calc(var(--eduloo-main-offset, 122px) + 6px) auto 16px !important; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 18px !important; gap: 12px !important; } body .bugs-portal__header, body .bugs-search-shell, body .bugs-tab-container, body .bug-card, body .bugs-empty-state, body .bug-card-skeleton { border-radius: 14px !important; } body .bugs-search-shell { grid-template-columns: 1fr !important; align-items: stretch !important; } body .bugs-search-shell__meta { justify-content: space-between !important; width: 100% !important; } body .bugs-result-count { min-width: 0 !important; text-align: left !important; font-size: 12px !important; } body .bugs-tab-nav { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 2px !important; } body .bug-card, body .bug-card-skeleton { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; gap: 10px !important; padding: 12px !important; } body .bug-card__content { order: 2 !important; } body .bug-card__thumb, body .bug-card-skeleton__thumb { order: 1 !important; width: 54px !important; min-width: 54px !important; height: 54px !important; border-radius: 11px !important; justify-self: flex-start !important; } body .bug-card__thumb i { font-size: 19px !important; } body .bug-card__bottom { grid-template-columns: 1fr !important; gap: 8px !important; } body .bug-card__actions { justify-content: flex-start !important; flex-wrap: wrap !important; } body .bugs-load-more-btn.btn { width: 100% !important; min-width: 0 !important; } } @media (prefers-reduced-motion: reduce) { body .bugs-portal *, body .bugs-portal *::before, body .bugs-portal *::after { transition: none !important; animation: none !important; } } body .st-pod-mini-player { position: fixed !important; right: 18px !important; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; z-index: 1380 !important; display: flex !important; flex-direction: column !important; width: min(392px, calc(100vw - 28px)) !important; max-width: calc(100vw - 28px) !important; gap: 11px !important; padding: 14px !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 84%, transparent) !important; border-radius: 20px !important; background: linear-gradient( 152deg, color-mix( in srgb, var(--surface-container-lowest) 90%, var(--surface-container-low) 10% ) 0%, color-mix( in srgb, var(--surface-container-low) 84%, var(--surface-container-high) 16% ) 100% ) !important; box-shadow: 0 26px 44px -28px color-mix(in srgb, var(--on-surface) 66%, transparent) !important; user-select: none !important; touch-action: none !important; margin: 0 !important; cursor: grab !important; } body.theme-dark .st-pod-mini-player { border-color: color-mix( in srgb, var(--outline-variant) 72%, transparent ) !important; background: linear-gradient( 152deg, color-mix( in srgb, var(--surface-container-lowest) 92%, var(--surface-container-low) 8% ) 0%, color-mix( in srgb, var(--surface-container-low) 86%, var(--surface-container-high) 14% ) 100% ) !important; box-shadow: 0 32px 54px -30px rgba(0, 0, 0, 0.64) !important; } body .st-pod-mini-player.is-dragging { cursor: grabbing !important; opacity: 0.96 !important; } body .st-pod-mini-player-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 0 !important; } body .st-pod-mini-player-title { color: var(--on-surface) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; width: auto !important; padding-right: 0 !important; text-align: left !important; letter-spacing: normal !important; min-width: 0 !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; cursor: pointer !important; } body .st-pod-mini-player-close { position: static !important; top: auto !important; right: auto !important; z-index: 4 !important; width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid color-mix(in srgb, var(--outline-variant) 82%, transparent) !important; border-radius: 9px !important; background: color-mix( in srgb, var(--surface-container-high) 72%, var(--surface-container-lowest) 28% ) !important; color: var(--on-surface-variant) !important; pointer-events: auto !important; transition: background 160ms ease, color 160ms ease !important; } body .st-pod-mini-player-close:hover { background: color-mix( in srgb, var(--surface-container-highest) 84%, var(--surface-container-high) 16% ) !important; color: var(--on-surface) !important; } body .st-pod-mini-player-controls { display: grid !important; grid-template-columns: 56px 56px 1fr 56px 56px !important; align-items: center !important; gap: 8px !important; padding: 0 !important; } body .st-pod-mini-player-btn { border: 1px solid color-mix(in srgb, var(--outline-variant) 74%, transparent) !important; border-radius: 12px !important; min-height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; position: relative !important; background: color-mix( in srgb, var(--surface-container-high) 72%, var(--surface-container-lowest) 28% ) !important; color: var(--on-surface-variant) !important; transition: background 160ms ease, border-color 160ms ease, color 160ms ease !important; } body .st-pod-mini-player-btn:hover { background: color-mix( in srgb, var(--surface-container-highest) 84%, var(--surface-container-high) 16% ) !important; border-color: color-mix( in srgb, var(--primary-container) 58%, var(--outline-variant) 42% ) !important; color: var(--on-surface) !important; } body .st-pod-mini-player-speed { width: 100% !important; min-width: 100% !important; font-size: 12px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; } body .st-pod-mini-player-skip { width: 100% !important; min-width: 100% !important; gap: 5px !important; } body .st-pod-mini-player-skip .icon { transform: none !important; margin: 0 !important; font-size: 13px !important; } body .st-pod-mini-player-skip-label { position: static !important; transform: none !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; line-height: 1 !important; } body .st-pod-mini-player-volume { width: 100% !important; min-width: 100% !important; font-size: 13px !important; } body .st-pod-mini-player-play { width: 52px !important; min-width: 52px !important; min-height: 52px !important; justify-self: center !important; border-radius: 999px !important; border-color: color-mix( in srgb, var(--primary-container) 66%, transparent ) !important; background: linear-gradient( 142deg, color-mix(in srgb, var(--primary) 86%, var(--primary-container) 14%) 0%, color-mix( in srgb, var(--primary-container) 82%, var(--secondary-container) 18% ) 100% ) !important; color: var(--on-primary) !important; box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--primary) 68%, transparent) !important; font-size: 17px !important; } body .st-pod-mini-player-play:hover { background: linear-gradient( 142deg, color-mix(in srgb, var(--primary) 78%, var(--primary-container) 22%) 0%, color-mix( in srgb, var(--primary-container) 74%, var(--secondary-container) 26% ) 100% ) !important; } body .st-pod-mini-player-play .icon { margin: 0 !important; } body .st-pod-mini-player-progress-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; padding: 0 !important; } body .st-pod-mini-player-time { min-width: 36px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; color: var(--on-surface-variant) !important; } body .st-pod-mini-player-progress { width: 100% !important; height: 8px !important; border-radius: 999px !important; overflow: hidden !important; cursor: pointer !important; touch-action: none !important; background: color-mix( in srgb, var(--surface-container-highest) 78%, var(--surface-container-high) 22% ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 64%, transparent) !important; } body .st-pod-mini-player-progress-fill { height: 100% !important; border-radius: inherit !important; min-width: 0 !important; background: linear-gradient( 90deg, color-mix(in srgb, var(--primary) 80%, var(--primary-container) 20%) 0%, color-mix( in srgb, var(--primary-container) 76%, var(--secondary-container) 24% ) 100% ) !important; transition: width 0.2s linear !important; } body .st-pod-mini-player:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-container) 44%, transparent), 0 26px 44px -28px color-mix(in srgb, var(--on-surface) 66%, transparent) !important; } @media (max-width: 760px) { body .st-pod-mini-player { width: min(384px, calc(100vw - 14px)) !important; max-width: calc(100vw - 14px) !important; right: 7px !important; bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 18px !important; padding: 10px 12px !important; gap: 9px !important; } body .st-pod-mini-player-controls { grid-template-columns: 50px 50px 1fr 50px 50px !important; gap: 6px !important; } body .st-pod-mini-player-btn { min-height: 40px !important; border-radius: 11px !important; } body .st-pod-mini-player-play { width: 48px !important; min-width: 48px !important; min-height: 48px !important; font-size: 15px !important; } body .st-pod-mini-player-time { min-width: 33px !important; font-size: 11px !important; } } @media (max-width: 520px) { body .st-pod-mini-player { width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; right: 5px !important; bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 16px !important; padding: 10px !important; } body .st-pod-mini-player-title { font-size: 12px !important; } body .st-pod-mini-player-controls { grid-template-columns: 44px 44px 1fr 44px 44px !important; gap: 5px !important; } body .st-pod-mini-player-btn { min-height: 37px !important; border-radius: 10px !important; } body .st-pod-mini-player-play { width: 44px !important; min-width: 44px !important; min-height: 44px !important; font-size: 14px !important; } body .st-pod-mini-player-time { min-width: 30px !important; font-size: 10px !important; } body .st-pod-mini-player-progress { height: 7px !important; } } @media (prefers-reduced-motion: reduce) { body .st-pod-mini-player, body .st-pod-mini-player * { transition: none !important; animation: none !important; } } body.theme-dark { --surface: #1b1218; --surface-bright: #291c24; --surface-dim: #130d12; --surface-container-lowest: #22151d; --surface-container-low: #31202a; --surface-container: #48313c; --surface-container-high: #614654; --surface-container-highest: #7d5f6c; --outline: #b48998; --outline-variant: #9a7080; --on-surface: #ffe5ee; --on-surface-variant: #c9a9b6; --on-background: #ffeff6; --eduloo-dark-surface-shell: color-mix( in srgb, var(--surface-container-low) 90%, var(--surface-dim) 10% ); --eduloo-dark-surface-card: color-mix( in srgb, var(--surface-container-high) 88%, var(--primary-container) 12% ); --eduloo-dark-surface-panel: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --eduloo-dark-border-subtle: rgba(255, 255, 255, 0.09); --eduloo-dark-border-strong: rgba(255, 255, 255, 0.12); --eduloo-dark-shadow-soft: 0 10px 20px -12px rgba(0, 0, 0, 0.36); --eduloo-dark-shadow-soft-sm: 0 8px 16px -12px rgba(0, 0, 0, 0.3); --eduloo-dark-focus-ring: #ff9ab0; --eduloo-accent-flashcards: #ffd07e; --eduloo-accent-quizzes: #ff7f98; --eduloo-accent-summaries: #7fd8cf; --eduloo-accent-podcasts: #c3a3ff; --eduloo-accent-documents: #9fc8ff; --eduloo-progress-gradient: linear-gradient( 90deg, color-mix(in srgb, var(--primary) 90%, var(--on-primary-container) 10%) 0%, color-mix(in srgb, var(--secondary) 80%, var(--primary) 20%) 100% ); --eduloo-kicker-bg: color-mix( in srgb, var(--primary-container) 54%, var(--surface-container-highest) 46% ); --eduloo-kicker-border: color-mix( in srgb, var(--primary) 44%, var(--outline-variant) 56% ); --eduloo-input-inset-bg: color-mix( in srgb, var(--surface-container) 86%, var(--surface-container-low) 14% ); --eduloo-input-inset-border: color-mix( in srgb, var(--outline-variant) 78%, rgba(255, 255, 255, 0.18) 22% ); } body.theme-dark a:focus-visible, body.theme-dark button:focus-visible { outline: 2px solid var(--eduloo-dark-focus-ring) !important; outline-offset: 2px !important; } body.theme-dark input:focus-visible, body.theme-dark select:focus-visible, body.theme-dark textarea:focus-visible { outline: none !important; } body.theme-dark { --surface: #1b1218; --surface-bright: #2e1f29; --surface-dim: #120b10; --surface-container-lowest: #291922; --surface-container-low: #3a2530; --surface-container: #4d3440; --surface-container-high: #664a59; --surface-container-highest: #826170; --outline: #b78c9c; --outline-variant: #8d6878; --on-surface: #fff0f5; --on-surface-variant: #d4b0c0; --on-background: #fff1f6; --eduloo-text-title: #fff0f5; --eduloo-text-body: #d4b0c0; --eduloo-text-muted: #a68898; --eduloo-dark-surface-shell: color-mix( in srgb, var(--surface-container-low) 88%, var(--surface) 12% ); --eduloo-dark-surface-card: color-mix( in srgb, var(--surface-container-high) 84%, var(--primary-container) 16% ); --eduloo-dark-surface-panel: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-dark-border-subtle: rgba(255, 255, 255, 0.08); --eduloo-dark-border-strong: rgba(255, 255, 255, 0.12); --eduloo-dark-shadow-soft: 0 10px 20px -12px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-soft-sm: 0 8px 16px -12px rgba(0, 0, 0, 0.3); --eduloo-dark-focus-ring: #ff9db3; --eduloo-accent-flashcards: #f59e0b; --eduloo-accent-quizzes: #f43f5e; --eduloo-accent-summaries: #14b8a6; --eduloo-accent-podcasts: #a78bfa; --eduloo-accent-documents: #38bdf8; --eduloo-progress-gradient: linear-gradient(90deg, #ff7f98 0%, #8ec9ff 100%); --eduloo-kicker-bg: color-mix( in srgb, var(--primary-container) 60%, var(--surface-container-highest) 40% ); --eduloo-kicker-border: color-mix( in srgb, var(--primary) 48%, var(--outline-variant) 52% ); --eduloo-input-inset-bg: color-mix( in srgb, var(--surface-container) 82%, var(--surface-container-low) 18% ); --eduloo-input-inset-border: color-mix( in srgb, var(--outline-variant) 74%, rgba(255, 255, 255, 0.26) 26% ); } body.theme-dark { --eduloo-input-unified-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-input-unified-bg-hover: color-mix( in srgb, var(--surface-container-low) 84%, var(--surface-container) 16% ); --eduloo-input-unified-bg-focus: color-mix( in srgb, var(--surface-container-low) 80%, var(--primary-container) 20% ); --eduloo-input-unified-border: color-mix( in srgb, var(--outline-variant) 60%, rgba(255, 255, 255, 0.18) 40% ); --eduloo-input-unified-border-hover: color-mix( in srgb, var(--outline-variant) 42%, var(--primary) 58% ); --eduloo-input-unified-border-focus: color-mix( in srgb, var(--primary) 58%, var(--outline-variant) 42% ); --eduloo-input-unified-ring: color-mix(in srgb, var(--primary) 24%, transparent); } body.theme-dark { --eduloo-dark-elev-shell: color-mix( in srgb, var(--surface-container-low) 90%, var(--surface) 10% ); --eduloo-dark-elev-card: color-mix( in srgb, var(--surface-container-high) 82%, var(--primary-container) 18% ); --eduloo-dark-elev-panel: color-mix( in srgb, var(--surface-container-highest) 80%, var(--surface-container-high) 20% ); --eduloo-dark-elev-inset: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-dark-border-subtle: color-mix( in srgb, var(--outline-variant) 66%, rgba(255, 255, 255, 0.18) 34% ); --eduloo-dark-border-strong: color-mix( in srgb, var(--outline-variant) 54%, rgba(255, 255, 255, 0.24) 46% ); --eduloo-dark-border-accent: color-mix( in srgb, var(--primary) 58%, var(--outline-variant) 42% ); --eduloo-dark-shadow-soft: 0 10px 20px -14px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-float: 0 14px 24px -16px rgba(0, 0, 0, 0.38); --eduloo-input-unified-bg: var(--eduloo-dark-elev-inset); --eduloo-input-unified-bg-hover: color-mix( in srgb, var(--eduloo-dark-elev-inset) 82%, var(--surface-container) 18% ); --eduloo-input-unified-bg-focus: color-mix( in srgb, var(--eduloo-dark-elev-inset) 78%, var(--primary-container) 22% ); --eduloo-input-unified-border: var(--eduloo-dark-border-subtle); --eduloo-input-unified-border-hover: color-mix( in srgb, var(--eduloo-dark-border-subtle) 58%, var(--primary) 42% ); --eduloo-input-unified-border-focus: var(--eduloo-dark-border-accent); --eduloo-input-unified-ring: color-mix(in srgb, var(--primary) 28%, transparent); --eduloo-ui-soft-btn-bg: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-ui-soft-btn-bg-hover: color-mix( in srgb, var(--surface-container-highest) 66%, var(--primary-container) 34% ); --eduloo-ui-soft-btn-border: var(--eduloo-dark-border-strong); --eduloo-ui-soft-btn-text: var(--eduloo-text-title); --eduloo-ui-primary-btn-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ); --eduloo-ui-primary-btn-border: color-mix( in srgb, var(--primary) 68%, rgba(255, 255, 255, 0.3) 32% ); --eduloo-ui-primary-btn-shadow: 0 12px 20px -12px color-mix(in srgb, var(--primary) 34%, transparent); } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not( [type='file'] ):not([type='color']):not([type='hidden']), body.theme-dark textarea, body.theme-dark select, body.theme-dark .custom-dropdown-trigger, body.theme-dark .search-field__input, body.theme-dark .st-search-input { background: var(--eduloo-input-unified-bg) !important; border: 1px solid var(--eduloo-input-unified-border) !important; color: var(--eduloo-text-title) !important; outline: none !important; box-shadow: none !important; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not( [type='file'] ):not([type='color']):not([type='hidden']):hover, body.theme-dark textarea:hover, body.theme-dark select:hover, body.theme-dark .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .search-field__input:hover:not(:disabled), body.theme-dark .st-search-input:hover:not(:disabled) { background: var(--eduloo-input-unified-bg-hover) !important; border-color: var(--eduloo-input-unified-border-hover) !important; outline: none !important; box-shadow: none !important; } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not( [type='file'] ):not([type='color']):not([type='hidden']):focus, body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not( [type='file'] ):not([type='color']):not([type='hidden']):focus-visible, body.theme-dark textarea:focus, body.theme-dark textarea:focus-visible, body.theme-dark select:focus, body.theme-dark select:focus-visible, body.theme-dark .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .custom-dropdown-trigger:focus, body.theme-dark .custom-dropdown-trigger:focus-visible, body.theme-dark .search-field__input:focus, body.theme-dark .search-field__input:focus-visible, body.theme-dark .st-search-input:focus, body.theme-dark .st-search-input:focus-visible { background: var(--eduloo-input-unified-bg-focus) !important; border-color: var(--eduloo-input-unified-border-focus) !important; outline: none !important; box-shadow: 0 0 0 2px var(--eduloo-input-unified-ring) !important; } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder, body.theme-dark .search-field__input::placeholder, body.theme-dark .st-search-input::placeholder { color: var(--eduloo-text-muted) !important; } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']), body.theme-dark textarea, body.theme-dark select, body.theme-dark .custom-dropdown-trigger, body.theme-dark .search-field__input, body.theme-dark .st-search-input { background: var(--eduloo-input-unified-bg) !important; border: 1px solid var(--eduloo-input-unified-border) !important; color: var(--eduloo-text-title) !important; outline: none !important; box-shadow: none !important; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important; } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']):hover, body.theme-dark textarea:hover, body.theme-dark select:hover, body.theme-dark .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .search-field__input:hover:not(:disabled), body.theme-dark .st-search-input:hover:not(:disabled) { background: var(--eduloo-input-unified-bg-hover) !important; border-color: var(--eduloo-input-unified-border-hover) !important; outline: none !important; box-shadow: none !important; filter: none !important; transform: none !important; } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']):focus, body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']):focus-visible, body.theme-dark textarea:focus, body.theme-dark textarea:focus-visible, body.theme-dark select:focus, body.theme-dark select:focus-visible, body.theme-dark .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .custom-dropdown-trigger:focus, body.theme-dark .custom-dropdown-trigger:focus-visible, body.theme-dark .search-field__input:focus, body.theme-dark .search-field__input:focus-visible, body.theme-dark .st-search-input:focus, body.theme-dark .st-search-input:focus-visible { background: var(--eduloo-input-unified-bg-focus) !important; border-color: var(--eduloo-input-unified-border-focus) !important; outline: none !important; box-shadow: 0 0 0 2px var(--eduloo-input-unified-ring) !important; filter: none !important; transform: none !important; } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder, body.theme-dark .search-field__input::placeholder, body.theme-dark .st-search-input::placeholder { color: var(--eduloo-text-muted) !important; } body.theme-dark { --surface: #1b1218; --surface-bright: #2e1f29; --surface-dim: #120b10; --surface-container-lowest: #291922; --surface-container-low: #3a2530; --surface-container: #4d3440; --surface-container-high: #664a59; --surface-container-highest: #826170; --outline: #b78c9c; --outline-variant: #8d6878; --on-surface: #fff0f5; --on-surface-variant: #d4b0c0; --on-background: #fff1f6; --eduloo-text-title: #fff0f5; --eduloo-text-body: #d4b0c0; --eduloo-text-muted: #a68898; --eduloo-dark-surface-shell: color-mix( in srgb, var(--surface-container-low) 88%, var(--surface) 12% ); --eduloo-dark-surface-card: color-mix( in srgb, var(--surface-container-high) 84%, var(--primary-container) 16% ); --eduloo-dark-surface-panel: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-dark-border-subtle: rgba(255, 255, 255, 0.08); --eduloo-dark-border-strong: rgba(255, 255, 255, 0.12); --eduloo-dark-shadow-soft: 0 10px 20px -12px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-soft-sm: 0 8px 16px -12px rgba(0, 0, 0, 0.3); --eduloo-dark-focus-ring: #ff9db3; --eduloo-accent-flashcards: #f59e0b; --eduloo-accent-quizzes: #f43f5e; --eduloo-accent-summaries: #14b8a6; --eduloo-accent-podcasts: #a78bfa; --eduloo-accent-documents: #38bdf8; --eduloo-progress-gradient: linear-gradient(90deg, #ff7f98 0%, #8ec9ff 100%); --eduloo-kicker-bg: color-mix( in srgb, var(--primary-container) 60%, var(--surface-container-highest) 40% ); --eduloo-kicker-border: color-mix( in srgb, var(--primary) 48%, var(--outline-variant) 52% ); --eduloo-input-inset-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-input-inset-border: color-mix( in srgb, var(--outline-variant) 60%, rgba(255, 255, 255, 0.18) 40% ); } body.theme-dark { --primary: #ff8ea2; --primary-dim: #ff728c; --primary-container: #7c3046; --on-primary: #2a0712; --on-primary-container: #ffe0ea; --secondary: #b6c0ff; --secondary-container: #4f4a84; --on-secondary: #f4f1ff; --tertiary: #ffd88e; --tertiary-container: #6f5421; --on-tertiary-container: #fff4d6; --surface: #1b1218; --surface-bright: #261924; --surface-dim: #130d12; --surface-container-lowest: #23151e; --surface-container-low: #35212c; --surface-container: #48303c; --surface-container-high: #5d4150; --surface-container-highest: #755566; --on-surface: #ffe5ee; --on-surface-variant: #d7b4c1; --on-background: #ffeef5; --outline: #a47786; --outline-variant: #8a5f6e; --eduloo-dark-elev-0: var(--surface-dim); --eduloo-dark-elev-1: var(--surface-container-low); --eduloo-dark-elev-2: var(--surface-container-high); --eduloo-dark-elev-3: var(--surface-container-highest); --eduloo-dark-inset: #2a1a23; --eduloo-dark-page-bg: radial-gradient( circle at 8% 10%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 42% ), radial-gradient( circle at 90% 12%, color-mix(in srgb, var(--secondary) 16%, transparent) 0%, transparent 46% ), linear-gradient( 180deg, color-mix(in srgb, var(--surface-dim) 90%, black 10%) 0%, var(--surface) 44%, color-mix(in srgb, var(--surface-dim) 84%, black 16%) 100% ); --eduloo-dark-surface-card: linear-gradient( 152deg, color-mix( in srgb, var(--surface-container-high) 88%, var(--primary-container) 12% ) 0%, color-mix( in srgb, var(--surface-container-highest) 84%, var(--secondary-container) 16% ) 100% ); --eduloo-dark-surface-card-soft: color-mix( in srgb, var(--surface-container-highest) 86%, var(--primary-container) 14% ); --eduloo-dark-surface-border: color-mix( in srgb, var(--outline-variant) 76%, rgba(255, 255, 255, 0.24) 24% ); --eduloo-dark-surface-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.38); --eduloo-dark-btn-soft-bg: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --eduloo-dark-btn-soft-bg-hover: color-mix( in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28% ); --eduloo-dark-btn-soft-border: color-mix( in srgb, var(--outline-variant) 78%, rgba(255, 255, 255, 0.2) 22% ); --eduloo-dark-btn-soft-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --eduloo-dark-btn-primary-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 88%, var(--on-primary-container) 12%) 0%, color-mix(in srgb, var(--primary) 68%, var(--secondary) 32%) 100% ); --eduloo-dark-btn-primary-bg-hover: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 94%, var(--on-primary-container) 6%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ); --eduloo-dark-btn-primary-shadow: 0 14px 24px -16px color-mix(in srgb, var(--primary) 44%, black 56%); --eduloo-dark-focus-ring: #ff9ab0; } body.theme-dark .btn, body.theme-dark .btn-login, body.theme-dark .btn-hero-secondary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -14px rgba(0, 0, 0, 0.34) !important; } body.theme-dark .btn:hover, body.theme-dark .btn-login:hover, body.theme-dark .btn-hero-secondary:hover { filter: brightness(1.12) !important; } body.theme-dark .btn:active, body.theme-dark .btn-login:active, body.theme-dark .btn-hero-secondary:active, body.theme-dark .btn-hero-primary:active, body.theme-dark .btn-cta:active { transform: scale(0.98) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.theme-dark { --primary: #ff8ea2; --primary-dim: #ff748e; --primary-container: #7f3349; --on-primary: #2b0813; --on-primary-container: #ffe3ec; --secondary: #8ec9ff; --secondary-container: #445483; --on-secondary: #f1f6ff; --tertiary: #ffd58d; --tertiary-container: #765528; --on-tertiary-container: #fff4db; --surface: #1b1218; --surface-bright: #2c1d27; --surface-dim: #120b11; --surface-container-lowest: #24161f; --surface-container-low: #3b2531; --surface-container: #513745; --surface-container-high: #6b4c5c; --surface-container-highest: #896776; --outline: #b38898; --outline-variant: #8f6979; --on-surface: #fff0f5; --on-surface-variant: #dfb8c8; --on-background: #ffeef4; --eduloo-text-title: #fff0f5; --eduloo-text-body: #dfb8c8; --eduloo-text-muted: #b0899a; --eduloo-dark-surface-shell: color-mix( in srgb, var(--surface-container-low) 88%, var(--surface) 12% ); --eduloo-dark-surface-card: color-mix( in srgb, var(--surface-container-high) 84%, var(--primary-container) 16% ); --eduloo-dark-surface-panel: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-dark-border-subtle: rgba(255, 255, 255, 0.08); --eduloo-dark-border-strong: rgba(255, 255, 255, 0.12); --eduloo-dark-shadow-soft: 0 10px 20px -12px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-soft-sm: 0 8px 16px -12px rgba(0, 0, 0, 0.3); --eduloo-dark-focus-ring: #ff9ab0; --eduloo-accent-flashcards: #ffc56f; --eduloo-accent-quizzes: #ff7f98; --eduloo-accent-summaries: #7fd9cf; --eduloo-accent-podcasts: #c4a3ff; --eduloo-accent-documents: #93c4ff; --eduloo-progress-gradient: linear-gradient( 90deg, color-mix(in srgb, var(--primary) 90%, var(--on-primary-container) 10%) 0%, color-mix(in srgb, var(--primary) 58%, var(--secondary) 42%) 100% ); --eduloo-kicker-bg: color-mix( in srgb, var(--primary-container) 56%, var(--surface-container-highest) 44% ); --eduloo-kicker-border: color-mix( in srgb, var(--primary) 46%, var(--outline-variant) 54% ); --eduloo-input-inset-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-input-inset-border: color-mix( in srgb, var(--outline-variant) 60%, rgba(255, 255, 255, 0.18) 40% ); } body.theme-dark a:focus-visible, body.theme-dark button:focus-visible { outline: 2px solid var(--eduloo-dark-focus-ring) !important; outline-offset: 2px !important; } body.theme-dark input:focus-visible, body.theme-dark select:focus-visible, body.theme-dark textarea:focus-visible { outline: none !important; } body.theme-dark { --surface: #1b1218; --surface-bright: #2e1f29; --surface-dim: #120b10; --surface-container-lowest: #291922; --surface-container-low: #3a2530; --surface-container: #4d3440; --surface-container-high: #664a59; --surface-container-highest: #826170; --outline: #b78c9c; --outline-variant: #8d6878; --on-surface: #fff0f5; --on-surface-variant: #d4b0c0; --on-background: #fff1f6; --eduloo-text-title: #fff0f5; --eduloo-text-body: #d4b0c0; --eduloo-text-muted: #a68898; --eduloo-dark-surface-shell: color-mix( in srgb, var(--surface-container-low) 88%, var(--surface) 12% ); --eduloo-dark-surface-card: color-mix( in srgb, var(--surface-container-high) 84%, var(--primary-container) 16% ); --eduloo-dark-surface-panel: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-dark-border-subtle: rgba(255, 255, 255, 0.08); --eduloo-dark-border-strong: rgba(255, 255, 255, 0.12); --eduloo-dark-shadow-soft: 0 10px 20px -12px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-soft-sm: 0 8px 16px -12px rgba(0, 0, 0, 0.3); --eduloo-dark-focus-ring: #ff9db3; --eduloo-accent-flashcards: #f59e0b; --eduloo-accent-quizzes: #f43f5e; --eduloo-accent-summaries: #14b8a6; --eduloo-accent-podcasts: #a78bfa; --eduloo-accent-documents: #38bdf8; --eduloo-progress-gradient: linear-gradient(90deg, #ff7f98 0%, #8ec9ff 100%); --eduloo-kicker-bg: color-mix( in srgb, var(--primary-container) 60%, var(--surface-container-highest) 40% ); --eduloo-kicker-border: color-mix( in srgb, var(--primary) 48%, var(--outline-variant) 52% ); --eduloo-input-inset-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-input-inset-border: color-mix( in srgb, var(--outline-variant) 60%, rgba(255, 255, 255, 0.18) 40% ); --eduloo-input-unified-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-input-unified-bg-hover: color-mix( in srgb, var(--surface-container-low) 84%, var(--surface-container) 16% ); --eduloo-input-unified-bg-focus: color-mix( in srgb, var(--surface-container-low) 80%, var(--primary-container) 20% ); --eduloo-input-unified-border: color-mix( in srgb, var(--outline-variant) 60%, rgba(255, 255, 255, 0.18) 40% ); --eduloo-input-unified-border-hover: color-mix( in srgb, var(--outline-variant) 42%, var(--primary) 58% ); --eduloo-input-unified-border-focus: color-mix( in srgb, var(--primary) 58%, var(--outline-variant) 42% ); --eduloo-input-unified-ring: color-mix(in srgb, var(--primary) 24%, transparent); } body.theme-dark { --eduloo-dark-elev-shell: color-mix( in srgb, var(--surface-container-low) 90%, var(--surface) 10% ); --eduloo-dark-elev-card: color-mix( in srgb, var(--surface-container-high) 82%, var(--primary-container) 18% ); --eduloo-dark-elev-panel: color-mix( in srgb, var(--surface-container-highest) 80%, var(--surface-container-high) 20% ); --eduloo-dark-elev-inset: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-dark-border-subtle: color-mix( in srgb, var(--outline-variant) 66%, rgba(255, 255, 255, 0.18) 34% ); --eduloo-dark-border-strong: color-mix( in srgb, var(--outline-variant) 54%, rgba(255, 255, 255, 0.24) 46% ); --eduloo-dark-border-accent: color-mix( in srgb, var(--primary) 58%, var(--outline-variant) 42% ); --eduloo-dark-shadow-soft: 0 10px 20px -14px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-float: 0 14px 24px -16px rgba(0, 0, 0, 0.38); --eduloo-input-unified-bg: var(--eduloo-dark-elev-inset); --eduloo-input-unified-bg-hover: color-mix( in srgb, var(--eduloo-dark-elev-inset) 82%, var(--surface-container) 18% ); --eduloo-input-unified-bg-focus: color-mix( in srgb, var(--eduloo-dark-elev-inset) 78%, var(--primary-container) 22% ); --eduloo-input-unified-border: var(--eduloo-dark-border-subtle); --eduloo-input-unified-border-hover: color-mix( in srgb, var(--eduloo-dark-border-subtle) 58%, var(--primary) 42% ); --eduloo-input-unified-border-focus: var(--eduloo-dark-border-accent); --eduloo-input-unified-ring: color-mix(in srgb, var(--primary) 28%, transparent); --eduloo-ui-soft-btn-bg: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-ui-soft-btn-bg-hover: color-mix( in srgb, var(--surface-container-highest) 66%, var(--primary-container) 34% ); --eduloo-ui-soft-btn-border: var(--eduloo-dark-border-strong); --eduloo-ui-soft-btn-text: var(--eduloo-text-title); --eduloo-ui-primary-btn-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ); --eduloo-ui-primary-btn-border: color-mix( in srgb, var(--primary) 68%, rgba(255, 255, 255, 0.3) 32% ); --eduloo-ui-primary-btn-shadow: 0 12px 20px -12px color-mix(in srgb, var(--primary) 34%, transparent); } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']), body.theme-dark textarea, body.theme-dark select, body.theme-dark .custom-dropdown-trigger, body.theme-dark .search-field__input, body.theme-dark .st-search-input { background: var(--eduloo-input-unified-bg) !important; border: 1px solid var(--eduloo-input-unified-border) !important; color: var(--eduloo-text-title) !important; outline: none !important; box-shadow: none !important; } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']):hover, body.theme-dark textarea:hover, body.theme-dark select:hover, body.theme-dark .custom-dropdown-trigger:hover:not(:disabled), body.theme-dark .search-field__input:hover:not(:disabled), body.theme-dark .st-search-input:hover:not(:disabled) { background: var(--eduloo-input-unified-bg-hover) !important; border-color: var(--eduloo-input-unified-border-hover) !important; } body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']):focus, body.theme-dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']):focus-visible, body.theme-dark textarea:focus, body.theme-dark textarea:focus-visible, body.theme-dark select:focus, body.theme-dark select:focus-visible, body.theme-dark .custom-dropdown.open .custom-dropdown-trigger, body.theme-dark .custom-dropdown-trigger:focus, body.theme-dark .custom-dropdown-trigger:focus-visible, body.theme-dark .search-field__input:focus, body.theme-dark .search-field__input:focus-visible, body.theme-dark .st-search-input:focus, body.theme-dark .st-search-input:focus-visible { background: var(--eduloo-input-unified-bg-focus) !important; border-color: var(--eduloo-input-unified-border-focus) !important; outline: none !important; box-shadow: 0 0 0 2px var(--eduloo-input-unified-ring) !important; } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder, body.theme-dark .search-field__input::placeholder, body.theme-dark .st-search-input::placeholder { color: var(--eduloo-text-muted) !important; } .card .fas, .card .fab, .card .far { color: var(--eduloo-text-title) !important; } :root { --eduloo-ts-top: calc(var(--navbar-offset, 60px) + 22px); --eduloo-ts-right: 14px; --eduloo-ts-shell-padding: 3px; --eduloo-ts-shell-radius: 999px; --eduloo-ts-size: 34px; --eduloo-ts-icon-size: 14px; --eduloo-ts-text-size: 12px; --eduloo-ts-border: color-mix(in srgb, var(--outline-variant) 44%, transparent); --eduloo-ts-border-strong: color-mix(in srgb, var(--outline) 62%, transparent); --eduloo-ts-shell-bg: color-mix(in srgb, var(--surface) 86%, transparent); --eduloo-ts-shell-shadow: 0 14px 24px -18px color-mix(in srgb, var(--on-surface) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-bright) 72%, transparent); --eduloo-ts-btn-bg: color-mix(in srgb, var(--surface-container-low) 84%, transparent); --eduloo-ts-btn-bg-hover: color-mix(in srgb, var(--surface-container) 82%, transparent); --eduloo-ts-btn-fg: var(--on-surface-variant); --eduloo-ts-btn-fg-strong: var(--on-surface); --eduloo-ts-btn-active: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 90%, transparent) 0%, color-mix(in srgb, var(--primary-container) 84%, transparent) 56%, color-mix(in srgb, var(--secondary-container) 78%, transparent) 100% ); --eduloo-ts-btn-active-shadow: 0 14px 24px -18px color-mix(in srgb, var(--primary) 54%, transparent); --eduloo-ts-focus: color-mix(in srgb, var(--secondary-container) 62%, transparent); --eduloo-pomo-shell-bg: color-mix(in srgb, var(--surface) 84%, transparent); --eduloo-pomo-shell-border: color-mix(in srgb, var(--primary-container) 36%, transparent); --eduloo-pomo-shell-shadow: 0 18px 28px -20px color-mix(in srgb, var(--on-surface) 38%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-bright) 68%, transparent); --eduloo-pomo-main-bg: linear-gradient( 138deg, color-mix(in srgb, var(--primary-container) 54%, var(--surface-container-lowest) 46%) 0%, color-mix(in srgb, var(--secondary-container) 38%, var(--surface-container-lowest) 62%) 100% ); --eduloo-pomo-main-hover: linear-gradient( 138deg, color-mix(in srgb, var(--primary-container) 64%, var(--surface-container-lowest) 36%) 0%, color-mix(in srgb, var(--secondary-container) 44%, var(--surface-container-lowest) 56%) 100% ); --eduloo-pomo-main-text: color-mix(in srgb, var(--on-primary-container) 80%, var(--on-surface) 20%); --eduloo-pomo-main-border: color-mix(in srgb, var(--primary) 34%, transparent); --eduloo-pomo-main-shadow: 0 12px 22px -16px color-mix(in srgb, var(--primary) 46%, transparent); --eduloo-pomo-action-bg: color-mix(in srgb, var(--surface-container-low) 88%, transparent); --eduloo-pomo-action-hover: color-mix(in srgb, var(--surface-container) 78%, transparent); --eduloo-pomo-action-text: var(--on-surface-variant); --eduloo-pomo-action-border: color-mix(in srgb, var(--outline-variant) 44%, transparent); --eduloo-pomo-focus: color-mix(in srgb, var(--primary-container) 58%, transparent); --eduloo-pomo-live-dot: color-mix(in srgb, var(--tertiary) 72%, var(--error) 28%); } body.theme-dark { --eduloo-ts-border: color-mix(in srgb, var(--outline-variant) 68%, transparent); --eduloo-ts-border-strong: color-mix(in srgb, var(--outline) 82%, transparent); --eduloo-ts-shell-bg: color-mix(in srgb, var(--surface-container-low) 82%, transparent); --eduloo-ts-shell-shadow: 0 16px 28px -18px color-mix(in srgb, black 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-bright) 18%, transparent); --eduloo-ts-btn-bg: color-mix(in srgb, var(--surface-container) 80%, transparent); --eduloo-ts-btn-bg-hover: color-mix(in srgb, var(--surface-container-high) 74%, transparent); --eduloo-ts-btn-fg: var(--on-surface-variant); --eduloo-ts-btn-fg-strong: var(--on-surface); --eduloo-ts-btn-active: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 84%, var(--surface-container-low) 16%) 0%, color-mix(in srgb, var(--primary-container) 80%, var(--primary) 20%) 56%, color-mix(in srgb, var(--secondary) 48%, var(--surface-container-high) 52%) 100% ); --eduloo-ts-btn-active-shadow: 0 16px 28px -20px color-mix(in srgb, var(--primary) 44%, black 56%); --eduloo-ts-focus: color-mix(in srgb, var(--secondary-container) 54%, transparent); --eduloo-pomo-shell-bg: color-mix(in srgb, var(--surface-container-high) 80%, transparent); --eduloo-pomo-shell-border: color-mix(in srgb, var(--primary-container) 44%, transparent); --eduloo-pomo-shell-shadow: 0 22px 32px -22px color-mix(in srgb, black 76%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-bright) 14%, transparent); --eduloo-pomo-main-bg: linear-gradient( 138deg, color-mix(in srgb, var(--primary-container) 62%, var(--surface-container-highest) 38%) 0%, color-mix(in srgb, var(--secondary-container) 42%, var(--surface-container-highest) 58%) 100% ); --eduloo-pomo-main-hover: linear-gradient( 138deg, color-mix(in srgb, var(--primary-container) 70%, var(--surface-container-highest) 30%) 0%, color-mix(in srgb, var(--secondary-container) 50%, var(--surface-container-highest) 50%) 100% ); --eduloo-pomo-main-text: color-mix(in srgb, var(--on-primary-container) 86%, var(--on-surface) 14%); --eduloo-pomo-main-border: color-mix(in srgb, var(--primary) 42%, transparent); --eduloo-pomo-main-shadow: 0 14px 24px -18px color-mix(in srgb, var(--primary) 48%, transparent); --eduloo-pomo-action-bg: color-mix(in srgb, var(--surface-container-high) 78%, transparent); --eduloo-pomo-action-hover: color-mix(in srgb, var(--surface-container-highest) 76%, transparent); --eduloo-pomo-action-text: color-mix(in srgb, var(--on-surface-variant) 88%, var(--primary-container) 12%); --eduloo-pomo-action-border: color-mix(in srgb, var(--outline-variant) 54%, transparent); --eduloo-pomo-focus: color-mix(in srgb, var(--primary-container) 64%, transparent); --eduloo-pomo-live-dot: color-mix(in srgb, var(--tertiary) 62%, var(--error) 38%); } body .theme-switcher { position: fixed !important; top: var(--eduloo-ts-top) !important; right: var(--eduloo-ts-right) !important; z-index: 20000 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: var(--eduloo-ts-shell-padding) !important; border-radius: var(--eduloo-ts-shell-radius) !important; border: 1px solid var(--eduloo-ts-border) !important; background: var(--eduloo-ts-shell-bg) !important; backdrop-filter: blur(14px) !important; box-shadow: var(--eduloo-ts-shell-shadow) !important; overflow: hidden !important; } body .theme-switcher::before { content: '' !important; position: absolute !important; inset: 1px !important; border-radius: var(--eduloo-ts-shell-radius) !important; background: linear-gradient( 135deg, color-mix(in srgb, var(--surface-bright) 60%, transparent) 0%, color-mix(in srgb, var(--surface-bright) 10%, transparent) 46%, color-mix(in srgb, var(--secondary-container) 24%, transparent) 100% ) !important; opacity: 0.9 !important; pointer-events: none !important; } body .theme-toggle-button { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: var(--eduloo-ts-size) !important; height: var(--eduloo-ts-size) !important; min-width: var(--eduloo-ts-size) !important; min-height: var(--eduloo-ts-size) !important; margin: 0 !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid var(--eduloo-ts-border) !important; background: var(--eduloo-ts-btn-bg) !important; color: var(--eduloo-ts-btn-fg) !important; box-shadow: none !important; cursor: pointer !important; transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease !important; } body .theme-toggle-button:hover { background: var(--eduloo-ts-btn-bg-hover) !important; border-color: var(--eduloo-ts-border-strong) !important; color: var(--eduloo-ts-btn-fg-strong) !important; transform: translateY(-1px) !important; } body .theme-toggle-button:active { transform: translateY(0) scale(0.98) !important; } body .theme-toggle-button:focus-visible { outline: 2px solid var(--eduloo-ts-focus) !important; outline-offset: 2px !important; } body.theme-light .theme-toggle-button { background: var(--eduloo-ts-btn-active) !important; border-color: color-mix(in srgb, var(--primary-container) 58%, transparent) !important; color: var(--on-primary) !important; box-shadow: var(--eduloo-ts-btn-active-shadow) !important; } body.theme-dark .theme-toggle-button { background: var(--eduloo-ts-btn-active) !important; border-color: color-mix(in srgb, var(--primary-container) 52%, transparent) !important; color: var(--on-primary) !important; box-shadow: var(--eduloo-ts-btn-active-shadow) !important; } body .theme-toggle-button .theme-icon { display: inline-block !important; line-height: 1 !important; font-size: var(--eduloo-ts-icon-size) !important; } body .theme-toggle-button .theme-icon.fa-moon { display: none !important; } body .theme-toggle-button .theme-icon.fa-sun { display: inline-block !important; } body.theme-dark .theme-toggle-button .theme-icon.fa-moon { display: inline-block !important; color: #ddafc3 !important; } body.theme-dark .theme-toggle-button .theme-icon.fa-sun { display: none !important; } body .theme-toggle-button .theme-icon.fa-sun { color: color-mix(in srgb, var(--on-primary) 92%, var(--tertiary-container) 8%) !important; } body .theme-toggle-button .theme-icon.fa-moon { color: color-mix(in srgb, var(--on-primary) 90%, var(--secondary-container) 10%) !important; } body .mobile-theme-switcher, body .theme-switcher-mobile { display: none !important; } @media (max-width: 750px) { body .theme-switcher { display: none !important; } body .mobile-theme-switcher { display: block !important; margin-top: 10px !important; padding: 0 16px !important; } body .theme-switcher-mobile { display: block !important; width: 100% !important; } body .theme-toggle-button-mobile, body #theme-toggle-mobile { width: 100% !important; min-height: 40px !important; padding: 8px 12px !important; border-radius: 14px !important; border: 1px solid var(--eduloo-ts-border) !important; background: color-mix(in srgb, var(--surface-container-low) 84%, transparent) !important; color: var(--eduloo-ts-btn-fg-strong) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: var(--eduloo-ts-text-size) !important; font-weight: 700 !important; line-height: 1.3 !important; transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease !important; } body .theme-toggle-button-mobile:hover, body #theme-toggle-mobile:hover { background: color-mix(in srgb, var(--surface-container) 84%, transparent) !important; border-color: var(--eduloo-ts-border-strong) !important; color: var(--primary) !important; transform: translateY(-1px) !important; } body .theme-toggle-button-mobile:active, body #theme-toggle-mobile:active { transform: translateY(0) scale(0.99) !important; } body .theme-toggle-button-mobile:focus-visible, body #theme-toggle-mobile:focus-visible { outline: 2px solid var(--eduloo-ts-focus) !important; outline-offset: 2px !important; } body .theme-toggle-button-mobile .theme-icon, body #theme-toggle-mobile .theme-icon { font-size: 13px !important; line-height: 1 !important; } body .theme-toggle-button-mobile .theme-icon.fa-moon, body #theme-toggle-mobile .theme-icon.fa-moon { display: none !important; } body.theme-dark .theme-toggle-button-mobile .theme-icon.fa-moon, body.theme-dark #theme-toggle-mobile .theme-icon.fa-moon { display: inline-block !important; } body.theme-dark .theme-toggle-button-mobile .theme-icon.fa-sun, body.theme-dark #theme-toggle-mobile .theme-icon.fa-sun { display: none !important; } } @media (min-width: 751px) { body .mobile-theme-switcher, body .theme-switcher-mobile, body .theme-toggle-button-mobile, body #theme-toggle-mobile, body #theme-toggle-navbar, body .theme-toggle-mobile { display: none !important; } } @media (prefers-reduced-motion: reduce) { body .theme-toggle-button, body .theme-toggle-button-mobile, body #theme-toggle-mobile { transition: none !important; } } /* ── floating pomodoro button (below theme-switcher) ── */ body .st-floating-pomodoro { position: fixed !important; top: calc(var(--eduloo-ts-top) + var(--eduloo-ts-size) + var(--eduloo-ts-shell-padding) * 2 + 2px + 10px) !important; right: var(--eduloo-ts-right) !important; z-index: 20000 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important; padding: 4px !important; border-radius: 16px !important; border: 1px solid var(--eduloo-pomo-shell-border) !important; background: var(--eduloo-pomo-shell-bg) !important; backdrop-filter: blur(14px) !important; box-shadow: var(--eduloo-pomo-shell-shadow) !important; overflow: visible !important; cursor: pointer !important; transition: padding-right 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important; } body .st-floating-pomodoro:hover, body .st-floating-pomodoro:focus-within { border-color: color-mix(in srgb, var(--eduloo-pomo-shell-border) 72%, var(--primary) 28%) !important; background: color-mix(in srgb, var(--eduloo-pomo-shell-bg) 88%, var(--surface-bright) 12%) !important; box-shadow: 0 20px 30px -22px color-mix(in srgb, var(--primary) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-bright) 54%, transparent) !important; } body .st-floating-pomodoro::before { content: '' !important; position: absolute !important; inset: 1px !important; border-radius: 14px !important; background: linear-gradient( 138deg, color-mix(in srgb, var(--surface-bright) 58%, transparent) 0%, color-mix(in srgb, var(--surface-bright) 10%, transparent) 54%, color-mix(in srgb, var(--primary-container) 22%, transparent) 100% ) !important; opacity: 0.92 !important; pointer-events: none !important; } body .st-floating-pomodoro::after { content: '' !important; position: absolute !important; top: 8px !important; right: 8px !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; background: var(--eduloo-pomo-live-dot) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--eduloo-pomo-live-dot) 26%, transparent) !important; opacity: 0 !important; transform: scale(0.75) !important; pointer-events: none !important; transition: opacity 220ms ease, transform 220ms ease !important; } body .st-floating-pomodoro.st-navbar-pomodoro-shell--active::after { opacity: 1 !important; transform: scale(1) !important; } body .st-floating-pomodoro-btn { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: var(--eduloo-ts-size) !important; height: var(--eduloo-ts-size) !important; min-width: var(--eduloo-ts-size) !important; min-height: var(--eduloo-ts-size) !important; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; border: 1px solid var(--eduloo-pomo-main-border) !important; background: var(--eduloo-pomo-main-bg) !important; color: var(--eduloo-pomo-main-text) !important; box-shadow: var(--eduloo-pomo-main-shadow) !important; cursor: pointer !important; text-decoration: none !important; overflow: hidden !important; transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease !important; } body .st-floating-pomodoro .st-floating-pomodoro-btn.tooltip-wrapper, body .st-floating-pomodoro .st-floating-pomodoro-btn.tooltip-wrapper[data-tooltip-no-icon], body .st-floating-pomodoro .st-floating-pomodoro-btn.tooltip-wrapper.tooltip-initialized, body .st-floating-pomodoro .st-floating-pomodoro-btn.tooltip-wrapper.tooltip-initialized[data-tooltip-no-icon] { cursor: pointer !important; } body .st-floating-pomodoro-btn:hover { background: linear-gradient( 142deg, color-mix(in srgb, var(--primary-container) 68%, var(--surface-container-lowest) 32%) 0%, color-mix(in srgb, var(--secondary-container) 52%, var(--surface-container-lowest) 48%) 100% ) !important; border-color: color-mix(in srgb, var(--primary) 54%, var(--eduloo-pomo-main-border) 46%) !important; color: color-mix(in srgb, var(--eduloo-pomo-main-text) 72%, var(--on-surface) 28%) !important; box-shadow: 0 20px 32px -22px color-mix(in srgb, var(--primary) 64%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary-container) 52%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-bright) 58%, transparent) !important; text-decoration: none !important; } body .st-floating-pomodoro .st-floating-pomodoro-btn.tooltip-wrapper:hover, body .st-floating-pomodoro .st-floating-pomodoro-btn.tooltip-wrapper.tooltip-initialized:hover { background: linear-gradient( 142deg, color-mix(in srgb, var(--primary-container) 68%, var(--surface-container-lowest) 32%) 0%, color-mix(in srgb, var(--secondary-container) 52%, var(--surface-container-lowest) 48%) 100% ) !important; border-color: color-mix(in srgb, var(--primary) 54%, var(--eduloo-pomo-main-border) 46%) !important; color: color-mix(in srgb, var(--eduloo-pomo-main-text) 72%, var(--on-surface) 28%) !important; box-shadow: 0 20px 32px -22px color-mix(in srgb, var(--primary) 64%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary-container) 52%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-bright) 58%, transparent) !important; } body .st-floating-pomodoro-btn:active { transform: none !important; } body .st-floating-pomodoro-btn:focus-visible { outline: 2px solid var(--eduloo-pomo-focus) !important; outline-offset: 2px !important; } body .st-floating-pomodoro-btn .st-navbar-pomodoro-btn__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; line-height: 1 !important; } body .st-floating-pomodoro-btn .st-navbar-pomodoro-btn__label { display: none !important; white-space: nowrap !important; line-height: 1 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.1px !important; } body .st-floating-pomodoro.st-navbar-pomodoro-shell--active { padding-right: 5px !important; } body .st-floating-pomodoro.st-navbar-pomodoro-shell--active .st-floating-pomodoro-btn { width: auto !important; min-width: 112px !important; padding: 0 12px !important; } body .st-floating-pomodoro.st-navbar-pomodoro-shell--active .st-navbar-pomodoro-btn__label { display: inline-block !important; } body .st-floating-pomodoro .st-navbar-pomodoro-action { position: relative !important; top: auto !important; right: auto !important; z-index: 2 !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; display: none !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; border: 1px solid var(--eduloo-pomo-action-border) !important; background: var(--eduloo-pomo-action-bg) !important; color: var(--eduloo-pomo-action-text) !important; box-shadow: none !important; cursor: pointer !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; font-size: 11px !important; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important; } body .st-floating-pomodoro .st-navbar-pomodoro-action:hover { background: var(--eduloo-pomo-action-hover) !important; border-color: color-mix(in srgb, var(--eduloo-pomo-action-border) 74%, var(--primary) 26%) !important; color: color-mix(in srgb, var(--eduloo-pomo-action-text) 74%, var(--on-surface) 26%) !important; transform: translateY(-1px) !important; } body .st-floating-pomodoro .st-navbar-pomodoro-action:disabled { opacity: 0.38 !important; cursor: default !important; pointer-events: none !important; transform: none !important; } body .st-floating-pomodoro.st-navbar-pomodoro-shell--active.st-navbar-pomodoro-shell--expanded .st-navbar-pomodoro-action, body .st-floating-pomodoro.st-navbar-pomodoro-shell--active:hover .st-navbar-pomodoro-action, body .st-floating-pomodoro.st-navbar-pomodoro-shell--active:focus-within .st-navbar-pomodoro-action { display: inline-flex !important; } body .st-floating-pomodoro .st-navbar-pomodoro-btn--paused .st-navbar-pomodoro-btn__label { animation: st-navbar-pomodoro-paused-blink 1.2s ease-in-out infinite !important; } body .st-floating-pomodoro .st-navbar-pomodoro-btn--alert .st-navbar-pomodoro-btn__label { animation: st-navbar-pomodoro-paused-blink 0.7s ease-in-out infinite !important; } @media (max-width: 750px) { body .st-floating-pomodoro { display: none !important; } } @media (prefers-reduced-motion: reduce) { body .st-floating-pomodoro, body .st-floating-pomodoro::after, body .st-floating-pomodoro-btn, body .st-floating-pomodoro .st-navbar-pomodoro-action { transition: none !important; animation: none !important; } } body:has(.st-floating-pomodoro) .design-helper { top: calc(var(--eduloo-ts-top) + (var(--eduloo-ts-size) + var(--eduloo-ts-shell-padding) * 2 + 2px) * 2 + 20px) !important; } body:has(.st-floating-pomodoro) .design-helper-window { top: calc(var(--eduloo-ts-top) + (var(--eduloo-ts-size) + var(--eduloo-ts-shell-padding) * 2 + 2px) * 2 + 20px + 50px) !important; }