#app{font-family:Montserrat-Regular,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#212121;font-size:14px;background-color:#e2e6ee}#app,body{height:100%}header{width:100%}a{color:#212121}html{height:100%}.ps__rail-y{background-color:#fff!important}.ps__rail-y,.ps__thumb-y{width:6px!important}:root,:root[data-theme=dark]{color-scheme:dark;--color-canvas:#08090a;--color-shell:#0f1011;--color-surface:#151619;--color-surface-raised:#1b1d21;--color-surface-hover:#222429;--color-overlay:rgba(0,0,0,.72);--color-text:#f7f8f8;--color-text-secondary:#d2d6de;--color-text-muted:#a5abb5;--color-text-disabled:#7d838d;--color-accent:#7170ff;--color-accent-strong:#5e6ad2;--color-accent-hover:#828fff;--color-success:#31c48d;--color-warning:#f4b740;--color-danger:#f87171;--color-info:#60a5fa;--color-border:hsla(0,0%,100%,.09);--color-border-subtle:hsla(0,0%,100%,.055);--color-focus:rgba(130,143,255,.48);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--shadow-card:0 1px 0 hsla(0,0%,100%,.03) inset,0 10px 32px rgba(0,0,0,.18);--shadow-dialog:0 24px 80px rgba(0,0,0,.52),0 0 0 1px hsla(0,0%,100%,.08);--header-height:64px;--nav-height:56px;--content-max:1920px}:root[data-theme=light]{color-scheme:light;--color-canvas:#f4f5f7;--color-shell:hsla(0,0%,100%,.92);--color-surface:#fff;--color-surface-raised:#fff;--color-surface-hover:#f0f1f4;--color-overlay:rgba(15,18,28,.5);--color-text:#16181d;--color-text-secondary:#343943;--color-text-muted:#59616d;--color-text-disabled:#747c88;--color-accent:#5b5bd6;--color-accent-strong:#4f46c8;--color-accent-hover:#4444b8;--color-success:#138a61;--color-warning:#a96800;--color-danger:#c33e48;--color-info:#2563b9;--color-border:rgba(20,24,33,.13);--color-border-subtle:rgba(20,24,33,.075);--color-focus:rgba(91,91,214,.28);--shadow-card:0 1px 2px rgba(15,18,28,.04),0 12px 30px rgba(15,18,28,.06);--shadow-dialog:0 24px 70px rgba(15,18,28,.22),0 0 0 1px rgba(15,18,28,.08)}*,:after,:before{box-sizing:border-box}#app,body,html{min-height:100%}html{background:var(--color-canvas)}body{margin:0;overflow-x:hidden;background:radial-gradient(circle at 12% -10%,rgba(113,112,255,.13),transparent 30rem),var(--color-canvas);color:var(--color-text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-feature-settings:"cv01","ss03";font-size:14px;line-height:1.5;text-rendering:optimizeLegibility}#app{background:transparent!important;color:var(--color-text)!important;text-align:left!important}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}[tabindex],a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}:focus{outline:none}:focus-visible{outline:none!important;outline-offset:0!important;box-shadow:none!important}::-moz-selection{background:rgba(113,112,255,.35);color:var(--color-text)}::selection{background:rgba(113,112,255,.35);color:var(--color-text)}*{scrollbar-color:var(--color-surface-hover) transparent;scrollbar-width:thin}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-surface-hover);border-radius:var(--radius-pill)}#app .app-header,#app>header{position:sticky;top:0;z-index:300;height:var(--header-height);margin:0!important;background:var(--color-shell)!important;border-bottom:1px solid var(--color-border-subtle);backdrop-filter:blur(20px) saturate(140%)}#app #lmsHeader{width:min(100%,var(--content-max))!important;height:100%!important;margin:0 auto!important;padding:0 var(--space-6);display:flex;align-items:center;justify-content:space-between}#app .brand{display:inline-flex;align-items:center;gap:11px;min-width:0}#app .brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;font-size:16px;font-weight:590;background:linear-gradient(145deg,#8a89ff,#5353c8);box-shadow:0 8px 24px rgba(94,106,210,.28),inset 0 1px hsla(0,0%,100%,.22)}#app .brand-copy,#app .user-copy{display:grid;line-height:1.15}#app .brand-copy strong,#app .user-copy strong{color:var(--color-text);font-weight:590;letter-spacing:-.16px}#app .brand-copy small,#app .user-copy small{color:var(--color-text-muted);font-size:11px;margin-top:3px}#app #lmsHeader .block{display:flex;align-items:center;gap:var(--space-2)}#app .block-user{display:flex;align-items:center;gap:10px;margin-right:var(--space-2)}#app .avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-surface-raised);border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:11px;font-weight:590}#app .icon-button{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:hsla(0,0%,100%,.025);color:var(--color-text-secondary);cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}#app .icon-button:hover{background:var(--color-surface-hover);color:var(--color-text);border-color:var(--color-border)}#app .icon-button:active{transform:translateY(1px)}#app #home{width:100%!important;max-width:var(--content-max);min-height:calc(100vh - var(--header-height));height:auto!important;margin:0 auto!important;display:block!important}#app #navigation{width:100%!important;height:var(--nav-height)!important;position:sticky;top:var(--header-height);z-index:250;overflow:hidden;border-radius:0!important;background:var(--color-shell)!important;border-bottom:1px solid var(--color-border-subtle);backdrop-filter:blur(20px) saturate(140%)}#app #navigation .navigation-scroll{height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}#app #navigation .navigation-scroll::-webkit-scrollbar{display:none}#app #navigation .navigation-scroll>.ps__rail-x{display:none!important}#app #navigation .section-list{min-width:-moz-max-content;min-width:max-content;height:100%;margin:0 auto!important;padding:8px var(--space-6)!important;list-style:none}#app #navigation .section-list,#app #navigation .section-list>li{display:flex;align-items:center;gap:var(--space-1)}#app #navigation .section,#app #navigation .section-active{border-radius:var(--radius-md)!important;background:transparent!important}#app #navigation .section-container{min-height:38px;margin:0!important;padding:0 13px!important;display:flex;align-items:center;gap:9px;border:0!important;border-radius:var(--radius-md);color:var(--color-text-muted);font-size:13px;font-weight:510;white-space:nowrap;transition:background .16s ease,color .16s ease}#app #navigation .section-container span{margin:0!important;font-weight:510!important}#app #navigation .section:hover .section-container{background:var(--color-surface-hover);color:var(--color-text-secondary)}#app #navigation .section-active .section-container{background:var(--color-surface-raised);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-border)}#app #navigation .section-container i{width:15px;text-align:center;color:var(--color-text-muted)}#app #navigation .section-active .section-container i{color:var(--color-accent-hover)}#app #navigation .sub-section-container{display:flex!important;align-items:center;gap:2px;margin:0 0 0 2px!important;padding:3px!important;background:hsla(0,0%,100%,.025)!important;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md)!important}#app #navigation .sub-section-list{margin:0!important;padding:0!important;list-style:none}#app #navigation .sub-section{padding:0!important}#app #navigation .sub-section span{display:block;padding:7px 10px!important;border-radius:7px!important;color:var(--color-text-muted);font-size:12px;font-weight:510;white-space:nowrap}#app #navigation .sub-section a.router-link-active span,#app #navigation .sub-section span:hover{color:var(--color-text);background:var(--color-surface-hover)!important}#app #home>.content{width:100%!important;min-width:0;height:auto!important;min-height:calc(100vh - var(--header-height) - var(--nav-height));margin:0!important;padding:var(--space-6)!important;overflow:visible!important;border-radius:0!important;background:transparent!important;color:var(--color-text);font-size:13px!important}#app #emails,#app #messages,#app #questions,#app #settings,#app .box-panel,#app .container-content,#app .container-email,#app .container-form,#app .contract-container,#app .lecture-block,#app .nav-container,#app .panel-container,#app .table,#app .task-block,#app .task-container{background:var(--color-surface)!important;color:var(--color-text);border:1px solid var(--color-border-subtle)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-card)}#app .container-title,#app .lecture-title,#app .question-title,#app .recipients-title,#app .row-title,#app .task-title,#app .title,#app .title-1,#app .title-2,#app h1,#app h2,#app h3{color:var(--color-text)!important;letter-spacing:-.25px}#app .container-title,#app .title{font-weight:590!important}#app .row-detail-title,#app .sent_at,#app .text-info{color:var(--color-text-muted)!important}#app .row-header,#app .table-header{background:var(--color-surface-raised)!important;color:var(--color-text-secondary)!important;border-color:var(--color-border)!important;font-size:11px!important;font-weight:590!important;letter-spacing:.035em;text-transform:uppercase}#app .emails-list,#app .messages-container,#app .table-body{background:transparent!important}#app .change-container,#app .contact,#app .dialog,#app .email,#app .row-panel,#app .table-body .row,#app .upload,#app .user-container{color:var(--color-text-secondary)!important;background:transparent!important;border-color:var(--color-border-subtle)!important;transition:background .14s ease}#app .dialog:hover,#app .email:hover,#app .row-panel:hover,#app .table-body .row:hover,#app .user-container:hover{background:var(--color-surface-hover)!important}#app .row-content,#app .row-content-html,#app .row-detail{color:var(--color-text-secondary)!important}#app .col-link{color:var(--color-accent-hover)!important}#app .fa-check,#app .fa-circle-check{color:var(--color-success)!important}#app .fa-trash-can,#app .fa-xmark,#app .remove{color:var(--color-danger)!important}#app .multiselect__tags,#app .ql-container,#app .ql-toolbar,#app input:not([type=checkbox]):not([type=radio]),#app select,#app textarea{color:var(--color-text)!important;-webkit-text-fill-color:var(--color-text)!important;background:hsla(0,0%,100%,.025)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-md)!important}#app input:not([type=checkbox]):not([type=radio]),#app select{min-height:42px;padding:0 12px}#app textarea{min-height:96px;padding:11px 12px;resize:vertical}#app input::-moz-placeholder,#app textarea::-moz-placeholder{color:var(--color-text-disabled)!important;-webkit-text-fill-color:var(--color-text-disabled)!important}#app input::placeholder,#app textarea::placeholder{color:var(--color-text-disabled)!important;-webkit-text-fill-color:var(--color-text-disabled)!important}#app input:disabled,#app select:disabled,#app textarea:disabled{opacity:.58;cursor:not-allowed}#app input[type=checkbox],#app input[type=radio]{accent-color:var(--color-accent);width:17px;height:17px}#app .checkbox-panel,#app .field,#app .input-panel,#app .select-panel{color:var(--color-text-secondary)!important}#app .alert-container,#app .error,#app .errors-container,#app .fa-error{color:var(--color-danger)!important}#app .ql-toolbar{border-radius:var(--radius-md) var(--radius-md) 0 0!important}#app .ql-container{border-radius:0 0 var(--radius-md) var(--radius-md)!important}#app .ql-stroke{stroke:var(--color-text-muted)!important}#app .ql-fill{fill:var(--color-text-muted)!important}#app .ql-editor,#app .ql-picker{color:var(--color-text)!important}#app .ql-editor{-webkit-text-fill-color:currentColor!important}#app .ql-editor [style*="color: oklch"],#app .ql-editor [style*="color: var("]{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}#app .ql-toolbar button{width:30px!important;height:28px!important;min-height:0!important;padding:4px!important;background:transparent!important;border:0!important}#app .btn,#app .btn-add-file,#app .btn-save,#app .btn-send,#app .lms-btn,#app .login-btn,#app button:not(.icon-button):not(.ql-formats button){min-height:38px;border:1px solid var(--color-border)!important;border-radius:var(--radius-md)!important;background:var(--color-surface-raised)!important;color:var(--color-text-secondary)!important;font-weight:510!important;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}#app .btn-add-file:hover,#app .btn:hover,#app button:not(.icon-button):hover{background:var(--color-surface-hover)!important;color:var(--color-text)!important}#app .btn-save,#app .btn-send,#app .lms-btn,#app .login-btn{color:#fff!important;background:var(--color-accent-strong)!important;border-color:transparent!important;box-shadow:0 8px 24px rgba(94,106,210,.22)}#app .btn-save:hover,#app .btn-send:hover,#app .lms-btn:hover,#app .login-btn:hover{background:var(--color-accent-hover)!important}#app .btn:disabled,#app button:disabled{opacity:.5;cursor:not-allowed;transform:none}#app .modal-overlay{position:fixed!important;inset:0!important;z-index:800!important;background:var(--color-overlay)!important;backdrop-filter:blur(5px)}#app .modal{position:fixed!important;z-index:810!important;max-width:min(1100px,calc(100vw - 32px))!important;max-height:calc(100vh - 32px)!important;overflow:auto;color:var(--color-text)!important;background:var(--color-surface-raised)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-dialog)!important}#app .modal-body,#app .modal-content,#app .modal-header{color:var(--color-text)!important;background:transparent!important;border-color:var(--color-border-subtle)!important}#app .close-btn{color:var(--color-text-muted)!important;background:transparent!important}#app .close-btn:hover{color:var(--color-text)!important}#app .modal:has(.compose-shell){width:min(843px,calc(100vw - 32px))!important;height:min(544px,calc(100vh - 32px))!important;max-width:none!important;max-height:none!important;padding:0!important;overflow:hidden!important;background:transparent!important;border:0!important;box-shadow:none!important}#app .modal:has(.recipients-container){overflow:hidden!important}#app .modal:has(.recipients-container) .modal-content{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;padding:0!important;box-sizing:border-box;overflow:hidden!important}#app .modal:has(.recipients-container) .select-panel option{color:var(--color-text)!important;-webkit-text-fill-color:var(--color-text)!important;background:var(--color-surface-raised)!important}#app .modal:has(.recipients-container) .select-panel option:checked{color:#fff!important;-webkit-text-fill-color:#fff!important;background:var(--color-accent-strong)!important}:root[data-theme=dark] #app .modal:has(.recipients-container) .select-panel{color-scheme:dark}:root[data-theme=light] #app .modal:has(.recipients-container) .select-panel{color-scheme:light}#app .modal:has(.recipients-container) .recipient-card{max-width:100%;color:var(--color-text)!important;-webkit-text-fill-color:var(--color-text)!important;overflow-wrap:anywhere}#app .modal:has(.compose-shell) .compose-close{width:28px!important;height:28px!important;min-height:28px!important;border:0!important;background:transparent!important;color:var(--color-text-muted)!important}#app .modal:has(.compose-shell) .compose-close:hover{background:var(--color-surface-hover)!important;color:var(--color-text)!important}#app .modal:has(.compose-shell) .compose-editor .ql-toolbar button{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;padding:3px!important}#app .modal:has(.compose-shell) .compose-subject{height:40px!important;min-height:40px!important;padding-block:0!important}#app .modal:has(.compose-shell) .compose-action{min-height:40px!important;height:40px!important;padding:0 8px!important;border-radius:7px!important;font-size:11px!important;font-weight:600!important}#app .modal:has(.compose-shell) .compose-test .btn-test{min-height:32px!important;height:32px!important}#app .modal:has(.compose-shell) .compose-action-primary{color:#fff!important;background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important}#app .modal:has(.compose-shell) .compose-action-primary:hover{color:#fff!important;background:var(--color-accent-hover)!important;border-color:var(--color-accent-hover)!important}#app .modal:has(.compose-shell) .attachment-dropzone{background:var(--color-surface)!important;border-style:dashed!important}#app .modal:has(.compose-shell) .attachment-dropzone:hover{background:var(--color-accent-soft)!important;border-color:var(--color-accent)!important}#app #emails,#app #messages{min-height:calc(100vh - var(--header-height) - var(--nav-height) - 48px);overflow:hidden}#app #navEmails,#app .dialogs-list,#app .nav-container{background:var(--color-shell)!important;border-color:var(--color-border-subtle)!important}#app .letter-message-container,#app .message{max-width:min(72%,720px);color:var(--color-text-secondary)!important;background:var(--color-surface-raised)!important;border:1px solid var(--color-border-subtle)!important;border-radius:16px 16px 16px 4px!important;box-shadow:0 8px 22px rgba(0,0,0,.12)}#app .message-me,#app .reply-container .message{margin-left:auto;background:rgba(94,106,210,.22)!important;border-color:rgba(130,143,255,.3)!important;border-radius:16px 16px 4px 16px!important}#app .reply-container,#app .send-message-container{background:var(--color-shell)!important;border-color:var(--color-border-subtle)!important}#app .recipient-container{background:var(--color-surface)!important;color:var(--color-text-secondary)!important;border-color:var(--color-border-subtle)!important}#app .contact,#app .lecture-block,#app .question-container,#app .task-block,#app .upload{padding:var(--space-5);border-radius:var(--radius-lg)!important}#app .content-container,#app .contract,#app .lecture-content,#app .task-content{color:var(--color-text-secondary)!important}#app .answer-container{background:var(--color-surface-raised)!important;border:1px solid var(--color-border-subtle)!important;border-radius:var(--radius-md)!important}#app .btn-complete{color:var(--color-success)!important;border-color:rgba(49,196,141,.28)!important}#app .download-file,#app .download-file-read,#app .file-container{background:var(--color-surface-raised)!important;color:var(--color-text-secondary)!important;border:1px solid var(--color-border-subtle)!important;border-radius:var(--radius-md)!important}#app #lms-form,#app #login{min-height:100vh!important;width:100%!important;background:radial-gradient(circle at 50% 0,rgba(113,112,255,.2),transparent 35rem),linear-gradient(180deg,#0b0c12,var(--color-canvas))!important}#app #lms-form .container-lms-form,#app #login .container-login{min-height:100vh;padding:var(--space-6)!important}#app #lms-form .lms-form,#app #login .login-form{width:min(440px,100%)!important;padding:34px!important;color:var(--color-text)!important;background:rgba(21,22,25,.92)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-dialog)!important;backdrop-filter:blur(22px)}#app #lms-form .lms-form-title,#app #login .login-form-title{margin:0 0 28px!important;color:var(--color-text)!important;font-family:inherit!important;font-size:26px!important;font-weight:590!important;letter-spacing:-.6px}#app #login .wrap-input{margin-bottom:14px!important}#app #login .input{width:100%!important;height:48px!important;padding:0 15px 0 44px!important;font-family:inherit!important;border-radius:var(--radius-md)!important}#app #login .symbol-input{width:44px!important;padding:0!important;justify-content:center;color:var(--color-text-muted)!important}#app #login .focus-input{display:none!important}#app #login .login-btn{height:48px!important;margin-top:6px!important;border-radius:var(--radius-md)!important;font-family:inherit!important;overflow:hidden}#app #login .login-btn:before{display:none!important}#app #login .alert-container{margin:0 0 14px!important;padding:10px 12px;border-radius:var(--radius-md);background:hsla(0,91%,71%,.09);font-family:inherit!important}#app #login .password-btn{color:var(--color-text-muted)!important;font-family:inherit!important}#app .badge,#app [class*=status]{border-radius:var(--radius-pill);font-weight:590}#app .passed,#app .success{color:var(--color-success)!important}#app .pending,#app .warning{color:var(--color-warning)!important}#app .danger,#app .failed{color:var(--color-danger)!important}.runtime-empty-state{min-width:100%!important;padding:48px 24px!important;display:grid!important;justify-items:center;gap:6px;color:var(--color-text-secondary);text-align:center}.runtime-empty-state:before{content:"◇";display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:var(--radius-lg);font-size:22px}.runtime-empty-state strong{color:var(--color-text-primary);font-size:15px}.runtime-empty-state span{max-width:320px;font-size:13px}.request-status{position:relative;z-index:1200}.request-progress{position:fixed;inset:0 0 auto;height:3px;overflow:hidden;background:color-mix(in srgb,var(--color-accent) 20%,transparent)}.request-progress span{display:block;width:36%;height:100%;background:var(--color-accent);animation:request-progress 1s ease-in-out infinite}.request-error{position:fixed;right:20px;bottom:20px;width:min(460px,calc(100vw - 32px));display:flex;align-items:center;gap:14px;padding:14px 16px;color:var(--color-text-primary);background:var(--color-surface-raised);border:1px solid var(--color-danger);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:left}.request-error>div{flex:1;display:grid;gap:3px}.request-error span{color:var(--color-text-secondary);font-size:13px}@keyframes request-progress{0%{transform:translateX(-110%)}to{transform:translateX(310%)}}.status-page{min-height:100dvh;display:grid;place-items:center;padding:var(--space-6);background:var(--color-canvas)}.status-card{width:min(560px,100%);padding:clamp(28px,6vw,56px);text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.status-code{display:inline-block;color:var(--color-accent);font-size:13px;font-weight:700;letter-spacing:.16em}.status-card h1{margin:12px 0;font-size:clamp(28px,5vw,42px)}.status-card p{margin:0 0 24px;color:var(--color-text-secondary)}.status-card .btn{display:inline-flex!important;text-decoration:none}#app #emails .email-container,#app #emails .email-container-read,#app #mailbox .email-container,#app #mailbox .email-container-read{background:var(--color-surface-elevated)!important;border-color:var(--color-border)!important}#app #emails .email-container span,#app #emails .group span,#app #emails .panel span,#app #mailbox .email-container span{color:var(--color-text-secondary)!important}#app #settings .title{background:var(--color-surface)!important}#app #settings .title,#app .signature-active{color:var(--color-text-primary)!important}#app .row-change{flex:0 0 76px!important;display:flex!important;align-items:center;justify-content:flex-end;gap:4px}#app .row-change>a,#app .row-change>i{width:32px!important;height:32px!important;min-width:32px!important;display:inline-flex!important;align-items:center;justify-content:center;margin:0!important;border-radius:var(--radius-sm)}#app .row-change>a:hover,#app .row-change>i:hover{background:var(--color-surface-hover)}#app .multiselect__tag{background:#075985!important;color:#fff!important}#app .multiselect__tag>span{color:#fff!important}#app #dashboard .container-content{min-width:0;overflow:hidden}#app #dashboard .navigation{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;padding:0 0 12px}#app #dashboard .dashboard-toolbar-actions,#app #dashboard .dashboard-toolbar-controls{display:flex;align-items:center;gap:6px;min-width:0}#app #dashboard .dashboard-toolbar-actions{flex:1 1 auto;overflow-x:auto}#app #dashboard .dashboard-toolbar-controls{flex:0 0 auto;margin-left:auto}#app #dashboard .navigation .btn{margin:0!important;flex:0 0 auto}#app #dashboard .data-grid-scroll{width:100%;max-width:100%;overflow-y:visible;overscroll-behavior-inline:contain}#app #dashboard .data-grid-scroll>.table-body,#app #dashboard .data-grid-scroll>.table-header{width:max(1645px,100%);min-width:1645px}#app #dashboard .row-body,#app #dashboard .row-header{display:grid;grid-template-columns:50px 150px 200px 96px 145px 110px 110px 120px 96px 96px 96px 96px 135px minmax(145px,1fr);width:100%;min-width:1645px}#app #dashboard .row-body>.col-id,#app #dashboard .row-body>.col-other,#app #dashboard .row-header>.col-id,#app #dashboard .row-header>.col-other{min-width:0;padding-inline:6px;box-sizing:border-box}#app #dashboard .row-body .range,#app #dashboard .row-body .range>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#app #dashboard .row-body .range>span{display:block}@media (max-width:1100px){#app #dashboard .navigation{flex-wrap:wrap}#app #dashboard .dashboard-toolbar-actions,#app #dashboard .dashboard-toolbar-controls{width:100%;flex:1 1 100%;overflow-x:auto}#app #dashboard .dashboard-toolbar-controls{margin-left:0;justify-content:flex-start}}#app #emails{width:100%;min-width:0;max-width:100%}#app #emails>#navEmails{flex:0 0 clamp(240px,22vw,320px);width:clamp(240px,22vw,320px);min-width:0}#app #emails>.container{width:auto!important;min-width:0;max-width:none;flex:1 1 auto}#app #emails .body-content,#app #emails .container-email,#app #emails .read-container{min-width:0;max-width:100%}#app .modal .modal-content{max-width:calc(100vw - 36px);max-height:calc(100vh - 36px)}#app #questions{min-width:0;max-width:100%}#app #questions .questions-content{width:auto!important;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:visible}@media (max-width:1024px){#app #lmsHeader,#app #navigation .section-list{padding-left:var(--space-4)!important;padding-right:var(--space-4)!important}#app #home>.content{padding:var(--space-4)!important}#app .letter-message-container,#app .message{max-width:84%}}@media (max-width:768px){:root{--header-height:58px;--nav-height:52px}#app #lmsHeader{padding:0 var(--space-3)!important}#app .block-user,#app .brand-copy small,#app .user-copy{display:none}#app #navigation .section-list{padding:6px var(--space-3)!important}#app #navigation .section-container{min-height:38px;padding:0 11px!important}#app #navigation .sub-section-container{display:none!important}#app #home>.content{padding:var(--space-3)!important}#app #dashboard .navigation{display:grid;grid-template-columns:minmax(0,1fr)}#app #dashboard .dashboard-toolbar-actions,#app #dashboard .dashboard-toolbar-controls{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;margin-left:0}#app #questions{display:block!important;height:auto!important}#app #questions .questions-content{width:100%!important;margin:12px 0 0!important}#app .modal{inset:8px!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;transform:none!important}#app #emails,#app #messages{min-height:calc(100vh - var(--header-height) - var(--nav-height) - 24px)}#app #emails{display:block!important;height:auto!important;overflow:visible!important}#app #emails>#navEmails{width:100%;max-width:100%;height:auto;max-height:220px;overflow:auto}#app #emails>.container{width:100%!important;margin:var(--space-3) 0 0!important}#app #emails .modal-content{width:calc(100vw - 32px)!important;height:calc(100vh - 32px)!important;overflow:auto}#app .letter-message-container,#app .message{max-width:92%}#app .table{overflow-x:auto}#app .table-body,#app .table-header{min-width:720px}#app #lms-form .lms-form,#app #login .login-form{padding:26px 20px!important}}@media (max-width:480px){#app .brand-copy strong{font-size:13px}#app .icon-button{width:36px;height:36px}#app #navigation .section-container span{display:none}#app #navigation .section-container{min-width:40px;justify-content:center}#app #navigation .section-container i{width:auto;font-size:15px}}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}#app .app-header #lmsHeader{gap:var(--space-2)}#app .app-header .block,#app .app-header .brand{flex:0 0 auto}#app .app-header #navigation{flex:1 1 auto;min-width:0;width:auto!important;height:100%!important;margin-left:var(--space-2);position:static;overflow:hidden;border:0;background:transparent!important;backdrop-filter:none}#app .app-header #navigation .navigation-scroll{height:100%;overflow-x:auto;overflow-y:hidden}#app .app-header #navigation .section-list{width:-moz-max-content;width:max-content;min-width:100%;justify-content:flex-start;padding:0!important}#app #home:has(#dashboard){min-height:calc(100vh - var(--header-height))}#app #home:has(#dashboard)>.content{height:calc(100vh - var(--header-height))!important;min-height:0;padding:0!important;overflow:hidden!important}#app #dashboard,#app #dashboard>.container-content{height:100%;min-height:0;overflow:hidden}#app #dashboard>.container-content{padding:0!important;display:flex;flex-direction:column;border-radius:0!important}#app #dashboard .dashboard-toolbar{flex:0 0 auto;margin:0;padding:8px 16px;background:var(--color-shell);border-bottom:1px solid var(--color-border-subtle);z-index:220}#app #dashboard .data-grid-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}#app #dashboard .table-header{flex:0 0 auto}#app #dashboard .table-body{flex:1 1 auto;min-height:0;overflow-x:visible;overflow-y:auto;overscroll-behavior:contain}#app #dashboard .row-body{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color-text);font-weight:500}#app #dashboard .row-body input,#app #dashboard .row-body textarea{-webkit-user-select:text;-moz-user-select:text;user-select:text}#app #dashboard .row-body .col-link{font-weight:650}#app #dashboard .row-body>.col-comment{padding-inline:0!important}#app #dashboard .row-body .col-comment input{width:100%;min-height:34px;height:34px;margin:0;box-sizing:border-box;border-radius:0!important;font-weight:500}#app #dashboard .dashboard-summary,#app #dashboard .dashboard-toolbar-controls label{font-size:11px;font-weight:600}#app #dashboard .dashboard-toolbar .btn{font-size:11px;font-weight:650!important}#app #dashboard .dashboard-toolbar-controls select{font-size:11px;font-weight:600}#app #dashboard .row-header{font-weight:650!important;letter-spacing:.025em}#app .app-header #navigation .section-container{color:var(--color-text-secondary)!important;font-weight:650!important}#app .app-header #navigation .section-container span{font-weight:650!important}#app .app-header #navigation .section-active .section-container{color:var(--color-text)!important}#app .app-header #navigation .sub-section span{color:var(--color-text-secondary);font-weight:620}#app .app-header #navigation .sub-section a.router-link-active span{color:var(--color-text)}#app #dashboard .row-body:focus{outline:none}#app #dashboard .row-body.is-row-selected{background:rgba(113,112,255,.08);outline:none;box-shadow:none}#app #dashboard .row-body:focus-visible:not(.is-row-selected){box-shadow:inset 0 0 0 1px var(--color-accent)}#app #dashboard .selection-toggle{width:28px;height:28px;display:grid;place-items:center;padding:0;color:var(--color-text-secondary);background:transparent;border:0;border-radius:var(--radius-sm);cursor:pointer}#app #dashboard .selection-toggle:hover{background:var(--color-surface-hover)}#app #dashboard .row-body,#app #dashboard .row-header{position:relative}#app #dashboard .row-body:after,#app #dashboard .row-header:after,#app #dashboard .row-header:before{content:"";position:absolute;left:0;right:0;height:1px;background:var(--color-border);z-index:2;pointer-events:none}#app #dashboard .row-header:before{top:0}#app #dashboard .row-body:after,#app #dashboard .row-header:after{bottom:0}#app #dashboard .row-body>.col-id,#app #dashboard .row-body>.col-other:not(:last-child),#app #dashboard .row-header>.col-id,#app #dashboard .row-header>.col-other:not(:last-child){border-right-color:var(--color-border)!important}#app #dashboard .row-header>.col-id,#app #dashboard .row-header>.col-other{display:flex;align-items:center;min-height:42px;padding:6px 8px}#app #dashboard .row-header>.lms-header-search-cell{padding:0!important}#app #dashboard .lms-header-search{width:100%;min-width:0;min-height:42px;height:42px;box-sizing:border-box;padding:3px 7px;color:var(--color-text)!important;-webkit-text-fill-color:var(--color-text)!important;caret-color:var(--color-accent-hover);background:var(--color-surface);border:0!important;border-radius:0!important;font-family:inherit!important;font-size:11px;font-weight:650;letter-spacing:.025em;text-transform:uppercase;transition:background .14s ease,border-color .14s ease}#app #dashboard .lms-header-search::-moz-placeholder{color:var(--color-text)!important;opacity:1}#app #dashboard .lms-header-search::placeholder{color:var(--color-text)!important;opacity:1}#app #dashboard .lms-header-search:hover{background:rgba(113,112,255,.09)!important;box-shadow:inset 0 0 0 1px rgba(113,112,255,.55)!important}#app #dashboard .lms-header-search:focus{box-shadow:inset 0 0 0 1px var(--color-border)!important}#app #dashboard .copyable-contact{cursor:copy}#app #dashboard .copyable-contact.contact-copied{background:rgba(49,196,141,.18)}#app #dashboard .copy-status{position:fixed;right:18px;bottom:18px;z-index:700;padding:8px 12px;color:#fff;background:var(--color-success);border-radius:var(--radius-pill);opacity:0;pointer-events:none}#app #dashboard .copy-status:not(:empty){opacity:1}@media (max-width:1100px){#app .app-header #lmsHeader{gap:var(--space-2)}#app .app-header #navigation .section-list{justify-content:flex-start}#app .app-header #navigation .sub-section-container{display:none!important}}@media (max-width:768px){#app .app-header .block-user,#app .app-header .brand-copy{display:none}#app #dashboard .dashboard-toolbar{padding:8px 10px}}.attachment-card[data-v-feba831e]{box-sizing:border-box;min-width:0;display:flex;align-items:center;gap:7px;border:1px solid var(--color-border,#dbe2ec);border-radius:11px;background:var(--color-surface,#fff);color:var(--color-text-primary,inherit);overflow:hidden}.attachment-action[data-v-feba831e]{min-width:0;flex:1;display:flex;align-items:center;gap:9px;padding:8px;border:0;background:transparent;color:inherit;text-align:left;font:inherit}.attachment-action[type=button][data-v-feba831e]{cursor:pointer}.attachment-action[type=button][data-v-feba831e]:hover{background:var(--color-surface-muted,#f3f6fa)}.attachment-action[data-v-feba831e]:focus-visible,.remove-file[data-v-feba831e]:focus-visible{outline:3px solid var(--color-focus,#4c7bd9);outline-offset:-2px}.file-icon[data-v-feba831e]{width:34px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;background:#e9eef7;color:#36527e}.file-icon strong[data-v-feba831e]{font-size:9px;letter-spacing:.03em}.file-details[data-v-feba831e]{min-width:0;display:grid;gap:2px}.file-name[data-v-feba831e]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}.file-size[data-v-feba831e]{color:var(--color-text-secondary,#69758b);font-size:10px}.remove-file[data-v-feba831e]{width:34px;align-self:stretch;border:0;border-left:1px solid var(--color-border,#dbe2ec);background:transparent;color:var(--color-text-secondary,#69758b);font-size:18px;cursor:pointer}.remove-file[data-v-feba831e]:hover{background:#fae6e6;color:#8b2c2c}.attachment-card[data-file-type=pdf] .file-icon[data-v-feba831e]{background:#fae6e6;color:#9b3030}.attachment-card[data-file-type=spreadsheet] .file-icon[data-v-feba831e]{background:#dff2e7;color:#286342}.attachment-card[data-file-type=image] .file-icon[data-v-feba831e]{background:#eee7fa;color:#624495}.attachment-card[data-file-type=archive] .file-icon[data-v-feba831e]{background:#fff0d9;color:#7c591d}
#app .attachment-card {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--chip-gap, 6px);
  overflow: hidden;
  border: 1px solid var(--color-border, #dbe2ec);
  border-radius: 11px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, inherit);
}

