/* ========================================================================== 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")}/* Selectable rows */ .table-selectable tbody tr{cursor:pointer}.table-selectable tbody tr.selected > *{background-color:var(--color-primary-50)}/* Fixed header */ .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)}/* Fixed first column */ .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 (Table inside card) ========================================================================== */ .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)}/* ========================================================================== EMPTY STATE ========================================================================== */ .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)}/* ========================================================================== BADGES,PROGRESS,AVATAR,SPINNER COMPONENTS ========================================================================== */ /* ========================================================================== BADGE ========================================================================== */ .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 sizes */ .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 variants */ .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)}/* Soft/subtle badges */ .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)}/* Outline badges */ .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)}/* Dot badge (notification indicator) */ .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 with icon */ .badge svg,.badge .icon{width:0.875em;height:0.875em;margin-right:var(--spacing-1)}/* ========================================================================== PROGRESS BAR ========================================================================== */ .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 sizes */ .progress-sm{height:0.25rem}.progress-lg{height:1rem}.progress-xl{height:1.5rem}/* Progress with label */ .progress-lg .progress-bar,.progress-xl .progress-bar{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}/* Progress variants */ .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)}/* Striped progress */ .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}/* Animated progress */ .progress-bar-animated{animation:progress-bar-stripes 1s linear infinite}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}/* Stacked progress (multiple bars) */ .progress-stacked{display:flex}.progress-stacked .progress-bar{overflow:visible}/* ========================================================================== AVATAR ========================================================================== */ .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 sizes */ .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 with status indicator */ .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 colors */ .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)}/* Square avatar */ .avatar-square{border-radius:var(--border-radius-lg)}/* Avatar group */ .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 / LOADING ========================================================================== */ .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 sizes */ .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 colors */ .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}/* Dots spinner */ .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 LOADER ========================================================================== */ .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%;/* 16:9 aspect ratio */}/* ========================================================================== TOOLTIP & POPOVER COMPONENTS ========================================================================== */ /* ========================================================================== CSS-ONLY TOOLTIP (using data attribute) ========================================================================== */ [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)}/* Tooltip content */ [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)}/* Tooltip arrow */ [data-tooltip]::before{content:"";border:5px solid transparent}/* Show on hover/focus */ [data-tooltip]:hover::before,[data-tooltip]:hover::after,[data-tooltip]:focus::before,[data-tooltip]:focus::after{opacity:1;visibility:visible}/* ========================================================================== TOOLTIP POSITIONS ========================================================================== */ /* Top (default) */ [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)}/* Bottom */ [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)}/* Left */ [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)}/* Right */ [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)}/* ========================================================================== TOOLTIP VARIANTS ========================================================================== */ /* Light tooltip */ [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)}/* Multiline tooltip */ [data-tooltip-multiline]::after{white-space:normal;width:max-content;max-width:250px;text-align:center}/* ========================================================================== JS TOOLTIP (for complex tooltips) ========================================================================== */ .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}/* Arrow positions */ .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 ========================================================================== */ .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 arrow positions */ .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)}/* ========================================================================== DROPDOWN TOOLTIP (Combined dropdown + tooltip styling) ========================================================================== */ .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 - Stepper/Timeline Component Styleguide v1.0 ========================================================================== */ /* ========================================================================== TIMELINE CONTAINER ========================================================================== */ .timeline{position:relative;display:flex;flex-direction:column;gap:var(--spacing-0)}/* Vertical line */ .timeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--color-border)}/* ========================================================================== TIMELINE ITEM ========================================================================== */ .timeline-item{position:relative;display:flex;gap:var(--spacing-4);padding-bottom:var(--spacing-6)}.timeline-item:last-child{padding-bottom:0}/* ========================================================================== TIMELINE MARKER ========================================================================== */ .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 ========================================================================== */ .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 STATE VARIANTS ========================================================================== */ /* Completed */ .timeline-item-completed .timeline-marker{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}/* Active / Current */ .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)}/* Pending / Upcoming */ .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)}/* Error */ .timeline-item-error .timeline-marker{background:var(--color-error-50);border-color:var(--color-error);color:var(--color-error)}/* ========================================================================== SIZE VARIANTS ========================================================================== */ /* Small */ .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)}/* Large */ .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)}/* ========================================================================== HORIZONTAL TIMELINE ========================================================================== */ .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)}/* ========================================================================== ALTERNATING TIMELINE ========================================================================== */ .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}/* ========================================================================== CONNECTED TIMELINE (with cards) ========================================================================== */ .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 THEME SUPPORT ========================================================================== */ .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 THEME VARIANTS ========================================================================== */ /* Dark Section */ .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 THEME ALIASES ========================================================================== */ .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))}/* ========================================================================== MILESTONE TIMELINE VARIANT Large markers with day counts (30,90,180),badges,and notes. Usage:.timeline.timeline-milestones ========================================================================== */ .timeline-milestones::before{left:29px;width:3px;background:var(--color-accent)}.timeline-milestones .timeline-item{gap:var(--spacing-6);padding-bottom:var(--spacing-10)}.timeline-milestones .timeline-marker{width:60px;height:60px;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);flex-direction:column;line-height:1}.timeline-milestones .timeline-marker .milestone-days{font-size:var(--font-size-lg);font-weight:var(--font-weight-extrabold);line-height:1}.timeline-milestones .timeline-marker .milestone-label{font-size:0.625rem;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);opacity:0.8}.timeline-milestones .timeline-content h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);margin:0 0 var(--spacing-3) 0}.timeline-milestones .timeline-content ul{list-style:none;margin:0 0 var(--spacing-4) 0;padding:0}.timeline-milestones .timeline-content li{position:relative;padding-left:var(--spacing-5);margin-bottom:var(--spacing-2);font-size:var(--font-size-base);color:var(--color-text-muted);line-height:var(--line-height-relaxed)}.timeline-milestones .timeline-content li::before{content:'\2713';position:absolute;left:0;color:var(--color-accent);font-weight:var(--font-weight-bold)}.milestone-badge{display:inline-block;padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-accent-dark);background:var(--color-accent-muted);border-radius:var(--border-radius-sm)}/* Milestone process note */ .process-note{margin-top:var(--spacing-8);text-align:center;max-width:700px;margin-left:auto;margin-right:auto}.process-note p{font-size:var(--font-size-base);color:var(--color-text-muted);line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-4) 0}.process-note .process-quote{font-style:italic;color:var(--color-text)}.process-note .process-quote cite{display:block;margin-top:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:normal}/* Donamic theme for milestones */ .donamic_redesign1 .timeline-milestones::before{background:var(--donamic-primary,var(--color-accent));left:29px}.donamic_redesign1 .timeline-milestones .timeline-marker{width:60px;height:60px;background:var(--donamic-primary,var(--color-accent));border-color:var(--donamic-primary,var(--color-accent));color:var(--donamic-black,var(--color-bg))}.donamic_redesign1 .timeline-milestones .timeline-content h3{color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .timeline-milestones .timeline-content li{color:var(--donamic-text-medium,var(--color-text-muted))}.donamic_redesign1 .timeline-milestones .timeline-content li::before{color:var(--donamic-primary,var(--color-accent))}.donamic_redesign1 .milestone-badge{color:var(--donamic-text-dark,var(--color-accent-dark));background:var(--donamic-primary-light,rgba(99,229,38,0.1))}.donamic_redesign1 .process-note .process-quote{color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .process-note .process-quote cite{color:var(--donamic-text-light,var(--color-text-muted))}/* ========================================================================== VIDEO PLAYER COMPONENTS Custom video player styling and responsive embeds ========================================================================== */ /* ========================================================================== RESPONSIVE VIDEO CONTAINER ========================================================================== */ .video-container{position:relative;width:100%;overflow:hidden;background-color:var(--color-gray-900);border-radius:var(--border-radius-lg)}/* 16:9 Aspect Ratio */ .video-container-16-9{padding-bottom:56.25%}/* 4:3 Aspect Ratio */ .video-container-4-3{padding-bottom:75%}/* 21:9 Aspect Ratio (Ultrawide) */ .video-container-21-9{padding-bottom:42.857%}/* 1:1 Aspect Ratio (Square) */ .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}/* ========================================================================== CUSTOM VIDEO PLAYER ========================================================================== */ .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 (for play button,etc.) */ .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}/* Big play button */ .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;/* Optical centering for play icon */}/* ========================================================================== VIDEO CONTROLS ========================================================================== */ .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}/* Progress bar */ .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)}/* Progress thumb */ .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)}/* Controls row */ .video-controls-row{display:flex;align-items:center;gap:var(--spacing-2)}/* Control button */ .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}/* Time display */ .video-time{font-size:var(--font-size-sm);color:var(--color-text-inverse);font-variant-numeric:tabular-nums;margin:0 var(--spacing-2)}/* Spacer */ .video-controls-spacer{flex:1}/* ========================================================================== VOLUME CONTROL ========================================================================== */ .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}/* ========================================================================== FULLSCREEN BUTTON ========================================================================== */ .video-fullscreen-btn{margin-left:auto}/* ========================================================================== VIDEO THUMBNAIL / POSTER ========================================================================== */ .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)}/* Duration badge */ .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 ========================================================================== */ .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 ========================================================================== */ .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)}/* ========================================================================== LOADING STATE ========================================================================== */ .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)}/* ========================================================================== CAPTIONS/SUBTITLES ========================================================================== */ .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)}/* Caption button active state */ .video-caption-btn.active{color:var(--color-primary)}/* ========================================================================== RESPONSIVE ADJUSTMENTS ========================================================================== */ @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 - Member Area Header Component Styleguide v1.0 ========================================================================== */ /* ========================================================================== ACCOUNT BAR CONTAINER ========================================================================== */ .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 (Left side) ========================================================================== */ .account-info{display:flex;align-items:center;gap:var(--spacing-3)}/* ========================================================================== ACCOUNT AVATAR ========================================================================== */ .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}/* Avatar sizes */ .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 ========================================================================== */ .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 BADGE ========================================================================== */ .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)}/* Role variants */ .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 (Right side) ========================================================================== */ .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}/* Notification badge */ .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)}/* ========================================================================== SIZE VARIANTS ========================================================================== */ /* Compact */ .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}/* Large */ .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)}/* ========================================================================== STYLE VARIANTS ========================================================================== */ /* Transparent (for overlay on hero) */ .account-bar-transparent{background:transparent;border-bottom:none}/* Sticky */ .account-bar-sticky{position:sticky;top:0;z-index:var(--z-index-sticky)}/* With shadow */ .account-bar-elevated{box-shadow:var(--shadow-sm);border-bottom:none}/* Centered layout */ .account-bar-centered{justify-content:center}.account-bar-centered .account-info{flex-direction:column;text-align:center}/* ========================================================================== DROPDOWN MENU ========================================================================== */ .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 THEME SUPPORT ========================================================================== */ .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 THEME ALIASES ========================================================================== */ .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 - Lesson Card Component for Course Navigation Styleguide v1.0 ========================================================================== */ /* ========================================================================== LESSON LIST ========================================================================== */ .lesson-list{display:flex;flex-direction:column;gap:var(--spacing-2)}/* ========================================================================== LESSON CARD ========================================================================== */ .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 STATUS ICON ========================================================================== */ .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 CONTENT ========================================================================== */ .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 DURATION ========================================================================== */ .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 STATE VARIANTS ========================================================================== */ /* Available - Ready to play */ .lesson-card-available .lesson-card-status{background:var(--color-accent-muted);color:var(--color-accent-dark)}/* In Progress - Currently watching */ .lesson-card-progress .lesson-card-status{background:var(--color-info-50);color:var(--color-info)}.lesson-card-progress{border-color:var(--color-info-200)}/* Completed - Already watched */ .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)}/* Locked - Not accessible */ .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)}/* ========================================================================== SIZE VARIANTS ========================================================================== */ .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 ========================================================================== */ .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 THEME SUPPORT ========================================================================== */ .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 THEME ALIASES ========================================================================== */ .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 Context card showing current module info on lesson pages ========================================================================== */ .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}/* Responsive */ @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 THEME - MODULE PAGE HEADER ========================================================================== */ .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}/* Responsive - Donamic */ @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 - Course Module Navigation Component Styleguide v1.0 ========================================================================== */ /* ========================================================================== MODULE ACCORDION CONTAINER ========================================================================== */ .module-accordion{display:flex;flex-direction:column;gap:var(--spacing-4)}/* ========================================================================== MODULE ITEM ========================================================================== */ .module-item{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden}/* ========================================================================== MODULE HEADER (Clickable) ========================================================================== */ .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)}/* Chevron Icon */ .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 */ .module-title{flex:1;font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0}/* Progress indicator slot */ .module-progress{flex-shrink:0}/* Completion count (e.g.,"2/3") */ .module-meta{font-size:var(--font-size-xs);color:var(--color-text-muted);flex-shrink:0}/* ========================================================================== MODULE CONTENT (Collapsible) ========================================================================== */ .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 LIST ========================================================================== */ .module-lessons{display:flex;flex-direction:column;gap:var(--spacing-1)}/* Individual Lesson Link */ .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)}/* Lesson Status Icon */ .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}/* Lesson Title */ .module-lesson-title{flex:1;font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* Lesson Duration */ .module-lesson-duration{font-size:var(--font-size-xs);color:var(--color-text-light);flex-shrink:0}/* ========================================================================== MODULE LESSON STATE VARIANTS ========================================================================== */ /* Available - Ready to start */ .module-lesson-available .module-lesson-status{background:var(--color-accent-muted);color:var(--color-accent-dark)}/* Active - Currently viewing */ .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)}/* Completed */ .module-lesson-completed .module-lesson-status{background:var(--color-accent);color:var(--color-bg)}.module-lesson-completed .module-lesson-title{color:var(--color-text)}/* Locked */ .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 STATE VARIANTS ========================================================================== */ /* Completed Module */ .module-item-completed .module-header{border-left:3px solid var(--color-accent)}.module-item-completed .module-title{color:var(--color-accent-dark)}/* Locked Module */ .module-item-locked{opacity:0.6}.module-item-locked .module-header{cursor:not-allowed}.module-item-locked .module-header:hover{background:transparent}/* ========================================================================== SIZE VARIANTS ========================================================================== */ .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 THEME SUPPORT ========================================================================== */ .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 THEME ALIASES ========================================================================== */ .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 - Progress Bar & Progress Ring Components Styleguide v1.0 ========================================================================== */ /* ========================================================================== PROGRESS BAR ========================================================================== */ .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)}/* Size Variants */ .progress-xs{height:2px}.progress-sm{height:4px}.progress-lg{height:12px}.progress-xl{height:16px}/* Color Variants */ .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)}/* Labeled Progress */ .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}/* Stacked Progress (multiple bars) */ .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}/* Indeterminate Progress */ .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%)}}/* Striped Progress */ .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 (SVG-based circular progress) ========================================================================== */ .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)}/* Size Variants */ .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}/* Color Variants */ .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)}/* Label inside ring */ .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 THEME SUPPORT ========================================================================== */ .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)}/* ========================================================================== DONAMIC THEME ALIASES (for backwards compatibility) ========================================================================== */ .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 - Downloads & Links Component Styleguide v1.0 ========================================================================== */ /* ========================================================================== RESOURCE LIST CONTAINER ========================================================================== */ .resource-list{display:flex;flex-direction:column;gap:var(--spacing-2)}/* ========================================================================== RESOURCE ITEM ========================================================================== */ .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 ========================================================================== */ .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}/* Icon Type Variants */ .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 ========================================================================== */ .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 ========================================================================== */ .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)}/* ========================================================================== SIZE VARIANTS ========================================================================== */ .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}/* ========================================================================== GRID LAYOUT VARIANT ========================================================================== */ .resource-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-4)}/* ========================================================================== DARK THEME SUPPORT ========================================================================== */ .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 THEME ALIASES ========================================================================== */ .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 - Content Access Restriction Component Styleguide v1.0 ========================================================================== */ /* ========================================================================== BASE ACCESS GATE ========================================================================== */ .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 ========================================================================== */ .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 CONTENT ========================================================================== */ .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 VARIANTS ========================================================================== */ /* Upgrade - Premium content gate */ .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)}/* Login - Authentication required */ .access-gate-login{background:var(--color-bg)}.access-gate-login .access-gate-icon{background:var(--color-bg-subtle);color:var(--color-text-muted)}/* Locked - Generic locked state */ .access-gate-locked{background:var(--color-bg-subtle)}.access-gate-locked .access-gate-icon{background:var(--color-gray-200);color:var(--color-gray-500)}/* Error - Access denied */ .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)}/* Coming Soon - Unreleased content */ .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 (for blurred content) ========================================================================== */ .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)}/* Dark overlay */ .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)}/* ========================================================================== SIZE VARIANTS ========================================================================== */ .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 THEME SUPPORT ========================================================================== */ .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 THEME ALIASES ========================================================================== */ .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))}/* ========================================================================== QUOTE CARDS - Voice of Customer,Pain Highlights Styleguide v1.0 ========================================================================== */ /* ========================================================================== QUOTE CARD ========================================================================== */ .quote-card{background:var(--color-bg-subtle);border-left:4px solid var(--color-accent);border-radius:var(--border-radius-lg);padding:var(--spacing-6);position:relative}.quote-card::before{content:'\201C';position:absolute;top:-10px;left:var(--spacing-4);font-size:4rem;color:var(--color-accent);font-weight:var(--font-weight-bold);line-height:1;opacity:0.3;pointer-events:none}.quote-card blockquote{font-size:var(--font-size-base);color:var(--color-text);line-height:var(--line-height-relaxed);font-style:italic;margin:0;position:relative;z-index:1}.quote-card cite{display:block;margin-top:var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:normal}/* ========================================================================== PAIN HIGHLIGHT ========================================================================== */ .pain-highlight{background:rgba(232,93,4,0.05);border-left:4px solid var(--color-warning,#e85d04);border-radius:var(--border-radius-lg);padding:var(--spacing-6)}.pain-highlight h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0 0 var(--spacing-3) 0}.pain-highlight blockquote{font-size:var(--font-size-base);color:var(--color-text);line-height:var(--line-height-relaxed);font-style:italic;margin:0}/* ========================================================================== VOICE OF CUSTOMER SECTION ========================================================================== */ .voice-of-customer .voice-cta{text-align:center;margin-top:var(--spacing-8)}.voice-of-customer .voice-cta p{font-size:var(--font-size-base);color:var(--color-text-muted);margin-bottom:var(--spacing-4)}/* ========================================================================== DARK THEME SUPPORT ========================================================================== */ .dark .quote-card,[data-theme="dark"] .quote-card{background:var(--color-bg-700)}.dark .pain-highlight,[data-theme="dark"] .pain-highlight{background:rgba(232,93,4,0.1)}/* ========================================================================== SECTION THEME VARIANTS ========================================================================== */ .section-dark .quote-card{background:rgba(255,255,255,0.05)}.section-dark .quote-card blockquote,.section-dark .pain-highlight blockquote,.section-dark .pain-highlight h3{color:var(--color-text-inverse)}.section-dark .quote-card cite{color:var(--color-gray-400)}/* ========================================================================== DONAMIC THEME ALIASES ========================================================================== */ .donamic_redesign1 .quote-card{background:var(--donamic-light,#fafafa);border-left:4px solid var(--donamic-primary,var(--color-accent));border-radius:var(--donamic-radius-lg,var(--border-radius-lg));padding:var(--donamic-space-xl,var(--spacing-6))}.donamic_redesign1 .quote-card::before{color:var(--donamic-primary,var(--color-accent))}.donamic_redesign1 .quote-card blockquote{color:var(--donamic-text-dark,var(--color-text));line-height:1.7}.donamic_redesign1 .quote-card cite{color:var(--donamic-text-light,var(--color-text-muted))}.donamic_redesign1 .pain-highlight{background:rgba(232,93,4,0.05);border-left:4px solid #e85d04;border-radius:var(--donamic-radius-lg,var(--border-radius-lg));padding:var(--donamic-space-xl,var(--spacing-6))}.donamic_redesign1 .pain-highlight h3{color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .pain-highlight blockquote{color:var(--donamic-text-dark,var(--color-text))}/* ========================================================================== QUALIFICATION - Fit/No-Fit Grid,Pricing Teaser Styleguide v1.0 ========================================================================== */ /* ========================================================================== FIT GRID ========================================================================== */ .fit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-6)}@media (max-width:768px){.fit-grid{grid-template-columns:1fr}}/* ========================================================================== FIT CARDS ========================================================================== */ .fit-yes,.fit-no{border-radius:var(--border-radius-lg);padding:var(--spacing-6)}.fit-yes{background:rgba(99,229,38,0.05);border:1px solid rgba(99,229,38,0.2)}.fit-no{background:rgba(220,38,38,0.05);border:1px solid rgba(220,38,38,0.2)}.fit-yes h3,.fit-no h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.fit-yes h3{color:var(--color-success,#16a34a)}.fit-no h3{color:var(--color-error,#dc2626)}.fit-yes ul,.fit-no ul{list-style:none;margin:0;padding:0}.fit-yes li,.fit-no li{position:relative;padding-left:var(--spacing-6);margin-bottom:var(--spacing-3);font-size:var(--font-size-base);color:var(--color-text);line-height:var(--line-height-relaxed)}.fit-yes li:last-child,.fit-no li:last-child{margin-bottom:0}.fit-yes li::before{content:'\2713';position:absolute;left:0;color:var(--color-success,#16a34a);font-weight:var(--font-weight-bold)}.fit-no li::before{content:'\2717';position:absolute;left:0;color:var(--color-error,#dc2626);font-weight:var(--font-weight-bold)}/* ========================================================================== CALCULATOR TEASER ========================================================================== */ .calculator-teaser{margin-top:var(--spacing-8);text-align:center}.calculator-teaser h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0 0 var(--spacing-3) 0}.calculator-teaser blockquote{max-width:700px;margin:0 auto;font-size:var(--font-size-base);color:var(--color-text);line-height:var(--line-height-relaxed);font-style:italic}.calculator-teaser cite{display:block;margin-top:var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:normal}/* ========================================================================== PRICING TEASER ========================================================================== */ .pricing-teaser{text-align:center;max-width:700px;margin:0 auto}.pricing-teaser h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text);margin:0 0 var(--spacing-4) 0}.pricing-lead{font-size:var(--font-size-lg);color:var(--color-text);line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-3) 0}.pricing-lead strong{color:var(--color-accent)}.pricing-note{font-size:var(--font-size-base);color:var(--color-text-muted);margin:0 0 var(--spacing-6) 0}/* ========================================================================== DARK THEME SUPPORT ========================================================================== */ .dark .fit-yes,[data-theme="dark"] .fit-yes{background:rgba(99,229,38,0.08);border-color:rgba(99,229,38,0.25)}.dark .fit-no,[data-theme="dark"] .fit-no{background:rgba(220,38,38,0.08);border-color:rgba(220,38,38,0.25)}/* ========================================================================== DONAMIC THEME ALIASES ========================================================================== */ .donamic_redesign1 .fit-grid{gap:var(--donamic-space-xl,var(--spacing-6))}.donamic_redesign1 .fit-yes,.donamic_redesign1 .fit-no{border-radius:var(--donamic-radius-lg,var(--border-radius-lg));padding:var(--donamic-space-xl,var(--spacing-6))}.donamic_redesign1 .fit-yes li,.donamic_redesign1 .fit-no li{color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .calculator-teaser blockquote{color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .calculator-teaser cite{color:var(--donamic-text-light,var(--color-text-muted))}.donamic_redesign1 .pricing-lead strong{color:var(--donamic-primary,var(--color-accent))}.donamic_redesign1 .pricing-note{color:var(--donamic-text-light,var(--color-text-muted))}/* ========================================================================== RESULTS - Result Cards with Tags Styleguide v1.0 ========================================================================== */ /* ========================================================================== RESULTS GRID ========================================================================== */ .results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-6)}@media (max-width:768px){.results-grid{grid-template-columns:1fr}}/* ========================================================================== RESULT CARD ========================================================================== */ .result-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-6);display:flex;flex-direction:column;transition:border-color var(--duration-200) var(--ease-in-out)}.result-card:hover{border-color:var(--color-accent)}.result-card h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0 0 var(--spacing-3) 0}.result-card blockquote{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:var(--line-height-relaxed);font-style:italic;margin:0;flex:1}/* ========================================================================== RESULT TAG ========================================================================== */ .result-tag{display:inline-block;margin-top:var(--spacing-4);padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-accent-dark);background:var(--color-accent-muted);border-radius:var(--border-radius-sm);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}/* ========================================================================== DARK THEME SUPPORT ========================================================================== */ .dark .result-card,[data-theme="dark"] .result-card{background:var(--color-bg-700);border-color:var(--color-gray-700)}.dark .result-card h3,[data-theme="dark"] .result-card h3{color:var(--color-gray-100)}.dark .result-card blockquote,[data-theme="dark"] .result-card blockquote{color:var(--color-gray-400)}/* ========================================================================== DONAMIC THEME ALIASES ========================================================================== */ .donamic_redesign1 .results-grid{gap:var(--donamic-space-xl,var(--spacing-6))}.donamic_redesign1 .result-card{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));padding:var(--donamic-space-xl,var(--spacing-6));transition:all var(--donamic-transition-base,var(--duration-200))}.donamic_redesign1 .result-card:hover{border-color:var(--donamic-primary,var(--color-accent));box-shadow:var(--donamic-shadow-primary,0 4px 20px rgba(99,229,38,0.15))}.donamic_redesign1 .result-card h3{color:var(--donamic-text-dark,var(--color-text))}.donamic_redesign1 .result-card blockquote{color:var(--donamic-text-medium,var(--color-text-muted));line-height:1.7}.donamic_redesign1 .result-tag{color:var(--donamic-text-dark,var(--color-accent-dark));background:var(--donamic-primary-light,rgba(99,229,38,0.1))}/* ========================================================================== Problem Visualization – Scattered Files / Chaos Cards Shows scattered file types (Excel,Wiki,Post-it,Email,PDF) to visualize the chaos of undocumented IT infrastructure. ========================================================================== */ /* Shared color tokens */ .pv-bad{color:#ef4444}.pv-warn{color:#f59e0b}.pv-badge-red{display:inline-block;padding:1px 8px;border-radius:10px;font-size:0.65rem;font-weight:600;background:rgba(239,68,68,0.15);color:#ef4444}.pv-badge-yellow{display:inline-block;padding:1px 8px;border-radius:10px;font-size:0.65rem;font-weight:600;background:rgba(245,158,11,0.15);color:#f59e0b}/* Chaos cards container */ .pv-chaos{position:relative;height:340px}.pv-chaos-card{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;padding:0.75rem 1rem;background:#fff;border:1px solid #e5e5e5;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.06);font-size:0.78rem;transition:transform 0.3s ease,box-shadow 0.3s ease;animation:pv-float 4s ease-in-out infinite}.pv-chaos-card:hover{box-shadow:0 6px 20px rgba(0,0,0,0.12);z-index:10}.pv-chaos-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;flex-shrink:0}.pv-chaos-label{font-weight:600;color:#1a1a2e;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pv-chaos-meta{font-size:0.65rem;color:#999;white-space:nowrap}/* Card positions and rotations */ .pv-chaos-1{top:0;transform:rotate(-1.5deg);animation-delay:0s}.pv-chaos-1 .pv-chaos-icon{background:rgba(22,163,74,0.1);color:#16a34a}.pv-chaos-2{top:64px;transform:rotate(1.2deg) translateX(8px);animation-delay:0.5s}.pv-chaos-2 .pv-chaos-icon{background:rgba(59,130,246,0.1);color:#3b82f6}.pv-chaos-3{top:128px;transform:rotate(-0.8deg) translateX(-4px);animation-delay:1s}.pv-chaos-3 .pv-chaos-icon{background:rgba(245,158,11,0.1);color:#f59e0b}.pv-chaos-4{top:192px;transform:rotate(1.8deg) translateX(12px);animation-delay:1.5s}.pv-chaos-4 .pv-chaos-icon{background:rgba(99,102,241,0.1);color:#6366f1}.pv-chaos-5{top:256px;transform:rotate(-1deg) translateX(-6px);animation-delay:2s}.pv-chaos-5 .pv-chaos-icon{background:rgba(239,68,68,0.1);color:#ef4444}@keyframes pv-float{0%,100%{translate:0 0}50%{translate:0 -3px}}/* Responsive */ @media (max-width:480px){.pv-chaos{height:300px}.pv-chaos-card{font-size:0.7rem;padding:0.6rem 0.75rem}.pv-chaos-1{top:0}.pv-chaos-2{top:56px}.pv-chaos-3{top:112px}.pv-chaos-4{top:168px}.pv-chaos-5{top:224px}}/* ========================================================================== Image Zoom / Lightbox Click-to-enlarge for screenshots and product images. Usage:wrap <img> in a container with class .img-zoom ========================================================================== */ .img-zoom{position:relative;border-radius:12px;overflow:hidden;cursor:zoom-in;transition:transform 0.3s ease,box-shadow 0.3s ease}.img-zoom:hover{transform:scale(1.02);box-shadow:0 8px 30px rgba(0,0,0,0.15)}.img-zoom img{display:block;width:100%;height:100%;object-fit:cover}/* Lightbox overlay */ .img-zoom-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:zoom-out;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;padding:2rem}.img-zoom-overlay.is-active{opacity:1;visibility:visible}.img-zoom-overlay img{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.4);transform:scale(0.92);transition:transform 0.3s ease;object-fit:contain}.img-zoom-overlay.is-active img{transform:scale(1)}/* Close hint */ .img-zoom-overlay::after{content:'';position:absolute;top:1.5rem;right:1.5rem;width:32px;height:32px;background:rgba(255,255,255,0.15);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:background 0.2s ease}.img-zoom-overlay:hover::after{background-color:rgba(255,255,255,0.25)}@media (max-width:768px){.img-zoom-overlay{padding:1rem}.img-zoom-overlay::after{top:1rem;right:1rem}}.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}@media (max-width:1024px){.donamic_redesign1 .section-inner,.donamic_redesign1 .container-donamic{padding-left:var(--donamic-space-lg);padding-right:var(--donamic-space-lg)}.donamic_redesign1 .about-card-box{padding:var(--donamic-space-2xl)}.donamic_redesign1 .cta-box,.donamic_redesign1 .cta-box-light{padding:var(--donamic-space-2xl)}}@media (max-width:768px){.donamic_redesign1 .pricing-card{padding:var(--donamic-space-xl)}.donamic_redesign1 .testimonial{padding:var(--donamic-space-xl)}.donamic_redesign1 .card .card-body{padding:var(--donamic-space-md)}.donamic_redesign1 .about-card-box{padding:var(--donamic-space-xl)}.donamic_redesign1 .cta-box,.donamic_redesign1 .cta-box-light{padding:var(--donamic-space-xl);border-radius:var(--donamic-radius-lg)}.donamic_redesign1 .hero-content-box{padding:var(--donamic-space-lg);max-width:100%}.donamic_redesign1 .hero-title{font-size:1.75rem}.donamic_redesign1 .hero-description{font-size:0.9375rem}.donamic_redesign1 .step-item{padding:var(--donamic-space-md)}.donamic_redesign1 .faq-question{min-height:48px;padding:var(--donamic-space-lg) 0;font-size:0.9375rem}.donamic_redesign1 .btn-donamic{min-height:44px;padding-top:0.75rem;padding-bottom:0.75rem}.donamic_redesign1 .pricing-card.featured::before{font-size:0.6875rem}.donamic_redesign1 .logo-item{max-height:28px}.donamic_redesign1 .problem-item{font-size:0.9375rem}}@media (max-width:480px){.donamic_redesign1 .section{padding:var(--donamic-space-xl) var(--donamic-space-sm)}.donamic_redesign1 .section-inner,.donamic_redesign1 .container-donamic{padding-left:var(--donamic-space-sm);padding-right:var(--donamic-space-sm)}.donamic_redesign1 .hero-title{font-size:1.5rem;line-height:1.2}.donamic_redesign1 .section-header h2,.donamic_redesign1 .section-title h2,.donamic_redesign1 h2{font-size:1.375rem}.donamic_redesign1 .pricing-price{font-size:2rem}.donamic_redesign1 .hero-subtitle{font-size:0.8125rem}.donamic_redesign1 .hero-description{font-size:0.875rem}.donamic_redesign1 .pricing-card{padding:var(--donamic-space-lg);border-radius:var(--donamic-radius-md);border-color:rgba(0,0,0,0.06);box-shadow:none}.donamic_redesign1 .pricing-card.featured{box-shadow:none;border-color:var(--donamic-primary)}.donamic_redesign1 .testimonial{padding:var(--donamic-space-lg);border-radius:var(--donamic-radius-md);border-color:rgba(0,0,0,0.06)}.donamic_redesign1 .card{border-radius:var(--donamic-radius-md);box-shadow:none}.donamic_redesign1 .card .card-body{padding:var(--donamic-space-sm)}.donamic_redesign1 .hero-content-box{padding:var(--donamic-space-md);border:none;border-radius:var(--donamic-radius-md);background:rgba(10,10,10,0.95)}.donamic_redesign1 .hero-badges{gap:0.375rem}.donamic_redesign1 .badge-donamic{font-size:0.6875rem;padding:0.25rem 0.5rem}.donamic_redesign1 .about-card-box{padding:var(--donamic-space-lg);border:none;border-radius:var(--donamic-radius-md)}.donamic_redesign1 .about-card-content h2{font-size:1.375rem}.donamic_redesign1 .cta-box,.donamic_redesign1 .cta-box-light{padding:var(--donamic-space-lg);border:none;border-radius:var(--donamic-radius-md)}.donamic_redesign1 .btn-donamic-lg{width:100%;justify-content:center}.donamic_redesign1 .section-cta .btn-donamic,.donamic_redesign1 .cta-box .btn-donamic,.donamic_redesign1 .cta-box-light .btn-donamic{width:100%;justify-content:center}.donamic_redesign1 .hero-content-box .btn-donamic{width:100%;justify-content:center}.donamic_redesign1 .step-item{padding:var(--donamic-space-sm)}.donamic_redesign1 .step-title{font-size:1rem}.donamic_redesign1 .step-description{font-size:0.8125rem}.donamic_redesign1 .faq-question{font-size:0.875rem;gap:var(--donamic-space-sm)}.donamic_redesign1 .faq-answer{font-size:0.875rem}.donamic_redesign1 .footer-donamic-inner{padding:var(--donamic-space-xl) var(--donamic-space-sm)}.donamic_redesign1 .navbar-donamic{padding:0 var(--donamic-space-md)}.donamic_redesign1 .pv-health{overflow-x:auto}.donamic_redesign1 .content-group-title{font-size:1rem}.donamic_redesign1 .timeline-milestones .timeline-marker{width:48px;height:48px}.donamic_redesign1 .timeline-milestones .timeline-marker .milestone-days{font-size:1rem}.donamic_redesign1 .timeline-milestones::before{left:23px}.donamic_redesign1 .timeline-milestones .timeline-content h3{font-size:1.125rem}.donamic_redesign1 .timeline-milestones .timeline-content li{font-size:0.875rem}.donamic_redesign1 .quote-card{padding:var(--donamic-space-lg)}.donamic_redesign1 .pain-highlight{padding:var(--donamic-space-lg)}.donamic_redesign1 .result-card{padding:var(--donamic-space-lg)}.donamic_redesign1 .fit-yes,.donamic_redesign1 .fit-no{padding:var(--donamic-space-lg)}.donamic_redesign1 .pricing-lead{font-size:1rem}.donamic_redesign1 .hero-qualification{gap:0.375rem}.donamic_redesign1 .hero-qualification .qualifier{font-size:0.6875rem;padding:0.25rem 0.5rem}}