@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--np-blue: #09608c;--np-blue-dark: #064a6c;--np-blue-light: #98d1ed;--np-orange: #d76652;--np-orange-dark: #b14e3d;--np-text: #343434;--np-bg-soft: #f0f0f0;--np-border: #e0e0e0;--np-success: #2e7d32;--np-danger: #c62828}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,Arial,sans-serif;color:var(--np-text)}.app-container{width:100%;height:100vh;height:100dvh;background:var(--np-bg-soft);position:relative;overflow:hidden;display:flex;flex-direction:column}.app-container>div:not(.warning-overlay){flex:1;display:flex;flex-direction:column;min-height:0}.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#fff;min-height:52px;padding:10px 20px;gap:6px;border-bottom:1px solid var(--np-border);color:var(--np-text);position:relative;z-index:850}.header-row1{display:flex;align-items:center;gap:8px;justify-self:start}.header-title-row{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}.header .title{text-align:center;min-width:0;font-size:16px;font-weight:600;color:var(--np-blue);white-space:nowrap;text-overflow:ellipsis}.header-row2{display:flex;align-items:center;gap:6px;justify-self:end}.header-badge-desktop{display:inline-flex}.header-badge-mobile{display:none}.header-logo-desktop{display:inline-block;margin-left:12px}.header-logo-mobile,.header-title-mobile{display:none}.hdr-btn{border:none;border-radius:6px;padding:0 10px;height:30px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:background .2s,box-shadow .2s,transform .1s,opacity .2s}.hdr-btn:active{transform:scale(.96)}.hdr-btn-back{background:transparent;color:var(--np-blue);border:1px solid var(--np-border)}.hdr-btn-back:hover{background:#09608c1a}.hdr-btn-home{background:transparent;color:var(--np-blue);border:1px solid var(--np-border);width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}.hdr-btn-home:hover{background:#09608c1a}.hdr-btn-emergency{background:#d32f2f;color:#fff;font-weight:700;font-size:11px;letter-spacing:.5px;padding:0 8px}.hdr-btn-emergency:hover{background:#b71c1c;box-shadow:0 2px 8px #d32f2f66}.hdr-btn-primary{background:var(--np-blue);color:#fff;animation:connect-pulse 1.4s ease-in-out infinite}.hdr-btn-primary:hover{background:var(--np-blue-dark);animation:none;box-shadow:0 2px 8px #09608c59}@keyframes connect-pulse{0%{box-shadow:0 0 #d76652,0 0 #d7665266;transform:scale(1)}50%{box-shadow:0 0 0 7px #d7665200,0 0 14px 4px #d7665240;transform:scale(1.04)}to{box-shadow:0 0 #d7665200,0 0 #d7665200;transform:scale(1)}}.hdr-btn-disconnect{background:transparent;color:#c62828;border:1px solid #c62828;font-size:11px}.hdr-btn-disconnect:hover{background:#c6282814;box-shadow:0 1px 4px #c6282833}.hdr-btn-system{background:transparent;color:#e65100;border:1px solid #e65100;font-size:11px}.hdr-btn-system:hover{background:#e6510014;box-shadow:0 1px 4px #e6510033}.hdr-btn-shutdown{background:transparent;color:#880e4f;border:1px solid #880e4f;font-size:11px}.hdr-btn-shutdown:hover{background:#880e4f14;box-shadow:0 1px 4px #880e4f33}.user-menu{position:relative}.hdr-btn-user{background:transparent;color:var(--np-blue);border:1px solid var(--np-border);width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}.hdr-btn-user:hover{background:#09608c1a}.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--np-border);border-radius:10px;box-shadow:0 4px 20px #0000001f;min-width:220px;z-index:1000;overflow:hidden}.user-menu-info{display:flex;align-items:center;gap:10px;padding:16px}.user-menu-divider{height:1px;background:var(--np-border);margin:0}.user-menu-logout{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;border:none;background:none;font-size:14px;font-weight:600;color:var(--np-danger);cursor:pointer;font-family:inherit;transition:background .15s}.user-menu-logout:hover{background:#fef2f2}.header .action-btn{background:var(--np-orange);color:#fff;border:none;border-radius:6px;padding:0 12px;height:34px;font-size:13px;font-weight:500;cursor:pointer}.header-mobile-menu{position:relative;display:none}.header-drawer-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--np-border);border-radius:6px;width:32px;height:32px;padding:0;cursor:pointer;color:var(--np-text);flex-shrink:0}.header-drawer-toggle:active{background:#0000000f}.header-mobile-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#f8f8f8;border:1px solid var(--np-border);border-radius:12px;box-shadow:0 4px 20px #00000026;min-width:210px;z-index:1000}.header-dropdown-btn-card{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13px;font-weight:600;color:var(--np-text);font-family:inherit;background:#fff;border:none;border-bottom:1px solid var(--np-border);cursor:pointer;text-align:left;transition:background .15s}.header-dropdown-btn-card:last-child{border-bottom:none}.header-dropdown-btn-card:active{background:#f0f0f0}.header-dropdown-btn-danger{color:#c62828;background:#fef6f6}.header-dropdown-btn-danger:active{background:#fde8e8}.header-badge-drawer{display:inline-flex}.conn-indicator{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%}.conn-indicator.online{background:#4caf50}.conn-indicator.offline{background:#f44336}.login-page{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:url(/assets/app-background-DqOnQlcG.png) center center / cover no-repeat fixed}.login-card{background:#fff;border-radius:12px;padding:32px 28px;width:100%;max-width:400px;box-shadow:0 4px 24px #0000001a}.login-logo{display:block;margin:0 auto 16px;height:44px;object-fit:contain}.app-footer{text-align:center;padding:6px 12px;font-size:11px;color:#888;background:#fff;border-top:1px solid var(--np-border);flex-shrink:0}.warning-overlay{position:absolute;top:60px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:8px}.warning-toast{background:#fff3cd;border:1px solid #FFCC02;border-radius:6px;padding:10px 36px 10px 14px;font-size:14px;cursor:pointer;position:relative;max-width:400px;color:#856404}.warning-toast.error{background:#f8d7da;border-color:#f44336;color:#721c24}.warning-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-weight:700;cursor:pointer}.page-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;background:url(/assets/app-background-DqOnQlcG.png) center center / cover no-repeat fixed}.btn-green{background:var(--np-orange);color:#fff;border:none;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;min-height:48px;padding:12px 24px;text-align:center;font-family:inherit;transition:background .2s,box-shadow .2s,transform .15s}.btn-green:hover{background:var(--np-orange-dark);box-shadow:0 4px 12px #d7665259;transform:translateY(-2px)}.btn-green:active{background:var(--np-orange-dark);transform:translateY(0);box-shadow:none}.btn-green:disabled{background:#9e9e9e;cursor:not-allowed;transform:none;box-shadow:none}.btn-outlined{background:transparent;color:var(--np-blue);border:2px solid var(--np-blue);border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;min-height:48px;padding:12px 24px;text-align:center;font-family:inherit;transition:background .2s,color .2s,box-shadow .2s,transform .15s}.btn-outlined:hover{background:var(--np-blue);color:#fff;box-shadow:0 4px 12px #09608c59;transform:translateY(-2px)}.btn-outlined:active{background:var(--np-blue-dark);color:#fff;transform:translateY(0);box-shadow:none}.nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px;max-width:700px;width:100%;margin:0 auto}.nav-grid .btn-green{font-size:22px;padding:36px 20px;border-radius:12px}.nav-grid .btn-green:hover{transform:translateY(-3px);box-shadow:0 6px 20px #d766524d}.btn-blue{background:var(--np-blue);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;min-height:48px;padding:10px 20px;font-family:inherit;transition:background .2s,box-shadow .2s,transform .15s}.btn-blue:hover{background:var(--np-blue-dark);box-shadow:0 4px 12px #09608c59;transform:translateY(-2px)}.btn-blue:active{background:var(--np-blue-dark);transform:translateY(0);box-shadow:none}.btn-orange{background:var(--np-orange);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;min-height:48px;padding:10px 20px;font-family:inherit;transition:background .2s,box-shadow .2s}.btn-orange:hover{background:var(--np-orange-dark);box-shadow:0 2px 8px #d766524d}.btn-orange:active{background:var(--np-orange-dark)}.btn-red{background:var(--np-danger);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;min-height:48px;padding:10px 20px;font-family:inherit;transition:background .2s,box-shadow .2s}.btn-red:hover{background:#8e1d1d;box-shadow:0 2px 8px #c628284d}.btn-red:active{background:#8e1d1d}.btn-grey{background:#9e9e9e;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;min-height:48px;padding:10px 20px;font-family:inherit;transition:background .2s,box-shadow .2s}.btn-grey:hover{background:#757575;box-shadow:0 2px 8px #00000026}.btn-grey:active{background:#616161}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-group label{font-size:14px;font-weight:600;color:var(--np-text)}.form-group select,.form-group input{height:44px;font-size:16px;border:2px solid var(--np-border);border-radius:6px;padding:0 10px;background:#fff;font-family:inherit;color:var(--np-text)}.form-group select:focus,.form-group input:focus{border-color:var(--np-blue);outline:none}.data-table{width:100%;border-collapse:collapse;font-size:14px;font-family:inherit}.data-table th{background:var(--np-blue);color:#fff;padding:10px 8px;text-align:left;font-size:13px;font-weight:600;white-space:nowrap}.data-table td{padding:8px;border-bottom:1px solid var(--np-border);color:var(--np-text)}.data-table tr:nth-child(2n){background:#fafafa}.data-table tr:hover{background:#eaf4fa}.panel{background:#fff;border:1px solid var(--np-border);border-radius:8px;padding:16px}.status-bar{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.status-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--np-text)}.status-dot.on{background:#4caf50}.status-dot.off{background:#ddd}.io-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px}.valve-btn{min-height:60px;font-size:16px;font-weight:600;border:2px solid var(--np-text);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}.valve-btn.on{background:#4caf50;color:#fff;border-color:#2e7d32}.valve-btn.off{background:#ccc;color:var(--np-text);border-color:#999}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:900;display:flex;align-items:center;justify-content:center;padding:16px}.modal-content{background:#fff;border-radius:12px;padding:24px;width:100%;max-width:500px;min-width:0}.modal-content h3{margin-bottom:16px;color:var(--np-blue)}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}.text-center{text-align:center}.data-table .btn-red,.data-table .btn-green,.data-table .btn-blue{min-height:auto;font-size:14px;padding:4px 12px}.admin-tabs{display:flex;gap:0;border-bottom:2px solid #e0e0e0;margin-bottom:18px}.admin-tab{padding:10px 24px;font-size:15px;font-weight:600;cursor:pointer;background:none;border:none;border-bottom:3px solid transparent;color:#888;font-family:inherit;transition:color .2s,border-color .2s;margin-bottom:-2px}.admin-tab:hover{color:#555}.admin-tab.active{color:var(--np-blue);border-bottom-color:var(--np-blue)}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.flex-row{display:flex;flex-direction:row;gap:12px;align-items:center}.flex-col{display:flex;flex-direction:column;gap:12px}.gap-8{gap:8px}.gap-16{gap:16px}.flex-1{flex:1}.reprocess-layout{display:flex;gap:16px;padding:16px;flex-wrap:wrap}.reprocess-stn{flex:0 1 180px;min-width:130px;display:flex;flex-direction:column;gap:10px}.reprocess-center{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:12px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#aaa;border-radius:4px}@media (max-width: 1024px){.header .title{font-size:17px}.nav-grid .btn-green{font-size:20px;padding:28px 16px}.io-grid{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}.valve-btn{min-height:52px;font-size:14px}}@media (max-width: 1086px){.header{display:flex;flex-wrap:wrap;padding:8px 12px;gap:6px;row-gap:8px}.header-title-row{flex:1 0 100%;order:0;justify-content:space-between;gap:8px;min-width:0}.header .title{font-size:17px}.header-logo-desktop{display:none!important}.header-logo-mobile{display:inline-block!important}.header-row1{flex:0 0 auto;order:1}.header-row2{flex:1;order:1;justify-content:flex-end}.hdr-btn{height:34px;font-size:13px;padding:0 12px}.hdr-btn-home,.hdr-btn-user{width:34px;height:34px;padding:0}.header-badge-desktop{display:none!important}.header-badge-mobile{display:inline-flex!important;flex-shrink:0}.page-content{padding:10px}.nav-grid{grid-template-columns:1fr 1fr;gap:14px;padding:14px}.nav-grid .btn-green{font-size:17px;padding:22px 12px}.io-grid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:6px}.valve-btn{min-height:46px;font-size:13px}.data-table th,.data-table td{padding:6px 4px;font-size:12px}.modal-content{padding:16px}}@media (max-width: 600px){.header-title-row{flex:1 0 100%;order:0;justify-content:space-between;gap:8px;align-items:center}.header-logo-mobile{order:0;flex-shrink:0}.header-badge-mobile{order:1;flex-shrink:0}.header-mobile-menu{display:flex;order:2}.header .title{display:none}.header-row1{flex:0 0 auto;order:1;gap:4px}.header-title-mobile{display:block!important;order:1;flex:1;text-align:center;font-size:15px;font-weight:600;color:var(--np-blue);line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis}.header-row2{display:none!important}.hdr-btn{height:30px;font-size:12px;padding:0 8px;gap:3px;border-radius:5px}.hdr-btn-back{font-size:11px}.hdr-btn-home{width:30px;height:30px;border-radius:6px;padding:0}.reprocess-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px}.reprocess-center{grid-column:1 / -1;grid-row:1}.reprocess-stn{grid-row:2;min-width:0;flex:unset}}@media (max-width: 480px){.page-content{padding:8px}.nav-grid{grid-template-columns:1fr;gap:10px;padding:10px}.nav-grid .btn-green{font-size:16px;padding:18px 10px}.btn-green,.btn-blue,.btn-red,.btn-grey,.btn-orange{font-size:14px;min-height:42px;padding:8px 14px}.io-grid{grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:4px}.valve-btn{min-height:40px;font-size:12px}.admin-tab{padding:8px 16px;font-size:13px}}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#00000073;display:flex;align-items:center;justify-content:center;animation:confirmFadeIn .15s ease-out}@keyframes confirmFadeIn{0%{opacity:0}to{opacity:1}}.confirm-dialog{background:#fff;border-radius:14px;padding:28px 24px 20px;width:320px;max-width:90vw;box-shadow:0 8px 30px #00000040;text-align:center;animation:confirmSlideIn .15s ease-out}@keyframes confirmSlideIn{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.confirm-icon{margin-bottom:10px}.confirm-title{font-size:17px;font-weight:700;color:var(--np-text);margin-bottom:6px}.confirm-message{font-size:13px;color:#666;margin-bottom:20px;line-height:1.4}.confirm-actions{display:flex;gap:10px;justify-content:center}.confirm-btn{flex:1;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}.confirm-btn:active{opacity:.8}.confirm-btn-cancel{background:#e8e8e8;color:#555}.confirm-btn-danger{background:#c62828;color:#fff}.confirm-btn-warn{background:#f9a825;color:#fff}.ble-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:800;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:16px}.ble-overlay-card{background:#fff;border-radius:16px;padding:36px 40px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;box-shadow:0 8px 32px #00000040;max-width:400px;width:100%;position:relative}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.92)}}.ble-overlay-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:18px;line-height:1;color:#999;cursor:pointer;padding:4px;border-radius:4px;transition:color .15s,background .15s}.ble-overlay-close:hover{color:#333;background:#0000000f}