#app .attachment-action {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--chip-gap, 6px);
  padding: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}

#app .attachment-action[type="button"] {
  cursor: pointer;
}

#app .attachment-action[type="button"]:hover {
  background: var(--color-surface-muted, #f3f6fa);
}

#app .attachment-action:focus-visible {
  outline: 3px solid var(--color-focus, #4c7bd9);
  outline-offset: -2px;
}

#app .attachment-card .file-icon {
  width: 34px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e9eef7;
  color: #36527e;
}

#app .attachment-card .file-icon strong {
  font-size: 9px;
  letter-spacing: .03em;
}

#app .attachment-card .file-details {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#app .attachment-card .file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-meta, 11px);
  font-weight: 600;
}

#app .attachment-card .file-size {
  color: var(--color-text-secondary, #69758b);
  font-size: 10px;
}

#app .attachment-card .attachment-icon-action {
  margin-right: 8px !important;
}

#app .attachment-card .download-file {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  margin-right: 8px;
  border: 1px solid var(--color-border, #dbe2ec);
  border-radius: 9px;
  background: var(--color-surface-muted, #f3f6fa);
  color: var(--color-text-secondary, #69758b);
  cursor: pointer;
}

#app .attachment-card .download-file:hover {
  border-color: var(--color-focus, #4c7bd9);
  color: var(--color-focus, #4c7bd9);
}

#app .attachment-card .download-file svg,
#app .attachment-card .remove-file svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app .attachment-card .remove-file {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  margin-right: 8px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 8px;
  background: #fff;
  color: #596273;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

#app .attachment-card .remove-file:hover {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

#app .attachment-card[data-file-type="pdf"] .file-icon {
  background: #fae6e6;
  color: #9b3030;
}

#app .attachment-card[data-file-type="spreadsheet"] .file-icon {
  background: #dff2e7;
  color: #286342;
}

#app .attachment-card[data-file-type="image"] .file-icon {
  background: #eee7fa;
  color: #624495;
}

