@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--color-primary: #008B89;--color-primary-light: #33a3a1;--color-primary-dark: #006f6d;--color-secondary: #08d26f;--color-secondary-light: #3ddf8f;--color-secondary-dark: #05a858;--color-error: #B00020;--color-error-light: #cf264a;--color-warning: #F59E0B;--color-info: #3B82F6;--color-surface: #FFFFFF;--color-surface-variant: #F5F7FA;--color-surface-elevated: #FFFFFF;--color-background: #F0F2F5;--color-border: #E2E8F0;--color-border-light: #F1F5F9;--color-on-primary: #FFFFFF;--color-on-secondary: #000000;--color-on-surface: #1A202C;--color-on-surface-secondary: #64748B;--color-on-surface-tertiary: #94A3B8;--color-on-error: #FFFFFF;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1), 0 8px 10px rgba(0, 0, 0, .04);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--sidebar-width: 260px;--header-height: 64px;--content-max-width: 1280px}[data-theme=dark]{--color-primary: #90CAF9;--color-primary-light: #a8d7fa;--color-primary-dark: #5ba3d9;--color-secondary: #03DAC6;--color-secondary-light: #38e3d3;--color-secondary-dark: #02b3a2;--color-error: #CF6679;--color-error-light: #da8594;--color-warning: #FBBF24;--color-info: #60A5FA;--color-surface: #1E1E1E;--color-surface-variant: #2A2A2A;--color-surface-elevated: #2D2D2D;--color-background: #121212;--color-border: #333333;--color-border-light: #2A2A2A;--color-on-primary: #000000;--color-on-secondary: #000000;--color-on-surface: #FFFFFF;--color-on-surface-secondary: #A0AEC0;--color-on-surface-tertiary: #718096;--color-on-error: #000000;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .4), 0 4px 6px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .5), 0 8px 10px rgba(0, 0, 0, .3)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-on-surface);background-color:var(--color-background);min-height:100vh}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}img{max-width:100%;display:block}button{cursor:pointer;font-family:var(--font-family);border:none;outline:none}input,select,textarea{font-family:var(--font-family);font-size:var(--font-size-base)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-base);white-space:nowrap;height:36px}.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background:var(--color-surface);color:var(--color-on-surface);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-variant);border-color:var(--color-primary)}.btn-danger{background:var(--color-error);color:var(--color-on-error)}.btn-danger:hover{background:var(--color-error-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--color-on-surface-secondary)}.btn-ghost:hover{background:var(--color-surface-variant);color:var(--color-on-surface)}.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-md)}.form-group{display:flex;flex-direction:column;gap:var(--space-1)}.form-label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-on-surface)}.form-input,.form-select,.form-textarea{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-on-surface);font-size:var(--font-size-base);transition:all var(--transition-fast);height:40px}.form-textarea{height:auto;min-height:100px;resize:vertical}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #008b8926}.form-input::placeholder{color:var(--color-on-surface-tertiary)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs);transition:all var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-on-surface-tertiary)}::selection{background:var(--color-primary);color:var(--color-on-primary)}.layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform var(--transition-slow)}.sidebar-header{padding:var(--space-5) var(--space-5);border-bottom:1px solid var(--color-border-light)}.sidebar-logo{display:flex;align-items:center;gap:var(--space-3)}.logo-icon{font-size:1.5rem}.logo-text{font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary);letter-spacing:-.5px}.sidebar-nav{flex:1;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-on-surface-secondary);font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast);text-decoration:none}.nav-item:hover{background:var(--color-surface-variant);color:var(--color-on-surface)}.nav-item.active{background:linear-gradient(135deg,#008b891a,#08d26f14);color:var(--color-primary);font-weight:600}.nav-item.active svg{color:var(--color-primary)}.sidebar-footer{padding:var(--space-3);border-top:1px solid var(--color-border-light)}.user-section{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.user-info{display:flex;align-items:center;gap:var(--space-3);min-width:0;flex:1}.user-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center}.avatar-img{width:100%;height:100%;object-fit:cover}.avatar-fallback{color:#fff;font-size:var(--font-size-sm);font-weight:700}.user-details{display:flex;flex-direction:column;min-width:0}.user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-phone{font-size:var(--font-size-xs);color:var(--color-on-surface-tertiary)}.logout-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:transparent;color:var(--color-on-surface-secondary);transition:all var(--transition-fast);flex-shrink:0}.logout-btn:hover{background:#b0002014;color:var(--color-error)}.login-sidebar-btn{display:block;width:100%;padding:var(--space-3);text-align:center;background:linear-gradient(135deg,var(--color-primary),#006d6b);color:#fff;font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-md);text-decoration:none;transition:opacity var(--transition-fast)}.login-sidebar-btn:hover{opacity:.9}.main-content{flex:1;margin-left:var(--sidebar-width);padding:var(--space-6);min-height:100vh}@media(max-width:768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.3px;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-hoat_dong{background:#008b891a;color:#008b89}.status-hoat_dong .status-dot{background:#008b89;box-shadow:0 0 6px #008b8966}.status-het{background:#b000201a;color:#b00020}.status-het .status-dot{background:#b00020;box-shadow:0 0 6px #b0002066}.status-khach_chot{background:#f59e0b1a;color:#d97706}.status-khach_chot .status-dot{background:#f59e0b;box-shadow:0 0 6px #f59e0b66}.room-type-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.3px;background:var(--color-surface-variant);color:var(--color-on-surface-secondary);border:1px solid var(--color-border)}.room-type-NNC{background:#6366f11a;color:#6366f1;border-color:#6366f133}.room-type-1N1K{background:#008b891a;color:#008b89;border-color:#008b8933}.room-type-2N1K{background:#08d26f1a;color:#05a858;border-color:#08d26f33}.room-type-3N1K{background:#f59e0b1a;color:#d97706;border-color:#f59e0b33}.room-type-1N1B{background:#ec48991a;color:#ec4899;border-color:#ec489933}.room-type-Studio{background:#3b82f61a;color:#3b82f6;border-color:#3b82f633}.room-type-none{color:var(--color-on-surface-tertiary);background:transparent;border:none}.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0;gap:var(--space-4);flex-wrap:wrap}.pagination-info{font-size:var(--font-size-sm);color:var(--color-on-surface-secondary);white-space:nowrap}.pagination-controls{display:flex;align-items:center;gap:var(--space-1)}.pagination-btn{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;color:var(--color-on-surface-secondary);background:var(--color-surface);border:1px solid var(--color-border);transition:all var(--transition-fast);cursor:pointer}.pagination-btn:hover:not(:disabled):not(.active){border-color:var(--color-primary);color:var(--color-primary);background:#008b890d}.pagination-btn.active{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary);font-weight:600}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-dots{padding:0 var(--space-1);color:var(--color-on-surface-tertiary);font-size:var(--font-size-sm)}.pagination-select{height:36px;padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);min-width:110px}.room-list-page{max-width:var(--content-max-width);margin:0 auto}.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-6)}.page-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-on-surface);letter-spacing:-.5px}.page-subtitle{font-size:var(--font-size-sm);color:var(--color-on-surface-secondary);margin-top:var(--space-1)}.filters-card{margin-bottom:var(--space-4);padding:var(--space-4) var(--space-5)}.filters-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.filter-address{flex:1;min-width:200px}.filter-address .form-input{width:100%}.filter-price{display:flex;align-items:center;gap:var(--space-2)}.filter-price .form-input{width:110px}.filter-separator{color:var(--color-on-surface-tertiary)}.filters-row .form-select{min-width:150px}.table-card{padding:0;overflow:hidden}.table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse}.data-table thead{background:var(--color-surface-variant);border-bottom:1px solid var(--color-border)}.data-table th{padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--font-size-xs);font-weight:600;color:var(--color-on-surface-secondary);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.data-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.data-table th.sortable:hover{color:var(--color-primary)}.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-light);font-size:var(--font-size-sm);vertical-align:middle}.data-table tbody tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:#008b8908}.data-table tbody tr:last-child td{border-bottom:none}.col-id{width:70px}.col-actions{width:120px}.id-badge{font-size:var(--font-size-xs);font-weight:600;color:var(--color-on-surface-tertiary);background:var(--color-surface-variant);padding:2px 8px;border-radius:var(--radius-sm)}.address-link{color:var(--color-on-surface);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:300px}.address-link:hover{color:var(--color-primary)}.price-text{font-weight:600;color:var(--color-primary)}.action-group{display:flex;align-items:center;gap:var(--space-1)}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16) var(--space-6);color:var(--color-on-surface-secondary)}.spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:var(--space-4)}@keyframes spin{to{transform:rotate(360deg)}}.empty-icon{font-size:3rem;margin-bottom:var(--space-4);opacity:.5}.empty-title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-on-surface);margin-bottom:var(--space-2)}.empty-desc{font-size:var(--font-size-sm)}.table-card .pagination{padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-border-light)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--color-surface);border-radius:var(--radius-xl);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border-light)}.modal-title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-on-surface)}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:transparent;color:var(--color-on-surface-secondary);font-size:1rem;transition:all var(--transition-fast)}.modal-close:hover{background:var(--color-surface-variant);color:var(--color-on-surface)}.booking-room-info{padding:var(--space-4) var(--space-6);background:linear-gradient(135deg,#008b890f,#08d26f0a);border-bottom:1px solid var(--color-border-light)}.booking-room-address{font-size:var(--font-size-sm);font-weight:600;color:var(--color-on-surface);margin-bottom:var(--space-1)}.booking-room-price{font-size:var(--font-size-base);font-weight:700;color:var(--color-primary)}.booking-form{padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.required{color:var(--color-error)}.booking-error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#b0002014;color:var(--color-error);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;border:1px solid rgba(176,0,32,.15)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border-light)}.booking-success{display:flex;flex-direction:column;align-items:center;padding:var(--space-10) var(--space-6);text-align:center}.success-icon{font-size:3rem;margin-bottom:var(--space-4);animation:bounceIn .5s ease}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.success-text{font-size:var(--font-size-lg);font-weight:700;color:var(--color-on-surface);margin-bottom:var(--space-2)}.success-sub{font-size:var(--font-size-sm);color:var(--color-on-surface-secondary)}.room-detail-page{max-width:var(--content-max-width);margin:0 auto}.detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);flex-wrap:wrap;gap:var(--space-3)}.detail-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm)}.breadcrumb-link{color:var(--color-on-surface-secondary)}.breadcrumb-link:hover{color:var(--color-primary)}.breadcrumb-sep{color:var(--color-on-surface-tertiary)}.breadcrumb-current{color:var(--color-on-surface);font-weight:600}.detail-actions,.delete-confirm-group{display:flex;align-items:center;gap:var(--space-2)}.confirm-text{font-size:var(--font-size-sm);color:var(--color-error);font-weight:500}.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:var(--space-5);align-items:flex-start}@media(max-width:1024px){.detail-grid{grid-template-columns:1fr}}.detail-main{padding:var(--space-6)}.detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}.detail-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-on-surface);line-height:1.4}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border-light)}@media(max-width:768px){.info-grid{grid-template-columns:repeat(2,1fr)}}.info-item{display:flex;flex-direction:column;gap:var(--space-1)}.info-label{font-size:var(--font-size-xs);font-weight:500;color:var(--color-on-surface-tertiary);text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:var(--font-size-base);font-weight:500;color:var(--color-on-surface)}.info-value.price{font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary)}.detail-section{margin-bottom:var(--space-6)}.section-title{font-size:var(--font-size-base);font-weight:600;color:var(--color-on-surface);margin-bottom:var(--space-3)}.content-block{background:var(--color-surface-variant);border-radius:var(--radius-md);padding:var(--space-4);font-size:var(--font-size-sm);line-height:1.7;white-space:pre-wrap;word-break:break-word;color:var(--color-on-surface);max-height:400px;overflow-y:auto}.content-block.cleaned{border-left:3px solid var(--color-primary)}.content-block.note{border-left:3px solid var(--color-warning)}.commission-list{display:flex;flex-direction:column;gap:var(--space-2)}.commission-item{padding:var(--space-3)}.commission-json{font-size:var(--font-size-xs);font-family:Fira Code,monospace;color:var(--color-on-surface-secondary);white-space:pre-wrap;margin:0}.booking-cta-card{padding:var(--space-5);text-align:center;background:linear-gradient(135deg,#008b890d,#08d26f08);border:1px solid rgba(0,139,137,.15);margin-bottom:var(--space-4)}.cta-price{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-primary);margin-bottom:var(--space-2)}.cta-per{font-size:var(--font-size-sm);font-weight:400;color:var(--color-on-surface-secondary)}.cta-desc{font-size:var(--font-size-sm);color:var(--color-on-surface-secondary);margin-bottom:var(--space-4)}.cta-btn{width:100%;height:44px;font-size:var(--font-size-base);font-weight:600}.detail-sidebar .card{padding:var(--space-5)}.items-list{display:flex;flex-direction:column;gap:var(--space-4)}.room-item-card{border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:var(--space-3)}.item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.item-name{font-weight:600;font-size:var(--font-size-sm)}.item-id{font-size:var(--font-size-xs);color:var(--color-on-surface-tertiary)}.item-images{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.item-image-wrapper{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:transform var(--transition-fast)}.item-image-wrapper:hover{transform:scale(1.05)}.item-image{width:100%;height:100%;object-fit:cover}.no-items{color:var(--color-on-surface-tertiary);font-size:var(--font-size-sm);text-align:center;padding:var(--space-6)}.lightbox-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.lightbox-content{position:relative;max-width:90vw;max-height:90vh}.lightbox-close{position:absolute;top:-40px;right:0;background:#fff3;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;transition:background var(--transition-fast)}.lightbox-close:hover{background:#fff6}.lightbox-image{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-md)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.detail-loading,.detail-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:var(--space-4);color:var(--color-on-surface-secondary)}.error-icon{font-size:3rem}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-background);padding:var(--space-4)}.login-container{display:grid;grid-template-columns:1fr 1fr;max-width:900px;width:100%;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);min-height:540px}@media(max-width:768px){.login-container{grid-template-columns:1fr;max-width:440px}.login-branding{display:none}}.login-branding{background:linear-gradient(135deg,var(--color-primary) 0%,#006d6b 100%);color:#fff;display:flex;align-items:center;justify-content:center;padding:var(--space-8);position:relative;overflow:hidden}.login-branding:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#ffffff0d;top:-80px;right:-60px}.login-branding:after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:#ffffff08;bottom:-40px;left:-40px}.branding-content{position:relative;z-index:1}.branding-logo{font-size:3rem;display:block;margin-bottom:var(--space-3)}.branding-title{font-size:2rem;font-weight:800;margin-bottom:var(--space-2);letter-spacing:-.5px}.branding-subtitle{font-size:var(--font-size-sm);opacity:.85;line-height:1.6;margin-bottom:var(--space-6)}.branding-features{display:flex;flex-direction:column;gap:var(--space-3)}.feature-item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-sm);opacity:.9}.feature-icon{font-size:1.2rem;width:24px;text-align:center}.login-form-wrapper{background:var(--color-surface);display:flex;align-items:center;justify-content:center;padding:var(--space-8)}.login-form{width:100%;max-width:360px}.form-header{margin-bottom:var(--space-6)}.form-heading{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-on-surface);margin-bottom:var(--space-2)}.form-subheading{font-size:var(--font-size-sm);color:var(--color-on-surface-secondary);line-height:1.5}.login-error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#b0002014;color:var(--color-error);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-5);border:1px solid rgba(176,0,32,.15);animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.input-with-icon{position:relative;display:flex;align-items:center}.input-with-icon .input-icon{position:absolute;left:14px;font-size:1rem;z-index:1;pointer-events:none}.input-with-icon .form-input{padding-left:44px;padding-right:44px}.toggle-password{position:absolute;right:8px;background:transparent;border:none;font-size:1rem;cursor:pointer;padding:var(--space-2);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.toggle-password:hover{background:var(--color-surface-variant)}.login-btn{width:100%;height:48px;font-size:var(--font-size-base);font-weight:600;margin-top:var(--space-2)}.login-footer{margin-top:var(--space-6);text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}.footer-register{font-size:var(--font-size-sm)}.footer-text{color:var(--color-on-surface-secondary)}.footer-link{color:var(--color-primary);font-weight:600;transition:opacity var(--transition-fast)}.back-link{font-size:var(--font-size-sm);color:var(--color-on-surface-tertiary);transition:color var(--transition-fast)}.back-link:hover{color:var(--color-primary)}.register-container{min-height:580px}.footer-text{font-size:var(--font-size-sm);color:var(--color-on-surface-secondary)}.footer-link{font-size:var(--font-size-sm);color:var(--color-primary);font-weight:600;transition:opacity var(--transition-fast)}.footer-link:hover{opacity:.8}.main-content>*{animation:pageEnter .3s ease}@keyframes pageEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}