\
/* PHPSimpleHub v2.0.3 — 2025 UI */
:root{
  --container: 1160px;
  --spacing: 18px;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --bg: #090e14;
  --glass: rgba(255,255,255,0.04);
  --panel: #0e1622;
  --elev: #121c2b;
  --border: #203045;
  --line: #1a283a;
  --text: #e9f1ff;
  --muted: #a4b6cc;
  --brand: #6b4df8;
  --brand-2: #ffd55a;
  --ok: #2dd4bf;
  --warn: #f59e0b;
  --danger: #ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font: 500 15px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  background:
    radial-gradient(80% 50% at 10% -20%, rgba(107,77,248,.20), transparent 40%),
    radial-gradient(60% 50% at 90% -10%, rgba(255,213,90,.12), transparent 35%),
    linear-gradient(180deg, #090e14, #0a1018);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.container{max-width:var(--container); margin-inline:auto; padding-inline: clamp(14px, 3vw, 28px)}

.header{
  margin: clamp(14px, 2.4vw, 24px) auto 8px;
  padding: 12px clamp(14px,3vw,24px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel), #0a1322 25%), var(--panel));
  box-shadow: var(--shadow);
}
.header .left{display:flex; align-items:center; gap:12px}
.header img.logo{height:28px; width:auto; display:block}
.header .title{font-weight:800; letter-spacing:.2px}
.header .right{display:flex; align-items:center; gap:10px}
.userpill{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: color-mix(in srgb, var(--panel), black 6%); color:var(--muted)}

.navbar{
  display:flex; gap:8px; flex-wrap:wrap;
  margin: 8px auto 0; padding-bottom: 4px;
}
.tab{
  border:1px solid var(--line);
  background: var(--glass);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  text-decoration:none;
  transition: transform .15s ease, background .15s ease;
}
.tab:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--glass), #fff 3%) }
.tab.active{ background: color-mix(in srgb, var(--brand), #fff 6%); border-color: color-mix(in srgb, var(--brand), #000 35%) }

main{margin: 16px 0 28px}

.grid{display:grid; gap: var(--spacing)}
.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 980px){ .cols-3{grid-template-columns: 1fr 1fr}}
@media (max-width: 760px){ .cols-2, .cols-3{grid-template-columns: 1fr}}

.card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel), #0d1423 18%), var(--panel));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.2vw, 20px);
}

h1{font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 10px}
h2{font-size: clamp(18px, 1.9vw, 22px); margin: 8px 0}
h3{font-size: 16px; margin: 8px 0}
p{color: var(--muted)}

a{color: color-mix(in srgb, var(--brand), #bcd0ff 20%); text-decoration:none}
a:hover{text-decoration:underline}

.table{overflow:auto; border-radius: var(--radius)}
table{width:100%; border-collapse:collapse; min-width: 680px; background: #0f1626; border:1px solid var(--line)}
th,td{padding: 12px 14px; border-bottom:1px solid var(--line)}
th{background: #112036; color:#d2e3ff; text-align:left; font-weight:700}
tbody tr:hover{background:#0f1726}

.input, select, textarea{
  width:100%; border:1px solid var(--line); background: #0c1422; color:var(--text);
  border-radius: 12px; padding: 10px 12px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, select:focus, textarea:focus{
  border-color: color-mix(in srgb, var(--brand), #fff 20%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand), transparent 80%);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid color-mix(in srgb, var(--brand), #000 35%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand), #fff 8%), var(--brand));
  color:#fff; padding: 10px 14px; border-radius: 12px; font-weight:800; text-decoration:none; box-shadow: var(--shadow);
}
.btn.secondary{ background: linear-gradient(180deg, #162036, #0f1829); border-color: #1d2a40; color:#d8e4ff }
.btn.ok{ background: linear-gradient(180deg, #3ee1cc, #1bb5a1); border-color: #0e8b7c }
.btn.warn{ background: linear-gradient(180deg, #ffb454, #e9890a); border-color: #b56907 }
.btn.danger{ background: linear-gradient(180deg, #ff6b6b, #dc2626); border-color: #a61b1b }

.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#0f1a2b; border:1px solid var(--line); color:#cfe0f5; font-weight:700}
.badge.ok{background: rgba(45,212,191,.18); color:#aaf3e6}
.badge.warn{background: rgba(245,158,11,.16); color:#ffe1a3}
.badge.danger{background: rgba(239,68,68,.16); color:#ffc3c3}

.kv{display:grid; grid-template-columns: 180px 1fr; gap:10px; align-items:center}
@media (max-width:640px){ .kv{grid-template-columns: 1fr} .kv label{opacity:.85} }

.hr{height:1px; background: var(--line); border:none; margin: 12px 0}
.muted{color: var(--muted)}