:root{--color-primary: oklch(.59 .14 230);--color-primary-dark: oklch(.49 .15 230);--color-primary-light: oklch(.7 .12 230);--color-primary-ultra-light: oklch(.97 .015 230);--color-success: oklch(.64 .17 155);--color-success-light: oklch(.72 .15 155);--color-success-ultra-light: oklch(.97 .02 155);--color-warning: oklch(.75 .16 75);--color-warning-light: oklch(.81 .14 75);--color-warning-ultra-light: oklch(.975 .02 75);--color-danger: oklch(.58 .2 25);--color-danger-light: oklch(.68 .17 25);--color-danger-ultra-light: oklch(.975 .015 25);--color-white: oklch(1 0 0);--color-gray-50: oklch(.985 .002 230);--color-gray-100: oklch(.965 .003 230);--color-gray-200: oklch(.92 .004 230);--color-gray-300: oklch(.86 .005 230);--color-gray-400: oklch(.65 .008 230);--color-gray-500: oklch(.53 .01 230);--color-gray-600: oklch(.42 .01 230);--color-gray-700: oklch(.35 .01 230);--color-gray-800: oklch(.25 .01 230);--color-gray-900: oklch(.18 .01 230);--gradient-primary: linear-gradient(135deg, oklch(.59 .14 230) 0%, oklch(.49 .15 230) 100%);--gradient-success: linear-gradient(135deg, oklch(.64 .17 155) 0%, oklch(.55 .17 155) 100%);--gradient-warning: linear-gradient(135deg, oklch(.75 .16 75) 0%, oklch(.67 .16 75) 100%);--gradient-danger: linear-gradient(135deg, oklch(.58 .2 25) 0%, oklch(.5 .2 25) 100%);--gradient-dark: linear-gradient(180deg, oklch(.18 .01 230) 0%, oklch(.12 .01 230) 100%);--gradient-glass: linear-gradient(135deg, oklch(1 0 0 / .08) 0%, oklch(1 0 0 / .02) 100%);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", Consolas, monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.25rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 oklch(0 0 0 / .04);--shadow-md: 0 1px 3px 0 oklch(0 0 0 / .05), 0 1px 2px -1px oklch(0 0 0 / .04);--shadow-lg: 0 4px 6px -1px oklch(0 0 0 / .06), 0 2px 4px -2px oklch(0 0 0 / .04);--shadow-xl: 0 10px 15px -3px oklch(0 0 0 / .06), 0 4px 6px -4px oklch(0 0 0 / .04);--shadow-glow-primary: 0 0 0 3px oklch(.59 .14 230 / .15);--shadow-glow-success: 0 0 0 3px oklch(.64 .17 155 / .15);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--duration-fast: .12s;--duration-normal: .2s;--duration-slow: .3s;--transition-fast: var(--duration-fast) var(--ease-out-quart);--transition-normal: var(--duration-normal) var(--ease-out-quart);--transition-slow: var(--duration-slow) var(--ease-out-expo);--sidebar-bg: oklch(.18 .01 230)}html.dark{color-scheme:dark;--color-white: oklch(.195 .01 230);--color-gray-50: oklch(.14 .01 230);--color-gray-100: oklch(.22 .01 230);--color-gray-200: oklch(.28 .01 230);--color-gray-300: oklch(.34 .01 230);--color-gray-400: oklch(.47 .01 230);--color-gray-500: oklch(.58 .01 230);--color-gray-600: oklch(.7 .01 230);--color-gray-700: oklch(.8 .01 230);--color-gray-800: oklch(.88 .008 230);--color-gray-900: oklch(.94 .005 230);--color-primary-ultra-light: oklch(.24 .045 230);--color-success-ultra-light: oklch(.21 .05 155);--color-warning-ultra-light: oklch(.23 .05 75);--color-danger-ultra-light: oklch(.23 .045 25);--shadow-sm: 0 1px 3px 0 oklch(0 0 0 / .3);--shadow-md: 0 2px 6px 0 oklch(0 0 0 / .35), 0 1px 3px -1px oklch(0 0 0 / .25);--shadow-lg: 0 6px 14px -1px oklch(0 0 0 / .4), 0 3px 6px -2px oklch(0 0 0 / .25);--shadow-xl: 0 12px 24px -3px oklch(0 0 0 / .45), 0 6px 10px -4px oklch(0 0 0 / .3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv02","cv03","cv04","cv11";transition:background-color .25s ease,color .25s ease}body{font-family:var(--font-sans);background-color:var(--color-gray-50);color:var(--color-gray-700);line-height:1.6;min-height:100vh;letter-spacing:-.011em}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{display:flex;min-height:100vh}.sidebar{width:240px;background:var(--sidebar-bg);padding:var(--space-5);display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;z-index:100;border-right:1px solid rgba(255,255,255,.06);transition:background .3s ease}.sidebar-logo{display:flex;align-items:center;gap:var(--space-3);color:#fff;font-size:1.1rem;font-weight:600;margin-bottom:var(--space-6);padding-bottom:var(--space-5);border-bottom:1px solid rgba(255,255,255,.08);letter-spacing:-.02em}.sidebar-logo svg{width:32px;height:32px;color:var(--color-primary-light)}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-2);flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:#ffffff80;text-decoration:none;font-weight:450;transition:all var(--transition-fast);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-size:.875rem;letter-spacing:-.01em}.nav-item:hover{color:#ffffffd9;background:#ffffff0f}.nav-item.active{color:#fff;background:#ffffff1a;font-weight:550}.nav-item svg{width:18px;height:18px;opacity:.8}.main-content{flex:1;margin-left:240px;padding:var(--space-8) max(var(--space-8),calc((100% - 1440px)/2));background-color:var(--color-gray-50);min-height:100vh}.mobile-header{display:none}.page-header{margin-bottom:var(--space-8)}.page-title{font-size:1.5rem;font-weight:600;color:var(--color-gray-900);margin-bottom:var(--space-1);letter-spacing:-.025em;text-wrap:balance}.page-subtitle{color:var(--color-gray-500);font-size:.9375rem;font-weight:400}.card{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-6);border:1px solid var(--color-gray-200)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.card-title{font-size:1rem;font-weight:600;color:var(--color-gray-700);letter-spacing:-.01em}.month-selector{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-4);background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-gray-100)}.month-display{display:flex;flex-direction:column;align-items:center;min-width:120px}.month-label{font-size:.75rem;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.05em}.month-value{font-size:1.25rem;font-weight:700;color:var(--color-primary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6);margin-bottom:var(--space-8)}.stat-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm);border:1px solid var(--color-gray-200);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:0 0 2px 2px}.stat-card.primary:before{background:var(--color-primary)}.stat-card.success:before{background:var(--color-success)}.stat-card.warning:before{background:var(--color-warning)}.stat-card.danger:before{background:var(--color-danger)}.stat-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4)}.stat-icon.primary{background:#0089b51a;background:oklch(.59 .14 230 / .1);color:var(--color-primary)}.stat-icon.success{background:#00a75f1a;background:oklch(.64 .17 155 / .1);color:var(--color-success)}.stat-icon.warning{background:#e79d001a;background:oklch(.75 .16 75 / .1);color:var(--color-warning)}.stat-icon.danger{background:#d733371a;color:var(--color-danger)}.stat-label{font-size:.8125rem;color:var(--color-gray-400);margin-bottom:var(--space-1);font-weight:450;letter-spacing:.01em}.stat-value{font-size:1.5rem;font-weight:600;color:var(--color-gray-900);font-family:var(--font-mono);letter-spacing:-.02em}.stat-subvalue{font-size:.8125rem;font-weight:400;color:var(--color-gray-400);margin-top:var(--space-1)}.chart-container{display:flex;flex-direction:column;gap:var(--space-4)}.chart-bar-group{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:var(--space-3)}.chart-bar-label{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;font-weight:500;color:var(--color-gray-700)}.chart-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.chart-dot.elec{background:linear-gradient(135deg,#e79d00,#e88e17,#e87f25);background:linear-gradient(135deg,color(xyz 0.451 0.411 0.052),#e88e17,#e87f25)}.chart-dot.water{background:linear-gradient(135deg,#0089b5,#00a3aa);background:linear-gradient(135deg,color(xyz 0.172 0.213 0.529),color(xyz 0.186 0.296 0.474))}.chart-dot.rent{background:linear-gradient(135deg,#765ad4,#9867e1)}.chart-bar-wrapper{height:24px;background:var(--color-gray-100);border-radius:var(--radius-full);overflow:hidden}.chart-bar{height:100%;border-radius:var(--radius-full);transform-origin:left center;transition:transform .6s var(--ease-out-expo);min-width:4px}.chart-bar.elec{background:linear-gradient(90deg,#e79d00,#e88e17,#e87f25);background:linear-gradient(90deg,color(xyz 0.451 0.411 0.052),#e88e17,#e87f25);box-shadow:0 2px 8px #e79d004d;box-shadow:0 2px 8px oklch(.75 .16 75 / .3)}.chart-bar.water{background:linear-gradient(90deg,#0089b5,#00a3aa);background:linear-gradient(90deg,color(xyz 0.172 0.213 0.529),color(xyz 0.186 0.296 0.474));box-shadow:0 2px 8px #0089b54d;box-shadow:0 2px 8px oklch(.59 .14 230 / .3)}.chart-bar.rent{background:linear-gradient(90deg,#765ad4,#9867e1);box-shadow:0 2px 8px #765ad44d}.chart-bar-value{font-size:.875rem;font-weight:600;color:var(--color-gray-800);text-align:right;min-width:100px}.chart-percent{font-size:.75rem;font-weight:400;color:var(--color-gray-500);margin-left:var(--space-1)}.progress-container{margin-bottom:var(--space-6)}.progress-header{display:flex;justify-content:space-between;margin-bottom:var(--space-2)}.progress-label{font-weight:500;color:var(--color-gray-700)}.progress-value{font-family:var(--font-mono);font-weight:600;color:var(--color-primary)}.progress-bar{height:12px;background:var(--color-gray-200);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);border-radius:var(--radius-full);transform-origin:left center;transition:transform var(--duration-slow) var(--ease-out-expo)}.collection-panel{background:linear-gradient(135deg,var(--color-white) 0%,var(--color-primary-ultra-light) 100%)}.collection-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}.collection-link{display:inline-flex;align-items:center;gap:2px;background:none;border:none;cursor:pointer;color:var(--color-primary);font-size:.8125rem;font-weight:600;padding:.25rem .4rem;border-radius:var(--radius-md)}.collection-link:hover{background:#0089b51a;background:oklch(.59 .14 230 / .1)}.collection-body{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}.collection-ring-wrap{flex-shrink:0}.collection-ring{--rate: 0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--color-success) calc(var(--rate) * 1%),var(--color-gray-200) 0);display:flex;align-items:center;justify-content:center;transition:background .6s var(--ease-out-expo)}.collection-ring-center{width:112px;height:112px;border-radius:50%;background:var(--color-white);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.collection-ring-pct{font-size:1.85rem;font-weight:800;font-family:var(--font-mono);color:var(--color-success);line-height:1}.collection-ring-cap{font-size:.75rem;color:var(--color-gray-500);margin-top:2px}.collection-figures{flex:1;min-width:240px;display:flex;flex-direction:column;gap:var(--space-3)}.collection-fig{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.collection-fig-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:500;color:var(--color-gray-600)}.collection-fig-value{font-size:1.05rem;font-weight:700;font-family:var(--font-mono);color:var(--color-gray-900)}.collection-statusbar{display:flex;height:10px;border-radius:var(--radius-full);overflow:hidden;margin-top:var(--space-2);gap:2px;background:var(--color-gray-100)}.collection-seg{transition:flex .5s var(--ease-out-expo)}.collection-seg.paid{background:var(--color-success)}.collection-seg.pending{background:var(--color-warning)}.collection-seg.unpaid{background:var(--color-danger)}.collection-seg.empty{background:var(--color-gray-200)}.collection-legend{display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:.75rem;color:var(--color-gray-500)}.collection-legend span{display:inline-flex;align-items:center;gap:.35rem}.collection-legend .dot,.trend-legend .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.collection-legend .dot.paid{background:var(--color-success)}.collection-legend .dot.pending{background:var(--color-warning)}.collection-legend .dot.unpaid{background:var(--color-danger)}.trend-legend{display:flex;gap:var(--space-3);font-size:.75rem;color:var(--color-gray-500)}.trend-legend span{display:inline-flex;align-items:center;gap:.35rem}.trend-legend .dot.projected{background:var(--color-gray-300)}.trend-legend .dot.collected{background:var(--color-success)}.trend-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);height:180px;padding-top:var(--space-2)}.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);height:100%}.trend-bars{flex:1;width:100%;max-width:46px;display:flex;align-items:flex-end;justify-content:center}.trend-bar.projected{width:100%;background:var(--color-gray-200);border-radius:var(--radius-md) var(--radius-md) 0 0;display:flex;align-items:flex-end;position:relative;transition:height .6s var(--ease-out-expo);min-height:3px}.trend-bar.collected{width:100%;background:linear-gradient(180deg,var(--color-success-light) 0%,var(--color-success) 100%);border-radius:var(--radius-md) var(--radius-md) 0 0;transition:height .6s var(--ease-out-expo)}.trend-col.current .trend-bar.projected{background:#0089b52e;background:oklch(.59 .14 230 / .18)}.trend-amount{font-size:.7rem;font-weight:700;font-family:var(--font-mono);color:var(--color-gray-700)}.trend-month{font-size:.7rem;color:var(--color-gray-500);white-space:nowrap}.trend-col.current .trend-month{color:var(--color-primary);font-weight:700}@media(max-width:640px){.collection-body{gap:var(--space-5);justify-content:center}.collection-ring{width:124px;height:124px}.collection-ring-center{width:92px;height:92px}.collection-ring-pct{font-size:1.5rem}.trend-amount,.trend-month{font-size:.62rem}}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-6)}.room-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm);border:1px solid var(--color-gray-200);transition:all var(--transition-normal);position:relative;overflow:hidden}.room-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--color-gray-200);transition:all var(--transition-normal)}.room-card:hover{border-color:var(--color-gray-300);box-shadow:var(--shadow-md)}.room-card:hover:before{background:var(--color-primary)}.room-card.saved{border-color:var(--color-success);background:var(--color-success-ultra-light)}.room-card.saved:before{background:var(--color-success)}.room-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.room-number{font-size:1.125rem;font-weight:600;color:var(--color-gray-900);font-family:var(--font-mono);letter-spacing:-.01em}.room-status{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;font-weight:500}.room-status.pending{color:var(--color-gray-400)}.room-status.saved{color:var(--color-success)}.meter-section{margin-bottom:var(--space-4)}.meter-label{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;color:var(--color-gray-600);margin-bottom:var(--space-2);font-weight:500}.meter-label svg{width:16px;height:16px}.meter-row{display:flex;align-items:center;gap:var(--space-3)}.meter-prev{font-family:var(--font-mono);font-size:1rem;color:var(--color-gray-400);min-width:80px}.meter-arrow{color:var(--color-gray-400)}.meter-input{flex:1;font-family:var(--font-mono);font-size:1.25rem;font-weight:600;padding:var(--space-3) var(--space-4);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);outline:none;transition:all var(--transition-fast);text-align:right;background:var(--color-gray-50)}.meter-input:focus{border-color:var(--color-primary);background:var(--color-white);box-shadow:0 0 0 3px #2563eb1a}.meter-input.error{border-color:var(--color-danger);background:#dc262605}.meter-input.error:focus{box-shadow:0 0 0 3px #dc26261a}.meter-input-prev{background:var(--color-gray-100);border-color:var(--color-gray-300);color:var(--color-gray-600);font-size:1rem;max-width:100px}.meter-input-prev:focus{background:var(--color-white);border-color:var(--color-primary);color:var(--color-gray-800)}.meter-input-group{display:flex;flex-direction:column;flex:1;min-width:0}.meter-input-label{font-size:.75rem;color:var(--color-gray-500);margin-bottom:var(--space-1);font-weight:500}.meter-input-group .meter-input{width:100%}.meter-units{font-family:var(--font-mono);font-size:.875rem;color:var(--color-gray-500);min-width:70px;text-align:right}.units-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);background:var(--color-gray-100);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;color:var(--color-gray-600)}.bill-preview{background:var(--color-gray-50);border-radius:var(--radius-lg);padding:var(--space-4);margin-top:var(--space-4)}.bill-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) 0;font-size:.875rem}.bill-row:not(:last-child){border-bottom:1px dashed var(--color-gray-200)}.bill-label{color:var(--color-gray-600);display:flex;align-items:center;gap:var(--space-2)}.bill-value{font-family:var(--font-mono);font-weight:600;color:var(--color-gray-800)}.bill-row.total{padding-top:var(--space-3);margin-top:var(--space-2);border-top:2px solid var(--color-gray-300);border-bottom:none}.bill-row.total .bill-label{font-weight:600;color:var(--color-gray-800)}.bill-row.total .bill-value{font-size:1.25rem;color:var(--color-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-weight:500;font-size:.875rem;border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;position:relative;overflow:hidden;letter-spacing:-.01em}.btn:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:#ffffff1a;transform:translate(-50%,-50%) scale(0);border-radius:inherit;transition:transform var(--transition-fast)}.btn:active:after{transform:translate(-50%,-50%) scale(2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--color-white);box-shadow:0 1px 2px #3b82f633}.btn-primary:hover:not(:disabled){box-shadow:0 4px 12px #0089b540;box-shadow:0 4px 12px oklch(.59 .14 230 / .25)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-success{background:var(--color-success);color:var(--color-white);box-shadow:0 1px 2px #22c55e33}.btn-success:hover:not(:disabled){box-shadow:0 4px 12px #00a75f40;box-shadow:0 4px 12px oklch(.64 .17 155 / .25)}.btn-success:active:not(:disabled){transform:scale(.98)}.btn-danger{background:var(--color-danger);color:var(--color-white);box-shadow:0 1px 2px #ef444433}.btn-danger:hover:not(:disabled){box-shadow:0 4px 12px #d7333740}.btn-secondary{background:var(--color-gray-100);color:var(--color-gray-700)}.btn-secondary:hover:not(:disabled){background:var(--color-gray-200)}.btn-outline{background:transparent;border:2px solid var(--color-gray-200);color:var(--color-gray-700)}.btn-outline:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-ultra-light)}.btn-sm{padding:var(--space-2) var(--space-3);font-size:.875rem}.btn-lg{padding:var(--space-4) var(--space-8);font-size:1.125rem}.btn-icon{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:var(--radius-lg);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.btn-icon svg{width:18px;height:18px;flex-shrink:0}.btn-icon.btn-sm{width:32px;height:32px;min-width:32px;min-height:32px}.btn-icon.btn-sm svg{width:16px;height:16px}.btn-icon.saved{background:var(--color-success);color:var(--color-white)}.room-card-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.room-card-actions .btn{flex:1}.form-group{margin-bottom:var(--space-5)}.form-label{display:block;font-weight:500;color:var(--color-gray-600);margin-bottom:var(--space-2);font-size:.875rem;letter-spacing:-.01em}.form-input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);font-size:.9375rem;outline:none;transition:all var(--transition-fast);font-family:inherit;background:var(--color-white)}.form-input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-glow-primary)}.form-input.mono{font-family:var(--font-mono)}.form-hint{font-size:.8125rem;color:var(--color-gray-400);margin-top:var(--space-1)}.form-error{font-size:.8125rem;color:var(--color-danger);margin-top:var(--space-1)}.edit-room-form{display:flex;flex-direction:column;gap:var(--space-2)}.edit-room-input{width:100%;min-width:100px;padding:var(--space-2) var(--space-3)!important;font-size:1rem}.edit-room-actions{display:flex;gap:var(--space-2)}.edit-room-actions .btn{flex:1;padding:var(--space-2) var(--space-3);font-size:.8125rem}.delete-confirm-actions{display:flex;gap:var(--space-1);justify-content:center}.delete-confirm-actions .btn{padding:var(--space-1) var(--space-2);font-size:.6875rem;min-height:auto;white-space:nowrap}.table-container{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-gray-200)}.table{width:100%;border-collapse:collapse;font-size:.875rem}.table th{background:var(--color-gray-50);padding:var(--space-3) var(--space-4);text-align:left;font-weight:550;color:var(--color-gray-500);border-bottom:1px solid var(--color-gray-200);font-size:.8125rem;letter-spacing:.01em;text-transform:none}.table td{padding:var(--space-4);border-bottom:1px solid var(--color-gray-100)}.table tr:last-child td{border-bottom:none}.table tr:hover{background:var(--color-gray-50)}.table .mono{font-family:var(--font-mono)}.table .text-right{text-align:right}.table .text-center{text-align:center}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:.6875rem;font-weight:550;letter-spacing:.01em}.badge-success{background:#00a75f1a;background:oklch(.64 .17 155 / .1);color:var(--color-success)}.badge-warning{background:#e79d001a;background:oklch(.75 .16 75 / .1);color:var(--color-warning)}.badge-danger{background:#d733371a;color:var(--color-danger)}.badge-gray{background:var(--color-gray-100);color:var(--color-gray-600)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4);animation:fadeIn var(--transition-fast)}.modal{background:var(--color-white);border-radius:var(--radius-xl);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:slideUp var(--transition-normal);border:1px solid var(--color-gray-200)}.modal-header{padding:var(--space-6);border-bottom:1px solid var(--color-gray-100)}.modal-title{font-size:1.25rem;font-weight:700;color:var(--color-gray-900);text-wrap:balance}.modal-body{padding:var(--space-6)}.modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-gray-100);display:flex;justify-content:flex-end;gap:var(--space-3)}.settings-section{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6);box-shadow:var(--shadow-md)}.settings-title{font-size:1.125rem;font-weight:600;color:var(--color-gray-800);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-gray-100);display:flex;align-items:center;gap:var(--space-2)}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-5)}.magic-button-container{text-align:center;padding:var(--space-8);background:linear-gradient(135deg,var(--color-gray-50) 0%,var(--color-white) 100%);border-radius:var(--radius-xl);margin-top:var(--space-6)}.magic-button{padding:var(--space-4) var(--space-8);font-size:1rem;font-weight:600;background:var(--color-success);color:var(--color-white);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);box-shadow:0 1px 3px #22c55e4d;display:inline-flex;align-items:center;gap:var(--space-3);letter-spacing:-.01em}.magic-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #22c55e4d}.magic-button:disabled{background:var(--color-gray-300);box-shadow:none;cursor:not-allowed}.summary-cards-mobile{display:none}.summary-bill-card{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);transition:box-shadow var(--transition-fast)}.summary-bill-card:hover{box-shadow:var(--shadow-sm)}.summary-bill-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-gray-100)}.summary-bill-card-body{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}.summary-bill-card-row{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:var(--color-gray-700)}.summary-bill-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-3);border-top:1px solid var(--color-gray-100)}.summary-bill-card-total{display:flex;align-items:center;gap:var(--space-2)}.summary-total-card{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--color-gray-50),var(--color-gray-100));border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-top:var(--space-2)}.invoice-bill{background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-xl);padding:var(--space-8);max-width:500px;margin:0 auto;font-size:.9375rem}.invoice-header{text-align:center;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:2px solid var(--color-gray-800)}.invoice-title{font-size:1.5rem;font-weight:800;color:var(--color-gray-900);margin-bottom:var(--space-4);letter-spacing:.05em}.invoice-meta{display:flex;flex-direction:column;gap:var(--space-2)}.invoice-meta-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-1) 0}.invoice-meta-label{font-weight:500;color:var(--color-gray-600);font-size:.875rem}.invoice-meta-value{font-weight:600;color:var(--color-gray-900)}.invoice-room-number{font-size:1.5rem;font-weight:800;font-family:var(--font-mono);color:var(--color-primary)}.invoice-table{width:100%;border-collapse:collapse;margin-bottom:var(--space-4)}.invoice-th{background:var(--color-gray-100);padding:var(--space-3) var(--space-4);text-align:left;font-weight:700;color:var(--color-gray-700);border-top:2px solid var(--color-gray-800);border-bottom:2px solid var(--color-gray-800);font-size:.875rem}.invoice-td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-gray-200);vertical-align:top}.invoice-row:hover{background:var(--color-gray-50)}.invoice-detail{display:block;font-size:.875rem;color:var(--color-gray-500);margin-top:2px}.invoice-total-row{background:linear-gradient(135deg,var(--color-gray-100),var(--color-gray-50))}.invoice-total-label{text-align:right;font-weight:800;font-size:1rem;color:var(--color-gray-900);border-top:2px solid var(--color-gray-800);border-bottom:2px solid var(--color-gray-800)}.invoice-total-value{font-weight:800;font-size:1.25rem;color:var(--color-primary);border-top:2px solid var(--color-gray-800);border-bottom:2px solid var(--color-gray-800)}.invoice-footer{text-align:center;padding-top:var(--space-4);border-top:1px dashed var(--color-gray-300);color:var(--color-gray-500);font-size:.8125rem}.invoice-dorm-header{text-align:center;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-gray-200)}.invoice-dorm-name{font-size:1.25rem;font-weight:800;color:var(--color-gray-900);margin-bottom:2px;letter-spacing:.02em}.invoice-dorm-address{font-size:.8125rem;color:var(--color-gray-500);line-height:1.4}.invoice-dorm-phone{font-size:.8125rem;color:var(--color-gray-500);margin-top:2px}.invoice-bottom-section{margin-top:var(--space-4)}.invoice-qr-section{display:flex;flex-direction:column;align-items:center;padding:var(--space-4) 0;margin-bottom:var(--space-3)}.invoice-qr-label{font-size:.75rem;font-weight:600;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}.invoice-qr-image{width:140px;height:140px;object-fit:contain;border:2px solid var(--color-gray-200);border-radius:var(--radius-md);padding:4px;background:#fff}.invoice-modal{max-width:600px}.invoice-modal .modal-header{display:flex;align-items:center;justify-content:space-between}.print-only-area,.print-slip-box{display:none}.invoice-print-page{page-break-after:always;padding:20px}.invoice-print-page:last-child{page-break-after:auto}@media print{@page{size:A4 portrait;margin:10mm}body *{visibility:hidden}.print-only-area,.print-only-area *,.invoice-modal .modal-body,.invoice-modal .modal-body *{visibility:visible}.print-only-area{display:block!important;position:absolute;top:0;left:0;width:100%}.print-slip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6mm;padding:0}.print-slip-box{display:block!important;border:1px solid #000;padding:5mm;font-family:Sarabun,TH Sarabun New,sans-serif;font-size:11pt;color:#000;background:#fff;break-inside:avoid;page-break-inside:avoid}.invoice-modal .modal-body{position:absolute;top:0;left:0;width:100%}.invoice-bill{border:1px solid #000;box-shadow:none;max-width:100%;padding:20px;margin:0;page-break-inside:avoid}.invoice-header{border-bottom:2px solid #000}.invoice-th{border-top:2px solid #000;border-bottom:2px solid #000;background:#f0f0f0}.invoice-total-label,.invoice-total-value{border-top:2px solid #000;border-bottom:2px solid #000}.invoice-total-value,.invoice-room-number{color:#000}.sidebar,.mobile-header,.modal-footer,.modal-header,.modal-overlay,.page-header,.card:not(.invoice-bill),.magic-button-container,nav{display:none!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media(max-width:1024px){.sidebar{width:200px}.main-content{margin-left:200px}.stats-grid{grid-template-columns:repeat(2,1fr)}.room-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}@media(max-width:768px){.app-container{flex-direction:column}.sidebar{position:fixed;left:-260px;transition:left var(--transition-normal);width:260px;top:0;height:100vh}.sidebar.open{left:0}.main-content{margin-left:0;padding:var(--space-4);padding-top:var(--space-4);min-height:calc(100vh - 56px);flex:1}.room-grid{grid-template-columns:1fr;gap:var(--space-4)}.stats-grid{grid-template-columns:1fr 1fr;gap:var(--space-4)}.page-title{font-size:1.5rem}.page-subtitle{font-size:.875rem}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:linear-gradient(135deg,var(--color-gray-900) 0%,var(--color-gray-800) 100%);color:var(--color-white);position:sticky;top:0;z-index:50;box-shadow:var(--shadow-sm)}.mobile-header span{font-size:.9375rem;font-weight:700;color:var(--color-white)}.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:#ffffff1a;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-white);transition:all var(--transition-fast)}.mobile-menu-btn svg{width:20px;height:20px}.mobile-menu-btn:active{background:#fff3;transform:scale(.95)}.chart-bar-group{grid-template-columns:1fr;gap:var(--space-2)}.chart-bar-label{font-size:.8125rem}.chart-bar-wrapper{height:20px}.chart-bar-value{font-size:.8125rem;text-align:left;min-width:auto}.meter-row{flex-wrap:wrap;gap:var(--space-2)}.meter-input{font-size:1.25rem;padding:var(--space-3);min-width:80px}.meter-input-prev{max-width:none;flex:1;min-width:70px}.meter-arrow{display:none}.meter-units{width:100%;text-align:center;margin-top:var(--space-2)}.table-container{margin:0 calc(-1 * var(--space-4));border-radius:0;overflow-x:auto}.table th,.table td{padding:var(--space-2) var(--space-3);font-size:.8125rem}.table .btn-icon{width:36px;height:36px;min-width:36px;min-height:36px}.table .btn-icon svg{width:16px;height:16px}.table .flex{gap:var(--space-2)}.card .flex.gap-4{flex-direction:column;gap:var(--space-3)}.card .flex.gap-4 input{max-width:none!important;width:100%}.card .flex.gap-4 .btn{width:100%;justify-content:center}.settings-grid{grid-template-columns:1fr}.modal{margin:var(--space-4);max-height:calc(100vh - 2rem)}.modal-header,.modal-body,.modal-footer{padding:var(--space-4)}.magic-button{padding:var(--space-4) var(--space-6);font-size:1rem;width:100%;justify-content:center}.magic-button-container{padding:var(--space-6)}.card{padding:var(--space-4)}.card-header{flex-direction:column;gap:var(--space-3);align-items:flex-start}.bill-preview{padding:var(--space-3)}.bill-row{font-size:.8125rem}.bill-row.total .bill-value{font-size:1.125rem}.summary-table-desktop{display:none}.summary-cards-mobile{display:block}.invoice-bill{max-width:100%;padding:var(--space-4);font-size:.8125rem;border-radius:var(--radius-lg)}.invoice-title,.invoice-room-number{font-size:1.125rem}.invoice-th{padding:var(--space-2) var(--space-2);font-size:.75rem}.invoice-td{padding:var(--space-2) var(--space-2);font-size:.8125rem}.invoice-total-label{font-size:.875rem}.invoice-total-value{font-size:1rem}.invoice-meta-label{font-size:.75rem}.invoice-meta-value{font-size:.8125rem}.invoice-footer{font-size:.75rem}.invoice-modal{max-width:95vw}.invoice-header{flex-direction:column;gap:12px}.invoice-details{text-align:left}.invoice-table th:nth-child(2),.invoice-table th:nth-child(3),.invoice-table td:nth-child(2),.invoice-table td:nth-child(3){display:none}.invoice-summary-box{width:100%}.invoice-bottom-section{flex-direction:column;gap:16px;align-items:flex-start}.invoice-qr-section{width:100%;text-align:center}}@media(max-width:480px){.main-content{padding:var(--space-4)}.stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.stat-card{padding:var(--space-4)}.stat-value{font-size:1.375rem}.stat-label{font-size:.75rem}.stat-icon{width:40px;height:40px;margin-bottom:var(--space-3)}.stat-icon svg{width:20px;height:20px}.room-card{padding:var(--space-4)}.room-number{font-size:1.125rem}.meter-section{margin-bottom:var(--space-5);background:var(--color-gray-50);padding:var(--space-4);border-radius:var(--radius-lg)}.meter-label{margin-bottom:var(--space-3);font-size:.9375rem;font-weight:600}.meter-row{display:flex;flex-direction:row;gap:var(--space-3);align-items:flex-end}.meter-input-group{flex:1;min-width:0}.meter-input-label{font-size:.6875rem;text-align:center;color:var(--color-gray-600);font-weight:500;margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:.02em}.meter-input{width:100%;max-width:none;text-align:center;font-size:1.375rem;padding:var(--space-3);border-radius:var(--radius-md);font-weight:700}.meter-input-prev{max-width:none;width:100%;font-size:1.125rem;font-weight:600}.meter-units{width:100%;text-align:center;margin-top:var(--space-2)}.units-badge{font-size:.8125rem;padding:var(--space-1) var(--space-3);background:var(--color-primary-ultra-light);color:var(--color-primary);border-radius:var(--radius-full);font-weight:600}.meter-arrow{display:none}.btn{min-height:48px;padding:var(--space-3) var(--space-4);font-size:.9375rem;border-radius:var(--radius-lg)}.btn-lg{padding:var(--space-4) var(--space-6);min-height:52px}.form-input{min-height:48px;font-size:1rem}.nav-item{padding:var(--space-4);font-size:1rem}.page-header{margin-bottom:var(--space-5);text-align:center}.page-title{font-size:1.375rem;margin-bottom:var(--space-1)}.page-subtitle{font-size:.875rem}.table{font-size:.8125rem}.table th,.table td{padding:var(--space-2);white-space:nowrap}.room-card-actions{flex-direction:column;gap:var(--space-2)}.room-card-actions .btn{width:100%}.bill-preview{background:linear-gradient(135deg,var(--color-gray-50) 0%,var(--color-white) 100%);border:1px solid var(--color-gray-200);padding:var(--space-4);border-radius:var(--radius-lg)}.bill-row{padding:var(--space-3) 0;font-size:.875rem}.bill-row.total{background:var(--color-primary-ultra-light);margin:var(--space-2) calc(-1 * var(--space-4));padding:var(--space-4);border-radius:var(--radius-md);margin-top:var(--space-4)}.bill-row.total .bill-value{font-size:1.375rem;color:var(--color-primary)}}@media(max-width:359px){.main-content{padding:var(--space-3)}.page-header{margin-bottom:var(--space-4)}.page-title{font-size:1.25rem}.page-subtitle{font-size:.8125rem}.stats-grid{grid-template-columns:1fr;gap:var(--space-3)}.stat-card{padding:var(--space-3);display:flex;align-items:center;gap:var(--space-3)}.stat-card:before{display:none}.stat-icon{width:36px;height:36px;margin-bottom:0;flex-shrink:0}.stat-icon svg{width:18px;height:18px}.stat-label{font-size:.6875rem;margin-bottom:0}.stat-value{font-size:1.125rem}.meter-section{padding:var(--space-3);margin-bottom:var(--space-4)}.meter-row{flex-direction:column;gap:var(--space-3)}.meter-input-group{width:100%;min-width:100%}.meter-input-label{font-size:.625rem;text-align:left;padding-left:var(--space-1)}.meter-input{font-size:1.25rem;padding:var(--space-4);text-align:center}.meter-input-prev{font-size:1.125rem;padding:var(--space-3)}.meter-units{margin-top:var(--space-3)}.units-badge{padding:var(--space-2) var(--space-4);font-size:.875rem}.room-card{padding:var(--space-3)}.room-card-header{margin-bottom:var(--space-3);flex-direction:column;align-items:flex-start;gap:var(--space-2)}.room-number{font-size:1.125rem}.room-status{font-size:.75rem}.btn{min-height:52px;font-size:1rem;padding:var(--space-4)}.btn-lg{min-height:56px;font-size:1.0625rem}.bill-preview{padding:var(--space-3)}.bill-row{flex-direction:column;align-items:flex-start;gap:var(--space-1);padding:var(--space-2) 0}.bill-row .bill-value{font-size:1.125rem}.bill-row.total{flex-direction:row;justify-content:space-between;align-items:center;padding:var(--space-3);margin:var(--space-3) calc(-1 * var(--space-3));margin-bottom:calc(-1 * var(--space-3))}.bill-row.total .bill-label{font-size:.875rem}.bill-row.total .bill-value{font-size:1.25rem}.settings-grid{grid-template-columns:1fr;gap:var(--space-3)}.form-group{margin-bottom:var(--space-4)}.form-label{font-size:.875rem;margin-bottom:var(--space-2)}.form-input{min-height:52px;font-size:1.0625rem;padding:var(--space-4)}.modal{margin:var(--space-2);max-height:calc(100vh - 1rem)}.modal-header,.modal-body,.modal-footer{padding:var(--space-4)}.modal-title{font-size:1.0625rem}.card{padding:var(--space-3);border-radius:var(--radius-lg)}.card-header{margin-bottom:var(--space-3)}.card-title{font-size:1rem}.table-container{margin:0 calc(-1 * var(--space-3));border-radius:0;border-left:none;border-right:none}.table th,.table td{padding:var(--space-2) var(--space-1);font-size:.75rem}.nav-item{padding:var(--space-3) var(--space-4);font-size:.9375rem}.empty-state{padding:var(--space-8)}.empty-state svg{width:48px;height:48px}.empty-state h3{font-size:1rem}.empty-state p{font-size:.875rem}}@media(min-width:769px){.mobile-header{display:none}}@media(hover:none)and (pointer:coarse){.btn:hover:not(:disabled),.btn-primary:hover:not(:disabled),.btn-success:hover:not(:disabled){transform:none}.room-card:hover{border-color:var(--color-gray-100);box-shadow:var(--shadow-md)}.nav-item:hover{background:transparent;color:var(--color-gray-400)}.nav-item.active:hover{background:var(--color-primary);color:var(--color-white)}}@supports (padding: max(0px)){.mobile-header{padding-top:max(var(--space-4),env(safe-area-inset-top));padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}.main-content{padding-bottom:max(var(--space-8),env(safe-area-inset-bottom))}.sidebar{padding-bottom:max(var(--space-6),env(safe-area-inset-bottom))}}@media(max-height:500px)and (orientation:landscape){.main-content{padding:var(--space-3)}.page-header{margin-bottom:var(--space-4)}.page-title{font-size:1.25rem;margin-bottom:var(--space-1)}.room-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.modal{max-height:95vh}}.empty-state{text-align:center;padding:var(--space-12);color:var(--color-gray-500)}.empty-state svg{width:64px;height:64px;margin-bottom:var(--space-4);opacity:.5}.empty-state h3{font-size:1.125rem;font-weight:600;color:var(--color-gray-700);margin-bottom:var(--space-2)}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--color-gray-200);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-warning{color:var(--color-warning)}.text-muted{color:var(--color-gray-500)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-bold{font-weight:700}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-gray-50);padding:var(--space-4)}.login-card{background:var(--color-white);border-radius:var(--radius-xl);border:1px solid var(--color-gray-200);box-shadow:var(--shadow-lg);padding:var(--space-8);width:100%;max-width:400px}.login-logo{text-align:center;margin-bottom:var(--space-6)}.login-logo-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-xl);background:var(--gradient-primary);color:var(--color-white);margin-bottom:var(--space-3)}.login-title{font-size:1.5rem;font-weight:700;color:var(--color-gray-900);letter-spacing:-.03em;margin-bottom:var(--space-1)}.login-subtitle{font-size:.875rem;color:var(--color-gray-400)}.login-form{display:flex;flex-direction:column;gap:var(--space-3)}.login-field{display:flex;flex-direction:column}.login-input-wrapper{position:relative;display:flex;align-items:center}.login-input-icon{position:absolute;left:var(--space-4);color:var(--color-gray-400);pointer-events:none}.login-input{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 28px);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);font-size:.9375rem;font-family:inherit;outline:none;transition:all var(--transition-fast);background:var(--color-white)}.login-input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-glow-primary)}.login-input::placeholder{color:var(--color-gray-300)}.login-error{background:var(--color-danger-ultra-light);color:var(--color-danger);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:.8125rem;font-weight:500;border:1px solid rgba(239,68,68,.15)}.login-button{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;margin-top:var(--space-2)}.login-button:hover:not(:disabled){background:var(--color-primary-dark)}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-toggle{text-align:center;margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-gray-100)}.login-toggle-text{font-size:.8125rem;color:var(--color-gray-400)}.login-toggle-btn{background:none;border:none;color:var(--color-primary);font-size:.8125rem;font-weight:600;cursor:pointer;padding:0;margin-left:var(--space-1);font-family:inherit}.login-toggle-btn:hover{text-decoration:underline}.login-features{display:flex;justify-content:center;gap:var(--space-4);margin-top:var(--space-5);flex-wrap:wrap}.login-feature{font-size:.75rem;color:var(--color-gray-400)}.spin{animation:spin 1s linear infinite}.trial-banner{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-primary-ultra-light);color:var(--color-primary);font-size:.8125rem;font-weight:500;border-bottom:1px solid rgba(59,130,246,.15)}.trial-banner.expired{background:var(--color-warning-ultra-light);color:var(--color-warning);border-bottom-color:#f59e0b26}.app-container:has(.trial-banner) .sidebar{top:36px;height:calc(100vh - 36px)}.app-container:has(.trial-banner) .main-content{padding-top:calc(var(--space-8) + 36px)}.app-container:has(.trial-banner) .mobile-header{top:36px}.main-content:has(.pricing-page){padding:0}.app-container:has(.trial-banner) .main-content:has(.pricing-page){padding:36px 0 0}@media(max-width:768px){.login-card{padding:var(--space-6)}.login-features{flex-direction:column;align-items:center;gap:var(--space-2)}.trial-banner{font-size:.75rem;padding:var(--space-1) var(--space-3)}}.invoice-bill{background:#fff;border-radius:16px;padding:48px 52px;box-shadow:0 10px 40px -10px #0000001a;border:1px solid #eaeaea;font-family:Sarabun,sans-serif;font-size:17px;color:#1e293b;max-width:860px;margin:0 auto;line-height:1.6}.invoice-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #e8edf2;padding-bottom:28px;margin-bottom:36px}.invoice-title{font-size:36px;font-weight:800;color:#0f172a;margin-bottom:8px;letter-spacing:-.5px}.invoice-dorm-name{font-size:26px;font-weight:700;color:#2563eb;margin-bottom:6px}.invoice-address{font-size:16px;color:#475569;max-width:280px;line-height:1.7}.invoice-details{text-align:right}.invoice-number-box{background:#f1f5f9;padding:14px 22px;border-radius:10px;border:1.5px solid #dde3ea;display:inline-block;margin-bottom:12px}.invoice-number-label{font-size:13px;color:#64748b;font-weight:700;display:block;margin-bottom:4px;letter-spacing:.3px}.invoice-number-value{font-size:24px;font-weight:800;color:#0f172a}.invoice-meta{font-size:16px;color:#334155;display:flex;flex-direction:column;gap:4px;font-weight:500}.invoice-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:36px}.invoice-table th{text-align:left;padding:14px 18px;background:#f1f5f9;color:#334155;font-weight:700;font-size:15px;border-bottom:2px solid #dde3ea}.invoice-table th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}.invoice-table th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px;text-align:right}.invoice-table td{padding:16px 18px;border-bottom:1.5px solid #f1f5f9;font-size:17px;color:#1e293b;vertical-align:middle}.invoice-table td:last-child{text-align:right;font-weight:700;font-family:monospace;font-size:19px}.invoice-table tr:last-child td{border-bottom:none}.invoice-item-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;margin-right:12px;background:#f1f5f9;vertical-align:middle}.invoice-item-name{display:inline-block;vertical-align:middle;font-weight:600}.invoice-item-desc{display:block;font-size:15px;color:#475569;margin-top:3px;margin-left:44px}.invoice-summary-box{background:#f8fafc;border-radius:12px;padding:24px 28px;border:1.5px solid #dde3ea;margin-bottom:36px;margin-left:auto;width:52%}.invoice-summary-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:16px;color:#475569}.invoice-summary-row.total{border-top:2px dashed #cbd5e1;padding-top:18px;margin-top:4px;margin-bottom:0;font-size:26px;font-weight:800;color:#0f172a}.invoice-summary-row.total .value{color:#2563eb}.invoice-bottom-section{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:2px solid #e8edf2}.invoice-qr-section{background:#fff;padding:18px;border-radius:14px;border:1.5px solid #dde3ea;box-shadow:0 4px 12px #0000000f;text-align:center}.invoice-qr-label{font-size:15px;font-weight:700;color:#1e293b;margin-bottom:12px}.invoice-footer-msg{font-size:16px;color:#475569;font-style:italic;max-width:420px;line-height:1.7}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.chart-bar,.progress-fill{transition:none}.loading-spinner{animation:spin 3s linear infinite}}html.dark .form-input,html.dark .meter-input,html.dark select{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-gray-700)}html.dark .form-input::placeholder,html.dark .meter-input::placeholder{color:var(--color-gray-400)}html.dark .form-input:focus,html.dark .meter-input:focus{background:var(--color-gray-100);border-color:var(--color-primary)}html.dark .meter-input-prev{background:var(--color-gray-200);border-color:var(--color-gray-300);color:var(--color-gray-600)}html.dark .table th{background:var(--color-gray-100);color:var(--color-gray-500);border-bottom-color:var(--color-gray-200)}html.dark .table td{border-bottom-color:var(--color-gray-200);color:var(--color-gray-700)}html.dark .table tr:hover{background:var(--color-gray-100)}html.dark .invoice-table th{background:var(--color-gray-100)!important;color:var(--color-gray-600)!important;border-bottom-color:var(--color-gray-300)!important}html.dark .invoice-table td{color:var(--color-gray-700)!important;border-bottom-color:var(--color-gray-200)!important}html.dark .invoice-summary-box{background:var(--color-gray-100)!important;border-color:var(--color-gray-200)!important}html.dark .invoice-summary-row{color:var(--color-gray-600)!important}html.dark .invoice-summary-row.total{color:var(--color-gray-900)!important;border-top-color:var(--color-gray-300)!important}html.dark .invoice-item-icon{background:var(--color-gray-200)!important}html.dark .invoice-item-desc{color:var(--color-gray-500)!important}html.dark .invoice-bottom-section{border-top-color:var(--color-gray-200)!important}html.dark .invoice-qr-section{background:var(--color-gray-100)!important;border-color:var(--color-gray-200)!important}html.dark .invoice-qr-label{color:var(--color-gray-700)!important}html.dark .invoice-footer-msg{color:var(--color-gray-500)!important}html.dark .nav-item{color:#ffffffb3}html.dark .nav-item:hover{color:#ffffffeb;background:#ffffff14}html.dark .nav-item.active{color:#fff;background:#ffffff24}html.dark .nav-item svg{opacity:1}html.dark .bill-preview{background:var(--color-gray-100)}html.dark .summary-total-card{background:linear-gradient(135deg,var(--color-gray-100),var(--color-gray-200))}html.dark .magic-button-container{background:linear-gradient(135deg,var(--color-gray-100) 0%,var(--color-gray-50) 100%)}html.dark .badge-gray{background:var(--color-gray-200);color:var(--color-gray-600)}html.dark .stat-icon.primary{background:#0089b526;background:oklch(.59 .14 230 / .15)}html.dark .stat-icon.success{background:#00a75f26;background:oklch(.64 .17 155 / .15)}html.dark .stat-icon.warning{background:#e79d0026;background:oklch(.75 .16 75 / .15)}html.dark .stat-icon.danger{background:#d7333726}html.dark .building-type-card-bg{background:var(--color-gray-100)!important;border-color:var(--color-gray-200)!important}html.dark .mobile-header{background:var(--color-gray-50);border-bottom-color:var(--color-gray-200);color:#fff}html.dark .mobile-header span{color:#fff}html.dark .mobile-menu-btn{color:#ffffffd9}html.dark .mobile-menu-btn:hover{background:#ffffff1a;color:#fff}html.dark [class*=trial-banner],html.dark [class*=subscription-banner]{background:var(--color-gray-100);border-color:var(--color-gray-200)}html.dark ::-webkit-scrollbar{width:8px;height:8px}html.dark ::-webkit-scrollbar-track{background:var(--color-gray-50)}html.dark ::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:4px}html.dark ::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}html.dark ::selection{background:#0089b559;background:oklch(.59 .14 230 / .35);color:var(--color-gray-900)}.card,.stat-card,.room-card,.settings-section,.modal,.sidebar,.form-input,.meter-input,.btn,.badge,.table th,.table td{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .15s ease}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}.form-input,.meter-input{color:var(--color-gray-800)}select.form-input{appearance:none;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='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:2.5rem;cursor:pointer}html.dark select.form-input{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='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}.btn-line{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-weight:600;font-size:.9375rem;cursor:pointer;border:none;background:#06c755;color:#fff;transition:filter .15s,opacity .15s}.btn-line:hover:not(:disabled){filter:brightness(1.08)}.btn-line:disabled{opacity:.6;cursor:not-allowed}.line-send-result{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;font-weight:500;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);margin-top:var(--space-2)}.line-send-result.success{background:var(--color-success-ultra-light);color:var(--color-success)}.line-send-result.error{background:var(--color-danger-ultra-light);color:var(--color-danger)}.line-steps-box{background:#e1feea66;border:1px solid oklch(.85 .06 155);border-radius:var(--radius-lg);padding:var(--space-4);margin-top:var(--space-3)}html.dark .line-steps-box{background:#09201259;border-color:#1d442c}html.dark .line-steps-box li{color:var(--color-gray-300)}.install-prompt{position:fixed;bottom:var(--space-5);left:50%;transform:translate(-50%);z-index:200;display:flex;align-items:center;gap:var(--space-3);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);box-shadow:0 8px 32px #00000024;max-width:420px;width:calc(100vw - 2rem);animation:slideUp .3s var(--ease-out-expo)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(16px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.install-prompt-icon{flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-lg);background:var(--gradient-primary);color:#fff;display:flex;align-items:center;justify-content:center}.install-prompt-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.install-prompt-title{font-size:.875rem;font-weight:600;color:var(--color-gray-900)}.install-prompt-sub{font-size:.75rem;color:var(--color-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.install-prompt-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}html.dark .install-prompt{background:var(--color-gray-800);border-color:var(--color-gray-700)}html.dark .install-prompt-title{color:var(--color-gray-100)}html.dark .install-prompt-sub{color:var(--color-gray-400)}.dashboard-customize-modal{max-width:400px}.customize-hint{font-size:.85rem;color:var(--color-gray-500);margin:0 0 var(--space-4) 0}.widget-toggle-list{display:flex;flex-direction:column;gap:var(--space-1)}.widget-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);cursor:pointer;transition:background .15s}.widget-toggle-row:hover{background:var(--color-gray-50)}.widget-toggle-info{flex:1}.widget-toggle-label{font-size:.875rem;font-weight:500;color:var(--color-gray-800)}.toggle-switch{flex-shrink:0;width:40px;height:22px;border-radius:11px;background:var(--color-gray-300);position:relative;cursor:pointer;transition:background .2s}.toggle-switch.active{background:var(--color-primary)}.toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s var(--ease-out-expo)}.toggle-switch.active .toggle-thumb{transform:translate(18px)}html.dark .widget-toggle-row:hover{background:var(--color-gray-300)}html.dark .widget-toggle-label{color:var(--color-gray-800)}html.dark .customize-hint{color:var(--color-gray-600)}html.dark .toggle-switch{background:var(--color-gray-400)}@keyframes slideUpSheet{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:480px){.tenant-link-label{display:none}}@media(max-width:640px){.tenant-profile-overlay{align-items:flex-end!important;padding:0!important}.tenant-profile-modal{max-width:100%!important;max-height:92vh!important;border-radius:20px 20px 0 0!important;animation:slideUpSheet .28s var(--ease-out-expo)!important}.tenant-modal-alert-badges{display:none!important}}html.dark .toggle-switch.active{background:var(--color-primary)}html.dark .maintenance-card{background:var(--color-white);border-color:var(--color-gray-200)}html.dark .operations-table-row:hover{background:var(--color-gray-100)}html.dark .tenant-portal-root{background:var(--color-gray-50);color:var(--color-gray-700)}html.dark .tenant-portal-card{background:var(--color-white)!important;border-color:var(--color-gray-200)!important;color:var(--color-gray-700)!important}html.dark .seg-ctrl{background:var(--color-gray-100)}html.dark .seg-ctrl__item--active{background:var(--color-white);color:var(--color-gray-800)}html.dark .seg-ctrl__item{color:var(--color-gray-500)}html.dark [data-modal=true]{background:var(--color-white)!important;color:var(--color-gray-700)!important}.room-status-tile:hover:not(:disabled){filter:brightness(.93);transform:translateY(-1px);box-shadow:0 3px 8px #0000001a}.room-status-tile:active:not(:disabled){transform:translateY(0);filter:brightness(.88)}@media(prefers-reduced-motion:reduce){.room-status-tile{transition:none!important;transform:none!important}}.tenant-card-hover:hover{box-shadow:0 4px 12px #00000012;transform:translateY(-1px)}