@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --white: #ffffff;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --black: #000000;
    --glass-bg: rgba(15,15,20,0.7);
    --glass-bg-light: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --glass-border-hover: rgba(255,255,255,0.18);
    --shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--black);
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--gray-100);
}

/* PARTÍCULAS */
.particles { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.particle { position:absolute; width:2px; height:2px; background:rgba(255,255,255,0.12); border-radius:50%; animation:float 25s infinite; }
.particle:nth-child(1)  { left:8%;  top:90%; animation-delay:0s;  animation-duration:22s; }
.particle:nth-child(2)  { left:18%; top:80%; animation-delay:2s;  animation-duration:28s; }
.particle:nth-child(3)  { left:28%; top:95%; animation-delay:4s;  animation-duration:20s; }
.particle:nth-child(4)  { left:38%; top:85%; animation-delay:6s;  animation-duration:26s; }
.particle:nth-child(5)  { left:48%; top:90%; animation-delay:8s;  animation-duration:24s; }
.particle:nth-child(6)  { left:58%; top:80%; animation-delay:10s; animation-duration:30s; }
.particle:nth-child(7)  { left:68%; top:95%; animation-delay:12s; animation-duration:22s; }
.particle:nth-child(8)  { left:78%; top:85%; animation-delay:14s; animation-duration:27s; }
.particle:nth-child(9)  { left:88%; top:90%; animation-delay:16s; animation-duration:23s; }
.particle:nth-child(10) { left:3%;  top:70%; animation-delay:18s; animation-duration:29s; }
@keyframes float { 0%,100% { transform:translateY(0) scale(1); opacity:0.15; } 50% { transform:translateY(-100vh) scale(1.8); opacity:0.7; } }

.moon { position:fixed; top:-120px; right:-120px; width:450px; height:450px; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.025),transparent 70%); border-radius:50%; pointer-events:none; z-index:0; }

