.auth-page{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex;position:relative;overflow:hidden}.auth-brand{align-items:center;gap:10px;margin-bottom:32px;display:flex}.brand-dot-lg{background:var(--green);width:12px;height:12px;box-shadow:0 0 16px var(--green);border-radius:50%;animation:2s infinite pulse-green}.brand-logo{width:50px;height:50px}.auth-brand-name{font-family:var(--font-display);letter-spacing:-.3px;background:linear-gradient(90deg, var(--text-primary), var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800}.auth-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow-card), var(--shadow-glow-accent);z-index:1;padding:40px;animation:.3s scaleIn;position:relative}.auth-header{margin-bottom:28px}.auth-title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-.5px;font-size:26px;font-weight:800}.auth-subtitle{font-family:var(--font-mono);color:var(--accent);margin-top:4px;font-size:12px}.auth-form{flex-direction:column;gap:18px;display:flex}.auth-switch{text-align:center;font-family:var(--font-mono);color:var(--text-muted);margin-top:24px;font-size:13px}.auth-link{color:var(--accent);transition:color var(--transition);font-weight:700;text-decoration:none}.auth-link:hover{color:var(--text-primary)}.auth-bg-text{font-family:var(--font-display);color:#0000;-webkit-text-stroke:1px #6655ff0f;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:-4px;z-index:0;font-size:clamp(60px,15vw,160px);font-weight:800;position:fixed;bottom:-20px;left:50%;transform:translate(-50%)}@media (width<=480px){.auth-card{padding:28px 20px}}.navbar{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#0a0a0fd9;position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;max-width:1200px;height:64px;margin:0 auto;padding:0 24px;display:flex}.navbar-brand{font-family:var(--font-display);letter-spacing:-.3px;color:var(--text-primary);align-items:center;gap:10px;font-size:18px;font-weight:800;text-decoration:none;display:flex}.brand-logo{object-fit:contain;width:auto;height:24px;display:block}.brand-text{background:linear-gradient(90deg, var(--text-primary), var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.navbar-right{align-items:center;gap:16px;display:flex}.navbar-user{font-family:var(--font-mono);color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:8px;max-width:100%;font-size:13px;display:flex;overflow:hidden}.user-dot{background:var(--accent);width:6px;height:6px;box-shadow:0 0 6px var(--accent);border-radius:50%;flex-shrink:0}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:flex}.ham-line{background:var(--text-primary);border-radius:2px;width:22px;height:2px;transition:all .2s;display:block}.ham-line.open:first-child{transform:translateY(7px)rotate(45deg)}.ham-line.open:nth-child(2){opacity:0}.ham-line.open:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.mobile-menu{border-top:1px solid var(--border);background:var(--bg-secondary);flex-direction:column;gap:12px;padding:16px 24px;display:none}.desktop-only{display:flex}.mobile-only{display:none}@media (width<=640px){.desktop-only{display:none}.mobile-only,.mobile-menu{display:flex}.navbar-inner{padding:0 16px}}.monitor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:16px;margin-top:10px;padding:20px;transition:all .2s;display:flex;position:relative;overflow:hidden}.monitor-card:before{content:"";background:var(--border-accent);height:2px;transition:background .2s;position:absolute;top:0;left:0;right:0}.monitor-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-card);transform:translateY(-2px)}.monitor-card:hover:before{background:var(--accent)}.monitor-card--down{border-color:var(--red-border)}.monitor-card--down:before{background:var(--red)}.monitor-card-header{justify-content:space-between;align-items:center;display:flex}.monitor-interval{color:var(--text-muted);font-size:12px}.monitor-card-body{flex-direction:column;flex:1;gap:6px;display:flex}.monitor-name{font-family:var(--font-display);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:700;overflow:hidden}.monitor-url{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.monitor-card-footer{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-top:12px;display:flex}.monitor-actions{gap:8px;display:flex}:root{--bg-primary:#0a0a0f;--bg-secondary:#111118;--bg-card:#13131c;--bg-card-hover:#1a1a26;--bg-input:#0e0e16;--border:#1e1e2e;--border-light:#2a2a3e;--border-accent:#3a3a5c;--text-primary:#e8e8f0;--text-secondary:#88a;--text-muted:#55556a;--text-mono:#a0a0c0;--green:#0f8;--green-dim:#00cc6a;--green-bg:#00ff8814;--green-border:#0f83;--red:#f46;--red-dim:#c35;--red-bg:#ff446614;--red-border:#f463;--yellow:#fc0;--yellow-bg:#ffcc0014;--yellow-border:#fc03;--accent:#65f;--accent-dim:#54d;--accent-bg:#6655ff1a;--accent-border:#6655ff4d;--font-display:"Ubantu", sans-serif;--font-mono:"Rubik", monospace;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-card:0 4px 24px #0006;--shadow-glow-green:0 0 20px #00ff8826;--shadow-glow-red:0 0 20px #ff446626;--shadow-glow-accent:0 0 20px #65f3;--transition:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-display);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#6655ff08 1px,#0000 1px),linear-gradient(90deg,#6655ff08 1px,#0000 1px);background-size:40px 40px;position:fixed;inset:0}#root{z-index:1;position:relative}a{color:inherit;text-decoration:none}button{font-family:var(--font-display);cursor:pointer;border:none;outline:none}input,textarea,select{font-family:var(--font-mono);outline:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-accent);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.page-wrapper{flex-direction:column;min-height:100vh;display:flex}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:40px 24px}.page-title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-.5px;font-size:clamp(24px,4vw,36px);font-weight:800}.page-subtitle{font-family:var(--font-mono);color:var(--text-secondary);margin-top:6px;font-size:13px}.mono{font-family:var(--font-mono)}.btn{border-radius:var(--radius-md);font-family:var(--font-display);transition:all var(--transition);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 #65f6}.btn-primary:hover{background:var(--accent-dim);box-shadow:var(--shadow-glow-accent);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-outline{color:var(--text-primary);border-color:var(--border-light);background:0 0}.btn-outline:hover{border-color:var(--border-accent);background:var(--bg-card-hover)}.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}.btn-danger:hover{box-shadow:var(--shadow-glow-red);background:#ff446626}.btn-ghost{color:var(--text-secondary);background:0 0;border-color:#0000;padding:8px 12px}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-card)}.btn-sm{padding:6px 14px;font-size:13px}.btn-full{justify-content:center;width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:all var(--transition);padding:24px}.card:hover{border-color:var(--border-light)}.form-group{flex-direction:column;gap:8px;display:flex}.form-label{font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:700}.form-input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition);width:100%;padding:12px 16px;font-size:14px}.form-input:focus{border-color:var(--accent);background:var(--bg-card);box-shadow:0 0 0 3px #6655ff1a}.form-input::placeholder{color:var(--text-muted)}.form-error{font-family:var(--font-mono);color:var(--red);margin-top:4px;font-size:12px}.badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px;border-radius:99px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.badge:before{content:"";border-radius:50%;width:6px;height:6px}.badge-up{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}.badge-up:before{background:var(--green);box-shadow:0 0 6px var(--green);animation:2s infinite pulse-green}.badge-down{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}.badge-down:before{background:var(--red);box-shadow:0 0 6px var(--red)}.badge-unknown{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border)}.badge-unknown:before{background:var(--yellow)}@keyframes pulse-green{0%,to{opacity:1;box-shadow:0 0 6px var(--green)}50%{opacity:.5;box-shadow:0 0 2px var(--green)}}.alert{border-radius:var(--radius-md);font-family:var(--font-mono);border:1px solid;padding:12px 16px;font-size:13px;animation:.2s slideIn}.alert-error{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}.alert-success{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.empty-state{text-align:center;color:var(--text-muted);padding:80px 24px}.empty-state-icon{opacity:.5;margin-bottom:16px;font-size:48px}.empty-state h3{font-family:var(--font-display);color:var(--text-secondary);margin-bottom:8px;font-size:18px;font-weight:700}.empty-state p{font-family:var(--font-mono);margin-bottom:24px;font-size:13px}.spinner{border:2px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin;display:inline-block}.spinner-lg{border-width:3px;width:40px;height:40px}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:60vh;display:flex}.loading-screen p{font-family:var(--font-mono);color:var(--text-muted);font-size:13px}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:24px;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:var(--shadow-card), var(--shadow-glow-accent);padding:32px;animation:.2s scaleIn}.modal-title{font-family:var(--font-display);border-bottom:1px solid var(--border);margin-bottom:24px;padding-bottom:16px;font-size:20px;font-weight:800}.modal-text{font-family:var(--font-mono);color:var(--text-secondary);font-size:14px;line-height:1.7}.modal-text strong{color:var(--text-primary);font-weight:700}.modal-text+.modal-text{margin-top:12px}.modal-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)translateY(-10px)}to{opacity:1;transform:scale(1)translateY(0)}}.table-wrapper{border-radius:var(--radius-lg);border:1px solid var(--border);overflow-x:auto}table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:13px}thead{background:var(--bg-secondary);border-bottom:1px solid var(--border)}th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;padding:12px 16px;font-size:11px;font-weight:700}td{border-bottom:1px solid var(--border);color:var(--text-secondary);vertical-align:middle;padding:14px 16px}tr:last-child td{border-bottom:none}tbody tr{transition:background var(--transition)}tbody tr:hover{background:var(--bg-card-hover)}.back-link{color:var(--text-secondary);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;transition:color var(--transition);align-items:center;gap:8px;width:fit-content;margin-bottom:24px;font-size:12px;font-weight:700;display:inline-flex}.back-link:hover{color:var(--text-primary);text-shadow:var(--shadow-glow-accent)}.detail-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:40px;display:flex}.detail-header-left{flex-direction:column;gap:8px;max-width:100%;display:flex}.detail-title-row{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.detail-title-row .page-title{margin:0;line-height:1.2}.monitor-url-display{color:var(--text-muted);word-break:break-all;font-size:14px}.detail-actions{flex-shrink:0;gap:12px;display:flex}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition);padding:20px}.stat-card:hover{border-color:var(--border-light)}.stat-label{font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:11px}.stat-value{font-family:var(--font-display);color:var(--text-primary);font-size:28px;font-weight:800;line-height:1}.stat-value.green{color:var(--green)}.stat-value.red{color:var(--red)}.stat-value.yellow{color:var(--yellow)}.detail-section{flex-direction:column;gap:16px;margin-top:16px;display:flex}.section-title{font-family:var(--font-display);color:var(--text-primary);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding-bottom:12px;font-size:20px;font-weight:800;display:flex}.section-count{font-family:var(--font-mono);color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border);letter-spacing:.5px;border-radius:99px;padding:4px 10px;font-size:12px;font-weight:700}.status-code{font-weight:700}.code-ok{color:var(--green)}.code-error{color:var(--red)}.response-time{font-weight:500}.time-fast{color:var(--green)}.time-medium{color:var(--yellow)}.time-slow{color:var(--red)}.timestamp-cell{white-space:nowrap;font-size:12px;color:var(--text-muted)!important}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;display:flex}.dashboard-header>div{flex-direction:column;display:flex}.monitors-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;display:grid}.toast{z-index:9999;min-width:300px;max-width:400px;box-shadow:var(--shadow-card);animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards slideUpToast;position:fixed;bottom:32px;right:32px}@keyframes slideUpToast{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.main-content{padding:24px 16px}.modal{padding:24px}.modal-actions{flex-direction:column-reverse}.modal-actions .btn{justify-content:center;width:100%}.stats-grid{grid-template-columns:repeat(2,1fr)}th,td{padding:10px 12px}.detail-header{flex-direction:column;gap:20px}.detail-actions{width:100%}.detail-actions .btn{flex:1;justify-content:center}.dashboard-header{flex-direction:column;align-items:flex-start}.dashboard-header .btn{justify-content:center;width:100%}.monitors-grid{grid-template-columns:1fr;gap:16px}.toast{min-width:auto;bottom:24px;left:24px;right:24px}}@media (width<=480px){.stats-grid{grid-template-columns:1fr}.stat-card{padding:16px}.stat-value{font-size:24px}.empty-state .btn,.btn-full{white-space:normal;text-align:center;justify-content:center;width:100%;height:auto;padding:12px 20px}.empty-state{padding:48px 16px}}
