/* ========================================================================== FORM COMPONENTS Inputs,selects,textareas,checkboxes,radios,and form layout ========================================================================== */ /* ========================================================================== FORM LAYOUT ========================================================================== */ .form-group{margin-bottom:var(--spacing-4)}.form-row{display:flex;flex-wrap:wrap;gap:var(--spacing-4)}.form-row > *{flex:1 1 0;min-width:200px}/* Inline form */ .form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--spacing-3)}.form-inline .form-group{margin-bottom:0}/* ========================================================================== LABELS ========================================================================== */ .form-label{display:block;margin-bottom:var(--spacing-1-5);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text)}.form-label-required::after{content:" *";color:var(--color-error)}/* ========================================================================== TEXT INPUTS ========================================================================== */ .form-control{display:block;width:100%;padding:var(--spacing-2-5) var(--spacing-3);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-bg);background-clip:padding-box;border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md);transition:border-color var(--duration-150) var(--ease-in-out),box-shadow var(--duration-150) var(--ease-in-out);appearance:none}.form-control::placeholder{color:var(--color-text-light);opacity:1}.form-control:hover{border-color:var(--color-gray-400)}.form-control:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px var(--color-primary-100)}.form-control:disabled,.form-control[readonly]{background-color:var(--color-bg-muted);opacity:0.7;cursor:not-allowed}/* Input sizes */ .form-control-sm{padding:var(--spacing-1-5) var(--spacing-2-5);font-size:var(--font-size-sm);border-radius:var(--border-radius-base)}.form-control-lg{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-lg);border-radius:var(--border-radius-lg)}/* ========================================================================== INPUT STATES ========================================================================== */ /* Valid state */ .form-control.is-valid,.was-validated .form-control:valid{border-color:var(--color-success)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:var(--color-success);box-shadow:0 0 0 3px var(--color-success-100)}/* Invalid state */ .form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--color-error)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:var(--color-error);box-shadow:0 0 0 3px var(--color-error-100)}/* ========================================================================== TEXTAREA ========================================================================== */ textarea.form-control{min-height:120px;resize:vertical}textarea.form-control-sm{min-height:80px}textarea.form-control-lg{min-height:160px}/* No resize */ .form-control-noresize{resize:none}/* ========================================================================== SELECT ========================================================================== */ .form-select{display:block;width:100%;padding:var(--spacing-2-5) var(--spacing-10) var(--spacing-2-5) var(--spacing-3);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-bg);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right var(--spacing-3) center;background-size:1.25em 1.25em;border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md);transition:border-color var(--duration-150) var(--ease-in-out),box-shadow var(--duration-150) var(--ease-in-out);appearance:none;cursor:pointer}.form-select:hover{border-color:var(--color-gray-400)}.form-select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px var(--color-primary-100)}.form-select:disabled{background-color:var(--color-bg-muted);opacity:0.7;cursor:not-allowed}/* Select sizes */ .form-select-sm{padding:var(--spacing-1-5) var(--spacing-8) var(--spacing-1-5) var(--spacing-2-5);font-size:var(--font-size-sm);border-radius:var(--border-radius-base);background-position:right var(--spacing-2) center}.form-select-lg{padding:var(--spacing-3) var(--spacing-12) var(--spacing-3) var(--spacing-4);font-size:var(--font-size-lg);border-radius:var(--border-radius-lg);background-position:right var(--spacing-4) center}/* ========================================================================== CHECKBOX & RADIO ========================================================================== */ .form-check{display:flex;align-items:flex-start;gap:var(--spacing-2);min-height:1.5rem;margin-bottom:var(--spacing-2)}.form-check-input{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:0.125rem;background-color:var(--color-bg);background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid var(--color-border-strong);appearance:none;cursor:pointer;transition:background-color var(--duration-150) var(--ease-in-out),border-color var(--duration-150) var(--ease-in-out),box-shadow var(--duration-150) var(--ease-in-out)}.form-check-input[type="checkbox"]{border-radius:var(--border-radius-base)}.form-check-input[type="radio"]{border-radius:var(--border-radius-full)}.form-check-input:hover{border-color:var(--color-primary)}.form-check-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px var(--color-primary-100)}.form-check-input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.form-check-input[type="checkbox"]:checked{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e")}.form-check-input[type="radio"]:checked{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e")}.form-check-input:disabled{opacity:0.5;cursor:not-allowed}.form-check-input:disabled ~ .form-check-label{opacity:0.5;cursor:not-allowed}.form-check-label{font-size:var(--font-size-base);color:var(--color-text);cursor:pointer}/* Inline checkboxes/radios */ .form-check-inline{display:inline-flex;margin-right:var(--spacing-4)}/* ========================================================================== SWITCH / TOGGLE ========================================================================== */ .form-switch{display:flex;align-items:center;gap:var(--spacing-2)}.form-switch-input{position:relative;flex-shrink:0;width:2.75rem;height:1.5rem;background-color:var(--color-gray-300);border-radius:var(--border-radius-full);cursor:pointer;transition:background-color var(--duration-200) var(--ease-in-out);appearance:none}.form-switch-input::before{content:"";position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;background-color:var(--color-bg);border-radius:var(--border-radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-200) var(--ease-in-out)}.form-switch-input:checked{background-color:var(--color-primary)}.form-switch-input:checked::before{transform:translateX(1.25rem)}.form-switch-input:focus{outline:none;box-shadow:0 0 0 3px var(--color-primary-100)}.form-switch-input:disabled{opacity:0.5;cursor:not-allowed}.form-switch-label{font-size:var(--font-size-base);color:var(--color-text);cursor:pointer}/* ========================================================================== RANGE INPUT ========================================================================== */ .form-range{width:100%;height:1.5rem;padding:0;background-color:transparent;appearance:none;cursor:pointer}.form-range:focus{outline:none}.form-range::-webkit-slider-runnable-track{width:100%;height:0.5rem;background-color:var(--color-gray-200);border-radius:var(--border-radius-full)}.form-range::-webkit-slider-thumb{width:1.25rem;height:1.25rem;margin-top:-0.375rem;background-color:var(--color-primary);border:0;border-radius:var(--border-radius-full);appearance:none;transition:background-color var(--duration-150) var(--ease-in-out),transform var(--duration-150) var(--ease-in-out)}.form-range::-webkit-slider-thumb:hover{transform:scale(1.1)}.form-range::-moz-range-track{width:100%;height:0.5rem;background-color:var(--color-gray-200);border-radius:var(--border-radius-full)}.form-range::-moz-range-thumb{width:1.25rem;height:1.25rem;background-color:var(--color-primary);border:0;border-radius:var(--border-radius-full)}.form-range:disabled{opacity:0.5;cursor:not-allowed}/* ========================================================================== FILE INPUT ========================================================================== */ .form-file{display:block;width:100%}.form-file-input{position:relative;z-index:2;width:100%;height:calc(2.5rem + 2px);margin:0;opacity:0;cursor:pointer}.form-file-label{position:absolute;top:0;right:0;left:0;z-index:1;display:flex;height:calc(2.5rem + 2px);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md);background-color:var(--color-bg)}.form-file-text{display:flex;align-items:center;flex:1;padding:0 var(--spacing-3);overflow:hidden;font-size:var(--font-size-base);color:var(--color-text-light);text-overflow:ellipsis;white-space:nowrap}.form-file-button{display:flex;align-items:center;padding:0 var(--spacing-4);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text);background-color:var(--color-bg-muted);border-left:1px solid var(--color-border-strong);border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}/* Simpler file input styling */ input[type="file"].form-control{padding:var(--spacing-2)}input[type="file"].form-control::file-selector-button{padding:var(--spacing-1-5) var(--spacing-3);margin-right:var(--spacing-3);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);background-color:var(--color-bg-muted);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-base);cursor:pointer;transition:background-color var(--duration-150) var(--ease-in-out)}input[type="file"].form-control::file-selector-button:hover{background-color:var(--color-gray-200)}/* ========================================================================== INPUT GROUP ========================================================================== */ .input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group > .form-control,.input-group > .form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group > .form-control:not(:first-child),.input-group > .form-select:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group > .form-control:not(:last-child),.input-group > .form-select:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-text{display:flex;align-items:center;padding:var(--spacing-2-5) var(--spacing-3);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text);text-align:center;white-space:nowrap;background-color:var(--color-bg-muted);border:1px solid var(--color-border-strong)}.input-group-text:first-child{border-right:0;border-radius:var(--border-radius-md) 0 0 var(--border-radius-md)}.input-group-text:last-child{border-left:0;border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}/* Input group with button */ .input-group > .btn{position:relative;z-index:2}.input-group > .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group > .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}/* ========================================================================== HELP TEXT & FEEDBACK ========================================================================== */ .form-text{display:block;margin-top:var(--spacing-1);font-size:var(--font-size-sm);color:var(--color-text-muted)}.valid-feedback{display:none;margin-top:var(--spacing-1);font-size:var(--font-size-sm);color:var(--color-success)}.invalid-feedback{display:none;margin-top:var(--spacing-1);font-size:var(--font-size-sm);color:var(--color-error)}.is-valid ~ .valid-feedback,.was-validated:valid ~ .valid-feedback{display:block}.is-invalid ~ .invalid-feedback,.was-validated:invalid ~ .invalid-feedback{display:block}/* ========================================================================== FLOATING LABELS ========================================================================== */ .form-floating{position:relative}.form-floating > .form-control,.form-floating > .form-select{height:calc(3.5rem + 2px);padding:1.625rem var(--spacing-3) 0.625rem}.form-floating > .form-control::placeholder{color:transparent}.form-floating > label{position:absolute;top:0;left:0;width:100%;height:100%;padding:1rem var(--spacing-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity var(--duration-100) var(--ease-in-out),transform var(--duration-100) var(--ease-in-out);color:var(--color-text-muted)}.form-floating > .form-control:focus ~ label,.form-floating > .form-control:not(:placeholder-shown) ~ label,.form-floating > .form-select ~ label{opacity:0.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}/* ========================================================================== CARD COMPONENTS Cards,card groups,and card layouts ========================================================================== */ /* ========================================================================== BASE CARD ========================================================================== */ .card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:var(--color-bg);background-clip:border-box;border:1px solid var(--color-border);border-radius:var(--border-radius-lg)}/* ========================================================================== CARD PARTS ========================================================================== */ .card-header{padding:var(--spacing-4) var(--spacing-5);margin-bottom:0;background-color:var(--color-bg-subtle);border-bottom:1px solid var(--color-border)}.card-header:first-child{border-radius:calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px) 0 0}.card-body{flex:1 1 auto;padding:var(--spacing-5)}.card-footer{padding:var(--spacing-4) var(--spacing-5);background-color:var(--color-bg-subtle);border-top:1px solid var(--color-border)}.card-footer:last-child{border-radius:0 0 calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px)}/* ========================================================================== CARD CONTENT ========================================================================== */ .card-title{margin-bottom:var(--spacing-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.card-subtitle{margin-top:calc(var(--spacing-2) * -1);margin-bottom:var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-muted)}.card-text{color:var(--color-text)}.card-text:last-child{margin-bottom:0}.card-link{color:var(--color-link)}.card-link:hover{color:var(--color-link-hover)}.card-link + .card-link{margin-left:var(--spacing-4)}/* ========================================================================== CARD IMAGE ========================================================================== */ .card-img,.card-img-top,.card-img-bottom{width:100%;object-fit:cover}.card-img-top{border-top-left-radius:calc(var(--border-radius-lg) - 1px);border-top-right-radius:calc(var(--border-radius-lg) - 1px)}.card-img-bottom{border-bottom-left-radius:calc(var(--border-radius-lg) - 1px);border-bottom-right-radius:calc(var(--border-radius-lg) - 1px)}/* Card with image overlay */ .card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--spacing-5);border-radius:calc(var(--border-radius-lg) - 1px);background:linear-gradient(to top,var(--color-black-70) 0%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end}.card-img-overlay .card-title,.card-img-overlay .card-text{color:var(--color-text-inverse)}/* ========================================================================== CARD VARIANTS ========================================================================== */ /* Shadow variants */ .card-shadow{border:none;box-shadow:var(--shadow-base)}.card-shadow-md{border:none;box-shadow:var(--shadow-md)}.card-shadow-lg{border:none;box-shadow:var(--shadow-lg)}/* Hover effect */ .card-hover{transition:transform var(--duration-200) var(--ease-out),box-shadow var(--duration-200) var(--ease-out)}.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}/* Clickable card */ .card-clickable{cursor:pointer;transition:border-color var(--duration-150) var(--ease-in-out),box-shadow var(--duration-150) var(--ease-in-out)}.card-clickable:hover{border-color:var(--color-primary-300)}.card-clickable:focus-within{border-color:var(--color-primary);box-shadow:var(--focus-ring)}/* Card with stretch link */ .card-clickable .stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}/* Colored variants */ .card-primary{background-color:var(--color-primary-50);border-color:var(--color-primary-200)}.card-primary .card-header{background-color:var(--color-primary-100);border-color:var(--color-primary-200)}.card-secondary{background-color:var(--color-secondary-50);border-color:var(--color-secondary-200)}.card-success{background-color:var(--color-success-50);border-color:var(--color-success-200)}.card-error,.card-danger{background-color:var(--color-error-50);border-color:var(--color-error-200)}.card-warning{background-color:var(--color-warning-50);border-color:var(--color-warning-200)}.card-info{background-color:var(--color-info-50);border-color:var(--color-info-200)}/* ========================================================================== HORIZONTAL CARD ========================================================================== */ .card-horizontal{flex-direction:row}.card-horizontal .card-img,.card-horizontal .card-img-left{width:33.333%;min-width:150px;object-fit:cover;border-top-left-radius:calc(var(--border-radius-lg) - 1px);border-bottom-left-radius:calc(var(--border-radius-lg) - 1px);border-top-right-radius:0}.card-horizontal .card-img-right{width:33.333%;min-width:150px;object-fit:cover;border-top-right-radius:calc(var(--border-radius-lg) - 1px);border-bottom-right-radius:calc(var(--border-radius-lg) - 1px);border-bottom-left-radius:0}@media (max-width:639px){.card-horizontal{flex-direction:column}.card-horizontal .card-img,.card-horizontal .card-img-left,.card-horizontal .card-img-right{width:100%;border-radius:calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px) 0 0}}/* ========================================================================== CARD GROUP ========================================================================== */ .card-group{display:flex;flex-flow:row wrap}.card-group > .card{flex:1 0 0%;margin-bottom:0}.card-group > .card + .card{margin-left:0;border-left:0}.card-group > .card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group > .card:not(:first-child) .card-header,.card-group > .card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group > .card:not(:first-child) .card-footer,.card-group > .card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}.card-group > .card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group > .card:not(:last-child) .card-header,.card-group > .card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group > .card:not(:last-child) .card-footer,.card-group > .card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}@media (max-width:767px){.card-group{flex-direction:column}.card-group > .card{border-radius:var(--border-radius-lg)}.card-group > .card + .card{margin-top:var(--spacing-4);border-left:1px solid var(--color-border)}.card-group > .card .card-header,.card-group > .card .card-footer,.card-group > .card .card-img-top,.card-group > .card .card-img-bottom{border-radius:inherit}}/* ========================================================================== CARD DECK (equal height cards with gap) ========================================================================== */ .card-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-4)}.card-deck > .card{margin-bottom:0}/* ========================================================================== CARD SIZES ========================================================================== */ .card-sm .card-body{padding:var(--spacing-3)}.card-sm .card-header,.card-sm .card-footer{padding:var(--spacing-2) var(--spacing-3)}.card-lg .card-body{padding:var(--spacing-6) var(--spacing-8)}.card-lg .card-header,.card-lg .card-footer{padding:var(--spacing-4) var(--spacing-8)}/* ========================================================================== MODAL / DIALOG COMPONENTS Modal dialogs,overlays,and drawer components ========================================================================== */ /* ========================================================================== MODAL BACKDROP ========================================================================== */ .modal-backdrop{position:fixed;top:0;left:0;z-index:var(--z-modal-backdrop);width:100vw;height:100vh;background-color:var(--color-black-50);opacity:0;transition:opacity var(--duration-150) var(--ease-in-out)}.modal-backdrop.show{opacity:1}/* ========================================================================== MODAL ========================================================================== */ .modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal.show{display:block}.modal-dialog{position:relative;width:auto;margin:var(--spacing-4);pointer-events:none;transform:translateY(-50px);opacity:0;transition:transform var(--duration-200) var(--ease-out),opacity var(--duration-200) var(--ease-out)}.modal.show .modal-dialog{transform:translateY(0);opacity:1}@media (min-width:640px){.modal-dialog{max-width:500px;margin:var(--spacing-8) auto}}/* Modal sizes */ .modal-sm{max-width:300px}.modal-lg{max-width:800px}.modal-xl{max-width:1140px}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}/* Modal dialog centered */ .modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--spacing-8))}/* Modal dialog scrollable */ .modal-dialog-scrollable{height:calc(100% - var(--spacing-8))}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}/* ========================================================================== MODAL CONTENT ========================================================================== */ .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:var(--color-bg);background-clip:padding-box;border:1px solid var(--color-border);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-xl);outline:0}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--spacing-4) var(--spacing-6);border-bottom:1px solid var(--color-border);border-top-left-radius:calc(var(--border-radius-xl) - 1px);border-top-right-radius:calc(var(--border-radius-xl) - 1px)}.modal-title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}.modal-body{position:relative;flex:1 1 auto;padding:var(--spacing-6)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-border);border-bottom-right-radius:calc(var(--border-radius-xl) - 1px);border-bottom-left-radius:calc(var(--border-radius-xl) - 1px)}/* ========================================================================== MODAL CLOSE BUTTON ========================================================================== */ .modal-close,.btn-close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background-color:transparent;border:none;border-radius:var(--border-radius-md);cursor:pointer;opacity:0.5;transition:opacity var(--duration-150) var(--ease-in-out),background-color var(--duration-150) var(--ease-in-out)}.modal-close:hover,.btn-close:hover{opacity:1;background-color:var(--color-bg-muted)}.modal-close:focus,.btn-close:focus{outline:none;box-shadow:var(--focus-ring);opacity:1}.modal-close::before,.btn-close::before{content:"";width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:100%}/* ========================================================================== DRAWER (Side Panel) ========================================================================== */ .drawer{position:fixed;top:0;z-index:var(--z-modal);display:flex;flex-direction:column;width:100%;max-width:400px;height:100vh;background-color:var(--color-bg);box-shadow:var(--shadow-xl);transform:translateX(-100%);transition:transform var(--duration-300) var(--ease-out)}.drawer.show{transform:translateX(0)}/* Drawer from right */ .drawer-right{right:0;left:auto;transform:translateX(100%)}.drawer-right.show{transform:translateX(0)}/* Drawer from bottom */ .drawer-bottom{top:auto;bottom:0;left:0;width:100%;max-width:none;height:auto;max-height:90vh;border-radius:var(--border-radius-xl) var(--border-radius-xl) 0 0;transform:translateY(100%)}.drawer-bottom.show{transform:translateY(0)}/* Drawer parts */ .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4) var(--spacing-6);border-bottom:1px solid var(--color-border)}.drawer-title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.drawer-body{flex:1;padding:var(--spacing-6);overflow-y:auto}.drawer-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-border)}/* ========================================================================== DIALOG (Native HTML dialog enhancement) ========================================================================== */ dialog.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;width:calc(100% - var(--spacing-8));max-width:500px;max-height:calc(100vh - var(--spacing-8));background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-xl);overflow:hidden}dialog.dialog::backdrop{background-color:var(--color-black-50)}dialog.dialog[open]{display:flex;flex-direction:column}/* Dialog animation (if supported) */ @starting-style{dialog.dialog[open]{opacity:0;transform:translate(-50%,-50%) scale(0.95)}dialog.dialog[open]::backdrop{opacity:0}}dialog.dialog[open]{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity var(--duration-200) var(--ease-out),transform var(--duration-200) var(--ease-out),display var(--duration-200) var(--ease-out) allow-discrete,overlay var(--duration-200) var(--ease-out) allow-discrete}dialog.dialog[open]::backdrop{opacity:1;transition:opacity var(--duration-200) var(--ease-out),display var(--duration-200) var(--ease-out) allow-discrete,overlay var(--duration-200) var(--ease-out) allow-discrete}/* ========================================================================== CONFIRM DIALOG ========================================================================== */ .dialog-confirm .modal-body{text-align:center;padding:var(--spacing-8) var(--spacing-6)}.dialog-confirm .dialog-icon{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin:0 auto var(--spacing-4);border-radius:var(--border-radius-full)}.dialog-confirm .dialog-icon-warning{background-color:var(--color-warning-100);color:var(--color-warning-600)}.dialog-confirm .dialog-icon-error{background-color:var(--color-error-100);color:var(--color-error-600)}.dialog-confirm .dialog-icon-success{background-color:var(--color-success-100);color:var(--color-success-600)}.dialog-confirm .dialog-icon-info{background-color:var(--color-info-100);color:var(--color-info-600)}.dialog-confirm .dialog-icon svg{width:2rem;height:2rem}.dialog-confirm .modal-footer{justify-content:center}/* ========================================================================== TABS & ACCORDION COMPONENTS Tab panels,accordion panels,and collapsible content ========================================================================== */ /* ========================================================================== TABS ========================================================================== */ .tabs{display:flex;flex-direction:column}/* Tab list */ .tab-list{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none;border-bottom:1px solid var(--color-border)}.tab-list[role="tablist"]{gap:var(--spacing-1)}/* Tab button/link */ .tab{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-decoration:none;background-color:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--duration-150) var(--ease-in-out),border-color var(--duration-150) var(--ease-in-out)}.tab:hover{color:var(--color-text);border-bottom-color:var(--color-gray-300)}.tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--border-radius-sm)}.tab[aria-selected="true"],.tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.tab:disabled,.tab.disabled{color:var(--color-text-light);pointer-events:none}/* Tab panel */ .tab-panel{display:none;padding:var(--spacing-4) 0}.tab-panel[aria-hidden="false"],.tab-panel.active{display:block}/* ========================================================================== TAB VARIANTS ========================================================================== */ /* Pills tabs */ .tab-list-pills{border-bottom:none;gap:var(--spacing-2)}.tab-list-pills .tab{border-bottom:none;border-radius:var(--border-radius-md);margin-bottom:0}.tab-list-pills .tab:hover{background-color:var(--color-bg-muted)}.tab-list-pills .tab[aria-selected="true"],.tab-list-pills .tab.active{color:var(--color-text-inverse);background-color:var(--color-primary)}/* Boxed tabs */ .tab-list-boxed{background-color:var(--color-bg-muted);padding:var(--spacing-1);border-radius:var(--border-radius-lg);border-bottom:none}.tab-list-boxed .tab{border-bottom:none;border-radius:var(--border-radius-md);margin-bottom:0;flex:1}.tab-list-boxed .tab[aria-selected="true"],.tab-list-boxed .tab.active{color:var(--color-text);background-color:var(--color-bg);box-shadow:var(--shadow-sm)}/* Vertical tabs */ .tabs-vertical{flex-direction:row}.tabs-vertical .tab-list{flex-direction:column;border-bottom:none;border-right:1px solid var(--color-border);margin-right:var(--spacing-4);padding-right:var(--spacing-4)}.tabs-vertical .tab{justify-content:flex-start;border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.tabs-vertical .tab:hover{border-left-color:var(--color-gray-300);border-bottom-color:transparent}.tabs-vertical .tab[aria-selected="true"],.tabs-vertical .tab.active{border-left-color:var(--color-primary);border-bottom-color:transparent}.tabs-vertical .tab-panel{padding:0;flex:1}/* ========================================================================== TAB WITH ICON ========================================================================== */ .tab svg,.tab .icon{width:1.125rem;height:1.125rem;margin-right:var(--spacing-2)}/* Tab with badge/count */ .tab .badge{margin-left:var(--spacing-2)}/* ========================================================================== ACCORDION ========================================================================== */ .accordion{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden}.accordion-item{border-bottom:1px solid var(--color-border)}.accordion-item:last-child{border-bottom:none}/* Accordion header/trigger */ .accordion-header{margin:0}.accordion-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-4) var(--spacing-5);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text);text-align:left;background-color:var(--color-bg);border:none;cursor:pointer;transition:background-color var(--duration-150) var(--ease-in-out)}.accordion-trigger:hover{background-color:var(--color-bg-subtle)}.accordion-trigger:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}/* Accordion icon */ .accordion-icon{width:1.25rem;height:1.25rem;flex-shrink:0;margin-left:var(--spacing-4);transition:transform var(--duration-200) var(--ease-out)}.accordion-trigger[aria-expanded="true"] .accordion-icon,.accordion-item.active .accordion-icon{transform:rotate(180deg)}/* Default chevron icon */ .accordion-icon::before{content:"";display:block;width:100%;height:100%;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:100%}/* Accordion panel/content */ .accordion-panel{display:none;overflow:hidden}.accordion-panel[aria-hidden="false"],.accordion-item.active .accordion-panel{display:block}.accordion-content{padding:0 var(--spacing-5) var(--spacing-4);color:var(--color-text-muted)}/* ========================================================================== ACCORDION VARIANTS ========================================================================== */ /* Flush accordion (no outer border) */ .accordion-flush{border:none;border-radius:0}.accordion-flush .accordion-item{border-left:none;border-right:none}.accordion-flush .accordion-item:first-child{border-top:none}.accordion-flush .accordion-item:last-child{border-bottom:1px solid var(--color-border)}/* Separated accordion (gap between items) */ .accordion-separated{border:none;background-color:transparent}.accordion-separated .accordion-item{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-2)}.accordion-separated .accordion-item:last-child{margin-bottom:0}.accordion-separated .accordion-trigger{border-radius:var(--border-radius-lg)}.accordion-separated .accordion-item.active .accordion-trigger{border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0}/* ========================================================================== COLLAPSIBLE (Simple collapse) ========================================================================== */ .collapse{display:none}.collapse.show{display:block}.collapse-horizontal{width:0;height:auto;overflow:hidden;transition:width var(--duration-300) var(--ease-out)}.collapse-horizontal.show{width:auto}/* Collapsing animation helper */ .collapsing{height:0;overflow:hidden;transition:height var(--duration-300) var(--ease-out)}/* ========================================================================== DETAILS/SUMMARY (Native HTML) ========================================================================== */ details.accordion-native{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden}details.accordion-native + details.accordion-native{margin-top:-1px;border-radius:0}details.accordion-native:first-of-type{border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0}details.accordion-native:last-of-type{border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg)}details.accordion-native:only-of-type{border-radius:var(--border-radius-lg)}details.accordion-native summary{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4) var(--spacing-5);font-weight:var(--font-weight-medium);cursor:pointer;list-style:none;transition:background-color var(--duration-150) var(--ease-in-out)}details.accordion-native summary::-webkit-details-marker{display:none}details.accordion-native summary:hover{background-color:var(--color-bg-subtle)}details.accordion-native summary::after{content:"";width:1.25rem;height:1.25rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:100%;transition:transform var(--duration-200) var(--ease-out)}details.accordion-native[open] summary::after{transform:rotate(180deg)}details.accordion-native .accordion-content{padding:0 var(--spacing-5) var(--spacing-4)}/* ========================================================================== ALERT & TOAST COMPONENTS Alerts,notifications,toasts,and banners ========================================================================== */ /* ========================================================================== BASE ALERT ========================================================================== */ .alert{position:relative;padding:var(--spacing-4) var(--spacing-5);margin-bottom:var(--spacing-4);border:1px solid transparent;border-radius:var(--border-radius-lg)}.alert-heading{margin-bottom:var(--spacing-2);font-weight:var(--font-weight-semibold);color:inherit}.alert p:last-child{margin-bottom:0}/* Alert with icon */ .alert-icon{display:flex;gap:var(--spacing-3)}.alert-icon svg,.alert-icon .icon{width:1.25rem;height:1.25rem;flex-shrink:0;margin-top:0.125rem}.alert-icon .alert-content{flex:1}/* ========================================================================== ALERT VARIANTS ========================================================================== */ /* Primary */ .alert-primary{color:var(--color-primary-800);background-color:var(--color-primary-50);border-color:var(--color-primary-200)}.alert-primary .alert-link{color:var(--color-primary-900)}/* Secondary */ .alert-secondary{color:var(--color-secondary-800);background-color:var(--color-secondary-50);border-color:var(--color-secondary-200)}/* Success */ .alert-success{color:var(--color-success-800);background-color:var(--color-success-50);border-color:var(--color-success-200)}.alert-success .alert-link{color:var(--color-success-900)}/* Error/Danger */ .alert-error,.alert-danger{color:var(--color-error-800);background-color:var(--color-error-50);border-color:var(--color-error-200)}.alert-error .alert-link,.alert-danger .alert-link{color:var(--color-error-900)}/* Warning */ .alert-warning{color:var(--color-warning-800);background-color:var(--color-warning-50);border-color:var(--color-warning-200)}.alert-warning .alert-link{color:var(--color-warning-900)}/* Info */ .alert-info{color:var(--color-info-800);background-color:var(--color-info-50);border-color:var(--color-info-200)}.alert-info .alert-link{color:var(--color-info-900)}/* Light */ .alert-light{color:var(--color-gray-700);background-color:var(--color-gray-100);border-color:var(--color-gray-200)}/* Dark */ .alert-dark{color:var(--color-gray-100);background-color:var(--color-gray-800);border-color:var(--color-gray-700)}/* ========================================================================== ALERT LINK ========================================================================== */ .alert-link{font-weight:var(--font-weight-semibold);text-decoration:underline;text-underline-offset:2px}/* ========================================================================== DISMISSIBLE ALERT ========================================================================== */ .alert-dismissible{padding-right:var(--spacing-12)}.alert-dismissible .alert-close{position:absolute;top:0;right:0;z-index:2;padding:var(--spacing-4) var(--spacing-5);background-color:transparent;border:none;cursor:pointer;opacity:0.5;transition:opacity var(--duration-150) var(--ease-in-out)}.alert-dismissible .alert-close:hover{opacity:1}.alert-dismissible .alert-close svg{width:1rem;height:1rem}/* ========================================================================== TOAST ========================================================================== */ .toast-container{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--spacing-3);padding:var(--spacing-4);pointer-events:none}/* Toast positions */ .toast-container-top-right{top:0;right:0}.toast-container-top-left{top:0;left:0}.toast-container-top-center{top:0;left:50%;transform:translateX(-50%)}.toast-container-bottom-right{bottom:0;right:0}.toast-container-bottom-left{bottom:0;left:0}.toast-container-bottom-center{bottom:0;left:50%;transform:translateX(-50%)}/* Toast */ .toast{display:flex;align-items:flex-start;width:100%;max-width:350px;padding:var(--spacing-4);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;opacity:0;transform:translateY(-1rem);transition:opacity var(--duration-200) var(--ease-out),transform var(--duration-200) var(--ease-out)}.toast.show{opacity:1;transform:translateY(0)}/* Toast from bottom animation */ .toast-container-bottom-right .toast,.toast-container-bottom-left .toast,.toast-container-bottom-center .toast{transform:translateY(1rem)}.toast-container-bottom-right .toast.show,.toast-container-bottom-left .toast.show,.toast-container-bottom-center .toast.show{transform:translateY(0)}/* Toast parts */ .toast-icon{flex-shrink:0;width:1.5rem;height:1.5rem;margin-right:var(--spacing-3)}.toast-body{flex:1}.toast-title{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1)}.toast-message{font-size:var(--font-size-sm);color:var(--color-text-muted)}.toast-close{flex-shrink:0;margin-left:var(--spacing-3);padding:var(--spacing-1);background-color:transparent;border:none;border-radius:var(--border-radius-sm);cursor:pointer;opacity:0.5;transition:opacity var(--duration-150) var(--ease-in-out)}.toast-close:hover{opacity:1}.toast-close svg{width:1rem;height:1rem}/* Toast variants */ .toast-success .toast-icon{color:var(--color-success)}.toast-error .toast-icon{color:var(--color-error)}.toast-warning .toast-icon{color:var(--color-warning)}.toast-info .toast-icon{color:var(--color-info)}/* Toast with accent border */ .toast-accent{border-left-width:4px}.toast-accent.toast-success{border-left-color:var(--color-success)}.toast-accent.toast-error{border-left-color:var(--color-error)}.toast-accent.toast-warning{border-left-color:var(--color-warning)}.toast-accent.toast-info{border-left-color:var(--color-info)}/* ========================================================================== BANNER (Full-width notification) ========================================================================== */ .banner{display:flex;align-items:center;justify-content:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);text-align:center}.banner-content{display:flex;align-items:center;gap:var(--spacing-2)}.banner-action{font-weight:var(--font-weight-medium);text-decoration:underline;white-space:nowrap}.banner-close{padding:var(--spacing-1);background-color:transparent;border:none;border-radius:var(--border-radius-sm);cursor:pointer;opacity:0.7}.banner-close:hover{opacity:1}/* Banner variants */ .banner-primary{background-color:var(--color-primary);color:var(--color-text-inverse)}.banner-secondary{background-color:var(--color-secondary);color:var(--color-text-inverse)}.banner-success{background-color:var(--color-success);color:var(--color-text-inverse)}.banner-error{background-color:var(--color-error);color:var(--color-text-inverse)}.banner-warning{background-color:var(--color-warning);color:var(--color-gray-900)}.banner-info{background-color:var(--color-info);color:var(--color-text-inverse)}.banner-light{background-color:var(--color-gray-100);color:var(--color-text)}.banner-dark{background-color:var(--color-gray-900);color:var(--color-text-inverse)}/* Fixed banner */ .banner-fixed-top{position:fixed;top:0;left:0;right:0;z-index:var(--z-fixed)}.banner-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-fixed)}/* ========================================================================== CALLOUT (Highlighted content box) ========================================================================== */ .callout{padding:var(--spacing-4) var(--spacing-5);border-left:4px solid var(--color-border);background-color:var(--color-bg-subtle);border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}.callout-title{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-2)}.callout p:last-child{margin-bottom:0}/* Callout variants */ .callout-primary{border-left-color:var(--color-primary);background-color:var(--color-primary-50)}.callout-success{border-left-color:var(--color-success);background-color:var(--color-success-50)}.callout-error{border-left-color:var(--color-error);background-color:var(--color-error-50)}.callout-warning{border-left-color:var(--color-warning);background-color:var(--color-warning-50)}.callout-info{border-left-color:var(--color-info);background-color:var(--color-info-50)}/* ========================================================================== TABLE COMPONENTS Tables,data tables,and responsive tables ========================================================================== */ /* ========================================================================== BASE TABLE ========================================================================== */ .table{width:100%;margin-bottom:var(--spacing-4);color:var(--color-text);vertical-align:top;border-color:var(--color-border)}.table >:not(caption) > * > *{padding:var(--spacing-3) var(--spacing-4);background-color:var(--color-bg);border-bottom:1px solid var(--color-border)}.table > thead{vertical-align:bottom}.table > thead > tr > th{font-weight:var(--font-weight-semibold);text-align:left;color:var(--color-text);background-color:var(--color-bg-subtle);border-bottom-width:2px}.table > tbody > tr:last-child > *{border-bottom:0}/* Table caption */ .table > caption{padding:var(--spacing-3) var(--spacing-4);color:var(--color-text-muted);text-align:left;caption-side:bottom}/* ========================================================================== TABLE VARIANTS ========================================================================== */ /* Striped rows */ .table-striped > tbody > tr:nth-of-type(odd) > *{background-color:var(--color-bg-subtle)}/* Striped columns */ .table-striped-columns >:not(caption) > tr >:nth-child(even){background-color:var(--color-bg-subtle)}/* Hover effect */ .table-hover > tbody > tr:hover > *{background-color:var(--color-bg-muted)}/* Bordered table */ .table-bordered{border:1px solid var(--color-border)}.table-bordered >:not(caption) > * > *{border:1px solid var(--color-border)}/* Borderless table */ .table-borderless >:not(caption) > * > *{border-bottom:0}/* ========================================================================== TABLE SIZES ========================================================================== */ .table-sm >:not(caption) > * > *{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.table-lg >:not(caption) > * > *{padding:var(--spacing-4) var(--spacing-5)}/* ========================================================================== TABLE COLOR VARIANTS ========================================================================== */ /* Row colors */ .table-primary{--table-bg:var(--color-primary-50);--table-border-color:var(--color-primary-200)}.table-secondary{--table-bg:var(--color-secondary-50);--table-border-color:var(--color-secondary-200)}.table-success{--table-bg:var(--color-success-50);--table-border-color:var(--color-success-200)}.table-danger,.table-error{--table-bg:var(--color-error-50);--table-border-color:var(--color-error-200)}.table-warning{--table-bg:var(--color-warning-50);--table-border-color:var(--color-warning-200)}.table-info{--table-bg:var(--color-info-50);--table-border-color:var(--color-info-200)}.table-light{--table-bg:var(--color-gray-100);--table-border-color:var(--color-gray-200)}.table-dark{--table-bg:var(--color-gray-800);--table-border-color:var(--color-gray-700);color:var(--color-text-inverse)}/* Apply row colors */ .table > tbody > tr.table-primary > *,.table > tbody > tr.table-secondary > *,.table > tbody > tr.table-success > *,.table > tbody > tr.table-danger > *,.table > tbody > tr.table-error > *,.table > tbody > tr.table-warning > *,.table > tbody > tr.table-info > *,.table > tbody > tr.table-light > *,.table > tbody > tr.table-dark > *{background-color:var(--table-bg);border-color:var(--table-border-color)}/* ========================================================================== RESPONSIVE TABLE ========================================================================== */ .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}/* Responsive at breakpoints */ @media (max-width:639px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1023px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1279px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}/* ========================================================================== STACKED TABLE (Mobile-friendly) ========================================================================== */ @media (max-width:639px){.table-stacked,.table-stacked thead,.table-stacked tbody,.table-stacked th,.table-stacked td,.table-stacked tr{display:block}.table-stacked thead tr{position:absolute;top:-9999px;left:-9999px}.table-stacked tr{margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-lg)}.table-stacked td{position:relative;padding-left:50%;border:none;border-bottom:1px solid var(--color-border)}.table-stacked td:last-child{border-bottom:none}.table-stacked td::before{content:attr(data-label);position:absolute;left:var(--spacing-4);width:calc(50% - var(--spacing-8));padding-right:var(--spacing-2);font-weight:var(--font-weight-semibold);text-align:left;white-space:nowrap}}/* ========================================================================== DATA TABLE ENHANCEMENTS ========================================================================== */ /* Sortable column header */ .table th[data-sortable]{cursor:pointer;user-select:none}.table th[data-sortable]:hover{background-color:var(--color-bg-muted)}.table th[data-sortable]::after{content:"";display:inline-block;width:0.75rem;height:0.75rem;margin-left:var(--spacing-2);vertical-align:middle;opacity:0.3;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpath d='M7 10l5-5 5 5M7 14l5 5 5-5'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:contain}.table th[data-sort="asc"]::after{opacity:1;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'%3e%3cpath d='M7 14l5-5 5 5'/%3e%3c/svg%3e")}.table th[data-sort="desc"]::after{opacity:1;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'%3e%3cpath d='M7 10l5 5 5-5'/%3e%3c/svg%3e")}.table-selectable tbody tr{cursor:pointer}.table-selectable tbody tr.selected > *{background-color:var(--color-primary-50)}.table-fixed-header{position:relative}.table-fixed-header thead{position:sticky;top:0;z-index:1}.table-fixed-header thead th{background-color:var(--color-bg);box-shadow:inset 0 -2px 0 var(--color-border)}.table-fixed-column td:first-child,.table-fixed-column th:first-child{position:sticky;left:0;z-index:1;background-color:inherit;box-shadow:inset -2px 0 0 var(--color-border)}.table-card{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden}.table-card .table{margin-bottom:0}.table-card .table > thead > tr > th:first-child{border-top-left-radius:calc(var(--border-radius-lg) - 1px)}.table-card .table > thead > tr > th:last-child{border-top-right-radius:calc(var(--border-radius-lg) - 1px)}.table-empty{padding:var(--spacing-12) var(--spacing-4);text-align:center;color:var(--color-text-muted)}.table-empty-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto var(--spacing-4);background-color:var(--color-bg-muted);border-radius:var(--border-radius-full)}.table-empty-icon svg{width:1.5rem;height:1.5rem;color:var(--color-text-light)}.table-empty-title{font-weight:var(--font-weight-medium);color:var(--color-text);margin-bottom:var(--spacing-1)}.badge{display:inline-flex;align-items:center;padding:var(--spacing-0-5) var(--spacing-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;color:var(--color-text-inverse);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--border-radius-full)}.badge-sm{padding:var(--spacing-px) var(--spacing-1-5);font-size:0.625rem}.badge-lg{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm)}.badge-primary{background-color:var(--color-primary)}.badge-secondary{background-color:var(--color-secondary)}.badge-success{background-color:var(--color-success)}.badge-error,.badge-danger{background-color:var(--color-error)}.badge-warning{background-color:var(--color-warning);color:var(--color-gray-900)}.badge-info{background-color:var(--color-info)}.badge-light{background-color:var(--color-gray-200);color:var(--color-text)}.badge-dark{background-color:var(--color-gray-800)}.badge-soft-primary{background-color:var(--color-primary-100);color:var(--color-primary-700)}.badge-soft-secondary{background-color:var(--color-secondary-100);color:var(--color-secondary-700)}.badge-soft-success{background-color:var(--color-success-100);color:var(--color-success-700)}.badge-soft-error,.badge-soft-danger{background-color:var(--color-error-100);color:var(--color-error-700)}.badge-soft-warning{background-color:var(--color-warning-100);color:var(--color-warning-700)}.badge-soft-info{background-color:var(--color-info-100);color:var(--color-info-700)}.badge-outline-primary{background-color:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}.badge-outline-secondary{background-color:transparent;border:1px solid var(--color-secondary);color:var(--color-secondary)}.badge-outline-success{background-color:transparent;border:1px solid var(--color-success);color:var(--color-success)}.badge-outline-error{background-color:transparent;border:1px solid var(--color-error);color:var(--color-error)}.badge-dot{padding:0;width:0.5rem;height:0.5rem;border-radius:var(--border-radius-full)}.badge-dot-lg{width:0.75rem;height:0.75rem}.badge svg,.badge .icon{width:0.875em;height:0.875em;margin-right:var(--spacing-1)}.progress{display:flex;height:0.5rem;overflow:hidden;font-size:var(--font-size-xs);background-color:var(--color-gray-200);border-radius:var(--border-radius-full)}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--color-text-inverse);text-align:center;white-space:nowrap;background-color:var(--color-primary);transition:width var(--duration-300) var(--ease-out)}.progress-sm{height:0.25rem}.progress-lg{height:1rem}.progress-xl{height:1.5rem}.progress-lg .progress-bar,.progress-xl .progress-bar{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.progress-bar-secondary{background-color:var(--color-secondary)}.progress-bar-success{background-color:var(--color-success)}.progress-bar-error,.progress-bar-danger{background-color:var(--color-error)}.progress-bar-warning{background-color:var(--color-warning)}.progress-bar-info{background-color:var(--color-info)}.progress-bar-striped{background-image:linear-gradient( 45deg,var(--color-white-15) 25%,transparent 25%,transparent 50%,var(--color-white-15) 50%,var(--color-white-15) 75%,transparent 75%,transparent );background-size:1rem 1rem}.progress-bar-animated{animation:progress-bar-stripes 1s linear infinite}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress-stacked{display:flex}.progress-stacked .progress-bar{overflow:visible}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-inverse);background-color:var(--color-gray-400);border-radius:var(--border-radius-full);overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.avatar-sm{width:2rem;height:2rem;font-size:var(--font-size-xs)}.avatar-lg{width:3rem;height:3rem;font-size:var(--font-size-base)}.avatar-xl{width:4rem;height:4rem;font-size:var(--font-size-lg)}.avatar-2xl{width:5rem;height:5rem;font-size:var(--font-size-xl)}.avatar-status{position:absolute;bottom:0;right:0;width:0.75rem;height:0.75rem;background-color:var(--color-success);border:2px solid var(--color-bg);border-radius:var(--border-radius-full)}.avatar-status-offline{background-color:var(--color-gray-400)}.avatar-status-busy{background-color:var(--color-error)}.avatar-status-away{background-color:var(--color-warning)}.avatar-primary{background-color:var(--color-primary)}.avatar-secondary{background-color:var(--color-secondary)}.avatar-success{background-color:var(--color-success)}.avatar-error{background-color:var(--color-error)}.avatar-warning{background-color:var(--color-warning);color:var(--color-gray-900)}.avatar-info{background-color:var(--color-info)}.avatar-square{border-radius:var(--border-radius-lg)}.avatar-group{display:flex;flex-direction:row-reverse}.avatar-group .avatar{border:2px solid var(--color-bg);margin-left:-0.75rem}.avatar-group .avatar:last-child{margin-left:0}.avatar-group-count{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);background-color:var(--color-gray-200);border:2px solid var(--color-bg);border-radius:var(--border-radius-full);margin-left:-0.75rem}.spinner{display:inline-block;width:1.5rem;height:1.5rem;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--border-radius-full);animation:spinner 0.75s linear infinite}@keyframes spinner{to{transform:rotate(360deg)}}.spinner-sm{width:1rem;height:1rem;border-width:1.5px}.spinner-lg{width:2rem;height:2rem;border-width:3px}.spinner-xl{width:3rem;height:3rem;border-width:4px}.spinner-primary{color:var(--color-primary)}.spinner-secondary{color:var(--color-secondary)}.spinner-success{color:var(--color-success)}.spinner-error{color:var(--color-error)}.spinner-warning{color:var(--color-warning)}.spinner-info{color:var(--color-info)}.spinner-light{color:var(--color-gray-300)}.spinner-dark{color:var(--color-gray-800)}.spinner-white{color:#ffffff}.spinner-dots{display:inline-flex;gap:var(--spacing-1)}.spinner-dots span{width:0.5rem;height:0.5rem;background-color:currentColor;border-radius:var(--border-radius-full);animation:spinner-dots 1.4s ease-in-out infinite both}.spinner-dots span:nth-child(1){animation-delay:-0.32s}.spinner-dots span:nth-child(2){animation-delay:-0.16s}@keyframes spinner-dots{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.skeleton{background:linear-gradient( 90deg,var(--color-gray-200) 25%,var(--color-gray-100) 50%,var(--color-gray-200) 75% );background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--border-radius-md)}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton-text{height:1rem;margin-bottom:var(--spacing-2)}.skeleton-text:last-child{width:80%}.skeleton-title{height:1.5rem;width:60%;margin-bottom:var(--spacing-4)}.skeleton-avatar{width:2.5rem;height:2.5rem;border-radius:var(--border-radius-full)}.skeleton-button{height:2.5rem;width:6rem}.skeleton-image{width:100%;padding-bottom:56.25%}[data-tooltip]{position:relative;cursor:pointer}[data-tooltip]::before,[data-tooltip]::after{position:absolute;z-index:var(--z-tooltip);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-150) var(--ease-out),visibility var(--duration-150) var(--ease-out),transform var(--duration-150) var(--ease-out)}[data-tooltip]::after{content:attr(data-tooltip);padding:var(--spacing-1-5) var(--spacing-2-5);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);color:var(--color-text-inverse);white-space:nowrap;background-color:var(--color-gray-900);border-radius:var(--border-radius-md)}[data-tooltip]::before{content:"";border:5px solid transparent}[data-tooltip]:hover::before,[data-tooltip]:hover::after,[data-tooltip]:focus::before,[data-tooltip]:focus::after{opacity:1;visibility:visible}[data-tooltip]::after,[data-tooltip-position="top"]::after{bottom:100%;left:50%;transform:translateX(-50%) translateY(var(--spacing-2));margin-bottom:var(--spacing-1)}[data-tooltip]::before,[data-tooltip-position="top"]::before{bottom:100%;left:50%;transform:translateX(-50%);border-top-color:var(--color-gray-900)}[data-tooltip]:hover::after,[data-tooltip]:focus::after,[data-tooltip-position="top"]:hover::after,[data-tooltip-position="top"]:focus::after{transform:translateX(-50%) translateY(0)}[data-tooltip-position="bottom"]::after{top:100%;bottom:auto;left:50%;transform:translateX(-50%) translateY(calc(var(--spacing-2) * -1));margin-top:var(--spacing-1);margin-bottom:0}[data-tooltip-position="bottom"]::before{top:100%;bottom:auto;left:50%;transform:translateX(-50%);border-top-color:transparent;border-bottom-color:var(--color-gray-900)}[data-tooltip-position="bottom"]:hover::after,[data-tooltip-position="bottom"]:focus::after{transform:translateX(-50%) translateY(0)}[data-tooltip-position="left"]::after{top:50%;right:100%;bottom:auto;left:auto;transform:translateY(-50%) translateX(var(--spacing-2));margin-right:var(--spacing-1);margin-bottom:0}[data-tooltip-position="left"]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translateY(-50%);border-top-color:transparent;border-left-color:var(--color-gray-900)}[data-tooltip-position="left"]:hover::after,[data-tooltip-position="left"]:focus::after{transform:translateY(-50%) translateX(0)}[data-tooltip-position="right"]::after{top:50%;left:100%;bottom:auto;right:auto;transform:translateY(-50%) translateX(calc(var(--spacing-2) * -1));margin-left:var(--spacing-1);margin-bottom:0}[data-tooltip-position="right"]::before{top:50%;left:100%;bottom:auto;right:auto;transform:translateY(-50%);border-top-color:transparent;border-right-color:var(--color-gray-900)}[data-tooltip-position="right"]:hover::after,[data-tooltip-position="right"]:focus::after{transform:translateY(-50%) translateX(0)}[data-tooltip-variant="light"]::after{color:var(--color-text);background-color:var(--color-bg);border:1px solid var(--color-border);box-shadow:var(--shadow-md)}[data-tooltip-variant="light"]::before{border-top-color:var(--color-bg)}[data-tooltip-variant="light"][data-tooltip-position="bottom"]::before{border-top-color:transparent;border-bottom-color:var(--color-bg)}[data-tooltip-multiline]::after{white-space:normal;width:max-content;max-width:250px;text-align:center}.tooltip{position:absolute;z-index:var(--z-tooltip);display:none;max-width:250px;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-inverse);background-color:var(--color-gray-900);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);opacity:0;transition:opacity var(--duration-150) var(--ease-out)}.tooltip.show{display:block;opacity:1}.tooltip-arrow{position:absolute;width:0;height:0;border:6px solid transparent}.tooltip[data-placement^="top"] .tooltip-arrow{bottom:-12px;left:50%;transform:translateX(-50%);border-top-color:var(--color-gray-900)}.tooltip[data-placement^="bottom"] .tooltip-arrow{top:-12px;left:50%;transform:translateX(-50%);border-bottom-color:var(--color-gray-900)}.tooltip[data-placement^="left"] .tooltip-arrow{right:-12px;top:50%;transform:translateY(-50%);border-left-color:var(--color-gray-900)}.tooltip[data-placement^="right"] .tooltip-arrow{left:-12px;top:50%;transform:translateY(-50%);border-right-color:var(--color-gray-900)}.popover{position:absolute;z-index:var(--z-popover);display:none;max-width:320px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);opacity:0;transform:scale(0.95);transition:opacity var(--duration-150) var(--ease-out),transform var(--duration-150) var(--ease-out)}.popover.show{display:block;opacity:1;transform:scale(1)}.popover-header{padding:var(--spacing-3) var(--spacing-4);font-weight:var(--font-weight-semibold);background-color:var(--color-bg-subtle);border-bottom:1px solid var(--color-border);border-radius:calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px) 0 0}.popover-body{padding:var(--spacing-4);color:var(--color-text)}.popover-arrow{position:absolute;width:16px;height:16px}.popover-arrow::before,.popover-arrow::after{position:absolute;content:"";border:8px solid transparent}.popover[data-placement^="top"] .popover-arrow{bottom:-16px;left:50%;transform:translateX(-50%)}.popover[data-placement^="top"] .popover-arrow::before{border-top-color:var(--color-border)}.popover[data-placement^="top"] .popover-arrow::after{bottom:1px;border-top-color:var(--color-bg)}.popover[data-placement^="bottom"] .popover-arrow{top:-16px;left:50%;transform:translateX(-50%)}.popover[data-placement^="bottom"] .popover-arrow::before{border-bottom-color:var(--color-border)}.popover[data-placement^="bottom"] .popover-arrow::after{top:1px;border-bottom-color:var(--color-bg-subtle)}.tooltip-menu{position:absolute;z-index:var(--z-tooltip);min-width:160px;padding:var(--spacing-2);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--duration-150) var(--ease-out),visibility var(--duration-150) var(--ease-out),transform var(--duration-150) var(--ease-out)}.tooltip-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.tooltip-menu-item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text);text-decoration:none;border-radius:var(--border-radius-md);cursor:pointer;transition:background-color var(--duration-100) var(--ease-in-out)}.tooltip-menu-item:hover{background-color:var(--color-bg-muted)}.tooltip-menu-item svg{width:1rem;height:1rem;color:var(--color-text-muted)}.tooltip-menu-divider{height:1px;margin:var(--spacing-2) 0;background-color:var(--color-border)}.timeline{position:relative;display:flex;flex-direction:column;gap:var(--spacing-0)}.timeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--color-border)}.timeline-item{position:relative;display:flex;gap:var(--spacing-4);padding-bottom:var(--spacing-6)}.timeline-item:last-child{padding-bottom:0}.timeline-marker{position:relative;z-index:1;flex-shrink:0;width:32px;height:32px;border-radius:var(--border-radius-full);background:var(--color-bg);border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.timeline-marker svg,.timeline-marker .icon{width:16px;height:16px}.timeline-content{flex:1;padding-top:var(--spacing-1)}.timeline-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0 0 var(--spacing-1) 0}.timeline-description{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:var(--line-height-relaxed);margin:0}.timeline-date{font-size:var(--font-size-xs);color:var(--color-text-light);margin-top:var(--spacing-2)}.timeline-item-completed .timeline-marker{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}.timeline-item-active .timeline-marker{background:var(--color-accent-muted);border-color:var(--color-accent);color:var(--color-accent-dark)}.timeline-item-active .timeline-title{color:var(--color-accent-dark)}.timeline-item-pending .timeline-marker{background:var(--color-bg-subtle);border-color:var(--color-border);color:var(--color-text-light)}.timeline-item-pending .timeline-title{color:var(--color-text-muted)}.timeline-item-error .timeline-marker{background:var(--color-error-50);border-color:var(--color-error);color:var(--color-error)}.timeline-sm::before{left:11px}.timeline-sm .timeline-marker{width:24px;height:24px;font-size:var(--font-size-xs)}.timeline-sm .timeline-marker svg,.timeline-sm .timeline-marker .icon{width:12px;height:12px}.timeline-sm .timeline-item{gap:var(--spacing-3);padding-bottom:var(--spacing-4)}.timeline-sm .timeline-title{font-size:var(--font-size-sm)}.timeline-sm .timeline-description{font-size:var(--font-size-xs)}.timeline-lg::before{left:19px;width:3px}.timeline-lg .timeline-marker{width:40px;height:40px;font-size:var(--font-size-base)}.timeline-lg .timeline-marker svg,.timeline-lg .timeline-marker .icon{width:20px;height:20px}.timeline-lg .timeline-item{gap:var(--spacing-5);padding-bottom:var(--spacing-8)}.timeline-lg .timeline-title{font-size:var(--font-size-lg)}.timeline-horizontal{flex-direction:row;overflow-x:auto}.timeline-horizontal::before{left:0;right:0;top:15px;bottom:auto;width:auto;height:2px}.timeline-horizontal .timeline-item{flex-direction:column;align-items:center;text-align:center;padding-bottom:0;padding-right:var(--spacing-8);min-width:120px}.timeline-horizontal .timeline-item:last-child{padding-right:0}.timeline-horizontal .timeline-content{padding-top:var(--spacing-3)}.timeline-alternating::before{left:50%;transform:translateX(-50%)}.timeline-alternating .timeline-item{width:50%}.timeline-alternating .timeline-item:nth-child(odd){margin-left:auto;padding-left:var(--spacing-8)}.timeline-alternating .timeline-item:nth-child(even){flex-direction:row-reverse;text-align:right;padding-right:var(--spacing-8)}.timeline-alternating .timeline-item:nth-child(even) .timeline-marker{margin-left:auto}.timeline-connected .timeline-content{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-4)}.timeline-connected .timeline-content::before{content:'';position:absolute;left:28px;top:var(--spacing-3);width:10px;height:10px;background:var(--color-bg);border-left:1px solid var(--color-border);border-bottom:1px solid var(--color-border);transform:rotate(45deg)}.dark .timeline::before,[data-theme="dark"] .timeline::before{background:var(--color-gray-700)}.dark .timeline-marker,[data-theme="dark"] .timeline-marker{background:var(--color-bg-800);border-color:var(--color-gray-600);color:var(--color-gray-400)}.dark .timeline-title,[data-theme="dark"] .timeline-title{color:var(--color-gray-100)}.dark .timeline-description,[data-theme="dark"] .timeline-description{color:var(--color-gray-400)}.dark .timeline-item-completed .timeline-marker,[data-theme="dark"] .timeline-item-completed .timeline-marker{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg-900)}.dark .timeline-item-active .timeline-marker,[data-theme="dark"] .timeline-item-active .timeline-marker{background:var(--color-accent-muted);border-color:var(--color-accent);color:var(--color-accent)}.dark .timeline-connected .timeline-content,[data-theme="dark"] .timeline-connected .timeline-content{background:var(--color-bg-800);border-color:var(--color-gray-700)}.section-dark .timeline::before{background:var(--color-white-10)}.section-dark .timeline-marker{background:var(--color-bg-800);border-color:var(--color-white-20);color:var(--color-gray-400)}.section-dark .timeline-title{color:var(--color-text-inverse)}.section-dark .timeline-description{color:var(--color-gray-400)}.donamic_redesign1 .timeline::before{background:var(--donamic-border-light,var(--color-border))}.donamic_redesign1 .timeline-marker{background:var(--donamic-white,var(--color-bg));border-color:var(--donamic-border-light,var(--color-border))}.donamic_redesign1 .timeline-item-completed .timeline-marker{background:var(--donamic-primary,var(--color-accent));border-color:var(--donamic-primary,var(--color-accent))}.donamic_redesign1 .timeline-item-active .timeline-marker{border-color:var(--donamic-primary,var(--color-accent))}.video-container{position:relative;width:100%;overflow:hidden;background-color:var(--color-gray-900);border-radius:var(--border-radius-lg)}.video-container-16-9{padding-bottom:56.25%}.video-container-4-3{padding-bottom:75%}.video-container-21-9{padding-bottom:42.857%}.video-container-1-1{padding-bottom:100%}.video-container video,.video-container iframe,.video-container embed,.video-container object{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.video-player{position:relative;width:100%;background-color:var(--color-gray-900);border-radius:var(--border-radius-lg);overflow:hidden}.video-player video{display:block;width:100%;height:auto}.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--color-black-30);opacity:1;transition:opacity var(--duration-200) var(--ease-out);cursor:pointer}.video-player.playing .video-overlay{opacity:0;pointer-events:none}.video-player:hover .video-overlay{opacity:1;pointer-events:auto}.video-play-button{display:flex;align-items:center;justify-content:center;width:5rem;height:5rem;background-color:var(--color-primary);border:none;border-radius:var(--border-radius-full);cursor:pointer;transition:transform var(--duration-150) var(--ease-out),background-color var(--duration-150) var(--ease-out);box-shadow:var(--shadow-lg)}.video-play-button:hover{transform:scale(1.1);background-color:var(--color-primary-hover)}.video-play-button svg{width:2rem;height:2rem;color:var(--color-text-inverse);margin-left:4px}.video-controls{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;padding:var(--spacing-3);background:linear-gradient(to top,var(--color-black-80) 0%,transparent 100%);opacity:0;transition:opacity var(--duration-200) var(--ease-out)}.video-player:hover .video-controls,.video-player.paused .video-controls{opacity:1}.video-progress{position:relative;width:100%;height:4px;background-color:var(--color-white-30);border-radius:var(--border-radius-full);cursor:pointer;margin-bottom:var(--spacing-3)}.video-progress:hover{height:6px}.video-progress-filled{position:absolute;top:0;left:0;height:100%;background-color:var(--color-primary);border-radius:var(--border-radius-full);transition:width 0.1s linear}.video-progress-buffered{position:absolute;top:0;left:0;height:100%;background-color:var(--color-white-20);border-radius:var(--border-radius-full)}.video-progress-thumb{position:absolute;top:50%;width:12px;height:12px;background-color:var(--color-primary);border-radius:var(--border-radius-full);transform:translate(-50%,-50%) scale(0);transition:transform var(--duration-150) var(--ease-out);box-shadow:var(--shadow-md)}.video-progress:hover .video-progress-thumb{transform:translate(-50%,-50%) scale(1)}.video-controls-row{display:flex;align-items:center;gap:var(--spacing-2)}.video-control-btn{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background-color:transparent;border:none;border-radius:var(--border-radius-md);color:var(--color-text-inverse);cursor:pointer;transition:background-color var(--duration-100) var(--ease-out)}.video-control-btn:hover{background-color:var(--color-white-10)}.video-control-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-primary)}.video-control-btn svg{width:1.25rem;height:1.25rem}.video-time{font-size:var(--font-size-sm);color:var(--color-text-inverse);font-variant-numeric:tabular-nums;margin:0 var(--spacing-2)}.video-controls-spacer{flex:1}.video-volume{display:flex;align-items:center;gap:var(--spacing-1)}.video-volume-slider{width:0;opacity:0;transition:width var(--duration-200) var(--ease-out),opacity var(--duration-200) var(--ease-out)}.video-volume:hover .video-volume-slider{width:80px;opacity:1}.video-volume-slider input[type="range"]{width:100%;height:4px;background:var(--color-white-30);border-radius:var(--border-radius-full);outline:none;appearance:none;cursor:pointer}.video-volume-slider input[type="range"]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--color-text-inverse);border-radius:var(--border-radius-full);cursor:pointer}.video-volume-slider input[type="range"]::-moz-range-thumb{width:12px;height:12px;background:var(--color-text-inverse);border:none;border-radius:var(--border-radius-full);cursor:pointer}.video-fullscreen-btn{margin-left:auto}.video-thumbnail{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--border-radius-lg)}.video-thumbnail img{width:100%;height:auto;display:block;transition:transform var(--duration-300) var(--ease-out)}.video-thumbnail:hover img{transform:scale(1.05)}.video-thumbnail-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--color-black-40);transition:background-color var(--duration-200) var(--ease-out)}.video-thumbnail:hover .video-thumbnail-overlay{background-color:var(--color-black-50)}.video-duration{position:absolute;bottom:var(--spacing-2);right:var(--spacing-2);padding:var(--spacing-0-5) var(--spacing-1-5);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-inverse);background-color:var(--color-black-80);border-radius:var(--border-radius-sm)}.video-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--border-radius-lg);background-color:var(--color-bg);border:1px solid var(--color-border)}.video-card-thumbnail{position:relative;aspect-ratio:16 / 9;overflow:hidden}.video-card-thumbnail img{width:100%;height:100%;object-fit:cover}.video-card-body{padding:var(--spacing-4)}.video-card-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);line-clamp:2;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.video-card-meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}.video-playlist{display:flex;flex-direction:column;gap:var(--spacing-2);max-height:400px;overflow-y:auto}.video-playlist-item{display:flex;gap:var(--spacing-3);padding:var(--spacing-2);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color var(--duration-100) var(--ease-out)}.video-playlist-item:hover{background-color:var(--color-bg-muted)}.video-playlist-item.active{background-color:var(--color-primary-50)}.video-playlist-thumbnail{position:relative;flex-shrink:0;width:120px;aspect-ratio:16 / 9;border-radius:var(--border-radius-sm);overflow:hidden}.video-playlist-thumbnail img{width:100%;height:100%;object-fit:cover}.video-playlist-info{flex:1;min-width:0}.video-playlist-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-1);line-clamp:2;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.video-playlist-meta{font-size:var(--font-size-xs);color:var(--color-text-muted)}.video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.video-loading .spinner{width:3rem;height:3rem;border-width:3px;color:var(--color-text-inverse)}.video-player video::cue{background-color:var(--color-black-80);color:var(--color-text-inverse);font-size:var(--font-size-base);font-family:var(--font-family-base);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm)}.video-caption-btn.active{color:var(--color-primary)}@media (max-width:639px){.video-controls{padding:var(--spacing-2)}.video-control-btn{width:2rem;height:2rem}.video-control-btn svg{width:1rem;height:1rem}.video-time{font-size:var(--font-size-xs)}.video-play-button{width:4rem;height:4rem}.video-play-button svg{width:1.5rem;height:1.5rem}}.account-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-6);background:var(--color-bg);border-bottom:1px solid var(--color-border)}.account-info{display:flex;align-items:center;gap:var(--spacing-3)}.account-avatar{width:40px;height:40px;border-radius:var(--border-radius-full);background:var(--color-accent-muted);color:var(--color-accent-dark);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);overflow:hidden;flex-shrink:0}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-avatar-sm{width:32px;height:32px;font-size:var(--font-size-xs)}.account-avatar-lg{width:48px;height:48px;font-size:var(--font-size-base)}.account-details{display:flex;flex-direction:column;gap:var(--spacing-0-5)}.account-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0;line-height:1.3}.account-email{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}.account-role{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--border-radius-md);background:var(--color-gray-100);color:var(--color-gray-600)}.account-role-starter{background:var(--color-gray-100);color:var(--color-gray-600)}.account-role-standard{background:var(--color-secondary-50);color:var(--color-secondary)}.account-role-pro{background:var(--color-accent-muted);color:var(--color-accent-dark)}.account-role-mastery,.account-role-premium{background:linear-gradient(135deg,var(--color-accent-muted),var(--color-magic-purple-overlay,rgba(124,58,237,0.1)));color:var(--color-magic-purple)}.account-role-admin{background:var(--color-error-50);color:var(--color-error)}.account-actions{display:flex;align-items:center;gap:var(--spacing-2)}.account-action-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--border-radius-md);color:var(--color-text-muted);cursor:pointer;transition:background-color var(--duration-150) var(--ease-in-out),color var(--duration-150) var(--ease-in-out)}.account-action-btn:hover{background:var(--color-bg-subtle);color:var(--color-text)}.account-action-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.account-action-btn svg,.account-action-btn .icon{width:20px;height:20px}.account-action-btn-badge{position:relative}.account-action-btn-badge::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--color-error);border-radius:var(--border-radius-full);border:2px solid var(--color-bg)}.account-bar-compact{padding:var(--spacing-2) var(--spacing-4)}.account-bar-compact .account-avatar{width:32px;height:32px;font-size:var(--font-size-xs)}.account-bar-compact .account-name{font-size:var(--font-size-xs)}.account-bar-compact .account-action-btn{width:32px;height:32px}.account-bar-compact .account-action-btn svg{width:16px;height:16px}.account-bar-lg{padding:var(--spacing-5) var(--spacing-8)}.account-bar-lg .account-avatar{width:48px;height:48px;font-size:var(--font-size-base)}.account-bar-lg .account-name{font-size:var(--font-size-base)}.account-bar-transparent{background:transparent;border-bottom:none}.account-bar-sticky{position:sticky;top:0;z-index:var(--z-index-sticky)}.account-bar-elevated{box-shadow:var(--shadow-sm);border-bottom:none}.account-bar-centered{justify-content:center}.account-bar-centered .account-info{flex-direction:column;text-align:center}.account-dropdown{position:relative}.account-dropdown-menu{position:absolute;top:100%;right:0;min-width:200px;margin-top:var(--spacing-2);padding:var(--spacing-2);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--duration-150) var(--ease-in-out),visibility var(--duration-150) var(--ease-in-out),transform var(--duration-150) var(--ease-in-out);z-index:var(--z-index-dropdown)}.account-dropdown.is-open .account-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.account-dropdown-item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text);text-decoration:none;border-radius:var(--border-radius-md);cursor:pointer;transition:background-color var(--duration-150) var(--ease-in-out)}.account-dropdown-item:hover{background:var(--color-bg-subtle)}.account-dropdown-item svg{width:16px;height:16px;color:var(--color-text-muted)}.account-dropdown-divider{height:1px;margin:var(--spacing-2) 0;background:var(--color-border)}.account-dropdown-item-danger{color:var(--color-error)}.account-dropdown-item-danger svg{color:var(--color-error)}.dark .account-bar,[data-theme="dark"] .account-bar{background:var(--color-bg-800);border-color:var(--color-gray-700)}.dark .account-avatar,[data-theme="dark"] .account-avatar{background:var(--color-accent-20);color:var(--color-accent)}.dark .account-name,[data-theme="dark"] .account-name{color:var(--color-gray-100)}.dark .account-email,[data-theme="dark"] .account-email{color:var(--color-gray-400)}.dark .account-role,[data-theme="dark"] .account-role{background:var(--color-gray-700);color:var(--color-gray-300)}.dark .account-action-btn:hover,[data-theme="dark"] .account-action-btn:hover{background:var(--color-bg-700);color:var(--color-gray-100)}.dark .account-dropdown-menu,[data-theme="dark"] .account-dropdown-menu{background:var(--color-bg-800);border-color:var(--color-gray-700)}.dark .account-dropdown-item:hover,[data-theme="dark"] .account-dropdown-item:hover{background:var(--color-bg-700)}.dark .account-dropdown-divider,[data-theme="dark"] .account-dropdown-divider{background:var(--color-gray-700)}.donamic_redesign1 .account-bar{background:var(--donamic-white,var(--color-bg));border-color:var(--donamic-border-light,var(--color-border))}.donamic_redesign1 .account-avatar{background:var(--color-accent-10);color:var(--donamic-primary,var(--color-accent))}.donamic_redesign1 .account-name{color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .account-role-pro{background:var(--color-accent-10);color:var(--donamic-primary-dark,var(--color-accent-dark))}.donamic_redesign1 .account-action-btn{color:var(--donamic-text-light,var(--color-text-muted))}.donamic_redesign1 .account-action-btn:hover{background:var(--donamic-light-gray,var(--color-bg-subtle));color:var(--donamic-text-dark,var(--color-text))}.lesson-list{display:flex;flex-direction:column;gap:var(--spacing-2)}.lesson-card{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-5);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);text-decoration:none;color:inherit;transition:border-color var(--duration-150) var(--ease-in-out),box-shadow var(--duration-150) var(--ease-in-out)}.lesson-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}.lesson-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}.lesson-card-status{width:32px;height:32px;border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--color-bg-subtle);color:var(--color-text-muted)}.lesson-card-status svg,.lesson-card-status .icon{width:16px;height:16px}.lesson-card-content{flex:1;min-width:0}.lesson-card-title{font-weight:var(--font-weight-medium);color:var(--color-text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-card-description{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-card-duration{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);background:var(--color-bg-subtle);padding:4px 8px;border-radius:var(--border-radius-sm);flex-shrink:0}.lesson-card-available .lesson-card-status{background:var(--color-accent-muted);color:var(--color-accent-dark)}.lesson-card-progress .lesson-card-status{background:var(--color-info-50);color:var(--color-info)}.lesson-card-progress{border-color:var(--color-info-200)}.lesson-card-completed{border-color:var(--color-accent);background:var(--color-accent-muted)}.lesson-card-completed .lesson-card-status{background:var(--color-accent);color:var(--color-bg)}.lesson-card-completed .lesson-card-title{color:var(--color-accent-dark)}.lesson-card-locked{opacity:0.7;border-style:dashed;cursor:not-allowed}.lesson-card-locked:hover{border-color:var(--color-border);box-shadow:none}.lesson-card-locked .lesson-card-status{background:var(--color-bg-subtle);color:var(--color-text-muted)}.lesson-card-sm{padding:var(--spacing-3) var(--spacing-4);gap:var(--spacing-3)}.lesson-card-sm .lesson-card-status{width:28px;height:28px}.lesson-card-sm .lesson-card-status svg{width:14px;height:14px}.lesson-card-sm .lesson-card-title{font-size:var(--font-size-sm)}.lesson-card-lg{padding:var(--spacing-5) var(--spacing-6);gap:var(--spacing-5)}.lesson-card-lg .lesson-card-status{width:40px;height:40px}.lesson-card-lg .lesson-card-status svg{width:20px;height:20px}.lesson-card-lg .lesson-card-title{font-size:var(--font-size-lg)}.video-wrapper{width:100%;margin:0 auto}.video-wrapper-sm{max-width:640px}.video-wrapper-md{max-width:854px}.video-wrapper-lg{max-width:1280px}.video-wrapper-xl{max-width:1440px}.video-wrapper .video-container{border-radius:var(--border-radius-lg);overflow:hidden;background:var(--color-gray-900)}.video-caption{padding:var(--spacing-5) 0}.video-caption-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-1)}.video-caption-description{color:var(--color-text-muted);line-height:var(--line-height-relaxed)}.dark .lesson-card,[data-theme="dark"] .lesson-card{background:var(--color-bg-700);border-color:var(--color-gray-700)}.dark .lesson-card:hover,[data-theme="dark"] .lesson-card:hover{border-color:var(--color-accent)}.dark .lesson-card-title,[data-theme="dark"] .lesson-card-title{color:var(--color-gray-100)}.dark .lesson-card-completed,[data-theme="dark"] .lesson-card-completed{background:var(--color-accent-10)}.donamic_redesign1 .lesson-card{display:flex;align-items:center;gap:var(--donamic-space-md,var(--spacing-4));padding:var(--donamic-space-md,var(--spacing-4)) var(--donamic-space-lg,var(--spacing-5));background:var(--donamic-white,var(--color-bg));border:1px solid var(--donamic-border-light,var(--color-border));border-radius:var(--donamic-radius-lg,var(--border-radius-lg));text-decoration:none;color:inherit;transition:all var(--donamic-transition-fast,var(--duration-150))}.donamic_redesign1 .lesson-card:hover{border-color:var(--donamic-primary,var(--color-accent));box-shadow:var(--donamic-shadow-sm,var(--shadow-sm))}.donamic_redesign1 .lesson-card-status{width:32px;height:32px;border-radius:var(--donamic-radius-full,var(--border-radius-full));display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--donamic-light-gray,var(--color-bg-subtle));color:var(--donamic-text-light,var(--color-text-muted))}.donamic_redesign1 .lesson-card-title{font-weight:500;color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .lesson-card-available .lesson-card-status{background:var(--donamic-primary-bg,var(--color-accent-muted));color:var(--donamic-primary-dark,var(--color-accent-dark))}.donamic_redesign1 .lesson-card-completed{border-color:var(--donamic-primary,var(--color-accent));background:var(--donamic-primary-bg,var(--color-accent-muted))}.donamic_redesign1 .lesson-card-completed .lesson-card-status{background:var(--donamic-primary,var(--color-accent));color:var(--donamic-white,var(--color-bg))}.donamic_redesign1 .lesson-card-locked{opacity:0.7;border-style:dashed;cursor:not-allowed}.module-page-header{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-5);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg)}.module-page-header-thumbnail{width:80px;height:60px;flex-shrink:0;border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-bg-subtle)}.module-page-header-thumbnail img{width:100%;height:100%;object-fit:cover}.module-page-header-info{flex:1;min-width:0}.module-page-header-overline{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-accent);margin-bottom:var(--spacing-1)}.module-page-header-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0 0 var(--spacing-2) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.module-page-header-progress{display:flex;align-items:center;gap:var(--spacing-2)}.module-page-header-progress-bar{flex:1;height:4px;max-width:120px;background:var(--color-gray-200);border-radius:var(--border-radius-full);overflow:hidden}.module-page-header-progress-fill{height:100%;background:var(--color-accent);border-radius:var(--border-radius-full);transition:width var(--duration-300) var(--ease-out)}.module-page-header-progress-text{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);min-width:32px}.module-page-header-actions{flex-shrink:0}@media (max-width:639px){.module-page-header{flex-wrap:wrap;gap:var(--spacing-3)}.module-page-header-thumbnail{width:60px;height:45px}.module-page-header-info{flex:1 1 calc(100% - 76px)}.module-page-header-title{font-size:var(--font-size-base)}.module-page-header-actions{width:100%;margin-top:var(--spacing-1)}}.donamic_redesign1 .module-page-header{display:flex;align-items:center;gap:var(--donamic-space-md,var(--spacing-4));padding:var(--donamic-space-md,var(--spacing-4)) var(--donamic-space-lg,var(--spacing-5));background:var(--donamic-white,var(--color-bg));border:1px solid var(--donamic-border-light,var(--color-border));border-radius:var(--donamic-radius-lg,var(--border-radius-lg));box-shadow:var(--donamic-shadow-sm,var(--shadow-sm))}.donamic_redesign1 .module-page-header-thumbnail{width:80px;height:60px;flex-shrink:0;border-radius:var(--donamic-radius-md,var(--border-radius-md));overflow:hidden;background:var(--donamic-light-gray,var(--color-bg-subtle))}.donamic_redesign1 .module-page-header-thumbnail img{width:100%;height:100%;object-fit:cover}.donamic_redesign1 .module-page-header-info{flex:1;min-width:0}.donamic_redesign1 .module-page-header-overline{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--donamic-primary,var(--color-accent));margin-bottom:var(--donamic-space-xs,var(--spacing-1))}.donamic_redesign1 .module-page-header-title{font-size:1.125rem;font-weight:600;color:var(--donamic-text-dark,var(--color-text));margin:0 0 var(--donamic-space-xs,var(--spacing-2)) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.donamic_redesign1 .module-page-header-progress{display:flex;align-items:center;gap:var(--donamic-space-sm,var(--spacing-2))}.donamic_redesign1 .module-page-header-progress-bar{flex:1;height:4px;max-width:100px;background:var(--donamic-border-light,var(--color-gray-200));border-radius:var(--donamic-radius-full,var(--border-radius-full));overflow:hidden}.donamic_redesign1 .module-page-header-progress-fill{height:100%;background:var(--donamic-primary,var(--color-accent));border-radius:var(--donamic-radius-full,var(--border-radius-full));transition:width 0.3s ease}.donamic_redesign1 .module-page-header-progress-text{font-size:0.75rem;font-weight:500;color:var(--donamic-text-medium,var(--color-text-muted));min-width:32px}.donamic_redesign1 .module-page-header-actions{flex-shrink:0}.donamic_redesign1 .module-page-header .btn-donamic-outline{padding:0.5rem 1rem;font-size:0.8125rem}@media (max-width:639px){.donamic_redesign1 .module-page-header{flex-wrap:wrap;gap:var(--donamic-space-sm,var(--spacing-3))}.donamic_redesign1 .module-page-header-thumbnail{width:60px;height:45px}.donamic_redesign1 .module-page-header-info{flex:1 1 calc(100% - 76px)}.donamic_redesign1 .module-page-header-title{font-size:1rem}.donamic_redesign1 .module-page-header-actions{width:100%;margin-top:var(--donamic-space-xs,var(--spacing-1))}.donamic_redesign1 .module-page-header-actions .btn-donamic-outline{width:100%}}.module-accordion{display:flex;flex-direction:column;gap:var(--spacing-4)}.module-item{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden}.module-header{display:flex;align-items:center;gap:var(--spacing-4);width:100%;padding:var(--spacing-5);background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;transition:background-color var(--duration-150) var(--ease-in-out)}.module-header:hover{background:var(--color-bg-subtle)}.module-header:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}.module-icon{width:20px;height:20px;flex-shrink:0;color:var(--color-text-muted);transition:transform var(--duration-200) var(--ease-in-out)}.module-item.active .module-icon,.module-item.is-open .module-icon{transform:rotate(180deg)}.module-title{flex:1;font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0}.module-progress{flex-shrink:0}.module-meta{font-size:var(--font-size-xs);color:var(--color-text-muted);flex-shrink:0}.module-content{display:none;padding:0 var(--spacing-5) var(--spacing-5)}.module-item.active .module-content,.module-item.is-open .module-content{display:block}.module-lessons{display:flex;flex-direction:column;gap:var(--spacing-1)}.module-lesson{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--border-radius-md);text-decoration:none;color:inherit;transition:background-color var(--duration-150) var(--ease-in-out)}.module-lesson:hover{background:var(--color-bg-subtle)}.module-lesson:focus-visible{outline:none;box-shadow:var(--focus-ring)}.module-lesson-status{width:20px;height:20px;border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--color-bg-subtle);color:var(--color-text-muted)}.module-lesson-status svg,.module-lesson-status .icon{width:12px;height:12px}.module-lesson-title{flex:1;font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.module-lesson-duration{font-size:var(--font-size-xs);color:var(--color-text-light);flex-shrink:0}.module-lesson-available .module-lesson-status{background:var(--color-accent-muted);color:var(--color-accent-dark)}.module-lesson-active{background:var(--color-accent-muted)}.module-lesson-active .module-lesson-status{background:var(--color-accent);color:var(--color-bg)}.module-lesson-active .module-lesson-title{color:var(--color-accent-dark);font-weight:var(--font-weight-medium)}.module-lesson-completed .module-lesson-status{background:var(--color-accent);color:var(--color-bg)}.module-lesson-completed .module-lesson-title{color:var(--color-text)}.module-lesson-locked{opacity:0.6;cursor:not-allowed}.module-lesson-locked:hover{background:transparent}.module-lesson-locked .module-lesson-status{background:var(--color-bg-muted);color:var(--color-text-light)}.module-item-completed .module-header{border-left:3px solid var(--color-accent)}.module-item-completed .module-title{color:var(--color-accent-dark)}.module-item-locked{opacity:0.6}.module-item-locked .module-header{cursor:not-allowed}.module-item-locked .module-header:hover{background:transparent}.module-accordion-sm .module-header{padding:var(--spacing-4);gap:var(--spacing-3)}.module-accordion-sm .module-content{padding:0 var(--spacing-4) var(--spacing-4)}.module-accordion-sm .module-title{font-size:var(--font-size-sm)}.module-accordion-sm .module-lesson{padding:var(--spacing-1-5) var(--spacing-3)}.module-accordion-lg .module-header{padding:var(--spacing-6);gap:var(--spacing-5)}.module-accordion-lg .module-title{font-size:var(--font-size-lg)}.dark .module-item,[data-theme="dark"] .module-item{background:var(--color-bg-800);border-color:var(--color-gray-700)}.dark .module-header:hover,[data-theme="dark"] .module-header:hover{background:var(--color-bg-700)}.dark .module-title,[data-theme="dark"] .module-title{color:var(--color-gray-100)}.dark .module-lesson:hover,[data-theme="dark"] .module-lesson:hover{background:var(--color-bg-700)}.dark .module-lesson-title,[data-theme="dark"] .module-lesson-title{color:var(--color-gray-400)}.donamic_redesign1 .module-accordion{display:flex;flex-direction:column;gap:var(--donamic-space-md,var(--spacing-4))}.donamic_redesign1 .module-item{background:var(--donamic-white,var(--color-bg));border:1px solid var(--donamic-border-light,var(--color-border));border-radius:var(--donamic-radius-lg,var(--border-radius-lg));overflow:hidden}.donamic_redesign1 .module-header{display:flex;align-items:center;gap:var(--donamic-space-md,var(--spacing-4));width:100%;padding:var(--donamic-space-lg,var(--spacing-5));background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;transition:background var(--donamic-transition-fast,var(--duration-150))}.donamic_redesign1 .module-header:hover{background:var(--donamic-light-gray,var(--color-bg-subtle))}.donamic_redesign1 .module-icon{width:20px;height:20px;flex-shrink:0;color:var(--donamic-text-light,var(--color-text-muted));transition:transform var(--donamic-transition-fast,var(--duration-150))}.donamic_redesign1 .module-item.active .module-icon{transform:rotate(180deg)}.donamic_redesign1 .module-title{flex:1;font-weight:600;color:var(--donamic-text-dark,var(--color-text));margin:0}.donamic_redesign1 .module-content{display:none;padding:0 var(--donamic-space-lg,var(--spacing-5)) var(--donamic-space-lg,var(--spacing-5))}.donamic_redesign1 .module-item.active .module-content{display:block}.donamic_redesign1 .module-lessons{display:flex;flex-direction:column;gap:var(--donamic-space-xs,var(--spacing-1))}.donamic_redesign1 .module-lesson{display:flex;align-items:center;gap:var(--donamic-space-sm,var(--spacing-2));padding:var(--donamic-space-sm,var(--spacing-2)) var(--donamic-space-md,var(--spacing-4));border-radius:var(--donamic-radius-md,var(--border-radius-md));text-decoration:none;color:inherit;transition:all var(--donamic-transition-fast,var(--duration-150))}.donamic_redesign1 .module-lesson:hover{background:var(--donamic-light-gray,var(--color-bg-subtle))}.donamic_redesign1 .module-lesson-status{width:20px;height:20px;border-radius:var(--donamic-radius-full,var(--border-radius-full));display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--donamic-light-gray,var(--color-bg-subtle));color:var(--donamic-text-light,var(--color-text-muted))}.donamic_redesign1 .module-lesson-title{flex:1;font-size:0.875rem;color:var(--donamic-text-medium,var(--color-text-muted))}.progress{width:100%;height:8px;background:var(--color-gray-200);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar{height:100%;background:var(--color-primary);border-radius:var(--border-radius-full);transition:width var(--duration-300) var(--ease-out)}.progress-xs{height:2px}.progress-sm{height:4px}.progress-lg{height:12px}.progress-xl{height:16px}.progress-bar-primary{background:var(--color-primary)}.progress-bar-secondary{background:var(--color-secondary)}.progress-bar-success{background:var(--color-success)}.progress-bar-error{background:var(--color-error)}.progress-bar-warning{background:var(--color-warning)}.progress-bar-info{background:var(--color-info)}.progress-bar-accent{background:var(--color-accent)}.progress-labeled{display:flex;align-items:center;gap:var(--spacing-3)}.progress-labeled .progress{flex:1}.progress-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);min-width:40px;text-align:right}.progress-stacked{display:flex}.progress-stacked .progress-bar{border-radius:0}.progress-stacked .progress-bar:first-child{border-radius:var(--border-radius-full) 0 0 var(--border-radius-full)}.progress-stacked .progress-bar:last-child{border-radius:0 var(--border-radius-full) var(--border-radius-full) 0}.progress-indeterminate .progress-bar{width:30%;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.progress-bar-striped{background-image:linear-gradient( 45deg,var(--color-white-15) 25%,transparent 25%,transparent 50%,var(--color-white-15) 50%,var(--color-white-15) 75%,transparent 75%,transparent );background-size:1rem 1rem}.progress-bar-animated{animation:progress-bar-stripes 1s linear infinite}@keyframes progress-bar-stripes{0%{background-position:1rem 0}100%{background-position:0 0}}.progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-ring svg{transform:rotate(-90deg)}.progress-ring-track{fill:none;stroke:var(--color-gray-200)}.progress-ring-fill{fill:none;stroke:var(--color-primary);stroke-linecap:round;transition:stroke-dashoffset var(--duration-300) var(--ease-out)}.progress-ring-xs{width:20px;height:20px}.progress-ring-xs .progress-ring-track,.progress-ring-xs .progress-ring-fill{stroke-width:2}.progress-ring-sm{width:32px;height:32px}.progress-ring-sm .progress-ring-track,.progress-ring-sm .progress-ring-fill{stroke-width:3}.progress-ring-md{width:48px;height:48px}.progress-ring-md .progress-ring-track,.progress-ring-md .progress-ring-fill{stroke-width:4}.progress-ring-lg{width:64px;height:64px}.progress-ring-lg .progress-ring-track,.progress-ring-lg .progress-ring-fill{stroke-width:5}.progress-ring-xl{width:96px;height:96px}.progress-ring-xl .progress-ring-track,.progress-ring-xl .progress-ring-fill{stroke-width:6}.progress-ring-success .progress-ring-fill{stroke:var(--color-success)}.progress-ring-error .progress-ring-fill{stroke:var(--color-error)}.progress-ring-warning .progress-ring-fill{stroke:var(--color-warning)}.progress-ring-accent .progress-ring-fill{stroke:var(--color-accent)}.progress-ring-label{position:absolute;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text)}.progress-ring-md .progress-ring-label{font-size:var(--font-size-sm)}.progress-ring-lg .progress-ring-label{font-size:var(--font-size-base)}.progress-ring-xl .progress-ring-label{font-size:var(--font-size-lg)}.dark .progress,[data-theme="dark"] .progress{background:var(--color-gray-700)}.dark .progress-ring-track,[data-theme="dark"] .progress-ring-track{stroke:var(--color-gray-700)}.progress-donamic,.donamic_redesign1 .progress-donamic{width:100%;height:8px;background:var(--color-gray-200,var(--donamic-border-light));border-radius:var(--border-radius-full,var(--donamic-radius-full));overflow:hidden}.progress-donamic-bar,.donamic_redesign1 .progress-donamic-bar{height:100%;background:var(--color-accent,var(--donamic-primary));border-radius:var(--border-radius-full,var(--donamic-radius-full));transition:width 0.3s ease}.progress-donamic-sm{height:4px}.progress-donamic-lg{height:12px}.progress-donamic-labeled,.donamic_redesign1 .progress-donamic-labeled{display:flex;align-items:center;gap:var(--spacing-2,var(--donamic-space-sm))}.progress-donamic-labeled .progress-donamic{flex:1}.progress-donamic-label,.donamic_redesign1 .progress-donamic-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted,var(--donamic-text-medium));min-width:40px;text-align:right}.resource-list{display:flex;flex-direction:column;gap:var(--spacing-2)}.resource-item{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);text-decoration:none;color:inherit;transition:background-color var(--duration-150) var(--ease-in-out),border-color var(--duration-150) var(--ease-in-out)}.resource-item:hover{background:var(--color-bg-subtle);border-color:var(--color-accent)}.resource-item:focus-visible{outline:none;box-shadow:var(--focus-ring)}.resource-icon{width:40px;height:40px;border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--color-bg-subtle);color:var(--color-text-muted)}.resource-icon svg,.resource-icon .icon{width:20px;height:20px}.resource-icon-pdf{background:var(--color-error-50);color:var(--color-error)}.resource-icon-zip,.resource-icon-archive{background:var(--color-warning-50);color:var(--color-warning-600)}.resource-icon-link,.resource-icon-external{background:var(--color-info-50);color:var(--color-info)}.resource-icon-video{background:var(--color-accent-muted);color:var(--color-accent-dark)}.resource-icon-doc,.resource-icon-word{background:var(--color-secondary-50);color:var(--color-secondary)}.resource-icon-image{background:var(--color-primary-50);color:var(--color-primary)}.resource-icon-audio{background:var(--color-success-50);color:var(--color-success)}.resource-icon-spreadsheet,.resource-icon-excel{background:var(--color-success-50);color:var(--color-success)}.resource-icon-presentation,.resource-icon-ppt{background:var(--color-warning-50);color:var(--color-warning-600)}.resource-info{flex:1;min-width:0}.resource-name{font-weight:var(--font-weight-medium);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resource-meta{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:2px}.resource-action{flex-shrink:0;color:var(--color-text-muted);transition:color var(--duration-150) var(--ease-in-out)}.resource-action svg,.resource-action .icon{width:20px;height:20px}.resource-item:hover .resource-action{color:var(--color-accent)}.resource-item-sm{padding:var(--spacing-3);gap:var(--spacing-3)}.resource-item-sm .resource-icon{width:32px;height:32px}.resource-item-sm .resource-icon svg{width:16px;height:16px}.resource-item-sm .resource-name{font-size:var(--font-size-sm)}.resource-item-lg{padding:var(--spacing-5);gap:var(--spacing-5)}.resource-item-lg .resource-icon{width:48px;height:48px}.resource-item-lg .resource-icon svg{width:24px;height:24px}.resource-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-4)}.dark .resource-item,[data-theme="dark"] .resource-item{background:var(--color-bg-700);border-color:var(--color-gray-700)}.dark .resource-item:hover,[data-theme="dark"] .resource-item:hover{background:var(--color-bg-600)}.dark .resource-name,[data-theme="dark"] .resource-name{color:var(--color-gray-100)}.donamic_redesign1 .resource-list{display:flex;flex-direction:column;gap:var(--donamic-space-sm,var(--spacing-2))}.donamic_redesign1 .resource-item{display:flex;align-items:center;gap:var(--donamic-space-md,var(--spacing-4));padding:var(--donamic-space-md,var(--spacing-4));background:var(--donamic-white,var(--color-bg));border:1px solid var(--donamic-border-light,var(--color-border));border-radius:var(--donamic-radius-md,var(--border-radius-md));text-decoration:none;color:inherit;transition:all var(--donamic-transition-fast,var(--duration-150))}.donamic_redesign1 .resource-item:hover{background:var(--donamic-light-gray,var(--color-bg-subtle));border-color:var(--donamic-primary,var(--color-accent))}.donamic_redesign1 .resource-icon{width:40px;height:40px;border-radius:var(--donamic-radius-md,var(--border-radius-md));display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--donamic-light-gray,var(--color-bg-subtle))}.donamic_redesign1 .resource-icon svg{width:20px;height:20px}.donamic_redesign1 .resource-icon-pdf{background:var(--color-error-50);color:var(--color-error)}.donamic_redesign1 .resource-icon-zip{background:var(--color-orange-50);color:var(--color-orange-600)}.donamic_redesign1 .resource-icon-link{background:var(--color-secondary-50);color:var(--color-secondary)}.donamic_redesign1 .resource-name{font-weight:500;color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .resource-meta{font-size:0.75rem;color:var(--donamic-text-light,var(--color-text-muted))}.donamic_redesign1 .resource-item:hover .resource-action{color:var(--donamic-primary,var(--color-accent))}.access-gate{text-align:center;padding:var(--spacing-10);border-radius:var(--border-radius-xl);background:var(--color-bg-subtle);border:1px solid var(--color-border)}.access-gate-icon{width:64px;height:64px;margin:0 auto var(--spacing-6);background:var(--color-bg);border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}.access-gate-icon svg,.access-gate-icon .icon{width:32px;height:32px}.access-gate-badge{display:inline-block;margin-bottom:var(--spacing-4)}.access-gate-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-2)}.access-gate-description{color:var(--color-text-muted);margin-bottom:var(--spacing-6);max-width:400px;margin-left:auto;margin-right:auto;line-height:var(--line-height-relaxed)}.access-gate-action{display:inline-flex;gap:var(--spacing-3)}.access-gate-upgrade{background:linear-gradient(135deg,var(--color-accent-muted) 0%,var(--color-accent-5) 100%);border:2px dashed var(--color-accent)}.access-gate-upgrade .access-gate-icon{background:var(--color-accent-muted);color:var(--color-accent-dark)}.access-gate-upgrade .access-gate-title{color:var(--color-accent-dark)}.access-gate-login{background:var(--color-bg)}.access-gate-login .access-gate-icon{background:var(--color-bg-subtle);color:var(--color-text-muted)}.access-gate-locked{background:var(--color-bg-subtle)}.access-gate-locked .access-gate-icon{background:var(--color-gray-200);color:var(--color-gray-500)}.access-gate-error{background:var(--color-error-50);border-color:var(--color-error-200)}.access-gate-error .access-gate-icon{background:var(--color-error-100);color:var(--color-error)}.access-gate-error .access-gate-title{color:var(--color-error-700)}.access-gate-coming-soon{background:var(--color-info-50);border-color:var(--color-info-200)}.access-gate-coming-soon .access-gate-icon{background:var(--color-info-100);color:var(--color-info)}.access-gate-coming-soon .access-gate-title{color:var(--color-info-700)}.access-gate-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-white-90);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:inherit;z-index:var(--z-10)}.access-gate-overlay .access-gate{background:var(--color-bg);box-shadow:var(--shadow-xl);max-width:400px;margin:var(--spacing-6)}.access-gate-overlay-dark{background:var(--color-black-80)}.access-gate-overlay-dark .access-gate{background:var(--color-bg-800);border-color:var(--color-gray-700)}.access-gate-overlay-dark .access-gate-title{color:var(--color-gray-100)}.access-gate-overlay-dark .access-gate-description{color:var(--color-gray-400)}.access-gate-sm{padding:var(--spacing-6)}.access-gate-sm .access-gate-icon{width:48px;height:48px;margin-bottom:var(--spacing-4)}.access-gate-sm .access-gate-icon svg{width:24px;height:24px}.access-gate-sm .access-gate-title{font-size:var(--font-size-lg)}.access-gate-sm .access-gate-description{font-size:var(--font-size-sm)}.access-gate-lg{padding:var(--spacing-16)}.access-gate-lg .access-gate-icon{width:80px;height:80px;margin-bottom:var(--spacing-8)}.access-gate-lg .access-gate-icon svg{width:40px;height:40px}.access-gate-lg .access-gate-title{font-size:var(--font-size-2xl)}.dark .access-gate,[data-theme="dark"] .access-gate{background:var(--color-bg-800);border-color:var(--color-gray-700)}.dark .access-gate-icon,[data-theme="dark"] .access-gate-icon{background:var(--color-bg-700)}.dark .access-gate-title,[data-theme="dark"] .access-gate-title{color:var(--color-gray-100)}.dark .access-gate-description,[data-theme="dark"] .access-gate-description{color:var(--color-gray-400)}.dark .access-gate-upgrade,[data-theme="dark"] .access-gate-upgrade{background:linear-gradient(135deg,var(--color-accent-15) 0%,var(--color-accent-5) 100%)}.donamic_redesign1 .access-gate{text-align:center;padding:var(--donamic-space-2xl,var(--spacing-10));border-radius:var(--donamic-radius-xl,var(--border-radius-xl));background:var(--donamic-light-gray,var(--color-bg-subtle));border:1px solid var(--donamic-border-light,var(--color-border))}.donamic_redesign1 .access-gate-icon{width:64px;height:64px;margin:0 auto var(--donamic-space-lg,var(--spacing-6));background:var(--donamic-white,var(--color-bg));border-radius:var(--donamic-radius-full,var(--border-radius-full));display:flex;align-items:center;justify-content:center;color:var(--donamic-text-light,var(--color-text-muted))}.donamic_redesign1 .access-gate-title{font-size:1.25rem;font-weight:600;color:var(--donamic-text-dark,var(--color-text));margin-bottom:var(--donamic-space-sm,var(--spacing-2))}.donamic_redesign1 .access-gate-description{color:var(--donamic-text-medium,var(--color-text-muted));margin-bottom:var(--donamic-space-lg,var(--spacing-6));max-width:400px;margin-left:auto;margin-right:auto}.donamic_redesign1 .access-gate-upgrade{background:linear-gradient(135deg,var(--donamic-primary-light,var(--color-accent-muted)) 0%,var(--color-accent-5) 100%);border:2px dashed var(--donamic-primary,var(--color-accent))}.donamic_redesign1 .access-gate-upgrade .access-gate-icon{background:var(--donamic-primary-bg,var(--color-accent-muted));color:var(--donamic-primary-dark,var(--color-accent-dark))}.d-none{display:none !important}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-block{display:block !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-grid{display:grid !important}.d-table{display:table !important}.d-table-row{display:table-row !important}.d-table-cell{display:table-cell !important}@media (min-width:640px){.d-sm-none{display:none !important}.d-sm-inline{display:inline !important}.d-sm-inline-block{display:inline-block !important}.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}.d-sm-inline-flex{display:inline-flex !important}.d-sm-grid{display:grid !important}}@media (min-width:768px){.d-md-none{display:none !important}.d-md-inline{display:inline !important}.d-md-inline-block{display:inline-block !important}.d-md-block{display:block !important}.d-md-flex{display:flex !important}.d-md-inline-flex{display:inline-flex !important}.d-md-grid{display:grid !important}}@media (min-width:1024px){.d-lg-none{display:none !important}.d-lg-inline{display:inline !important}.d-lg-inline-block{display:inline-block !important}.d-lg-block{display:block !important}.d-lg-flex{display:flex !important}.d-lg-inline-flex{display:inline-flex !important}.d-lg-grid{display:grid !important}}@media (min-width:1280px){.d-xl-none{display:none !important}.d-xl-block{display:block !important}.d-xl-flex{display:flex !important}}.flex-row{flex-direction:row !important}.flex-row-reverse{flex-direction:row-reverse !important}.flex-column{flex-direction:column !important}.flex-column-reverse{flex-direction:column-reverse !important}.flex-wrap{flex-wrap:wrap !important}.flex-nowrap{flex-wrap:nowrap !important}.flex-wrap-reverse{flex-wrap:wrap-reverse !important}.justify-start{justify-content:flex-start !important}.justify-end{justify-content:flex-end !important}.justify-center{justify-content:center !important}.justify-between{justify-content:space-between !important}.justify-around{justify-content:space-around !important}.justify-evenly{justify-content:space-evenly !important}.items-start{align-items:flex-start !important}.items-end{align-items:flex-end !important}.items-center{align-items:center !important}.items-baseline{align-items:baseline !important}.items-stretch{align-items:stretch !important}.content-start{align-content:flex-start !important}.content-end{align-content:flex-end !important}.content-center{align-content:center !important}.content-between{align-content:space-between !important}.content-around{align-content:space-around !important}.content-stretch{align-content:stretch !important}.self-auto{align-self:auto !important}.self-start{align-self:flex-start !important}.self-end{align-self:flex-end !important}.self-center{align-self:center !important}.self-stretch{align-self:stretch !important}.flex-1{flex:1 1 0% !important}.flex-auto{flex:1 1 auto !important}.flex-initial{flex:0 1 auto !important}.flex-none{flex:none !important}.flex-grow-0{flex-grow:0 !important}.flex-grow-1{flex-grow:1 !important}.flex-shrink-0{flex-shrink:0 !important}.flex-shrink-1{flex-shrink:1 !important}.order-first{order:-9999 !important}.order-last{order:9999 !important}.order-none{order:0 !important}.order-1{order:1 !important}.order-2{order:2 !important}.order-3{order:3 !important}.gap-0{gap:0 !important}.gap-1{gap:var(--spacing-1) !important}.gap-2{gap:var(--spacing-2) !important}.gap-3{gap:var(--spacing-3) !important}.gap-4{gap:var(--spacing-4) !important}.gap-5{gap:var(--spacing-5) !important}.gap-6{gap:var(--spacing-6) !important}.gap-8{gap:var(--spacing-8) !important}.gap-sm{gap:0.75rem !important}.gap-md{gap:1rem !important}.gap-lg{gap:1.5rem !important}.gap-xl{gap:2rem !important}.m-0{margin:0 !important}.m-1{margin:var(--spacing-1) !important}.m-2{margin:var(--spacing-2) !important}.m-3{margin:var(--spacing-3) !important}.m-4{margin:var(--spacing-4) !important}.m-5{margin:var(--spacing-5) !important}.m-6{margin:var(--spacing-6) !important}.m-8{margin:var(--spacing-8) !important}.m-10{margin:var(--spacing-10) !important}.m-12{margin:var(--spacing-12) !important}.m-auto{margin:auto !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.mx-1{margin-left:var(--spacing-1) !important;margin-right:var(--spacing-1) !important}.mx-2{margin-left:var(--spacing-2) !important;margin-right:var(--spacing-2) !important}.mx-3{margin-left:var(--spacing-3) !important;margin-right:var(--spacing-3) !important}.mx-4{margin-left:var(--spacing-4) !important;margin-right:var(--spacing-4) !important}.mx-6{margin-left:var(--spacing-6) !important;margin-right:var(--spacing-6) !important}.mx-8{margin-left:var(--spacing-8) !important;margin-right:var(--spacing-8) !important}.mx-auto{margin-left:auto !important;margin-right:auto !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.my-1{margin-top:var(--spacing-1) !important;margin-bottom:var(--spacing-1) !important}.my-2{margin-top:var(--spacing-2) !important;margin-bottom:var(--spacing-2) !important}.my-3{margin-top:var(--spacing-3) !important;margin-bottom:var(--spacing-3) !important}.my-4{margin-top:var(--spacing-4) !important;margin-bottom:var(--spacing-4) !important}.my-6{margin-top:var(--spacing-6) !important;margin-bottom:var(--spacing-6) !important}.my-8{margin-top:var(--spacing-8) !important;margin-bottom:var(--spacing-8) !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-0{margin-top:0 !important}.mt-1{margin-top:var(--spacing-1) !important}.mt-2{margin-top:var(--spacing-2) !important}.mt-3{margin-top:var(--spacing-3) !important}.mt-4{margin-top:var(--spacing-4) !important}.mt-5{margin-top:var(--spacing-5) !important}.mt-6{margin-top:var(--spacing-6) !important}.mt-8{margin-top:var(--spacing-8) !important}.mt-10{margin-top:var(--spacing-10) !important}.mt-12{margin-top:var(--spacing-12) !important}.mt-auto{margin-top:auto !important}.mr-0{margin-right:0 !important}.mr-1{margin-right:var(--spacing-1) !important}.mr-2{margin-right:var(--spacing-2) !important}.mr-3{margin-right:var(--spacing-3) !important}.mr-4{margin-right:var(--spacing-4) !important}.mr-6{margin-right:var(--spacing-6) !important}.mr-8{margin-right:var(--spacing-8) !important}.mr-auto{margin-right:auto !important}.mb-0{margin-bottom:0 !important}.mb-1{margin-bottom:var(--spacing-1) !important}.mb-2{margin-bottom:var(--spacing-2) !important}.mb-3{margin-bottom:var(--spacing-3) !important}.mb-4{margin-bottom:var(--spacing-4) !important}.mb-5{margin-bottom:var(--spacing-5) !important}.mb-6{margin-bottom:var(--spacing-6) !important}.mb-8{margin-bottom:var(--spacing-8) !important}.mb-10{margin-bottom:var(--spacing-10) !important}.mb-12{margin-bottom:var(--spacing-12) !important}.mb-auto{margin-bottom:auto !important}.ml-0{margin-left:0 !important}.ml-1{margin-left:var(--spacing-1) !important}.ml-2{margin-left:var(--spacing-2) !important}.ml-3{margin-left:var(--spacing-3) !important}.ml-4{margin-left:var(--spacing-4) !important}.ml-6{margin-left:var(--spacing-6) !important}.ml-8{margin-left:var(--spacing-8) !important}.ml-auto{margin-left:auto !important}.p-0{padding:0 !important}.p-1{padding:var(--spacing-1) !important}.p-2{padding:var(--spacing-2) !important}.p-3{padding:var(--spacing-3) !important}.p-4{padding:var(--spacing-4) !important}.p-5{padding:var(--spacing-5) !important}.p-6{padding:var(--spacing-6) !important}.p-8{padding:var(--spacing-8) !important}.p-10{padding:var(--spacing-10) !important}.p-12{padding:var(--spacing-12) !important}.px-0{padding-left:0 !important;padding-right:0 !important}.px-1{padding-left:var(--spacing-1) !important;padding-right:var(--spacing-1) !important}.px-2{padding-left:var(--spacing-2) !important;padding-right:var(--spacing-2) !important}.px-3{padding-left:var(--spacing-3) !important;padding-right:var(--spacing-3) !important}.px-4{padding-left:var(--spacing-4) !important;padding-right:var(--spacing-4) !important}.px-5{padding-left:var(--spacing-5) !important;padding-right:var(--spacing-5) !important}.px-6{padding-left:var(--spacing-6) !important;padding-right:var(--spacing-6) !important}.px-8{padding-left:var(--spacing-8) !important;padding-right:var(--spacing-8) !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.py-1{padding-top:var(--spacing-1) !important;padding-bottom:var(--spacing-1) !important}.py-2{padding-top:var(--spacing-2) !important;padding-bottom:var(--spacing-2) !important}.py-3{padding-top:var(--spacing-3) !important;padding-bottom:var(--spacing-3) !important}.py-4{padding-top:var(--spacing-4) !important;padding-bottom:var(--spacing-4) !important}.py-5{padding-top:var(--spacing-5) !important;padding-bottom:var(--spacing-5) !important}.py-6{padding-top:var(--spacing-6) !important;padding-bottom:var(--spacing-6) !important}.py-8{padding-top:var(--spacing-8) !important;padding-bottom:var(--spacing-8) !important}.pt-0{padding-top:0 !important}.pt-1{padding-top:var(--spacing-1) !important}.pt-2{padding-top:var(--spacing-2) !important}.pt-3{padding-top:var(--spacing-3) !important}.pt-4{padding-top:var(--spacing-4) !important}.pt-6{padding-top:var(--spacing-6) !important}.pt-8{padding-top:var(--spacing-8) !important}.pr-0{padding-right:0 !important}.pr-1{padding-right:var(--spacing-1) !important}.pr-2{padding-right:var(--spacing-2) !important}.pr-3{padding-right:var(--spacing-3) !important}.pr-4{padding-right:var(--spacing-4) !important}.pr-6{padding-right:var(--spacing-6) !important}.pr-8{padding-right:var(--spacing-8) !important}.pb-0{padding-bottom:0 !important}.pb-1{padding-bottom:var(--spacing-1) !important}.pb-2{padding-bottom:var(--spacing-2) !important}.pb-3{padding-bottom:var(--spacing-3) !important}.pb-4{padding-bottom:var(--spacing-4) !important}.pb-6{padding-bottom:var(--spacing-6) !important}.pb-8{padding-bottom:var(--spacing-8) !important}.pl-0{padding-left:0 !important}.pl-1{padding-left:var(--spacing-1) !important}.pl-2{padding-left:var(--spacing-2) !important}.pl-3{padding-left:var(--spacing-3) !important}.pl-4{padding-left:var(--spacing-4) !important}.pl-6{padding-left:var(--spacing-6) !important}.pl-8{padding-left:var(--spacing-8) !important}.w-auto{width:auto !important}.w-full{width:100% !important}.w-screen{width:100vw !important}.w-min{width:min-content !important}.w-max{width:max-content !important}.w-fit{width:fit-content !important}.w-1\/2{width:50% !important}.w-1\/3{width:33.333333% !important}.w-2\/3{width:66.666667% !important}.w-1\/4{width:25% !important}.w-3\/4{width:75% !important}.w-300{width:300px !important}.w-400{width:400px !important}.w-500{width:500px !important}.min-w-0{min-width:0 !important}.min-w-full{min-width:100% !important}.max-w-none{max-width:none !important}.max-w-xs{max-width:20rem !important}.max-w-sm{max-width:24rem !important}.max-w-md{max-width:28rem !important}.max-w-lg{max-width:32rem !important}.max-w-xl{max-width:36rem !important}.max-w-2xl{max-width:42rem !important}.max-w-3xl{max-width:48rem !important}.max-w-4xl{max-width:56rem !important}.max-w-full{max-width:100% !important}.max-w-prose{max-width:65ch !important}.max-w-320{max-width:320px !important}.max-w-400{max-width:400px !important}.max-w-480{max-width:480px !important}.max-w-500{max-width:500px !important}.max-w-540{max-width:540px !important}.max-w-600{max-width:600px !important}.max-w-700{max-width:700px !important}.max-w-800{max-width:800px !important}.max-w-screen-sm{max-width:640px !important}.max-w-screen-md{max-width:768px !important}.max-w-screen-lg{max-width:1024px !important}.max-w-screen-xl{max-width:1280px !important}.h-auto{height:auto !important}.h-full{height:100% !important}.h-screen{height:100vh !important}.h-min{height:min-content !important}.h-max{height:max-content !important}.h-fit{height:fit-content !important}.min-h-0{min-height:0 !important}.min-h-full{min-height:100% !important}.min-h-screen{min-height:100vh !important}.max-h-full{max-height:100% !important}.max-h-screen{max-height:100vh !important}.static{position:static !important}.relative{position:relative !important}.absolute{position:absolute !important}.fixed{position:fixed !important}.sticky{position:sticky !important}.inset-0{top:0 !important;right:0 !important;bottom:0 !important;left:0 !important}.inset-auto{top:auto !important;right:auto !important;bottom:auto !important;left:auto !important}.top-0{top:0 !important}.top-auto{top:auto !important}.right-0{right:0 !important}.right-auto{right:auto !important}.bottom-0{bottom:0 !important}.bottom-auto{bottom:auto !important}.left-0{left:0 !important}.left-auto{left:auto !important}.z-0{z-index:0 !important}.z-10{z-index:10 !important}.z-20{z-index:20 !important}.z-30{z-index:30 !important}.z-40{z-index:40 !important}.z-50{z-index:50 !important}.z-auto{z-index:auto !important}.overflow-auto{overflow:auto !important}.overflow-hidden{overflow:hidden !important}.overflow-visible{overflow:visible !important}.overflow-scroll{overflow:scroll !important}.overflow-x-auto{overflow-x:auto !important}.overflow-x-hidden{overflow-x:hidden !important}.overflow-y-auto{overflow-y:auto !important}.overflow-y-hidden{overflow-y:hidden !important}.border-0{border-width:0 !important}.border{border-width:1px !important}.border-2{border-width:2px !important}.border-4{border-width:4px !important}.border-t{border-top-width:1px !important}.border-r{border-right-width:1px !important}.border-b{border-bottom-width:1px !important}.border-l{border-left-width:1px !important}.border-solid{border-style:solid !important}.border-dashed{border-style:dashed !important}.border-dotted{border-style:dotted !important}.border-none{border-style:none !important}.border-transparent{border-color:transparent !important}.border-current{border-color:currentColor !important}.border-default{border-color:var(--color-border) !important}.border-primary{border-color:var(--color-primary) !important}.border-secondary{border-color:var(--color-secondary) !important}.border-success{border-color:var(--color-success) !important}.border-error{border-color:var(--color-error) !important}.border-warning{border-color:var(--color-warning) !important}.border-info{border-color:var(--color-info) !important}.border-light{border-color:var(--color-border-light,rgba(0,0,0,0.1)) !important}.rounded-none{border-radius:0 !important}.rounded-sm{border-radius:var(--border-radius-sm) !important}.rounded{border-radius:var(--border-radius-base) !important}.rounded-md{border-radius:var(--border-radius-md) !important}.rounded-lg{border-radius:var(--border-radius-lg) !important}.rounded-xl{border-radius:var(--border-radius-xl) !important}.rounded-2xl{border-radius:var(--border-radius-2xl) !important}.rounded-full{border-radius:var(--border-radius-full) !important}.bg-transparent{background-color:transparent !important}.bg-white{background-color:#ffffff !important}.bg-black{background-color:#000000 !important}.bg-primary{background-color:var(--color-primary) !important}.bg-primary-50{background-color:var(--color-primary-50) !important}.bg-primary-100{background-color:var(--color-primary-100) !important}.bg-secondary{background-color:var(--color-secondary) !important}.bg-success{background-color:var(--color-success) !important}.bg-success-50{background-color:var(--color-success-50) !important}.bg-error{background-color:var(--color-error) !important}.bg-error-50{background-color:var(--color-error-50) !important}.bg-warning{background-color:var(--color-warning) !important}.bg-warning-50{background-color:var(--color-warning-50) !important}.bg-info{background-color:var(--color-info) !important}.bg-info-50{background-color:var(--color-info-50) !important}.bg-gray-50{background-color:var(--color-gray-50) !important}.bg-gray-100{background-color:var(--color-gray-100) !important}.bg-gray-200{background-color:var(--color-gray-200) !important}.bg-gray-800{background-color:var(--color-gray-800) !important}.bg-gray-900{background-color:var(--color-gray-900) !important}.shadow-none{box-shadow:var(--shadow-none) !important}.shadow-sm{box-shadow:var(--shadow-sm) !important}.shadow{box-shadow:var(--shadow-base) !important}.shadow-md{box-shadow:var(--shadow-md) !important}.shadow-lg{box-shadow:var(--shadow-lg) !important}.shadow-xl{box-shadow:var(--shadow-xl) !important}.shadow-2xl{box-shadow:var(--shadow-2xl) !important}.shadow-inner{box-shadow:var(--shadow-inner) !important}.opacity-0{opacity:0 !important}.opacity-25{opacity:0.25 !important}.opacity-50{opacity:0.5 !important}.opacity-75{opacity:0.75 !important}.opacity-100{opacity:1 !important}.visible{visibility:visible !important}.invisible{visibility:hidden !important}.cursor-auto{cursor:auto !important}.cursor-default{cursor:default !important}.cursor-pointer{cursor:pointer !important}.cursor-wait{cursor:wait !important}.cursor-text{cursor:text !important}.cursor-move{cursor:move !important}.cursor-not-allowed{cursor:not-allowed !important}.select-none{user-select:none !important}.select-text{user-select:text !important}.select-all{user-select:all !important}.select-auto{user-select:auto !important}.pointer-events-none{pointer-events:none !important}.pointer-events-auto{pointer-events:auto !important}.aspect-auto{aspect-ratio:auto !important}.aspect-square{aspect-ratio:1 / 1 !important}.aspect-video{aspect-ratio:16 / 9 !important}.aspect-4-3{aspect-ratio:4 / 3 !important}.object-contain{object-fit:contain !important}.object-cover{object-fit:cover !important}.object-fill{object-fit:fill !important}.object-none{object-fit:none !important}.object-scale-down{object-fit:scale-down !important}.object-bottom{object-position:bottom !important}.object-center{object-position:center !important}.object-left{object-position:left !important}.object-right{object-position:right !important}.object-top{object-position:top !important}.transition-none{transition:none !important}.transition{transition:all var(--duration-150) var(--ease-in-out) !important}.transition-colors{transition:color var(--duration-150) var(--ease-in-out),background-color var(--duration-150) var(--ease-in-out),border-color var(--duration-150) var(--ease-in-out) !important}.transition-opacity{transition:opacity var(--duration-150) var(--ease-in-out) !important}.transition-transform{transition:transform var(--duration-150) var(--ease-in-out) !important}.transition-shadow{transition:box-shadow var(--duration-150) var(--ease-in-out) !important}.duration-75{transition-duration:var(--duration-75) !important}.duration-100{transition-duration:var(--duration-100) !important}.duration-150{transition-duration:var(--duration-150) !important}.duration-200{transition-duration:var(--duration-200) !important}.duration-300{transition-duration:var(--duration-300) !important}.duration-500{transition-duration:var(--duration-500) !important}.scale-0{transform:scale(0) !important}.scale-50{transform:scale(0.5) !important}.scale-75{transform:scale(0.75) !important}.scale-90{transform:scale(0.9) !important}.scale-95{transform:scale(0.95) !important}.scale-100{transform:scale(1) !important}.scale-105{transform:scale(1.05) !important}.scale-110{transform:scale(1.1) !important}.scale-125{transform:scale(1.25) !important}.scale-150{transform:scale(1.5) !important}.rotate-0{transform:rotate(0deg) !important}.rotate-45{transform:rotate(45deg) !important}.rotate-90{transform:rotate(90deg) !important}.rotate-180{transform:rotate(180deg) !important}.-rotate-45{transform:rotate(-45deg) !important}.-rotate-90{transform:rotate(-90deg) !important}.-rotate-180{transform:rotate(-180deg) !important}.text-xs{font-size:var(--font-size-xs) !important}.text-sm{font-size:var(--font-size-sm) !important}.text-base{font-size:var(--font-size-base) !important}.text-lg{font-size:var(--font-size-lg) !important}.text-xl{font-size:var(--font-size-xl) !important}.text-2xl{font-size:var(--font-size-2xl) !important}.text-3xl{font-size:var(--font-size-3xl) !important}.text-4xl{font-size:var(--font-size-4xl) !important}.text-5xl{font-size:var(--font-size-5xl) !important}.text-primary{color:var(--color-primary) !important}.text-secondary{color:var(--color-secondary) !important}.text-success{color:var(--color-success) !important}.text-error{color:var(--color-error) !important}.text-warning{color:var(--color-warning) !important}.text-info{color:var(--color-info) !important}.text-muted{color:var(--color-text-muted) !important}.text-white{color:#ffffff !important}.text-white-muted{color:rgba(255,255,255,0.8) !important}.text-white-subtle{color:rgba(255,255,255,0.5) !important}.text-black{color:#000000 !important}.text-dark{color:var(--color-gray-900,#0a0a0a) !important}.text-inherit{color:inherit !important}.text-current{color:currentColor !important}@media print{.print-hidden{display:none !important}.print-block{display:block !important}}.resize-none{resize:none !important}.resize{resize:both !important}.resize-y{resize:vertical !important}.resize-x{resize:horizontal !important}.gap-xl{gap:2rem !important}.gap-2xl{gap:3rem !important}.gap-3xl{gap:4rem !important}.font-thin{font-weight:100 !important}.font-extralight{font-weight:200 !important}.font-light{font-weight:var(--font-weight-light,300) !important}.font-normal{font-weight:var(--font-weight-normal,400) !important}.font-medium{font-weight:var(--font-weight-medium,500) !important}.font-semibold{font-weight:var(--font-weight-semibold,600) !important}.font-bold{font-weight:var(--font-weight-bold,700) !important}.font-extrabold{font-weight:var(--font-weight-extrabold,800) !important}.font-black{font-weight:900 !important}.leading-none{line-height:var(--line-height-none,1) !important}.leading-tight{line-height:var(--line-height-tight,1.25) !important}.leading-snug{line-height:var(--line-height-snug,1.375) !important}.leading-normal{line-height:var(--line-height-normal,1.5) !important}.leading-relaxed{line-height:var(--line-height-relaxed,1.625) !important}.leading-loose{line-height:var(--line-height-loose,2) !important}.tracking-tighter{letter-spacing:var(--letter-spacing-tighter,-0.05em) !important}.tracking-tight{letter-spacing:var(--letter-spacing-tight,-0.025em) !important}.tracking-normal{letter-spacing:var(--letter-spacing-normal,0) !important}.tracking-wide{letter-spacing:var(--letter-spacing-wide,0.025em) !important}.tracking-wider{letter-spacing:var(--letter-spacing-wider,0.05em) !important}.tracking-widest{letter-spacing:var(--letter-spacing-widest,0.1em) !important}.underline{text-decoration:underline !important}.overline{text-decoration:overline !important}.line-through{text-decoration:line-through !important}.no-underline{text-decoration:none !important}.decoration-solid{text-decoration-style:solid !important}.decoration-double{text-decoration-style:double !important}.decoration-dotted{text-decoration-style:dotted !important}.decoration-dashed{text-decoration-style:dashed !important}.decoration-wavy{text-decoration-style:wavy !important}.italic{font-style:italic !important}.not-italic{font-style:normal !important}.uppercase{text-transform:uppercase !important}.lowercase{text-transform:lowercase !important}.capitalize{text-transform:capitalize !important}.normal-case{text-transform:none !important}.break-normal{overflow-wrap:normal !important;word-break:normal !important}.break-words{overflow-wrap:break-word !important}.break-all{word-break:break-all !important}.break-keep{word-break:keep-all !important}.whitespace-normal{white-space:normal !important}.whitespace-nowrap{white-space:nowrap !important}.whitespace-pre{white-space:pre !important}.whitespace-pre-line{white-space:pre-line !important}.whitespace-pre-wrap{white-space:pre-wrap !important}.truncate{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}.text-gradient{background:var(--gradient-text,linear-gradient(135deg,var(--color-accent),var(--color-magic-teal))) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important}.text-gradient-magic{background:var(--gradient-magic,linear-gradient(135deg,var(--color-magic-purple),var(--color-magic-pink),var(--color-accent))) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important}.bg-gray-300{background-color:var(--color-gray-300) !important}.bg-gray-400{background-color:var(--color-gray-400) !important}.bg-gray-500{background-color:var(--color-gray-500) !important}.bg-gray-600{background-color:var(--color-gray-600) !important}.bg-gray-700{background-color:var(--color-gray-700) !important}.bg-orange{background-color:var(--color-orange) !important}.bg-orange-50{background-color:var(--color-orange-50) !important}.bg-orange-100{background-color:var(--color-orange-100) !important}.bg-orange-500{background-color:var(--color-orange-500) !important}.bg-orange-600{background-color:var(--color-orange-600) !important}.text-orange{color:var(--color-orange) !important}.text-orange-500{color:var(--color-orange-500) !important}.text-orange-600{color:var(--color-orange-600) !important}.bg-accent{background-color:var(--color-accent) !important}.bg-accent-muted{background-color:var(--color-accent-muted) !important}.border-orange{border-color:var(--color-orange) !important}.border-accent{border-color:var(--color-accent) !important}.max-w-280{max-width:280px !important}.max-w-300{max-width:300px !important}.max-w-350{max-width:350px !important}.text-left{text-align:left !important}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-justify{text-align:justify !important}