/* PRELOADER */
.preloader { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--black); display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999; transition:opacity .8s ease,visibility .8s ease; }
.preloader.hide { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-content { text-align:center; animation:fadeInUp .8s ease-out; }
.preloader-logo-img { width:100px; height:100px; margin:0 auto 20px; border-radius:50%; overflow:hidden; box-shadow:0 0 40px rgba(255,255,255,.1); animation:pulse 2.5s infinite; border:1px solid var(--glass-border); }
.preloader-logo-img img { width:100%; height:100%; object-fit:cover; }
.preloader-title { font-size:2.2rem; font-weight:800; background:linear-gradient(135deg,var(--white),var(--gray-400)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }
.preloader-subtitle { font-size:.75rem; color:var(--gray-600); letter-spacing:2px; text-transform:uppercase; }
.preloader-credits { margin-top:50px; text-align:center; }
.preloader-credits-text { font-size:.65rem; color:var(--gray-700); margin-bottom:12px; text-transform:uppercase; letter-spacing:2px; }
.preloader-devs { display:flex; justify-content:center; gap:24px; }
.preloader-dev { text-align:center; }
.preloader-dev-avatar { width:52px; height:52px; border-radius:50%; overflow:hidden; border:1px solid var(--glass-border); margin:0 auto 6px; display:flex; align-items:center; justify-content:center; background:var(--gray-900); }
.preloader-dev-avatar img { width:100%; height:100%; object-fit:cover; }
.preloader-dev-avatar span { font-size:20px; font-weight:700; color:var(--white); }
.preloader-dev-name { font-size:.65rem; color:var(--gray-600); }
.preloader-year { margin-top:16px; font-size:.55rem; color:var(--gray-800); }

/* NOTIFICAÇÕES */
#notification-container { position:fixed; top:20px; right:20px; z-index:9000; display:flex; flex-direction:column; gap:8px; }
.notification { background:var(--glass-bg); backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:12px; padding:12px 18px; color:var(--white); font-size:.82rem; animation:slideIn .3s ease; min-width:220px; display:flex; align-items:center; gap:8px; }
.notification.success { border-left:3px solid var(--gray-300); }
.notification.error   { border-left:3px solid var(--gray-600); }
.notification.warn    { border-left:3px solid var(--gray-500); }
@keyframes slideIn { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }

/* LOGIN */
.container { position:relative; z-index:1; width:100%; max-width:440px; margin:0 auto; padding:24px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.logo-container { text-align:center; margin-bottom:28px; }
.logo-text { font-size:2rem; font-weight:800; background:linear-gradient(135deg,var(--white),var(--gray-400)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:4px; }
.subtitle { font-size:.75rem; color:var(--gray-600); }
.logo-line { width:44px; height:2px; background:linear-gradient(90deg,transparent,var(--gray-500),transparent); margin:10px auto 0; }

/* CARD */
.main-card { background:var(--glass-bg); backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
.tabs { display:flex; border-bottom:1px solid var(--glass-border); }
.tab-btn { flex:1; padding:14px; background:none; border:none; color:var(--gray-600); cursor:pointer; font-weight:500; font-size:.85rem; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:6px; }
.tab-btn.active { color:var(--white); border-bottom:2px solid var(--white); }
.content-area { padding:24px; display:none; animation:fadeInUp .4s ease; }
.content-area.active { display:block; }

/* TOKEN BOX */
.token-info-box { display:flex; align-items:flex-start; gap:12px; background:var(--glass-bg-light); border:1px solid var(--glass-border); border-radius:12px; padding:14px; margin-bottom:20px; }
.token-info-box i { font-size:1.4rem; color:var(--gray-400); flex-shrink:0; margin-top:2px; }
.token-info-box strong { display:block; font-size:.82rem; color:var(--gray-200); margin-bottom:3px; }
.token-info-box p { font-size:.73rem; color:var(--gray-500); line-height:1.4; }
.token-info-box code { background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px; font-family:monospace; color:var(--gray-300); }

/* INPUTS */
.input-group { margin-bottom:18px; }
.input-group label { display:block; font-size:.68rem; color:var(--gray-500); margin-bottom:7px; text-transform:uppercase; letter-spacing:1px; }
.input-group label i { margin-right:5px; }
.input-wrapper { position:relative; }
.input-wrapper input { width:100%; padding:12px 40px 12px 14px; background:rgba(0,0,0,.4); border:1px solid var(--glass-border); border-radius:12px; color:var(--white); font-size:.88rem; font-family:'Inter',sans-serif; transition:all .3s; outline:none; }
.input-wrapper input:focus { border-color:var(--gray-500); background:rgba(0,0,0,.6); }
.input-wrapper input::placeholder { color:var(--gray-700); }
.toggle-password { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--gray-600); cursor:pointer; transition:color .2s; }
.toggle-password:hover { color:var(--gray-400); }

/* BOTÃO */
.btn-primary { width:100%; padding:13px; background:linear-gradient(135deg,var(--gray-800),var(--gray-900)); border:1px solid var(--glass-border-hover); border-radius:12px; color:var(--white); font-weight:600; font-size:.9rem; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden; }
.btn-primary:hover { transform:translateY(-2px); border-color:var(--gray-400); box-shadow:0 6px 24px rgba(0,0,0,.4); }
.btn-primary:active { transform:translateY(0); }
.btn-shine { position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation:shine 3s infinite; }
@keyframes shine { 0% { left:-100%; } 20%,100% { left:200%; } }
.login-notice { margin-top:14px; padding:10px 14px; background:var(--glass-bg-light); border:1px solid var(--glass-border); border-radius:10px; font-size:.7rem; text-align:center; color:var(--gray-600); display:flex; align-items:center; justify-content:center; gap:6px; }

/* FOOTER */
.footer-links { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; }
.footer-link { display:flex; align-items:center; gap:5px; color:var(--gray-700); text-decoration:none; font-size:.72rem; transition:color .3s; }
.footer-link:hover { color:var(--gray-400); }
.footer-dot { width:3px; height:3px; background:var(--gray-800); border-radius:50%; }

/* DEV SECTION */
.dev-section { margin-top:18px; text-align:center; }
.dev-section-title { font-size:.6rem; color:var(--gray-700); text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.dev-cards { display:flex; justify-content:center; gap:20px; }
.dev-card { text-align:center; transition:transform .3s; }
.dev-card:hover { transform:translateY(-3px); }
.dev-avatar { width:46px; height:46px; border-radius:50%; overflow:hidden; border:1px solid var(--glass-border); margin:0 auto 6px; display:flex; align-items:center; justify-content:center; }
.dev-avatar img { width:100%; height:100%; object-fit:cover; }
.dev-avatar span { font-size:18px; font-weight:700; color:var(--white); }
.dev-name { font-size:.65rem; color:var(--gray-600); }

/* DEVS TAB */
.devs-container { padding:10px; }
.dev-card-large { display:flex; align-items:center; gap:14px; padding:14px; background:var(--glass-bg-light); border:1px solid var(--glass-border); border-radius:12px; margin-bottom:10px; }
.dev-avatar-large { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.dev-avatar-large img { width:100%; height:100%; object-fit:cover; }
.dev-info-text .dev-name-large { font-weight:600; font-size:.9rem; margin-bottom:2px; }
.dev-info-text .dev-id { font-size:.65rem; color:var(--gray-600); font-family:monospace; }

/* DASHBOARD */
.dashboard { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--black); z-index:100; overflow-y:auto; display:flex; flex-direction:column; }
.dash-header { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; background:var(--glass-bg); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); position:sticky; top:0; z-index:50; }
.dash-header-left { display:flex; align-items:center; gap:20px; }
.dash-logo { font-size:1rem; font-weight:700; color:var(--white); display:flex; align-items:center; gap:8px; }
.dash-logo i { color:var(--gray-400); }
.dash-user { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--gray-400); }
.dash-header-right { display:flex; align-items:center; gap:10px; }
.role-badge { font-size:.6rem; padding:2px 8px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid var(--glass-border); color:var(--gray-500); text-transform:uppercase; letter-spacing:1px; }
.btn-icon { width:36px; height:36px; border-radius:10px; background:var(--glass-bg-light); border:1px solid var(--glass-border); color:var(--gray-500); cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; }
.btn-icon:hover { color:var(--white); border-color:var(--glass-border-hover); }
.btn-icon.spinning i { animation:spin .7s linear infinite; }
.btn-logout { padding:8px 14px; border-radius:10px; background:var(--glass-bg-light); border:1px solid var(--glass-border); color:var(--gray-500); cursor:pointer; font-size:.8rem; transition:all .3s; display:flex; align-items:center; gap:6px; }
.btn-logout:hover { color:var(--white); border-color:var(--glass-border-hover); }
.dash-content { padding:24px; flex:1; max-width:1400px; margin:0 auto; width:100%; }

/* STATS */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.stat-card { background:var(--glass-bg); backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:16px; padding:18px; text-align:center; transition:border-color .3s; }
.stat-card:hover { border-color:var(--glass-border-hover); }
.stat-icon { font-size:1.2rem; color:var(--gray-600); margin-bottom:8px; }
.stat-card.stat-up .stat-icon { color:var(--gray-400); }
.stat-card.stat-down .stat-icon { color:var(--gray-600); }
.stat-value { font-size:1.8rem; font-weight:700; margin-bottom:4px; }
.stat-label { font-size:.7rem; color:var(--gray-600); text-transform:uppercase; letter-spacing:1px; }

/* GRID */
.dash-grid { display:grid; grid-template-columns:1fr 360px; gap:20px; }

/* PANEL */
.panel { background:var(--glass-bg); backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:20px; overflow:hidden; }
.panel-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--glass-border); }
.panel-header h3 { font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.panel-header h3 i { color:var(--gray-500); }
.btn-add { padding:7px 14px; border-radius:9px; background:var(--glass-bg-light); border:1px solid var(--glass-border); color:var(--gray-400); cursor:pointer; font-size:.78rem; transition:all .3s; display:flex; align-items:center; gap:5px; }
.btn-add:hover { color:var(--white); border-color:var(--glass-border-hover); }
.live-badge { font-size:.65rem; color:var(--gray-500); display:flex; align-items:center; gap:5px; }
.live-badge i { font-size:.5rem; animation:blink 2s infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.2; } }

/* MONITORES */
.monitors-list { padding:12px; display:flex; flex-direction:column; gap:8px; min-height:60px; }
.monitor-item { background:var(--glass-bg-light); border:1px solid var(--glass-border); border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; transition:all .3s; cursor:pointer; }
.monitor-item:hover { border-color:var(--glass-border-hover); background:rgba(255,255,255,.04); }
.monitor-item.is-down { border-left:3px solid rgba(255,255,255,.2); }
.monitor-left { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.monitor-name { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.monitor-url { font-size:.68rem; color:var(--gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.monitor-meta { font-size:.62rem; color:var(--gray-700); margin-top:2px; }
.monitor-right { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:12px; }
.status-badge { padding:4px 10px; border-radius:20px; font-size:.68rem; font-weight:600; display:flex; align-items:center; gap:4px; }
.status-up   { background:rgba(255,255,255,.08); color:var(--gray-300); border:1px solid rgba(255,255,255,.15); }
.status-down { background:rgba(255,255,255,.03); color:var(--gray-600); border:1px solid rgba(255,255,255,.07); }
.status-null { background:rgba(255,255,255,.02); color:var(--gray-700); border:1px solid var(--glass-border); }
.monitor-ms { font-size:.68rem; color:var(--gray-600); }
.uptime-bar-wrap { width:60px; }
.uptime-bar-track { height:4px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.uptime-bar-fill { height:100%; background:rgba(255,255,255,.25); border-radius:4px; transition:width .5s ease; }
.uptime-pct { font-size:.6rem; color:var(--gray-600); text-align:right; margin-top:2px; }
.monitor-actions { display:flex; gap:5px; }
.btn-monitor-action { width:28px; height:28px; border-radius:7px; background:none; border:1px solid var(--glass-border); color:var(--gray-600); cursor:pointer; font-size:.7rem; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.btn-monitor-action:hover { color:var(--white); border-color:var(--glass-border-hover); }
.empty-state { text-align:center; padding:30px; color:var(--gray-700); font-size:.82rem; }
.empty-state i { font-size:2rem; margin-bottom:8px; display:block; }

/* LOGS */
.logs-list { padding:12px; display:flex; flex-direction:column; gap:6px; max-height:500px; overflow-y:auto; }
.logs-list::-webkit-scrollbar { width:4px; }
.logs-list::-webkit-scrollbar-track { background:transparent; }
.logs-list::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:4px; }
.log-item { padding:9px 12px; border-radius:10px; background:var(--glass-bg-light); border:1px solid var(--glass-border); font-size:.72rem; display:flex; align-items:flex-start; gap:8px; animation:fadeInUp .3s ease; }
.log-item .log-icon { flex-shrink:0; margin-top:1px; }
.log-item.log-success .log-icon { color:var(--gray-400); }
.log-item.log-error   .log-icon { color:var(--gray-600); }
.log-item.log-warn    .log-icon { color:var(--gray-500); }
.log-item.log-info    .log-icon { color:var(--gray-600); }
.log-message { flex:1; color:var(--gray-400); line-height:1.4; }
.log-time { font-size:.6rem; color:var(--gray-700); flex-shrink:0; margin-top:1px; }

/* MODAL */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); justify-content:center; align-items:center; z-index:2000; }
.modal.show { display:flex; }
.modal-box { background:rgba(10,10,14,.95); backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; padding:24px; width:90%; max-width:420px; animation:fadeInUp .3s ease; }
.modal-box-wide { max-width:680px; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.modal-header h3 { font-size:1rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.modal-header h3 i { color:var(--gray-500); }
.modal-close { width:30px; height:30px; border-radius:8px; background:none; border:1px solid var(--glass-border); color:var(--gray-600); cursor:pointer; font-size:1.1rem; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { color:var(--white); border-color:var(--glass-border-hover); }

/* HISTÓRICO */
.history-content { max-height:400px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.history-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:var(--glass-bg-light); border:1px solid var(--glass-border); font-size:.78rem; }
.history-item .h-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.history-item .h-status.up   { background:var(--gray-400); }
.history-item .h-status.down { background:var(--gray-700); }
.history-item .h-code { font-family:monospace; color:var(--gray-500); min-width:36px; }
.history-item .h-ms { color:var(--gray-500); min-width:60px; }
.history-item .h-time { color:var(--gray-700); font-size:.68rem; margin-left:auto; }

/* SPINNER */
.loading-spinner { width:28px; height:28px; border:2px solid rgba(255,255,255,.07); border-top-color:var(--gray-500); border-radius:50%; animation:spin .8s linear infinite; margin:20px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ANIMAÇÕES */
@keyframes fadeInUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { transform:scale(1); box-shadow:0 0 40px rgba(255,255,255,.08); } 50% { transform:scale(1.04); box-shadow:0 0 60px rgba(255,255,255,.14); } }

/* RESPONSIVE */
@media (max-width:900px) { .dash-grid { grid-template-columns:1fr; } .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) {
    .dash-content { padding:14px; } .dash-header { padding:12px 14px; } .dash-user { display:none; }
    .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .monitor-item { flex-direction:column; align-items:flex-start; gap:10px; }
    .monitor-right { width:100%; justify-content:space-between; margin-left:0; }
    .uptime-bar-wrap { display:none; }
}