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

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;}

:root[data-theme="dark"]{
  --bg:#0a0e13; --panel:#10151c; --panel-2:#141a22; --topbar-bg:rgba(16,21,28,0.82);
  --line:#212932; --line-soft:#1a2129;
  --ink:#eaeff4; --ink-dim:#9aa7b3; --muted:#5f6b78;
  --accent:#39c5f0; --accent-hover:#6fd8f7; --accent-soft:rgba(57,197,240,0.12);
  --accent-ring:rgba(57,197,240,0.4); --accent-shadow:rgba(57,197,240,0.55); --accent-ink:#04222c;
  --ok:#3ecf8e; --ok-soft:rgba(62,207,142,0.12);
  --danger:#f0576b; --danger-soft:rgba(240,87,107,0.12);
  --warn:#f0b73e; --warn-soft:rgba(240,183,62,0.12);
  --glow:rgba(57,197,240,0.08);
  --backdrop:rgba(4,6,9,0.6);
}
:root[data-theme="light"]{
  --bg:#f5f7f8; --panel:#ffffff; --panel-2:#f0f3f5; --topbar-bg:rgba(255,255,255,0.9);
  --line:#e1e6ea; --line-soft:#ebeef1;
  --ink:#141a1f; --ink-dim:#4d5a63; --muted:#8b98a1;
  --accent:#0891b2; --accent-hover:#0a7691; --accent-soft:#e2f4f8;
  --accent-ring:rgba(8,145,178,0.3); --accent-shadow:rgba(8,145,178,0.28); --accent-ink:#ffffff;
  --ok:#0f9d5c; --ok-soft:#e3f7ed;
  --danger:#d1394f; --danger-soft:#fbe9ec;
  --warn:#b57909; --warn-soft:#faf1de;
  --glow:rgba(8,145,178,0.05);
  --backdrop:rgba(20,26,31,0.35);
}

body{
  background:var(--bg); color:var(--ink);
  font-family:'Manrope',sans-serif;
  background-image: radial-gradient(600px 300px at 85% -10%, var(--glow), transparent 70%);
  background-repeat:no-repeat;
  transition:background-color .15s ease, color .15s ease;
}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-hover);}
h1,h2,h3,h4{font-family:'Outfit',sans-serif; font-weight:700; margin:0 0 8px 0;}
code{background:var(--panel-2); color:var(--ink-dim); padding:2px 6px; border-radius:4px; font-size:0.9em;}

/* --- Topbar --- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:0 24px; min-height:64px; background:var(--topbar-bg); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Outfit',sans-serif; font-weight:700; font-size:17px; color:var(--ink);}
.brand svg{color:var(--accent); filter:drop-shadow(0 0 6px var(--accent-shadow)); flex-shrink:0;}
.navlinks{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.navlink{
  display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:8px;
  font-size:13.5px; font-weight:600; color:var(--ink-dim);
}
.navlink:hover{color:var(--ink); background:var(--panel-2);}
.navlink.active{color:var(--accent); background:var(--accent-soft);}
.navlink svg{width:16px; height:16px; flex-shrink:0;}
.navright{display:flex; align-items:center; gap:12px; margin-left:auto;}
.navlogout{display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--danger);}
.navlogout:hover{background:var(--danger-soft); color:var(--danger);}
.navlogout svg{width:16px; height:16px;}

.theme-toggle{display:flex; align-items:center; gap:2px; padding:3px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line);}
.theme-toggle button{
  display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:6px; border:none; background:transparent;
  color:var(--muted); font-family:'Manrope',sans-serif; font-size:12px; font-weight:600; cursor:pointer;
}
.theme-toggle button svg{width:14px; height:14px;}
.theme-toggle button.is-active{background:var(--panel); color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,0.08);}

/* --- Layout --- */
.container-main{max-width:1240px; margin:0 auto; padding:28px 24px 56px;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px;}
.page-head h1,.page-head h2{margin:0 0 6px 0; font-size:24px;}
.stats-line{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted); flex-wrap:wrap;}
.stat-strong{color:var(--ink); font-weight:700;}
.stat-ok{color:var(--ok); font-weight:700;}
.head-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-dim); border-radius:10px; cursor:pointer;
  text-decoration:none; line-height:1;
}
.btn:hover{color:var(--ink); border-color:var(--ink-dim); text-decoration:none;}
.btn svg{width:15px; height:15px; flex-shrink:0;}
.btn-accent{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 1px var(--accent-ring), 0 8px 20px -8px var(--accent-shadow);}
.btn-accent:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink);}
.btn-danger{background:transparent; border-color:var(--danger); color:var(--danger);}
.btn-danger:hover{background:var(--danger-soft); color:var(--danger); border-color:var(--danger);}
.btn-ok{background:transparent; border-color:var(--ok); color:var(--ok);}
.btn-ok:hover{background:var(--ok-soft); color:var(--ok);}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:8px;}
.btn-block{width:100%; justify-content:center;}
.btn[disabled]{opacity:0.6; cursor:not-allowed;}

.icon-btn{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; color:var(--ink-dim); cursor:pointer;
  text-decoration:none; flex-shrink:0;
}
.icon-btn:hover{color:var(--ink); border-color:var(--ink-dim);}
.icon-btn svg{width:15px; height:15px;}
.icon-btn.play{color:var(--ok);}
.icon-btn.play:hover{background:var(--ok-soft); border-color:var(--ok);}
.icon-btn.danger{color:var(--danger);}
.icon-btn.danger:hover{background:var(--danger-soft); border-color:var(--danger);}
.icon-btn.accent{color:var(--accent);}
.icon-btn.accent:hover{background:var(--accent-soft); border-color:var(--accent);}
.row-actions{display:flex; gap:6px; flex-wrap:nowrap; width:max-content;}