#app .attachment-card[data-file-type="archive"] .file-icon {
  background: #fff0d9;
  color: #7c591d;
}
#app #login {
  --admin-login-placeholder: #a5abb5;
  --admin-login-action-hover: #4f46c8;
}

:root[data-theme='light'] #app #login {
  --admin-login-placeholder: #59616d;
  --admin-login-action-hover: #3730a3;
  background: radial-gradient(circle at 50% 0, rgba(91, 91, 214, .12), transparent 35rem),
    linear-gradient(180deg, #fafafd, var(--color-canvas)) !important;
}

:root[data-theme='light'] #app #login .login-form {
  background: rgba(255, 255, 255, .96) !important;
}

#app #login .password-input {
  padding-right: 54px !important;
}

#app #login .input:focus {
  border-color: var(--color-accent-hover) !important;
  box-shadow: 0 0 0 3px var(--color-focus) !important;
}

#app #login .input::placeholder {
  color: var(--admin-login-placeholder) !important;
  -webkit-text-fill-color: var(--admin-login-placeholder) !important;
}

#app #login .password-toggle {
  position: absolute !important;
  z-index: 3;
  top: 50%;
  right: 7px;
  width: 36px;
  height: 36px;
  min-height: 36px !important;
  padding: 8px;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  transform: translateY(-50%);
}

