:root{--color-bg-primary: #080e1f;--color-bg-secondary: #0a1120;--color-bg-card: #0f1729;--color-bg-input: #151e35;--color-primary: #0ebbff;--color-primary-dark: #0066cc;--color-text-primary: #e8edf5;--color-text-secondary: #6b7fa3;--color-border: rgba(14, 187, 255, .12);--color-border-active: rgba(14, 187, 255, .35);--color-success: #22c55e;--color-danger: #ef4444;--color-warning: #f97316;--sidebar-width: 200px;--header-height: 56px;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-stat: 24px}*{box-sizing:border-box}html{font-size:16px}body,#root{margin:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--font-size-base);background:var(--color-bg-primary);color:var(--color-text-primary)}a{color:var(--color-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#0ebbff33;border-radius:3px}.page-container{padding:16px;height:100%;overflow:auto}.stat-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;padding:14px 18px;font-size:var(--font-size-base)}.data-table-wrapper{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;overflow:hidden}.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.map-zoom-btn{width:32px;height:32px;border-radius:4px;border:1px solid rgba(14,187,255,.2);background:#0f1729;color:var(--color-text-primary);cursor:pointer;font-size:14px}.ant-layout,.ant-layout-sider,.ant-menu-dark{background:var(--color-bg-secondary)!important}.ant-input::placeholder,.ant-input-affix-wrapper input::placeholder,.ant-select-selection-placeholder{color:#9db0d0!important;opacity:1!important}.ant-input-prefix,.ant-input-suffix,.ant-input-password-icon{color:#8b9dc3!important}.ant-input,.ant-input-affix-wrapper input{color:var(--color-text-primary)}.ant-input-affix-wrapper,.ant-input{border-color:#0ebbff33}.ant-input-affix-wrapper:hover,.ant-input:hover{border-color:#0ebbff59}.ant-input-affix-wrapper-focused,.ant-input-affix-wrapper:focus-within{border-color:#0ebbff80;box-shadow:0 0 0 2px #0ebbff1f}.ant-popconfirm .ant-popover-inner{border:1px solid var(--color-border-active);box-shadow:0 8px 24px #00000073,0 0 12px #0ebbff14}.draw-fence-modal .ant-btn-primary[disabled],.draw-fence-modal .ant-btn-primary.ant-btn-disabled{opacity:1;color:#0ebbff73!important;background:#0ebbff1a!important;border-color:#0ebbff33!important;cursor:not-allowed}.ant-select .ant-select-selector{border-color:#0ebbff33!important}.ant-select:not(.ant-select-disabled):hover .ant-select-selector{border-color:#0ebbff59!important}.ant-select-focused .ant-select-selector{border-color:#0ebbff80!important;box-shadow:0 0 0 2px #0ebbff1f!important}.ant-select .ant-select-selection-item{color:var(--color-text-primary)!important}.ant-select-dropdown{background:#151e35!important;border:1px solid rgba(14,187,255,.15);box-shadow:0 8px 24px #00000073}.ant-select-dropdown .ant-select-item{color:var(--color-text-primary)}.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled){background:#0ebbff26!important;color:#e8edf5!important}.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled){background:#0ebbff1f!important;color:#0ebbff!important;font-weight:600}.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state{color:#0ebbff!important}.main-layout{display:flex;min-height:100vh;background:var(--color-bg-primary)}.main-layout-aside{width:var(--sidebar-width);flex-shrink:0;background:var(--color-bg-secondary);border-right:1px solid var(--color-border)}.main-layout-main{flex:1;display:flex;flex-direction:column;min-width:0}.main-layout-content{flex:1;overflow:hidden;background:var(--color-bg-primary)}.side-menu{display:flex;flex-direction:column;height:100vh;padding-bottom:16px}.side-menu-brand{display:flex;align-items:center;gap:10px;padding:20px 16px;border-bottom:1px solid var(--color-border)}.side-menu-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#0ebbff,#06c);display:flex;align-items:center;justify-content:center}.side-menu-title{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary)}.side-menu-sub{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.side-menu-nav{flex:1;background:transparent!important;border:none!important;padding:8px 0}.side-menu-nav .ant-menu-item{position:relative;margin:3px 0!important;border-radius:10px!important;border:1px solid transparent!important;transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease!important}.side-menu-nav .ant-menu-item:hover{background:#ffffff0a!important;color:var(--color-text-primary)!important}.side-menu-nav .ant-menu-item-selected{background:linear-gradient(90deg,#0ebbff29,#0ebbff0a)!important;border-color:#0ebbff47!important;color:var(--color-primary)!important;box-shadow:0 0 16px #0ebbff1a,inset 0 1px #0ebbff1f!important}.side-menu-nav .ant-menu-item-selected:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 2px 2px 0;background:linear-gradient(180deg,#0ebbff,#06c);box-shadow:0 0 10px #0ebbff8c}.side-menu-nav .ant-menu-item-selected:after,.side-menu-nav .ant-menu-item:after{display:none!important}.side-menu-nav .ant-menu-item .ant-menu-item-icon{font-size:16px;transition:color .25s ease,transform .25s ease}.side-menu-nav .ant-menu-item-selected .ant-menu-item-icon{color:var(--color-primary);transform:scale(1.05)}.side-menu-nav .ant-menu-title-content{font-weight:500}.side-menu-nav .ant-menu-item-selected .ant-menu-title-content{font-weight:600}.side-menu-footer{padding:16px;border-top:1px solid var(--color-border)}.side-menu-status{display:flex;align-items:center;gap:8px;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-bottom:8px}.side-menu-user{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;border:1px solid transparent;background:#0ebbff0f;font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:background .2s ease,border-color .2s ease}.side-menu-user:hover{background:#0ebbff1a;border-color:#0ebbff33}.side-menu-user-name{flex:1;min-width:0}.side-menu-avatar{width:24px;height:24px;border-radius:50%;background:var(--color-primary);color:#080e1f;font-size:var(--font-size-sm);font-weight:600;display:flex;align-items:center;justify-content:center}.header-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary);flex-shrink:0}.header-title{font-size:var(--font-size-md);font-weight:600;color:var(--color-text-primary);margin:0}.header-sub{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:2px 0 0}.header-actions{display:flex;align-items:center;gap:12px}.header-draw-btn{border-color:#0ebbff40!important;background:#0ebbff1f!important;color:var(--color-primary)!important}.header-draw-btn:hover:not(:disabled){border-color:#0ebbff73!important;background:#0ebbff2e!important;color:var(--color-primary)!important}.header-draw-btn:disabled,.header-draw-btn.ant-btn-disabled{opacity:.45;border-color:#0ebbff26!important;background:#0ebbff0f!important;color:var(--color-primary)!important}.header-notif-btn{width:32px;height:32px;border:1px solid var(--color-border);border-radius:8px;color:var(--color-text-secondary)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,rgba(14,187,255,.08),transparent 50%),var(--color-bg-primary)}.login-card{width:400px;background:var(--color-bg-card)!important;border:1px solid var(--color-border)!important;border-radius:16px!important}.login-brand{text-align:center;margin-bottom:32px}.login-logo{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:linear-gradient(135deg,#0ebbff,#05c);display:flex;align-items:center;justify-content:center}.login-brand h1{margin:0;font-size:var(--font-size-xl);color:var(--color-text-primary)}.login-brand p{margin:8px 0 0;font-size:var(--font-size-base);color:var(--color-text-secondary)}.login-error{color:var(--color-danger);font-size:var(--font-size-base);margin-bottom:12px}.login-card .ant-input-affix-wrapper,.login-card .ant-input{background:var(--color-bg-input)!important;border-color:#0ebbff33!important}.login-card .ant-input-affix-wrapper:hover,.login-card .ant-input:hover{border-color:#0ebbff59!important}.login-card .ant-input-affix-wrapper-focused,.login-card .ant-input-affix-wrapper:focus-within{border-color:#0ebbff80!important;box-shadow:0 0 0 2px #0ebbff1f}.login-card .ant-input,.login-card .ant-input-affix-wrapper input{color:var(--color-text-primary)}.login-card input::placeholder{color:#9db0d0!important;opacity:1}.login-card .ant-input-prefix,.login-card .ant-input-suffix,.login-card .ant-input-password-icon{color:#8b9dc3!important}.login-submit-btn{height:44px;font-size:var(--font-size-base);font-weight:500}.monitor-page{display:flex;gap:16px;padding:16px;height:100%;overflow:hidden}.monitor-main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}.monitor-map-wrap{flex:1;min-height:0;border:1px solid var(--color-border);border-radius:12px;overflow:hidden}.monitor-sidebar{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}.monitor-panel{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;padding:12px;display:flex;flex-direction:column}.monitor-panel.flex-1{flex:1;min-height:0}.monitor-panel-header{display:flex;justify-content:center;align-items:center;margin-bottom:10px;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);text-align:center}.monitor-list{display:flex;flex-direction:column;gap:6px}.monitor-list.scrollable{flex:1;overflow-y:auto}.monitor-list-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;border:1px solid transparent;background:#ffffff08;cursor:pointer;text-align:left;width:100%;color:inherit}.monitor-list-item.active{background:#0ebbff1a;border-color:#0ebbff4d}.monitor-list-text{flex:1;min-width:0;font-size:var(--font-size-base)}.fence-color{width:10px;height:10px;border-radius:2px;flex-shrink:0}.user-avatar{width:28px;height:28px;border-radius:50%;background:#0ebbff26;color:var(--color-primary);font-size:var(--font-size-base);font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-detail-card{margin-top:8px;padding:10px 12px;border-radius:12px;background:#0ebbff14;border:1px solid rgba(14,187,255,.2)}.user-detail-header{display:flex;justify-content:space-between;font-size:var(--font-size-base);font-weight:600;margin-bottom:4px}.sub{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.mono{font-family:monospace}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.page-title{font-size:var(--font-size-md);font-weight:600;margin:0;color:var(--color-text-primary)}.page-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:4px 0 0}.page-header-actions{display:flex;gap:8px;align-items:center}.table-header,.table-row{display:grid;align-items:center;padding:12px 16px;font-size:var(--font-size-base)}.table-header{background:var(--color-bg-secondary);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}.table-row{background:var(--color-bg-card);border-bottom:1px solid rgba(14,187,255,.06);color:var(--color-text-primary)}.row-fence,.table-header.row-fence{grid-template-columns:1.2fr 1fr .8fr 1fr .8fr 1fr}.table-row.row-fence.is-disabled{opacity:.72}.table-row.row-fence.is-disabled .fence-color{background:#6b7fa3!important}.fence-status-tag{font-size:var(--font-size-base);white-space:nowrap}.fence-status-tag.is-enabled{color:var(--color-success)}.fence-status-tag.is-disabled{color:var(--color-text-secondary)}.monitor-list-item.is-disabled{opacity:.65}.monitor-list-item.is-disabled.active{opacity:.85;border-color:#6b7fa359;background:#6b7fa31a}.row-personnel,.table-header.row-personnel{grid-template-columns:1.2fr .8fr 1fr 1fr 1fr 1fr}.row-records,.table-header.row-records{grid-template-columns:1.2fr 1fr 1fr 1.5fr}.fence-name-cell,.user-name-cell{display:flex;align-items:center;gap:8px}.row-actions{display:flex;align-items:center;gap:4px}.inline-form-bar{display:flex;gap:8px;align-items:center;margin-bottom:16px;padding:12px 16px;border-radius:12px;background:#0ebbff14;border:1px solid rgba(14,187,255,.2)}.empty-state{text-align:center;padding:40px;color:var(--color-text-secondary);font-size:var(--font-size-base)}.table-pagination{display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid rgba(255,255,255,.06)}.settings-grid{max-width:520px;display:flex;flex-direction:column;gap:16px}.settings-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:16px;max-width:960px;align-items:start}.settings-column{display:flex;flex-direction:column;gap:16px;min-width:0}.settings-card-fill{min-height:100%}.region-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.region-panel-header h3{margin:0}.region-coord-preview{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 12px;align-items:center;padding:10px 12px;margin:12px 0;border-radius:8px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);font-size:var(--font-size-sm)}.region-table{border:1px solid var(--color-border);border-radius:8px;overflow:hidden}.region-table-header,.region-table-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 72px;align-items:center;gap:8px;padding:10px 12px;font-size:var(--font-size-sm)}.region-table-header{background:var(--color-bg-secondary);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}.region-table-row{border-bottom:1px solid rgba(14,187,255,.06);color:var(--color-text-primary)}.region-table-row:last-child{border-bottom:none}.settings-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;padding:16px}.settings-card h3{font-size:var(--font-size-base);font-weight:600;margin:0 0 12px;color:var(--color-text-primary)}.settings-hint{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 12px;line-height:1.5}.map-center-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.map-center-field label,.map-center-zoom label{display:block;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:6px}.map-center-zoom{margin-top:4px}.storage-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.storage-option{display:flex;gap:12px;padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:#ffffff08;cursor:pointer;text-align:left;color:inherit}.storage-option.active{background:#0ebbff14}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.interval-options{display:flex;gap:8px}.interval-btn{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:#ffffff08;color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-base)}.interval-btn.active{border-color:var(--color-primary);background:#0ebbff26;color:var(--color-primary)}.map-view-drawing{cursor:crosshair}.map-draw-toolbar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:10px;background:#080e1feb;border:1px solid rgba(14,187,255,.35);box-shadow:0 4px 20px #00000059;max-width:calc(100% - 32px)}.map-draw-toolbar-text{color:var(--color-text-primary);font-size:var(--font-size-sm);white-space:nowrap}.map-draw-toolbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.map-zoom-btn{width:32px;height:32px;border-radius:4px;border:1px solid rgba(14,187,255,.2);background:#0f1729;color:var(--color-text-primary);cursor:pointer}.map-zoom-btn:hover{background:#0ebbff26}