:root{--color-primary-dark: #102A41;--color-primary-light: #D3E3F2;--color-neutral-light: #EFF0DE;--color-accent-brown: #9C8266;--color-accent-beige: #EDDABA;--color-text-primary: #5E5C59;--color-text-secondary: #CFCECB;--color-background: #FFFFFF;--color-surface: var(--color-primary-light);--color-border: var(--color-text-secondary);--color-primary-hover: #0A1F31;--color-accent-brown-hover: #8A7055;--color-success: #059669;--color-success-light: #d1fae5;--color-error: #dc2626;--color-error-light: #fecaca;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--max-width-container: 1200px;--header-height: 4rem;--z-dropdown: 10;--z-sticky: 20;--z-fixed: 30;--z-modal-backdrop: 40;--z-modal: 50;--z-popover: 60;--z-tooltip: 70;--z-notification: 80}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--color-background);color:var(--color-text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.bg-primary{background-color:var(--color-primary-dark)}.bg-primary-light{background-color:var(--color-primary-light)}.bg-neutral-light{background-color:#cfcecb33}.bg-blue{background-color:#9c8266}.bg-accent-brown{background-color:var(--color-accent-brown)}.bg-accent-beige{background-color:var(--color-accent-beige)}.bg-surface{background-color:var(--color-surface)}.bg-white{background-color:var(--color-background)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-primary-dark{color:var(--color-primary-dark)}.text-accent-brown{color:var(--color-accent-brown)}.text-white{color:#fff}.border-default{border:1px solid var(--color-border)}.border-primary{border:1px solid var(--color-primary-dark)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-md);font-weight:600;text-decoration:none;cursor:pointer;transition:all .2s ease}.btn-primary{background-color:var(--color-primary-dark);color:#fff}.bg-background{background-color:#f9fafb!important}.btn-primary:disabled svg{fill:#9ca3af}.btn-primary svg{fill:#fff}.bg-white-bg{background-color:#fff!important}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:transparent;color:var(--color-primary-dark);border:1px solid var(--color-primary-dark)}.btn-secondary:hover{background-color:var(--color-primary-light)}.btn-accent{background-color:var(--color-accent-brown);color:#fff}.btn-accent:hover{background-color:var(--color-accent-brown-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-lg{padding:var(--space-md) var(--space-lg);font-size:1rem}.btn-sm{padding:var(--space-xs) var(--space-sm);font-size:.75rem}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:all .2s ease}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-header{padding:var(--space-lg);border-bottom:1px solid var(--color-border)}.card-body{padding:var(--space-lg)}.card-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);background-color:var(--color-neutral-light)}.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-sm);font-size:.875rem}.form-input{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-neutral-light);color:var(--color-text-primary);font-size:1rem;transition:all .2s ease}.form-input:focus{outline:none;border-color:var(--color-primary-dark);background-color:var(--color-background);box-shadow:0 0 0 3px #102a411a}.status-success{background-color:var(--color-success-light);color:var(--color-success);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:.875rem;font-weight:500}.status-error{background-color:var(--color-error-light);color:var(--color-error);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:.875rem;font-weight:500}.status-warning{background-color:var(--color-warning-light);color:var(--color-warning);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:.875rem;font-weight:500}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--color-border);border-radius:50%;border-top-color:var(--color-primary-dark);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.container{max-width:var(--max-width-container);margin:0 auto;padding:0 var(--space-md)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width: 768px){.container{padding:0 var(--space-sm)}.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}}@media (max-width: 480px){:root{--space-lg: 1rem;--space-xl: 1.5rem}}.container-hst{max-width:900px!important}