#app #login .password-toggle:hover:not(:disabled) {
  color: var(--color-text) !important;
  transform: translateY(-50%);
}

#app #login .password-toggle:active:not(:disabled) {
  transform: translateY(-50%) scale(.94);
}

#app #login .password-toggle:focus-visible {
  outline: 2px solid var(--color-accent-hover) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 3px var(--color-focus) !important;
}

#app #login .password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app #login .remember-me {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -2px 0 12px;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

#app #login .remember-me.is-disabled {
  opacity: .6;
  cursor: default;
}

#app #login .remember-me input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

#app #login .remember-me input:focus-visible {
  outline: 2px solid var(--color-accent-hover) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px var(--color-focus) !important;
}

#app #login .two-factor-status {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, var(--color-border)) !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-raised)) !important;
  color: var(--color-text) !important;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
}

#app #login .two-factor-status strong {
  font-size: 13px;
  font-weight: 700;
}

#app #login .login-btn {
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

#app #login .login-btn:hover:not(:disabled) {
  background: var(--admin-login-action-hover) !important;
  box-shadow: 0 10px 28px rgba(94,106,210,.34) !important;
  transform: translateY(-1px);
}

#app #login .login-btn:active:not(:disabled) {
  box-shadow: 0 5px 16px rgba(94,106,210,.24) !important;
  transform: translateY(1px);
}

