@import"https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";:root{--primary-color: #2563eb;--primary-gradient: linear-gradient(135deg, #2563eb, #3b82f6);--primary-light: #dbeafe;--primary-hover: #1d4ed8;--secondary-color: #0ea5e9;--bg-gradient: linear-gradient(135deg, #e6f0fa 0%, #d2dce8 100%);--card-bg: rgba(255, 255, 255, .85);--card-border: rgba(255, 255, 255, .4);--text-main: #1e293b;--text-muted: #64748b;--border-color: #e2e8f0;--input-bg: #f8fafc;--success-color: #10b981;--success-bg: #d1fae5;--danger-color: #ef4444;--danger-bg: #fee2e2;--warning-color: #f59e0b;--warning-bg: #fef3c7;--info-color: #3b82f6;--info-bg: #dbeafe}*{box-sizing:border-box;margin:0;padding:0;font-family:Kanit,sans-serif}body{background:var(--bg-gradient);background-attachment:fixed;color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh}.hidden{display:none!important}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.w-100{width:100%}.screen{min-height:100vh;display:flex;flex-direction:column}#login-screen,#loading-screen,#error-screen,#create-house-screen,#create-profile-screen{justify-content:center;align-items:center;text-align:center;padding:20px}.login-container,.error-container,.create-house-container,.card{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:30px;border-radius:24px;border:1px solid var(--card-border);box-shadow:0 10px 40px #0000000a,0 1px 3px #0000000d;max-width:420px;width:100%}.app-content .card{max-width:100%;padding:5px;margin-bottom:20px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:none}.app-logo{width:110px;height:110px;margin-bottom:25px;border-radius:28px;box-shadow:0 8px 20px #0d948833}.spinner{border:4px solid var(--primary-light);border-top:4px solid var(--primary-color);border-radius:50%;width:45px;height:45px;animation:spin .8s cubic-bezier(.5,0,.5,1) infinite;margin:0 auto 15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h1,h2,h3,h4{color:var(--primary-color);margin-bottom:12px;font-weight:600}h1,h2{font-family:Outfit,Kanit,sans-serif;letter-spacing:-.5px}p{margin-bottom:15px;color:var(--text-muted);line-height:1.5}.btn{padding:14px 24px;border-radius:14px;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:0 4px 15px #0d94884d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0d948866}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:var(--secondary-color);color:#fff;box-shadow:0 4px 15px #3b82f64d}.btn-outline{background-color:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover{background-color:var(--primary-light);transform:translateY(-2px)}.btn-small{padding:10px 16px;font-size:.95rem;border-radius:12px}.btn-group{display:flex;gap:12px}.form-group{margin-bottom:16px;text-align:left}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-main);font-size:.95rem}.form-row{display:flex;gap:12px;flex-wrap:wrap}.half{flex:1 1 calc(50% - 6px);min-width:120px}.input-field{width:100%;box-sizing:border-box;padding:14px 16px;background-color:var(--input-bg);border:2px solid transparent;border-radius:12px;font-size:1rem;color:var(--text-main);transition:all .3s ease;font-family:Outfit,Kanit,sans-serif}.input-field:focus{outline:none;background-color:#fff;border-color:var(--primary-color);box-shadow:0 0 0 4px var(--primary-light)}.input-field::placeholder{color:#94a3b8}.form-section{background:transparent;padding:0;margin-top:20px;border-radius:0;transition:none}.form-section:hover{background:transparent}.form-section:first-of-type{padding-top:10px}.accordion-header{background:transparent;padding:12px 0;border:none;border-bottom:2px solid var(--border-color);border-radius:0;box-shadow:none;transition:all .2s ease;-webkit-user-select:none;user-select:none;color:var(--text-muted)}.accordion-header:hover{opacity:.7;transform:none;box-shadow:none}.accordion-header.active{color:var(--primary-color);border-bottom:2px solid var(--primary-color)}.accordion-header.danger{color:#fca5a5;border-bottom:2px solid var(--border-color);border-left:none}.accordion-header.danger.active{color:var(--danger-color);border-bottom:2px solid var(--danger-color)}.app-header{background:#ffffffd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:15px 25px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 20px #00000008;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.3)}.app-header h2{margin:0;font-size:1.5rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-right{display:flex;align-items:center;gap:12px;max-width:60%;justify-content:flex-end}#user-info-display{font-size:.8rem;color:var(--text-muted);font-weight:500;text-align:right;line-height:1.3;word-break:break-word}.app-content{flex:1;padding:15px 15px 100px;max-width:600px;margin:0 auto;width:100%}.alert-box{margin-top:20px;padding:16px;border-radius:12px;font-weight:500;text-align:center;animation:slideIn .3s ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-success{background-color:var(--success-bg);color:var(--success-color);border:1px solid #a7f3d0}.alert-danger{background-color:var(--danger-bg);color:var(--danger-color);border:1px solid #fecaca}.alert-info{background-color:var(--info-bg);color:var(--info-color);border:1px solid #bfdbfe}.history-list{display:flex;flex-direction:column;gap:15px}.history-card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 6px #00000005;border:1px solid var(--border-color);display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s}.history-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px #0000000d}.history-card.status-high{border-left:5px solid var(--danger-color);background:linear-gradient(to right,#fee2e266,#fff 20px)}.history-card.status-low{border-left:5px solid var(--info-color);background:linear-gradient(to right,#dbeafe66,#fff 20px)}.history-card.status-normal{border-left:5px solid var(--success-color)}.history-card-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--border-color);padding-bottom:10px;font-size:.9rem;color:var(--text-muted)}.history-date{font-weight:500}.history-name{background:var(--bg-color);padding:4px 10px;border-radius:20px;font-size:.8rem;font-weight:600;color:var(--primary-color)}.history-card-body{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;width:100%}.history-metrics{display:flex;gap:12px;align-items:center;flex-wrap:wrap;width:100%;justify-content:space-between}.metric-sysdia{display:flex;align-items:baseline}.metric-sysdia .value{font-size:1.6rem;font-weight:700;color:var(--text-main);font-family:Outfit,sans-serif;letter-spacing:-1px}.metric-sysdia .separator{font-size:1.2rem;color:#cbd5e1;margin:0 4px}.metric-sysdia .unit{font-size:.75rem;color:var(--text-muted);margin-left:6px;font-weight:500}.metric-pulse{display:flex;align-items:center;background:#fff1f2;padding:6px 12px;border-radius:12px;white-space:nowrap}.metric-pulse .icon{font-size:.9rem;margin-right:6px}.metric-pulse .value{font-size:1.1rem;font-weight:700;color:#e11d48;font-family:Outfit,sans-serif}.metric-pulse .unit{font-size:.75rem;color:#e11d48;margin-left:4px;font-weight:500}.history-actions{display:flex;gap:8px;flex-shrink:0}.history-actions .action-btn{width:36px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:10px;background:var(--bg-color);color:var(--text-muted);border:1px solid var(--border-color);cursor:pointer;transition:all .2s;padding:0}.history-actions .action-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}.history-actions .action-btn.edit-btn:hover{background:var(--info-bg);color:var(--info-color);border-color:#bfdbfe}.history-actions .action-btn.delete-btn:hover{background:var(--danger-bg);color:var(--danger-color);border-color:#fecaca}.history-notes{background:#f8fafc;padding:12px;border-radius:10px;font-size:.85rem;color:var(--text-muted);display:flex;align-items:flex-start;gap:8px;border:1px solid var(--border-color)}.history-notes .icon{font-size:1rem}.action-btn{background:#f1f5f9;border:none;cursor:pointer;color:var(--text-muted);font-size:1rem;padding:6px;border-radius:8px;transition:all .2s;margin-right:5px}.action-btn:hover{background:#e2e8f0;transform:scale(1.1)}.knowledge-section{margin-bottom:24px;padding:20px;border-radius:16px;background:#fff9;border:1px solid var(--border-color)}.knowledge-table{width:100%;border-collapse:hidden;margin-top:15px;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px #00000005}.knowledge-table th,.knowledge-table td{padding:12px;border:1px solid var(--border-color);text-align:center;background:#fff}.knowledge-table th{background:var(--primary-light);color:var(--primary-hover);font-weight:600}.knowledge-section ul{padding-left:20px;margin-top:12px;color:var(--text-muted)}.knowledge-section li{margin-bottom:8px}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;box-shadow:0 -4px 20px #0000000d;z-index:100;border-top:1px solid rgba(0,0,0,.05);padding-bottom:env(safe-area-inset-bottom)}.nav-btn{flex:1;background:none;border:none;padding:12px 0;display:flex;flex-direction:column;align-items:center;color:#94a3b8;cursor:pointer;transition:all .2s ease}.nav-btn:hover{color:var(--primary-hover)}.nav-btn.active{color:var(--primary-color)}.nav-btn .icon{margin-bottom:4px;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.nav-btn .icon svg{width:24px;height:24px;stroke-width:2;stroke:currentColor;fill:none;transition:transform .2s}.nav-btn.active .icon svg{transform:translateY(-2px);stroke-width:2.5}.nav-btn .text{font-size:.75rem;font-weight:500}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:200;opacity:0;animation:fadeIn .3s forwards}@keyframes fadeIn{to{opacity:1}}.modal-content{background:var(--card-bg);padding:30px;border-radius:24px;width:90%;max-width:420px;box-shadow:0 25px 50px #00000026;transform:translateY(20px);animation:modalSlideUp .4s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes modalSlideUp{to{transform:translateY(0)}}.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%) translateY(20px);background:#1e293bf2;color:#fff;padding:14px 28px;border-radius:30px;font-size:.95rem;font-weight:500;box-shadow:0 10px 25px #0003;z-index:300;transition:all .4s cubic-bezier(.175,.885,.32,1.275);opacity:0;pointer-events:none}.toast:not(.hidden){opacity:1;transform:translate(-50%) translateY(0)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}