@layer reset,base,components,utilities;@layer reset{*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}}@layer base{:root{--color-primary-900: #0F1B2D;--color-primary-800: #1A2942;--color-primary-700: #243B5C;--color-primary-600: #1E3A5F;--color-primary-500: #2E5A88;--color-primary-400: #4A7FB5;--color-primary-100: #E8EEF4;--color-primary-50: #F0F4F8;--color-accent-600: #0D9488;--color-accent-500: #14B8A6;--color-accent-400: #2DD4BF;--color-accent-100: #CCFBF1;--color-accent-50: #F0FDFA;--color-success-600: #059669;--color-success-100: #D1FAE5;--color-warning-600: #D97706;--color-warning-100: #FEF3C7;--color-error-600: #DC2626;--color-error-100: #FEE2E2;--color-info-600: #2563EB;--color-info-100: #DBEAFE;--color-gray-900: #111827;--color-gray-700: #374151;--color-gray-500: #6B7280;--color-gray-300: #D1D5DB;--color-gray-200: #E5E7EB;--color-gray-100: #F3F4F6;--color-gray-50: #F9FAFB;--color-white: #FFFFFF;--bg: var(--color-gray-50);--panel: var(--color-white);--panel-muted: var(--color-gray-100);--text: var(--color-gray-900);--text-primary: var(--color-gray-900);--text-secondary: var(--color-gray-500);--text-muted: var(--color-gray-500);--background: var(--color-white);--border: var(--color-gray-200);--border-strong: var(--color-gray-300);--primary: var(--color-primary-600);--accent: var(--color-accent-600);--accent-strong: #0B8277;--accent-weak: var(--color-accent-50);--success: var(--color-success-600);--warning: var(--color-warning-600);--danger: var(--color-error-600);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--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: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--space-2xs: 4px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--sidebar-width: 260px;--sidebar-collapsed-width: 72px;--header-height: 56px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace}html,body,#root{min-height:100%}body{font-family:var(--font-sans);font-size:16px;line-height:1.5;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button{font-family:inherit}}@layer components{.app-shell{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:100vh}.app-shell--collapsed{grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:0 var(--space-xl);height:var(--header-height);background:var(--color-white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}.app-header__breadcrumb{display:flex;align-items:center;gap:var(--space-xs);font-size:13px;color:var(--color-gray-500)}.app-header__breadcrumb span{color:var(--color-gray-900);font-weight:500}.app-header__actions{display:flex;align-items:center;gap:var(--space-sm)}.mobile-menu-button{display:none;all:unset;cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-md);color:var(--color-gray-700)}.app-sidebar{background:var(--color-primary-900);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;overflow-x:hidden;transition:width .25s ease}.sidebar-brand{padding:var(--space-lg) var(--space-md);border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-brand__logo-row{display:flex;align-items:center;gap:var(--space-sm)}.sidebar-brand__logo-img{width:32px;height:32px;object-fit:contain;border-radius:var(--radius-sm)}.sidebar-brand__name{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em}.sidebar-brand__tagline{font-size:11px;color:#ffffff73;margin-top:2px;letter-spacing:.02em}.sidebar-section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#ffffff59;padding:var(--space-md) var(--space-md) var(--space-xs)}.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:var(--space-xs) var(--space-xs);flex:1}.sidebar-nav__button{all:unset;display:flex;align-items:center;gap:var(--space-sm);padding:10px var(--space-sm);border-radius:var(--radius-md);cursor:pointer;font-weight:500;font-size:14px;color:#ffffffa6;transition:background .15s ease,color .15s ease}.sidebar-nav__button:hover{background:var(--color-primary-800);color:#ffffffe6}.sidebar-nav__button--active{background:var(--color-primary-700);color:#fff;border-left:3px solid var(--color-accent-400);padding-left:calc(var(--space-sm) - 3px)}.sidebar-nav__icon{width:20px;text-align:center;flex-shrink:0;font-size:16px}.sidebar-nav__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-divider{height:1px;background:#ffffff14;margin:var(--space-xs) var(--space-md)}.sidebar-user{padding:var(--space-md);border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:var(--space-sm)}.sidebar-user__avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-primary-700);color:var(--color-accent-400);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.sidebar-user__info{flex:1;min-width:0}.sidebar-user__name{font-size:13px;font-weight:600;color:#ffffffd9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user__role{font-size:11px;color:#fff6;text-transform:capitalize}.sidebar-footer{padding:var(--space-xs) var(--space-md) var(--space-md);display:flex;justify-content:center}.sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1);background:transparent;color:#fff6;cursor:pointer;transition:background .15s ease,color .15s ease}.sidebar-toggle:hover{background:var(--color-primary-800);color:#ffffffb3}.app-shell--collapsed .sidebar-brand__tagline,.app-shell--collapsed .sidebar-section-label,.app-shell--collapsed .sidebar-nav__label,.app-shell--collapsed .sidebar-user__info{display:none}.app-shell--collapsed .sidebar-brand{padding:var(--space-md) var(--space-xs);text-align:center}.app-shell--collapsed .sidebar-brand__logo-row{justify-content:center}.app-shell--collapsed .sidebar-brand__name{display:none}.app-shell--collapsed .sidebar-brand__logo-img{width:28px;height:28px}.app-shell--collapsed .sidebar-nav__button{justify-content:center;padding:10px}.app-shell--collapsed .sidebar-nav__button--active{padding-left:10px;border-left:none;border-bottom:3px solid var(--color-accent-400);padding-bottom:7px}.app-shell--collapsed .sidebar-user{justify-content:center}.app-shell--collapsed .sidebar-nav{padding:var(--space-xs) 4px}.app-main{display:flex;flex-direction:column;min-height:100vh}.app-content{padding:var(--space-xl);flex:1;min-height:0;overflow-y:auto}.task-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-md)}.task-form{margin-top:var(--space-md);margin-bottom:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--panel-muted);box-shadow:var(--shadow-sm)}.task-form h4{margin:0 0 var(--space-md);font-size:1.1rem}.task-grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:var(--space-md)}.task-card{background:var(--panel-muted);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);display:grid;gap:var(--space-sm);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.task-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}.task-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-sm)}.task-card__badges{display:flex;gap:var(--space-xs);flex-wrap:wrap}.task-card__description{margin:0;color:var(--text-muted);font-size:.9rem}.task-card__table{width:100%;border-collapse:collapse;font-size:.85rem}.task-card__table th,.task-card__table td{padding:6px 8px}.task-card__table th{text-align:left;color:var(--text-muted);width:40%;font-weight:600}.task-card__table tr:nth-child(odd){background:#0d94880d}.task-card__actions{display:flex;gap:var(--space-xs)}.app-content{padding:var(--space-xl);min-height:0;overflow-y:auto}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);position:sticky;top:calc(var(--space-md) + 8px);z-index:10}.card{background:var(--panel);border-radius:var(--radius-lg);border:1px solid var(--border);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.card+.card{margin-top:var(--space-lg)}.card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}.card__title{font-weight:700;font-size:18px;margin:0}.data-table{width:100%;overflow-x:auto}.data-table table{width:100%;border-collapse:collapse}.data-table thead{background:var(--panel-muted)}.data-table th,.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}.data-table tbody tr:hover{background:var(--accent-weak)}.input-field,.select-field,textarea{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);color:inherit;font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}.input-field:focus,.select-field:focus,textarea:focus{outline:none;border-color:var(--color-accent-600);box-shadow:0 0 0 3px #0d948826}.form-row{display:grid;gap:var(--space-md)}.form-row--two{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--panel-muted);color:var(--text-muted)}.badge--success{background:#16a34a1f;color:var(--success)}.badge--warning{background:#ca8a041f;color:var(--warning)}.badge--danger{background:#dc26261f;color:var(--danger)}.badge--info{background:#2563eb1f;color:var(--accent)}.button{border:none;border-radius:var(--radius-sm);padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.button:disabled{opacity:.6;cursor:not-allowed}.button--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.button--primary:hover:not(:disabled){background:var(--accent-strong);transform:translateY(-1px)}.button--secondary{background:var(--panel-muted);color:var(--text);border:1px solid var(--border)}.button--ghost{background:transparent;color:var(--text-muted)}.button--danger{background:var(--danger);color:#fff}.button--sm{padding:6px 12px;font-size:13px}.empty-state{display:grid;place-items:center;padding:60px;border:1px dashed var(--border);border-radius:var(--radius-lg);background:var(--panel-muted);color:var(--text-muted);text-align:center;gap:var(--space-md)}.spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(13,148,136,.2);border-top-color:var(--color-accent-600);animation:spin .8s linear infinite}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeInOverlay .2s ease-out}.modal{background:var(--panel);width:100%;max-width:600px;border-radius:var(--radius-lg);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;overflow:hidden;animation:slideIn .3s ease-out;display:flex;flex-direction:column;max-height:90vh}.modal__header{padding:var(--space-lg);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--panel-muted)}.modal__header h3{margin:0;font-size:1.25rem;font-weight:700;color:var(--text)}.modal__body{padding:var(--space-lg);overflow-y:auto;flex:1}.modal__footer{padding:var(--space-lg);border-top:1px solid var(--border);background:var(--panel-muted);display:flex;justify-content:flex-end;gap:var(--space-md)}.close-button{all:unset;width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;font-weight:700;color:var(--text-muted);transition:background .2s ease,color .2s ease}.close-button:hover{background:var(--border);color:var(--text)}.input-field label{display:block;font-weight:500;margin-bottom:.5rem;color:var(--text);font-size:14px}.input-field input,.input-field select,.input-field textarea{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);color:inherit;font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}.input-field input:focus,.input-field select:focus,.input-field textarea:focus{outline:none;border-color:var(--color-accent-600);box-shadow:0 0 0 3px #0d948826}.input-field small{display:block;margin-top:.25rem;font-size:12px;color:var(--text-muted)}.stat-cards{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm);border-left:4px solid var(--border);transition:box-shadow .2s ease,transform .2s ease}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.stat-card--accent{border-left-color:var(--color-accent-600)}.stat-card--success{border-left-color:var(--color-success-600)}.stat-card--warning{border-left-color:var(--color-warning-600)}.stat-card--error{border-left-color:var(--color-error-600)}.stat-card--info{border-left-color:var(--color-info-600)}.stat-card__label{font-size:13px;color:var(--color-gray-500);font-weight:500;margin-bottom:4px}.stat-card__value{font-size:28px;font-weight:700;color:var(--color-gray-900);line-height:1.2;font-family:var(--font-sans)}.stat-card__sub{font-size:12px;color:var(--color-gray-500);margin-top:4px}.login-page{display:grid;grid-template-columns:1.2fr 1fr;min-height:100vh}.login-brand{background:linear-gradient(135deg,var(--color-primary-900) 0%,var(--color-primary-800) 50%,var(--color-primary-700) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3xl);position:relative;overflow:hidden}.login-brand:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 70%,rgba(13,148,136,.08) 0%,transparent 50%),radial-gradient(circle at 70% 30%,rgba(45,212,191,.05) 0%,transparent 50%);pointer-events:none}.login-brand__logo-img{width:96px;height:96px;object-fit:contain;margin-bottom:var(--space-md);position:relative;z-index:1;border-radius:var(--radius-lg)}.login-brand__logo{font-size:42px;font-weight:700;color:#fff;letter-spacing:-.03em;position:relative;z-index:1}.login-brand__tagline{font-size:16px;color:#ffffff8c;margin-top:var(--space-sm);position:relative;z-index:1}.login-form-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl);background:var(--color-white)}.login-form-container{width:100%;max-width:380px}.login-form-container h2{font-size:24px;font-weight:700;color:var(--color-gray-900);margin:0 0 var(--space-2xs)}.login-form-container .subtitle{color:var(--color-gray-500);font-size:14px;margin:0 0 var(--space-xl)}.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-lg)}.page-header__title{font-size:24px;font-weight:700;color:var(--color-gray-900);margin:0}.page-header__subtitle{font-size:14px;color:var(--color-gray-500);margin:2px 0 0}.quick-actions{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.quick-action{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;cursor:pointer;transition:all .2s ease;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.quick-action:hover{border-color:var(--color-accent-600);box-shadow:var(--shadow-md);transform:translateY(-2px)}.quick-action__icon{font-size:28px;margin-bottom:var(--space-2xs)}.quick-action__label{font-size:13px;font-weight:600;color:var(--color-gray-700)}}@media(max-width:768px){.app-shell{grid-template-columns:1fr!important}.app-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;width:var(--sidebar-width)!important;transform:translate(-100%);transition:transform .3s ease}.app-sidebar--mobile-open{transform:translate(0)}.mobile-overlay{position:fixed;inset:0;background:#00000080;z-index:39;animation:fadeInOverlay .2s ease-out}.mobile-menu-button{display:flex!important;all:unset;cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-md);color:var(--color-gray-700);font-size:20px}.login-page{grid-template-columns:1fr}.login-brand{padding:var(--space-xl) var(--space-lg);min-height:auto}.login-brand__logo{font-size:32px}}@layer utilities{.text-muted{color:var(--text-muted)}.text-small{font-size:13px}.stack{display:grid;gap:var(--space-md)}.stack-sm{display:grid;gap:var(--space-sm)}.grid-two{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.grid-three{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fade-in{animation:fadeIn .25s ease-in-out}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.proof-photo-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;cursor:pointer;animation:fadeInOverlay .2s ease-out}.proof-photo-container{position:relative;max-width:90vw;max-height:90vh;cursor:default}.proof-photo-img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-lg);box-shadow:0 20px 40px #0000004d}.proof-photo-close{position:absolute;top:-12px;right:-12px;width:36px;height:36px;border-radius:50%;background:#fff;border:none;font-size:20px;font-weight:700;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:transform .15s ease}.proof-photo-close:hover{transform:scale(1.1)}@media(max-width:768px){.form-row--two{grid-template-columns:1fr!important}.card{padding:var(--space-sm)}.card__header{flex-direction:column;gap:var(--space-sm);align-items:flex-start!important}.modal{width:95%!important;max-width:none!important;margin:var(--space-sm)}.data-table{font-size:13px}.data-table th,.data-table td{padding:8px 6px}.data-table .hide-mobile{display:none}.button--sm{padding:4px 8px;font-size:12px}.button-group{flex-direction:column;gap:var(--space-xs)}.stat-cards{grid-template-columns:1fr 1fr}}@media(max-width:480px){.data-table{font-size:12px}.data-table th,.data-table td{padding:6px 4px}.card__title{font-size:16px}.badge{font-size:10px;padding:2px 6px}.stat-cards{grid-template-columns:1fr}}.meter-readings-page{padding:2rem;max-width:1600px;margin:0 auto}.period-selector{display:flex;align-items:center;gap:.5rem}.period-selector label{font-weight:600;color:#2c3e50}.period-selector input{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.utility-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:2px solid #dee2e6}.utility-tabs .tab{padding:1rem 2rem;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:600;color:#6c757d;transition:all .2s}.utility-tabs .tab:hover{color:#007bff}.utility-tabs .tab.active{color:#007bff;border-bottom-color:#007bff}.readings-table{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow-x:auto;margin-bottom:1.5rem}.readings-table table{width:100%;border-collapse:collapse}.readings-table thead{background:#f8f9fa}.readings-table th{padding:1rem;text-align:left;font-weight:600;color:#2c3e50;border-bottom:2px solid #dee2e6}.readings-table td{padding:1rem;border-bottom:1px solid #dee2e6}.readings-table tr:hover{background:#f8f9fa}.previous-reading{color:#6c757d;font-weight:500}.readings-table input[type=number]{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.readings-table input[type=number]:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.saved-value{display:inline-block;padding:.5rem;background:#d4edda;color:#155724;border-radius:4px;font-weight:600}.consumption{font-weight:600;color:#28a745}.charge{font-weight:600;color:#007bff;text-align:right}.actions{display:flex;justify-content:center}@media(max-width:768px){.meter-readings-page{padding:1rem}.utility-tabs{overflow-x:auto;flex-wrap:nowrap}.utility-tabs .tab{padding:.75rem 1rem;white-space:nowrap}.readings-table{font-size:.875rem}.readings-table th,.readings-table td{padding:.5rem}}.attendance-page{padding:2rem;max-width:1400px;margin:0 auto}.controls{display:flex;gap:2rem;margin-bottom:1.5rem;padding:1rem;background:#f8f9fa;border-radius:8px}.period-selector,.fine-config{display:flex;align-items:center;gap:.5rem}.period-selector label,.fine-config label{font-weight:600;color:#2c3e50}.period-selector input,.fine-config input{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.fine-config input{width:100px}.quick-actions{display:flex;gap:1rem;margin-bottom:1.5rem}.quick-actions button{padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:all .2s}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.attendance-table{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow-x:auto;margin-bottom:1.5rem}.attendance-table table{width:100%;border-collapse:collapse}.attendance-table thead{background:#f8f9fa}.attendance-table th{padding:1rem;text-align:left;font-weight:600;color:#2c3e50;border-bottom:2px solid #dee2e6}.attendance-table td{padding:1rem;border-bottom:1px solid #dee2e6}.attendance-table tr.saved{background:#e8f5e9}.attendance-checkbox{text-align:center}.checkbox-container{display:flex;align-items:center;gap:.5rem;cursor:pointer}.checkbox-container input[type=checkbox]{width:20px;height:20px;cursor:pointer}.checkbox-label{font-weight:500}.attendance-badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-weight:600;font-size:.875rem}.attendance-badge.present{background:#d4edda;color:#155724}.attendance-badge.absent{background:#f8d7da;color:#721c24}.fine{text-align:right;font-weight:600}.fine.has-fine{color:#dc3545}.notes-cell{min-width:200px}.notes-input{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.875rem}.saved-notes{color:#6c757d;font-style:italic}.actions{display:flex;justify-content:center;margin-bottom:2rem}.btn-primary{padding:1rem 2rem;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;font-size:1rem;transition:all .2s}.btn-primary:hover:not(:disabled){background:#0056b3;transform:translateY(-1px);box-shadow:0 4px 8px #007bff4d}.btn-primary:disabled{background:#ccc;cursor:not-allowed;transform:none}.attendance-summary{display:flex;justify-content:center}.summary-card{background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;min-width:300px}.summary-card h3{margin-bottom:1rem;color:#2c3e50}.summary-card p{display:flex;justify-content:space-between;margin:.5rem 0;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.summary-card p:last-child{border-bottom:none;font-weight:600;font-size:1.1rem;color:#dc3545}@media(max-width:768px){.attendance-page{padding:1rem}.controls{flex-direction:column;gap:1rem}.quick-actions{flex-direction:column}.quick-actions button{width:100%}.attendance-table{font-size:.875rem}.attendance-table th,.attendance-table td{padding:.5rem}}.utility-rates-page{padding:2rem;max-width:1400px;margin:0 auto}.page-header h1{font-size:2rem;color:#2c3e50;margin-bottom:.5rem}.page-header p{color:#7f8c8d;font-size:1rem}.current-rates{margin-bottom:3rem}.current-rates h2{font-size:1.5rem;color:#2c3e50;margin-bottom:1.5rem}.rates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.rate-card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a;transition:all .2s}.rate-card:hover{box-shadow:0 4px 8px #00000026}.rate-card.no-rate{border:2px dashed #ddd;background:#f8f9fa}.rate-header{margin-bottom:1rem}.rate-header h3{font-size:1.25rem;color:#2c3e50;margin-bottom:.25rem}.rate-unit{color:#6c757d;font-size:.875rem;font-style:italic}.rate-value{margin:1.5rem 0;text-align:center}.factor{display:block;font-size:2.5rem;font-weight:700;color:#007bff;margin-bottom:.5rem}.effective-date{display:block;color:#6c757d;font-size:.875rem}.no-rate-message{display:block;color:#dc3545;font-style:italic;font-size:1.1rem;padding:2rem 0}.btn-edit{width:100%;padding:.75rem;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:all .2s}.btn-edit:hover{background:#0056b3}.rate-edit-form{margin-top:1rem}.form-group{margin-bottom:1rem}.form-group label{display:block;font-weight:600;margin-bottom:.5rem;color:#2c3e50}.form-group input{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.form-actions{display:flex;gap:.5rem;margin-top:1rem}.btn-sm{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:all .2s;flex:1}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover:not(:disabled){background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover:not(:disabled){background:#5a6268}.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.rate-history-section{margin-bottom:3rem}.rate-history-section>.btn-secondary{padding:.75rem 1.5rem;margin-bottom:1.5rem;display:block}.rate-history h2{font-size:1.5rem;color:#2c3e50;margin-bottom:1rem}.no-history{color:#6c757d;font-style:italic;padding:2rem;text-align:center;background:#f8f9fa;border-radius:8px}.history-table{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow-x:auto}.history-table table{width:100%;border-collapse:collapse}.history-table thead{background:#f8f9fa}.history-table th{padding:1rem;text-align:left;font-weight:600;color:#2c3e50;border-bottom:2px solid #dee2e6}.history-table td{padding:1rem;border-bottom:1px solid #dee2e6}.history-table tr.active{background:#e7f3ff}.history-table tr.inactive{opacity:.6}.factor-cell{font-weight:600;color:#007bff;font-size:1.1rem}.status-badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-weight:600;font-size:.875rem}.status-badge.active{background:#d4edda;color:#155724}.status-badge.inactive{background:#f8d7da;color:#721c24}.info-box{background:#e7f3ff;border-left:4px solid #007bff;padding:1.5rem;border-radius:4px}.info-box h3{color:#2c3e50;margin-bottom:1rem}.info-box ul{list-style-position:inside;color:#495057;line-height:1.8}.info-box li{margin-bottom:.5rem}.info-box code{background:#fff;padding:.2rem .5rem;border-radius:3px;font-family:Courier New,monospace;color:#dc3545;font-weight:600}@media(max-width:768px){.utility-rates-page{padding:1rem}.rates-grid{grid-template-columns:1fr}.factor{font-size:2rem}.history-table{font-size:.875rem}.history-table th,.history-table td{padding:.5rem}}.excel-import-page{padding:2rem;max-width:1200px;margin:0 auto}.page-header{margin-bottom:2rem}.page-header h1{font-size:2rem;color:var(--text-primary);margin-bottom:.5rem}.page-header p{color:var(--text-secondary);font-size:1rem}.import-container{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 4px #0000001a}.import-type-selector{margin-bottom:2rem}.import-type-selector h3{font-size:1.2rem;margin-bottom:1rem;color:var(--text-primary)}.import-type-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.import-type-btn{display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s}.import-type-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.import-type-btn.active{border-color:var(--accent);background:#e3f2fd}.import-type-btn .btn-icon{font-size:2rem;margin-bottom:.5rem}.import-type-btn .btn-label{font-weight:600;font-size:1rem;margin-bottom:.25rem;color:var(--text-primary)}.import-type-btn .btn-desc{font-size:.85rem;color:var(--text-secondary)}.period-selector{margin-bottom:1.5rem;padding:1rem;background:#f5f5f5;border-radius:8px}.period-selector label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.period-selector input[type=month]{padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;width:200px}.dry-run-toggle{margin-bottom:1.5rem;padding:1rem;background:#fff3cd;border:1px solid #ffc107;border-radius:8px}.dry-run-toggle label{display:flex;align-items:center;cursor:pointer;font-weight:600}.dry-run-toggle input[type=checkbox]{margin-right:.5rem;width:18px;height:18px;cursor:pointer}.dry-run-toggle .help-text{margin-top:.5rem;margin-left:1.5rem;font-size:.9rem;color:var(--text-secondary)}.file-upload-zone{border:2px dashed #ccc;border-radius:8px;padding:3rem 2rem;text-align:center;background:#fafafa;transition:all .3s;cursor:pointer;margin-bottom:1.5rem}.file-upload-zone.dragging{border-color:var(--accent);background:#e3f2fd}.file-upload-zone.has-file{background:#e8f5e9;border-color:#4caf50}.file-upload-zone .upload-icon{font-size:4rem;display:block;margin-bottom:1rem}.file-upload-zone .upload-text{font-size:1.2rem;color:var(--text-primary);margin-bottom:.5rem}.file-upload-zone .upload-subtext{color:var(--text-secondary);margin-bottom:1rem}.file-upload-zone .browse-btn{display:inline-block;padding:.75rem 2rem;background:var(--accent);color:#fff;border-radius:4px;cursor:pointer;transition:background .2s}.file-upload-zone .browse-btn:hover{background:#1976d2}.file-upload-zone .file-format-hint{margin-top:1rem;font-size:.85rem;color:var(--text-secondary)}.file-selected{display:flex;align-items:center;justify-content:center;gap:1rem}.file-selected .file-icon{font-size:3rem}.file-selected .file-name{font-weight:600;font-size:1.1rem;color:var(--text-primary)}.file-selected .file-size{color:var(--text-secondary)}.file-selected .remove-file-btn{padding:.5rem 1rem;background:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background .2s}.file-selected .remove-file-btn:hover{background:#d32f2f}.upload-actions{text-align:center;margin-bottom:2rem}.import-btn{padding:1rem 3rem;font-size:1.1rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem}.import-btn:hover:not(:disabled){background:#1976d2;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.import-btn:disabled{background:#ccc;cursor:not-allowed}.import-btn .spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.import-results{margin-bottom:2rem;padding:1.5rem;background:#f5f5f5;border-radius:8px}.import-results h3{margin-bottom:1rem;color:var(--text-primary)}.result-section{margin-bottom:1.5rem}.result-section h4{margin-bottom:.75rem;color:var(--text-primary);font-size:1.1rem}.result-summary{padding:1rem;border-radius:8px;border-left:4px solid}.result-summary.success{background:#e8f5e9;border-left-color:#4caf50}.result-summary.error{background:#ffebee;border-left-color:#f44336}.result-stats{display:flex;gap:2rem;margin-bottom:1rem;font-weight:600}.result-stats span{color:var(--text-primary)}.warnings-list,.errors-list{margin-top:1rem}.warnings-list h5,.errors-list h5{margin-bottom:.5rem;font-size:1rem;color:var(--text-primary)}.warnings-list ul,.errors-list ul{list-style:none;padding:0}.warnings-list li,.errors-list li{padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.1);color:var(--text-secondary)}.errors-list li{color:#d32f2f}.error-value{font-family:monospace;background:#0000000d;padding:.2rem .4rem;border-radius:3px;font-size:.9rem}.template-downloads{padding-top:2rem;border-top:1px solid #e0e0e0}.template-downloads h3{margin-bottom:1rem;color:var(--text-primary)}.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.template-btn{display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem;border:1px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;text-align:left}.template-btn:hover{border-color:var(--accent);box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.template-btn .template-icon{font-size:2.5rem;margin-bottom:.75rem}.template-btn .template-name{font-weight:600;font-size:1rem;margin-bottom:.5rem;color:var(--text-primary)}.template-btn .template-desc{font-size:.85rem;color:var(--text-secondary)}.error-message{padding:1.5rem;background:#ffebee;border-left:4px solid #f44336;border-radius:4px;color:#d32f2f;font-weight:500}@media(max-width:768px){.excel-import-page,.import-container{padding:1rem}.import-type-buttons{grid-template-columns:1fr}.result-stats{flex-direction:column;gap:.5rem}.template-grid{grid-template-columns:1fr}}.roi-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:1000;display:flex;flex-direction:column}.roi-header{padding:.75rem 1rem;background:#000000d9;color:#fff;text-align:center;z-index:1002;flex-shrink:0}.roi-header h3{margin:0 0 .25rem;font-size:1rem;font-weight:600}.roi-header p{margin:0;font-size:.8rem;opacity:.8}.roi-canvas-container{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.roi-image{max-width:100%;max-height:100%;display:block;user-select:none;-webkit-user-select:none;pointer-events:none}.roi-draw-layer{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.roi-rect{position:absolute;border:3px solid #00e676;background:#00e6761f;box-shadow:0 0 0 9999px #00000080;pointer-events:none;z-index:1001}.roi-rect-label{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);background:#00e676;color:#000;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:4px;white-space:nowrap}.roi-footer{padding:.75rem 1rem;background:#000000d9;display:flex;gap:.5rem;z-index:1002;flex-shrink:0}.roi-btn-confirm{flex:2;padding:.75rem;font-size:1rem;font-weight:600;background:#00e676;color:#000;border:none;border-radius:8px;cursor:pointer;min-height:48px}.roi-btn-confirm:disabled{background:#424242;color:#757575;cursor:not-allowed}.roi-btn-cancel{flex:1;padding:.75rem;font-size:.95rem;font-weight:600;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;min-height:48px}.roi-btn-cancel:hover{background:#ffffff1a}.camera-file-input{display:none}.meter-camera{width:100%}.camera-idle{text-align:center}.meter-type-selector{margin-bottom:.75rem}.meter-type-selector label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:.35rem}.meter-type-buttons{display:flex;gap:.25rem;border-radius:8px;overflow:hidden;border:1px solid #e0e0e0}.meter-type-btn{flex:1;padding:.5rem .25rem;font-size:.8rem;font-weight:500;background:#f5f5f5;color:var(--text-secondary);border:none;cursor:pointer;transition:background .2s,color .2s}.meter-type-btn.active{background:#1565c0;color:#fff}.meter-type-btn:not(.active):hover{background:#e0e0e0}.btn-scan-meter{width:100%;padding:1rem;font-size:1.1rem;font-weight:600;background:#1565c0;color:#fff;border:none;border-radius:8px;cursor:pointer;min-height:56px;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-scan-meter:hover:not(:disabled){background:#0d47a1}.btn-scan-meter:disabled{background:#90caf9;cursor:wait}.ocr-loading-hint{font-size:.8rem;color:var(--text-secondary);margin:.5rem 0 0}.ocr-error{font-size:.85rem;color:#d32f2f;margin:.5rem 0 0;padding:.5rem;background:#ffebee;border-radius:4px}.camera-processing{text-align:center;padding:1rem 0}.preview-thumbnail{max-width:100%;max-height:120px;border-radius:8px;margin-bottom:1rem;object-fit:contain;border:2px solid #e0e0e0}.processing-spinner{display:flex;flex-direction:column;align-items:center;gap:.75rem}.processing-spinner p{margin:0;font-size:.95rem;color:var(--text-secondary);font-weight:500}.spinner{width:36px;height:36px;border:4px solid #e0e0e0;border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.camera-refine{text-align:center}.refine-warning{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem;background:#fff3e0;border:1px solid #ffcc02;border-radius:8px;margin-bottom:.75rem}.refine-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#ff9800;color:#fff;border-radius:50%;font-size:.85rem;font-weight:700;flex-shrink:0}.refine-warning p{margin:0;font-size:.85rem;color:#e65100;font-weight:500;text-align:left}.refine-actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.5rem}.btn-adjust-roi{padding:.75rem .5rem;font-size:.85rem;font-weight:600;background:#fff3e0;color:#e65100;border:1px solid #ffcc02;border-radius:8px;cursor:pointer;min-height:48px;transition:background .2s}.btn-adjust-roi:hover{background:#ffe0b2}.camera-result{text-align:center}.confidence-badge{display:inline-block;padding:.35rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:.75rem}.confidence-high{background:#e8f5e9;color:#2e7d32}.confidence-medium{background:#fff8e1;color:#f57f17}.confidence-low{background:#ffebee;color:#c62828}.detected-value-container{margin-bottom:.75rem}.detected-value-container label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:.25rem}.detected-value-input{width:100%;padding:.75rem;font-size:1.5rem;font-weight:700;text-align:center;border:2px solid var(--primary-color);border-radius:8px;background:#f5f9ff}.detected-value-input:focus{outline:none;box-shadow:0 0 0 3px #2196f333}.result-actions{display:grid;grid-template-columns:2fr 1fr;gap:.5rem}.btn-use-value{padding:.75rem;font-size:1rem;font-weight:600;background:#4caf50;color:#fff;border:none;border-radius:8px;cursor:pointer;min-height:48px;transition:background .2s}.btn-use-value:hover{background:#388e3c}.btn-retake{padding:.75rem;font-size:.95rem;font-weight:600;background:#f5f5f5;color:var(--text-secondary);border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;min-height:48px;transition:background .2s}.btn-retake:hover{background:#e0e0e0}.btn-adjust-roi-link{margin-top:.5rem;padding:.35rem .75rem;font-size:.8rem;font-weight:500;background:transparent;color:#1565c0;border:none;cursor:pointer;text-decoration:underline}.btn-adjust-roi-link:hover{color:#0d47a1}@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-top-color:var(--primary-color);opacity:.7}.btn-scan-meter,.btn-use-value,.btn-retake,.btn-adjust-roi,.meter-type-btn{transition:none}}.meter-mobile-page{min-height:100vh;background:#f5f5f5;padding-bottom:2rem}.meter-mobile-header{background:var(--primary-color);color:#fff;padding:1.5rem 1rem;box-shadow:0 2px 4px #0000001a}.meter-mobile-header h1{font-size:1.75rem;margin:0 0 1rem;font-weight:700}.meter-mobile-period-selector{display:flex;align-items:center;gap:.75rem}.meter-mobile-period-selector label{font-size:.95rem;font-weight:500}.meter-mobile-period-selector input[type=month]{padding:.5rem .75rem;border:none;border-radius:6px;font-size:1rem;flex:1;max-width:200px;font-family:inherit}.meter-mobile-hub{padding:1.5rem 1rem}.meter-mobile-hub-subtitle{font-size:.95rem;color:var(--text-secondary);margin:0 0 1.5rem;text-align:center}.meter-mobile-utility-card{display:flex;flex-direction:column;background:#fff;border:2px solid #e8e8e8;border-radius:12px;padding:24px 20px;cursor:pointer;transition:all .2s ease;margin-bottom:1rem;width:100%;text-align:left}.meter-mobile-utility-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.meter-mobile-utility-card:active{transform:translateY(0)}.meter-mobile-utility-card--complete{border:2px solid #4caf50;background:#f1f8e9}.meter-mobile-utility-card__icon{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.meter-mobile-utility-card--gas .meter-mobile-utility-card__icon{background:#fff3e0;color:#e65100}.meter-mobile-utility-card--agua .meter-mobile-utility-card__icon{background:#e3f2fd;color:#1565c0}.meter-mobile-utility-card__title{font-size:1.5rem;font-weight:700;margin:0 0 1rem;color:var(--text-primary)}.meter-mobile-utility-card__progress{margin-top:auto}.meter-mobile-progress-bar{height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;margin-bottom:.75rem}.meter-mobile-progress-bar__fill{height:100%;background:linear-gradient(90deg,#4caf50,#66bb6a);border-radius:3px;transition:width .3s ease}.meter-mobile-utility-card__status{font-size:.9rem;color:var(--text-secondary);margin:0;font-weight:500}.meter-mobile-complete-badge{color:#2e7d32;font-weight:600}.meter-mobile-entry-header{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:1rem;border-bottom:2px solid #e8e8e8;box-shadow:0 2px 4px #0000000d}.meter-mobile-back-btn{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:var(--primary-color);font-size:1rem;font-weight:600;cursor:pointer;padding:.5rem;border-radius:6px;transition:background .2s}.meter-mobile-back-btn:hover{background:#f5f5f5}.meter-mobile-utility-badge{padding:.5rem 1rem;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.meter-mobile-utility-badge--gas{background:#e65100;color:#fff}.meter-mobile-utility-badge--agua{background:#1565c0;color:#fff}.meter-mobile-progress-container{background:#fff;padding:1rem;border-bottom:2px solid #e8e8e8}.meter-mobile-progress-bar-large{height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.meter-mobile-progress-bar-large__fill{height:100%;background:linear-gradient(90deg,#4caf50,#66bb6a);border-radius:4px;transition:width .3s ease}.meter-mobile-progress-text{text-align:center;font-size:.9rem;font-weight:600;color:var(--text-secondary);margin:0}.meter-mobile-unit-card{background:#fff;border-radius:12px;margin:1rem;padding:1.5rem;box-shadow:0 2px 8px #00000014}.meter-mobile-unit-card__header{text-align:center;padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:2px solid #f0f0f0}.meter-mobile-unit-code{font-size:2rem;font-weight:700;color:var(--primary-color);margin:0 0 .5rem}.meter-mobile-owner-name{font-size:1rem;color:var(--text-secondary);margin:0}.meter-mobile-reading-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fafafa;border-radius:8px;margin-bottom:1.5rem}.meter-mobile-reading-row__label{font-size:.95rem;font-weight:600;color:var(--text-secondary)}.meter-mobile-reading-row__value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.meter-mobile-input-group{margin-bottom:1.5rem}.meter-mobile-input-group__label{display:block;font-size:.95rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.meter-mobile-input-large{width:100%;padding:16px;font-size:1.75rem;font-weight:700;text-align:center;border:2px solid #e0e0e0;border-radius:10px;background:#fff;transition:all .2s;font-family:inherit;min-height:64px}.meter-mobile-input-large:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px #2196f31a}.meter-mobile-input-large::placeholder{color:#bdbdbd;font-weight:400}.meter-mobile-consumption{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#e8f5e9;border-left:4px solid #4caf50;border-radius:8px;margin-bottom:1.5rem}.meter-mobile-consumption__label{font-size:.95rem;font-weight:600;color:#2e7d32}.meter-mobile-consumption__value{font-size:1.25rem;font-weight:700;color:#1b5e20}.meter-mobile-camera-section{padding-top:1.5rem;margin-bottom:1.5rem;border-top:2px solid #f0f0f0}.meter-mobile-proof-photo{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.meter-mobile-btn-proof{display:inline-flex;align-items:center;gap:.5rem;padding:10px 16px;font-size:.9rem;font-weight:600;background:#f5f5f5;color:var(--text-secondary, #666);border:2px dashed #ccc;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}.meter-mobile-btn-proof:hover{background:#e8e8e8;border-color:#999}.meter-mobile-photo-badge{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:.8rem;font-weight:600;color:#2e7d32;background:#e8f5e9;border-radius:20px}.meter-mobile-actions{display:flex;flex-direction:column;gap:.75rem}.meter-mobile-btn-primary,.meter-mobile-btn-secondary{width:100%;padding:16px;font-size:1.1rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .2s;font-family:inherit;min-height:56px}.meter-mobile-btn-primary{background:var(--primary-color);color:#fff}.meter-mobile-btn-primary:hover:not(:disabled){background:#1976d2;transform:translateY(-2px);box-shadow:0 4px 12px #2196f34d}.meter-mobile-btn-primary:disabled{background:#ccc;cursor:not-allowed;transform:none}.meter-mobile-btn-secondary{background:#f5f5f5;color:var(--text-secondary);border:1px solid #e0e0e0}.meter-mobile-btn-secondary:hover:not(:disabled){background:#e0e0e0}.meter-mobile-btn-secondary:disabled{opacity:.5;cursor:not-allowed}.meter-mobile-bottom-nav{display:grid;grid-template-columns:1fr 2fr 1fr;gap:.75rem;padding:1rem;background:#fff;border-top:2px solid #e8e8e8;position:sticky;bottom:0;align-items:center}.meter-mobile-nav-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;font-size:.9rem;font-weight:600;background:#fff;color:var(--primary-color);border:2px solid var(--primary-color);border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit;min-height:44px}.meter-mobile-nav-btn:hover:not(:disabled){background:var(--primary-color);color:#fff}.meter-mobile-nav-btn:disabled{opacity:.3;cursor:not-allowed;border-color:#ccc;color:#ccc}.meter-mobile-unit-selector{display:flex;justify-content:center}.meter-mobile-unit-select{width:100%;padding:.75rem;font-size:.95rem;font-weight:600;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;min-height:44px;text-align:center}.meter-mobile-unit-select:focus{outline:none;border-color:var(--primary-color)}.meter-mobile-completion{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:2rem 1rem;text-align:center}.meter-mobile-completion__icon{width:120px;height:120px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;color:#4caf50}.meter-mobile-completion__title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin:0 0 .75rem}.meter-mobile-completion__subtitle{font-size:1.1rem;color:var(--text-secondary);margin:0 0 1.5rem}.meter-mobile-completion__countdown{font-size:.95rem;color:var(--text-secondary);margin:0 0 2rem;font-weight:500}.meter-mobile-completion .meter-mobile-btn-primary{max-width:300px}.loading-message,.error-message{padding:2rem;text-align:center;font-size:1.1rem;color:var(--text-secondary)}.error-message{background:#ffebee;color:#d32f2f;margin:1rem;border-radius:8px;border-left:4px solid #f44336}@media(min-width:481px){.meter-mobile-hub{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:2rem;max-width:1000px;margin:0 auto}.meter-mobile-hub-subtitle{grid-column:1 / -1}.meter-mobile-utility-card{margin-bottom:0}.meter-mobile-unit-card{max-width:560px;margin:1.5rem auto}.meter-mobile-completion{max-width:560px;margin:0 auto}}@media(max-width:400px){.meter-mobile-header h1{font-size:1.5rem}.meter-mobile-unit-code{font-size:1.75rem}.meter-mobile-input-large{font-size:1.5rem}.meter-mobile-bottom-nav{grid-template-columns:1fr;gap:.5rem}.meter-mobile-nav-btn:first-child{order:2}.meter-mobile-unit-selector{order:1}.meter-mobile-nav-btn:last-child{order:3}}@media(max-height:500px)and (orientation:landscape){.meter-mobile-header{padding:.75rem 1rem}.meter-mobile-header h1{font-size:1.25rem;margin-bottom:.5rem}.meter-mobile-unit-card{margin:.75rem;padding:1rem}.meter-mobile-unit-card__header{margin-bottom:1rem;padding-bottom:.75rem}.meter-mobile-camera-section{padding-top:1rem;margin-bottom:1rem}.meter-mobile-completion{min-height:40vh;padding:1.5rem 1rem}.meter-mobile-completion__icon{width:80px;height:80px;margin-bottom:1rem}}@media(prefers-contrast:high){.meter-mobile-utility-card,.meter-mobile-input-large,.meter-mobile-btn-primary,.meter-mobile-nav-btn{border-width:3px}}@media(prefers-reduced-motion:reduce){.meter-mobile-utility-card,.meter-mobile-btn-primary,.meter-mobile-nav-btn,.meter-mobile-input-large,.meter-mobile-progress-bar__fill,.meter-mobile-progress-bar-large__fill{transition:none}.meter-mobile-utility-card:hover,.meter-mobile-btn-primary:hover:not(:disabled){transform:none}}@media(pointer:coarse){.meter-mobile-btn-primary,.meter-mobile-btn-secondary,.meter-mobile-nav-btn,.meter-mobile-utility-card{min-height:48px}.meter-mobile-input-large{min-height:68px}}