#app #login .login-btn:focus-visible {
  outline: 2px solid var(--color-accent-hover) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px var(--color-focus) !important;
}

#app #login .two-factor-reset {
  width: 100%;
  min-height: 32px !important;
  margin: -4px 0 12px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  cursor: pointer;
}

#app #login .two-factor-reset:hover:not(:disabled) {
  background: transparent !important;
  color: var(--color-text) !important;
}

#app #login .two-factor-reset:active:not(:disabled) {
  transform: translateY(1px);
}

#app #login .two-factor-reset:focus-visible {
  outline: 2px solid var(--color-accent-hover) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px var(--color-focus) !important;
}
/* Fixed assignment workspaces for tasks and lectures. */
#app #assignment-modal.assignment-modal--tasks,
#app #assignment-modal.assignment-modal--lectures {
  height: min(696px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
}

#app #assignment-modal.assignment-modal--tasks .assignment-column,
#app #assignment-modal.assignment-modal--lectures .assignment-column { min-height: 0; }
#app #assignment-modal.assignment-modal--tasks .item-list,
#app #assignment-modal.assignment-modal--lectures .item-list {
  min-height: 0;
  flex: 1 1 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

#app #assignment-modal .assignment-deadline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 22px 16px;
  padding: 13px 15px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  background: var(--color-surface);
}

