:root{--bg: #0f172a;--panel: #111827;--text: #e5e7eb;--muted: #9ca3af;--primary: #4f46e5;--danger: #ef4444;--ok: #22c55e;--down: #ef4444}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{padding:24px;animation:fadeIn .4s ease both}.centered{max-width:380px;margin:10vh auto;background:var(--panel);padding:24px;border-radius:12px;box-shadow:0 10px 30px #0000004d;animation:fadeIn .4s ease both}.card{background:var(--panel);padding:20px;border-radius:16px;box-shadow:0 4px 20px #00000040;border:1px solid rgba(255,255,255,.05);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0;transition:opacity .3s ease}.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0006;border-color:#ffffff1a}.card:hover:before{opacity:1}.card .card-title{font-weight:600;margin-bottom:4px}.card .card-status{font-size:24px;font-weight:700}.card .card-sub{color:var(--muted);font-size:12px}.card.status-up{border:1px solid rgba(34,197,94,.3)}.card.status-down{border:1px solid rgba(239,68,68,.3)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#0b1220;position:sticky;top:0;border-bottom:1px solid #141b2c;-webkit-backdrop-filter:saturate(180%) blur(6px);backdrop-filter:saturate(180%) blur(6px);z-index:100}.topbar .brand{font-weight:700}.topbar nav{display:flex;gap:12px}.topbar a,.topbar button{color:var(--text);text-decoration:none;background:transparent;border:1px solid #243150;border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .2s ease}.topbar a:hover,.topbar button:hover{background:#0f1628;border-color:#2f3e64;transform:translateY(-1px)}.page .content{padding:24px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}input,select,textarea{background:#0b1220;border:1px solid #243150;border-radius:12px;color:var(--text);padding:12px 16px;transition:all .2s ease;font-size:14px;font-family:inherit}input:focus,select:focus,textarea:focus{outline:none;border-color:#3d4e7d;box-shadow:0 0 0 3px #4f46e51a}input:hover,select:hover{border-color:#2f3e64}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);border:none;border-radius:12px;color:#fff;padding:12px 20px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}button:hover:before{width:300px;height:300px}button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #4f46e566}button:active{transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}button.danger{background:var(--danger)}button.danger:hover{box-shadow:0 8px 20px #ef444466}.error{color:var(--danger)}.table{width:100%;border-collapse:separate;border-spacing:0 8px;margin:0}.table th{color:var(--muted);text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05)}.table td{padding:16px;background:var(--panel);border:1px solid rgba(255,255,255,.05);transition:all .2s ease}.table tbody tr{background:var(--panel);transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden}.table tbody tr:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003;border-color:#ffffff1a}.table tbody tr:first-child td:first-child{border-top-left-radius:8px}.table tbody tr:first-child td:last-child{border-top-right-radius:8px}.table tbody tr:last-child td:first-child{border-bottom-left-radius:8px}.table tbody tr:last-child td:last-child{border-bottom-right-radius:8px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{padding:8px 14px;font-size:13px;white-space:nowrap}.inline-form{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0;align-items:flex-end}.inline-form>*{flex:0 1 auto}.checkbox{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;transition:color .2s ease}.checkbox:hover{color:var(--text)}.checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}.drawer{position:fixed;top:0;right:0;width:520px;max-width:100%;height:100%;background:#0b1220;border-left:1px solid #1b2236;box-shadow:-10px 0 30px #0000004d;animation:slideIn .35s cubic-bezier(.4,0,.2,1) both;z-index:1000}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #1b2236}.drawer-body{padding:16px;overflow:auto;height:calc(100% - 58px)}.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}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:20px;padding:16px;background:var(--panel);border-radius:12px;border:1px solid rgba(255,255,255,.05)}.pagination button{padding:8px 16px;min-width:80px}.pagination button:disabled{opacity:.4}.pagination-info{color:var(--muted);font-size:14px;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:none}}.skeleton{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a,#ffffff0d 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:8px}.skeleton-shimmer{background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);background-size:200% 100%;animation:shimmer 2s ease-in-out infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}html{scroll-behavior:smooth}::selection{background:#4f46e54d;color:var(--text)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0b1220}::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#475569}@media (max-width: 768px){.container{padding:16px}.inline-form{flex-direction:column}.inline-form>*{width:100%}.table{font-size:14px}.table th,.table td{padding:10px 8px}.actions{flex-direction:column}.actions button{width:100%}}