/* --- Panels / Cards --- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:24px;}
.panel-head{padding:16px 22px; border-bottom:1px solid var(--line); font-family:'Outfit',sans-serif; font-size:14.5px; font-weight:600; color:var(--ink-dim); display:flex; align-items:center; gap:8px;}
.panel-head svg{width:16px; height:16px;}
.panel-head.accent-ok{color:var(--ok);}
.panel-head.accent-danger{color:var(--danger);}
.panel-body{padding:22px;}
.panel-foot{padding:16px 22px; border-top:1px solid var(--line);}

/* --- Forms --- */
.field{display:flex; flex-direction:column; gap:8px; flex:1;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-dim);}
.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field input[type="search"],
.field input[type="file"]{
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:11px 14px;
  color:var(--ink); font-family:'Manrope',sans-serif; font-size:14px; width:100%;
}
.field input::placeholder{color:var(--muted);}
.field-hint{font-size:12px; color:var(--muted);}
.field-row{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;}

.form-toggle{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;}
.form-toggle input{width:38px; height:22px; appearance:none; background:var(--panel-2); border:1px solid var(--line); border-radius:11px; position:relative; cursor:pointer; flex-shrink:0;}
.form-toggle input::before{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .15s ease, background .15s ease;}
.form-toggle input:checked{background:var(--accent-soft); border-color:var(--accent);}
.form-toggle input:checked::before{background:var(--accent); transform:translateX(16px);}
.form-toggle span{font-size:13.5px; color:var(--ink-dim); font-weight:600;}

/* --- Tables --- */
.table-wrap{overflow-x:auto;}
table{width:auto; min-width:100%; border-collapse:collapse;}
thead th{text-align:left; padding:12px 22px; font-size:11.5px; font-weight:700; letter-spacing:0.3px; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap;}
tbody td{padding:15px 22px; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--panel-2);}
tbody tr.is-paused{opacity:0.5;}
td.empty-state{text-align:center; color:var(--muted); padding:32px;}

.server-name{font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.conn{font-size:13px; color:var(--ink-dim); display:flex; align-items:center; gap:8px;}
.conn-tag{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); color:var(--muted);}
.players-count{font-size:13.5px; font-weight:700;}
.players-count.has{color:var(--ok);}
.players-count.empty{color:var(--muted); font-weight:600;}
.timer{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:5px 11px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; color:var(--ink); min-width:70px; justify-content:center;}
.timer.stopped{color:var(--warn); border-color:var(--warn-soft); background:var(--warn-soft);}
.timer.scanning{color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft);}

.paused-divider{display:flex; align-items:center; gap:12px; padding:10px 22px; font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--muted); background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.paused-divider::after{content:''; flex:1; height:1px; background:var(--line);}

/* --- Tags / Badges --- */
.tag{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700;}
.tag-ok{background:var(--ok-soft); color:var(--ok);}
.tag-off{background:var(--line-soft); color:var(--muted);}
.tag-danger{background:var(--danger-soft); color:var(--danger);}
.tag-warn{background:var(--warn-soft); color:var(--warn);}
.tag-accent{background:var(--accent-soft); color:var(--accent);}

/* --- Alerts (flash messages) --- */
.alert{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-radius:10px; margin-bottom:16px; font-size:14px; border:1px solid transparent;}
.alert-success{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-soft);}
.alert-danger{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-soft);}
.alert-warning{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-soft);}
.alert-info{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft);}
.alert-close{background:none; border:none; color:inherit; opacity:0.7; cursor:pointer; font-size:16px; line-height:1; padding:0;}
.alert-close:hover{opacity:1;}

/* --- List (aliases, etc.) --- */
.list{list-style:none; margin:0; padding:0;}
.list li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-bottom:1px solid var(--line-soft); font-size:14px;}
.list li:last-child{border-bottom:none;}
.list li.muted{color:var(--muted);}

/* --- Login --- */
.auth-wrap{max-width:400px; margin:80px auto 0;}

/* --- Modal (Bootstrap JS compatible, custom styling) --- */
.modal{position:fixed; inset:0; z-index:1050; display:none; align-items:center; justify-content:center; padding:20px;}
.modal.show{display:flex;}
.modal-backdrop{position:fixed; inset:0; background:var(--backdrop); z-index:1040;}
.modal-backdrop.show{opacity:1;}
.modal-dialog{position:relative; z-index:1051; width:100%; max-width:480px; margin:0;}
.modal-content{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line);}
.modal-header h5{margin:0; font-size:15px;}
.modal-body{padding:22px;}
.modal-footer{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line);}
.btn-close{background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1;}
.btn-close:hover{color:var(--ink);}

/* --- Progress bar (historical scan) --- */
.progress{height:22px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.progress-bar{height:100%; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:width .3s ease; white-space:nowrap;}

.spinner{display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* --- Utility --- */
.text-muted{color:var(--muted);}
.mt-2{margin-top:8px;} .mt-3{margin-top:16px;} .mb-0{margin-bottom:0;}
.d-flex{display:flex;} .gap-2{gap:8px;} .flex-wrap{flex-wrap:wrap;} .align-items-end{align-items:flex-end;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:820px){ .grid-2{grid-template-columns:1fr;} }