#app #assignment-modal .assignment-deadline > div { min-width: 0; }
#app #assignment-modal .assignment-deadline label { color: var(--color-text); font-size: 12px; font-weight: 650; }
#app #assignment-modal .assignment-deadline p { margin: 3px 0 0; color: var(--color-text-muted); font-size: 10px; }
#app #assignment-modal .assignment-deadline input {
  width: min(260px, 48%);
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0 11px;
  color: var(--color-text);
  color-scheme: dark;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-shell);
}

:root[data-theme="light"] #app #assignment-modal .assignment-deadline input { color-scheme: light; }

/* Search is shared by Available and Already added task lists. */
#app #assignment-modal .assignment-search {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 4px 22px 6px;
}
#app #assignment-modal .assignment-search > label {
  color: var(--color-text-secondary, #343943);
  font-size: 12px;
  font-weight: 600;
}
#app #assignment-modal .assignment-search-control { min-width: 0; position: relative; }
#app #assignment-modal .assignment-search-control > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--color-text-muted, #59616d);
  font-size: 12px;
  pointer-events: none;
}
#app #assignment-modal .assignment-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 42px 0 38px;
  border: 1px solid var(--color-border, rgba(20,24,33,.13));
  border-radius: 10px;
  outline: 0;
  background: var(--color-shell, #f7f8fa);
  color: var(--color-text, #17233f);
  font: inherit;
  font-size: 13px;
}
#app #assignment-modal .assignment-search input::placeholder { color: var(--color-text-muted, #59616d); }
#app #assignment-modal .assignment-search input:focus {
  border-color: var(--color-accent, #5b5bd6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #5b5bd6) 16%, transparent);
}
#app #assignment-modal .assignment-search input::-webkit-search-cancel-button { display: none; }
#app #assignment-modal button.assignment-search-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  padding: 0 !important;
  transform: translateY(-50%);
  place-items: center;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--color-text-muted, #59616d) !important;
  cursor: pointer;
}
#app #assignment-modal button.assignment-search-clear:hover {
  background: var(--color-surface-hover, #f0f1f4) !important;
  color: var(--color-text, #17233f) !important;
}

/* Task type filters share the same alignment and control treatment as search. */
#app #assignment-modal .assignment-task-filters {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 22px 6px;
}
#app #assignment-modal .assignment-task-filters > span {
  color: var(--color-text-secondary, #343943);
  font-size: 12px;
  font-weight: 600;
}
#app #assignment-modal .assignment-task-filter-options {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#app #assignment-modal button.assignment-task-filter {
  min-height: 34px;
  padding: 0 12px !important;
  border: 1px solid var(--color-border, rgba(20,24,33,.13)) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--color-text-secondary, #343943) !important;
  font: inherit;
  font-size: 11px;
  font-weight: 600 !important;
  cursor: pointer;
}
#app #assignment-modal button.assignment-task-filter:not(.is-active):hover {
  border-color: color-mix(in srgb, var(--color-accent, #5b5bd6) 42%, var(--color-border, rgba(20,24,33,.13))) !important;
  background: var(--color-surface-hover, #f0f1f4) !important;
  color: var(--color-text, #17233f) !important;
}
#app #assignment-modal button.assignment-task-filter.is-active {
  border-color: var(--color-accent-strong, #4f46c8) !important;
  background: var(--color-accent-strong, #4f46c8) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent, #5b5bd6) 18%, transparent);
}
#app #assignment-modal button.assignment-task-filter:focus-visible {
  outline: 2px solid var(--color-accent, #5b5bd6) !important;
  outline-offset: 2px;
}

/* Keep task rows compact after this late-loaded production parity layer. */
#app #assignment-modal .item-list { gap: var(--list-row-gap, 8px); overflow-x: hidden; }
#app #assignment-modal button.item .available-item-content,
#app #assignment-modal .item.task-assignment-row .assigned-task-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--chip-gap, 6px);
  overflow: hidden;
}
#app #assignment-modal button.item .available-item-content { flex: 1 1 auto; }
#app #assignment-modal button.item .available-item-name,
#app #assignment-modal .item.task-assignment-row .assigned-task-name {
  min-width: 0;
  display: block;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app #assignment-modal .assignment-lecture-tag {
  flex: 0 0 auto;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--color-danger, #c33e48) 42%, var(--color-border, rgba(20,24,33,.13)));
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-danger, #c33e48) 16%, var(--color-surface-hover, #f0f1f4));
  color: color-mix(in srgb, var(--color-danger, #c33e48) 72%, var(--color-text, #17233f));
  font-size: 9px;
  font-weight: 680;
  line-height: 1.25;
  white-space: nowrap;
}
#app #assignment-modal button.item .item-selection-mark { flex: 0 0 auto; }
#app #assignment-modal .item.task-assignment-row {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  gap: var(--chip-gap, 6px);
  padding-block: 0;
  overflow: hidden;
  cursor: pointer;
}
#app #assignment-modal .item.task-assignment-row .assigned-task-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app #assignment-modal .item.task-assignment-row > .status-badge {
  width: max-content;
  max-width: 100%;
  height: auto;
  align-self: center;
  justify-self: start;
  display: inline-block;
  line-height: 1.5;
}
#app #assignment-modal .item.task-assignment-row > .assigned-task-content {
  height: auto;
  align-self: center;
  justify-self: stretch;
  line-height: 1.5;
}
#app #assignment-modal .item.task-assignment-row > .remove-task-assignment {
  align-self: center;
  justify-self: end;
  line-height: 1;
}
#app #assignment-modal .item.task-assignment-row > .remove-task-assignment i {
  display: block;
  line-height: 1;
}
#app #assignment-modal .item.lecture-assignment-row {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  gap: var(--chip-gap, 6px);
  padding-block: 0;
  overflow: hidden;
}
#app #assignment-modal .item.lecture-assignment-row .assigned-lecture-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app #assignment-modal .item.lecture-assignment-row > .status-badge {
  width: max-content;
  max-width: 100%;
  height: auto;
  align-self: center;
  justify-self: start;
  display: inline-block;
  line-height: 1.5;
}
#app #assignment-modal .item.lecture-assignment-row > .assigned-lecture-name {
  height: auto;
  align-self: center;
  justify-self: stretch;
  line-height: 1.5;
}
#app #assignment-modal .item.lecture-assignment-row > .remove-lecture-assignment {
  align-self: center;
  justify-self: end;
  line-height: 1;
}
#app #assignment-modal .item.lecture-assignment-row > .remove-lecture-assignment i {
  display: block;
  line-height: 1;
}
#app #assignment-modal button.remove-task-assignment:hover {
  border-color: var(--color-danger, #c33e48) !important;
  background: var(--color-danger, #c33e48) !important;
  color: #fff !important;
}
#app #assignment-modal button.remove-lecture-assignment:hover {
  border-color: var(--color-danger, #c33e48) !important;
  background: var(--color-danger, #c33e48) !important;
  color: #fff !important;
}
#app #assignment-modal button.remove-task-assignment:hover i,
#app #assignment-modal button.remove-lecture-assignment:hover i { color: #fff !important; }

@media (max-width: 720px) {
  #app #assignment-modal.assignment-modal--tasks,
  #app #assignment-modal.assignment-modal--lectures { height: 100%; max-height: 100dvh; }
  #app #assignment-modal.assignment-modal--tasks .assignment-column,
  #app #assignment-modal.assignment-modal--lectures .assignment-column { min-height: 240px; }
  #app #assignment-modal .assignment-deadline { align-items: stretch; flex-direction: column; margin: 0 16px 14px; gap: 10px; }
  #app #assignment-modal .assignment-deadline input { width: 100%; }
  #app #assignment-modal .assignment-search { grid-template-columns: minmax(0, 1fr); gap: 7px; margin: 4px 16px 6px; }
  #app #assignment-modal .assignment-task-filters { grid-template-columns: minmax(0, 1fr); gap: 7px; margin: 0 16px 6px; }
  #app #assignment-modal .item.task-assignment-row,
  #app #assignment-modal .item.lecture-assignment-row { padding-inline: 8px; }
}
/* Shared UI consistency contract. Loaded after page parity CSS in both apps. */
:root {
  --font-ui: Montserrat-Regular, Montserrat, sans-serif;
  --text-page-title: 24px;
  --text-page-title-line: 1.25;
  --text-dialog-title: 20px;
  --text-dialog-title-line: 1.3;
  --text-section-title: 13px;
  --text-section-title-line: 1.4;
  --text-body: 13px;
  --text-body-line: 1.5;
  --text-meta: 11px;
  --text-meta-line: 1.35;
  --text-badge: 11px;
  --text-badge-line: 1.1;
  --message-body-size: var(--text-body);
  --message-body-line: 1.45;
  --chip-gap: 6px;
  --list-row-gap: 8px;
  --icon-action-size: 32px;
  --icon-action-radius: 8px;
  --icon-action-icon-size: 16px;
  --control-transition: .16s ease;
}

html body,
html body #app,
html body #app button,
html body #app input,
html body #app textarea,
html body #app select {
  font-family: var(--font-ui) !important;
}

/* Teleported dialogs are mounted next to #app and must keep the same UI font. */
html body { font-family: var(--font-ui) !important; }

/* Keep the shared navigation horizontally scrollable on narrow screens without
   exposing PerfectScrollbar's rail across every student workspace. */
html body #app #navigation .navigation-scroll {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body #app #navigation .navigation-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html body #app #navigation .navigation-scroll > .ps__rail-x {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Semantic typography: equal roles have equal metrics in both panels. */
html body #app .tasks-page-title,
html body #app .library-heading h2,
html body #app .form-hero h1 {
  font-size: var(--text-page-title) !important;
  line-height: var(--text-page-title-line) !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
}

html body #app :is(.assignment-modal, .task-create-dialog, .task-edit-dialog, .tag-manager-dialog, .learning-modal) > header h2,
html body #app :is(.task-edit-dialog, .task-return-dialog, .task-accept-dialog) h3,
html body #app :is(.task-delete-dialog, .task-return-dialog) h2,
html body .task-discard-dialog h2,
html body #app .modal-header > .title,
html body #app .compose-title > span:last-child {
  font-size: var(--text-dialog-title) !important;
  line-height: var(--text-dialog-title-line) !important;
  font-weight: 650 !important;
}

html body #app :is(.collection-title strong, .resource-title strong, .task-summary h2, .lecture-title, .assigned-task-name, .available-item-name, .column-heading h3, .task-detail-section > h3, .task-section-heading strong, .task-edit-section-heading h4, .form-section h2, .project-identity h2, .row-title) {
  font-size: var(--text-section-title) !important;
  line-height: var(--text-section-title-line) !important;
  font-weight: 590 !important;
}

html body #app :is(.resource-copy > small, .collection-title small, .task-metadata, .task-resource-facts, .column-heading p, .form-section p, .learning-modal-item-copy small) {
  font-size: var(--text-meta) !important;
  line-height: var(--text-meta-line) !important;
  font-weight: 500 !important;
}

html body #app :is(.task-detail-description, .project-description, .lecture-content, .form-hero p) {
  font-size: var(--text-body) !important;
  line-height: var(--text-body-line) !important;
  font-weight: 400 !important;
}

html body #app :is(.status-badge, .task-status-badge, .resource-tag, .tag-filter) {
  font-size: var(--text-badge) !important;
  line-height: var(--text-badge-line) !important;
  font-weight: 650 !important;
}

/* Fixed spacing for repeated content and chip/status groups. */
html body #app :is(.task-list, .collection-track, .item-list, .task-edit-checklist, .task-edit-materials) {
  gap: var(--list-row-gap) !important;
}

html body #app :is(.learning-tag-toolbar, .resource-tags, .task-tag-options, .task-filters, .lecture-filters, .course-filters, .task-status-column, .lecture-status-column, .course-status-column, .tag-manager-actions) {
  gap: var(--chip-gap) !important;
}

/* Normal and system message content use the same font metrics. */
html body #app #messages .message-content,
html body #app #messages .message-content :is(p, li, blockquote),
html body #app #messages .composer .ql-editor,
html body #app #messages .task-notification-card,
html body #app #messages .task-notification-card h3,
html body #app #messages .task-notification-state,
html body #app #messages .task-notification-comment,
html body #app #messages .task-notification-changes,
html body #app #messages button.task-notification-open {
  font-family: var(--font-ui) !important;
  font-size: var(--message-body-size) !important;
  line-height: var(--message-body-line) !important;
}

html body #app #messages .task-notification-header,
html body #app #messages .message-system-label,
html body #app #messages .message-bubble time {
  font-family: var(--font-ui) !important;
}

/* A global request banner may sit above older modal layers; never let it expose background actions. */
html body:has([aria-modal="true"]) .request-status { pointer-events: none !important; }

/* Canonical edit/download/delete/view action. Close buttons remain separate. */
html body #app#app .action-icon-button,
html body #app#app #contract .action-icon-button,
html body #app .action-icon-button,
html body button.action-icon-button.action-icon-button {
  box-sizing: border-box !important;
  width: var(--icon-action-size) !important;
  height: var(--icon-action-size) !important;
  min-width: var(--icon-action-size) !important;
  min-height: var(--icon-action-size) !important;
  display: inline-grid !important;
  flex: 0 0 var(--icon-action-size) !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--icon-action-radius) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  opacity: 1;
  transition: background-color var(--control-transition), border-color var(--control-transition), color var(--control-transition), box-shadow var(--control-transition) !important;
  transform: none !important;
}

html body #app#app .action-icon-button svg,
html body button.action-icon-button.action-icon-button svg {
  width: var(--icon-action-icon-size) !important;
  height: var(--icon-action-icon-size) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none;
}

html body #app#app .action-icon-button .action-icon-spinner,
html body button.action-icon-button.action-icon-button .action-icon-spinner { animation: action-icon-spin .8s linear infinite; }

html body #app#app .action-icon-button:hover:not(:disabled):not([aria-disabled="true"]),
html body button.action-icon-button.action-icon-button:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border)) !important;
  background: var(--color-surface-hover) !important;
  color: var(--color-accent-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #app#app .action-icon-button.is-delete,
html body button.action-icon-button.action-icon-button.is-delete {
  border-color: color-mix(in srgb, var(--color-danger) 36%, var(--color-border)) !important;
  color: var(--color-danger) !important;
}

html body #app#app .action-icon-button.is-delete:hover:not(:disabled):not([aria-disabled="true"]),
html body button.action-icon-button.action-icon-button.is-delete:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--color-danger) !important;
  background: var(--color-danger) !important;
  color: #fff !important;
}

html body #app#app .action-icon-button:focus-visible,
html body button.action-icon-button.action-icon-button:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

html body #app#app .action-icon-button.is-delete:focus-visible,
html body button.action-icon-button.action-icon-button.is-delete:focus-visible { outline-color: var(--color-danger) !important; }
html body #app#app #learning .create-tag-action:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent) !important;
}
html body #app#app .action-icon-button:active:not(:disabled):not([aria-disabled="true"]),
html body button.action-icon-button.action-icon-button:active:not(:disabled):not([aria-disabled="true"]) { transform: none !important; }
html body #app#app .action-icon-button:disabled,
html body #app#app .action-icon-button[aria-disabled="true"],
html body button.action-icon-button.action-icon-button:disabled,
html body button.action-icon-button.action-icon-button[aria-disabled="true"] { cursor: not-allowed !important; opacity: .52; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html body #app#app .action-icon-button,
  html body button.action-icon-button.action-icon-button { transition: none !important; }
}

@keyframes action-icon-spin { to { transform: rotate(360deg); } }
/* Production-preserved dropdown styling. The parity build replaces the
   generated app stylesheet, so shared controls and Quill menus live here too. */
#app .app-select {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#app .app-select button.app-select-trigger {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 42px;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--color-border) !important;
  border-radius: 9px !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  font: 500 13px/1.45 var(--font-ui, Montserrat-Regular, Montserrat, sans-serif) !important;
  text-align: left;
  box-shadow: none !important;
  transform: none !important;
}

#app .app-select button.app-select-trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border)) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  transform: none !important;
}

#app .app-select button.app-select-trigger:focus-visible {
  border-color: var(--color-accent) !important;
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px var(--color-focus) !important;
}

#app .app-select.is-open button.app-select-trigger {
  border-color: var(--color-accent) !important;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)) !important;
  color: var(--color-accent-hover) !important;
  box-shadow: 0 0 0 3px var(--color-focus) !important;
}

#app .app-select.is-compact button.app-select-trigger {
  height: 38px;
  min-height: 38px;
  padding: 0 11px;
  font-size: 12px !important;
}

#app .app-select-value {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .app-select-chevron {
  width: 16px;
  display: grid;
  flex: 0 0 16px;
  place-items: center;
  justify-self: end;
  color: var(--color-text-muted);
  font-size: 11px;
  transition: transform var(--control-transition, .16s ease);
}

#app .app-select.is-open .app-select-chevron {
  transform: rotate(180deg);
}

body .app-select-menu {
  position: fixed;
  z-index: 1600;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 2px;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-dialog);
  font-family: var(--font-ui, Montserrat-Regular, Montserrat, sans-serif);
}

body .app-select-empty {
  display: grid;
  gap: 6px;
  padding: 12px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

body .app-select-empty strong {
  color: var(--color-text);
  font-weight: 650;
}

body .app-select-empty span {
  color: var(--color-text-muted);
}

body .app-select-empty:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: 7px;
}

body button.app-select-option {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  font: 500 13px/1.45 var(--font-ui, Montserrat-Regular, Montserrat, sans-serif) !important;
  text-align: left;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}

body .app-select-menu.is-compact button.app-select-option {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px !important;
}

body .app-select-option > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-select-option > i {
  width: 16px;
  justify-self: end;
  color: currentColor;
  font-size: 11px;
  text-align: center;
}

body button.app-select-option:hover:not(:disabled),
body button.app-select-option:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-raised)) !important;
  color: var(--color-accent-hover) !important;
  outline: 2px solid var(--color-accent) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  transform: none !important;
}

body button.app-select-option.is-selected {
  border: 1px solid color-mix(in srgb, var(--color-success) 45%, var(--color-border)) !important;
  background: color-mix(in srgb, var(--color-success) 11%, var(--color-surface-raised)) !important;
  color: var(--color-success) !important;
  font-weight: 650 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success) 10%, transparent) !important;
}

body button.app-select-option.is-selected:hover,
body button.app-select-option.is-selected:focus-visible {
  border-color: color-mix(in srgb, var(--color-success) 58%, var(--color-border)) !important;
  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface-raised)) !important;
  color: var(--color-success) !important;
  outline: 2px solid var(--color-success) !important;
  outline-offset: -2px !important;
}

#app .app-select-trigger:disabled,
body .app-select-option:disabled {
  opacity: .52;
  cursor: not-allowed;
}

#app .ql-picker-options {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface-raised) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: var(--shadow-dialog) !important;
}

#app .ql-picker-item {
  color: var(--color-text-secondary) !important;
}

#app .ql-picker-item:hover,
#app .ql-picker-item:focus,
#app .ql-picker-item.ql-selected {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-raised)) !important;
  color: var(--color-accent-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
  #app .app-select-chevron { transition: none; }
}
/* Canonical close control for every modal, form and full-screen workspace. */
:root,
:root[data-theme='dark'] {
  --modal-close-border: rgba(255, 255, 255, .09);
  --modal-close-color: #a5abb5;
  --modal-close-hover-background: #222429;
  --modal-close-hover-color: #f7f8f8;
  --modal-close-active-background: #292b31;
}

:root[data-theme='light'] {
  --modal-close-border: rgba(20, 24, 33, .13);
  --modal-close-color: #59616d;
  --modal-close-hover-background: #f0f1f4;
  --modal-close-hover-color: #16181d;
  --modal-close-active-background: #e7e9ed;
}

html body #app#app button.modal-close-button.modal-close-button,
html body #app #tasks button.modal-close-button.modal-close-button,
html body #app button.modal-close-button.modal-close-button,
html body button.modal-close-button.modal-close-button.modal-close-button.modal-close-button {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--modal-close-border) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--modal-close-color) !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

html body #app#app button.modal-close-button.modal-close-button:hover:not(:disabled),
html body #app #tasks button.modal-close-button.modal-close-button:hover:not(:disabled),
html body #app button.modal-close-button.modal-close-button:hover:not(:disabled),
html body button.modal-close-button.modal-close-button.modal-close-button.modal-close-button:hover:not(:disabled) {
  border-color: var(--modal-close-border) !important;
  background: var(--modal-close-hover-background) !important;
  color: var(--modal-close-hover-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #app#app button.modal-close-button.modal-close-button:active:not(:disabled),
html body #app #tasks button.modal-close-button.modal-close-button:active:not(:disabled),
html body #app button.modal-close-button.modal-close-button:active:not(:disabled),
html body button.modal-close-button.modal-close-button.modal-close-button.modal-close-button:active:not(:disabled) {
  background: var(--modal-close-active-background) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #app#app button.modal-close-button.modal-close-button:focus-visible,
html body #app #tasks button.modal-close-button.modal-close-button:focus-visible,
html body #app button.modal-close-button.modal-close-button:focus-visible,
html body button.modal-close-button.modal-close-button.modal-close-button.modal-close-button:focus-visible {
  outline: none !important;
  border-color: var(--color-accent, #7278ff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #7278ff) 24%, transparent) !important;
}

html body #app#app button.modal-close-button.modal-close-button:disabled,
html body #app #tasks button.modal-close-button.modal-close-button:disabled,
html body #app button.modal-close-button.modal-close-button:disabled,
html body button.modal-close-button.modal-close-button.modal-close-button.modal-close-button:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

html body #app#app .modal-close-button .modal-close-button__icon,
html body .modal-close-button.modal-close-button.modal-close-button .modal-close-button__icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #app#app button.modal-close-button.modal-close-button,
  html body #app #tasks button.modal-close-button.modal-close-button,
  html body #app button.modal-close-button.modal-close-button,
  html body button.modal-close-button.modal-close-button.modal-close-button.modal-close-button {
    transition: none !important;
  }
}

/* Conversation details is permanently visible on desktop, so its close control
   remains a mobile-only affordance while retaining the canonical appearance. */
html body #app#app #messages button.modal-close-button.details-close {
  display: none !important;
}

@media (max-width: 1200px) {
  html body #app#app #messages button.modal-close-button.details-close {
    display: grid !important;
  }
}