:root{
  --uni-red:#D13239; --uni-gray:#808285; --uni-black:#000000; --uni-white:#FFFFFF;
  --uni-teal-dark:#00827D;
  --radius:18px;
  --shadow:0 12px 34px rgba(0,0,0,.40);

  --bg:#07080B;
  --bg2:#0D0F15;
  --text:#F3F6FF;
  --muted:rgba(243,246,255,.70);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Open Sans",Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 900px at 15% 0%, rgba(209,50,57,.18), transparent 60%),
              radial-gradient(900px 700px at 90% 10%, rgba(0,130,125,.14), transparent 65%),
              linear-gradient(180deg, var(--bg), var(--bg2));
}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:24px}
.topbar{
  position:sticky; top:0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:50;
}
.topbar-inner{
  display:flex; align-items:center; gap:16px;
  padding:16px 24px;
  max-width:1200px; margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;min-width:280px}
.brand img{height:52px; width:auto; display:block}
.h1{font-family:"Barlow","Trebuchet MS",sans-serif;font-weight:700;font-size:22px;margin:0}
.sub{font-size:12px;color:var(--muted);margin-top:2px}
.spacer{flex:1}
.badge{
  font-size:12px;
  padding:7px 11px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line2);
  color: var(--text);
}

.card{
  background: linear-gradient(180deg, rgba(16,19,28,.92), rgba(14,17,24,.92));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:950px){
  .grid.two{grid-template-columns:1.12fr .88fr}
  .grid.three{grid-template-columns:1fr 1fr 1fr}
}

label{display:block;font-size:13px;margin-bottom:6px;color:var(--muted)}
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
input::placeholder, textarea::placeholder{color:rgba(243,246,255,.45)}
input:focus,select:focus,textarea:focus{
  border-color: rgba(209,50,57,.65);
  box-shadow: 0 0 0 4px rgba(209,50,57,.18);
}
textarea{min-height:110px;resize:vertical}

.row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.row>*{flex:1;min-width:180px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer; user-select:none;
}
.btn.primary{background:var(--uni-red);border-color:var(--uni-red);color:#fff}
.btn.primary:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.small{padding:8px 10px;border-radius:10px;font-size:13px}
.btn.danger{background:#AF1C27;border-color:#AF1C27;color:#fff}
.btn.ok{background:var(--uni-teal-dark);border-color:var(--uni-teal-dark);color:#fff}

.note{font-size:13px;color:var(--muted);line-height:1.35}
.hr{height:1px;background:var(--line);margin:14px 0}

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.table th,.table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.table th{
  background: rgba(255,255,255,.04);
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:.06em;
  color: rgba(243,246,255,.72);
}
.table tr:last-child td{border-bottom:none}

.kpi{
  padding:14px;border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.kpi .v{
  font-family:"Barlow","Trebuchet MS",sans-serif;
  font-size:26px;font-weight:700;margin:2px 0 0;
}
.kpi .t{font-size:12px;color:var(--muted)}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;font-size:12px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.04);
}
.pill.red{background: rgba(209,50,57,.14); border-color: rgba(209,50,57,.25)}
.pill.teal{background: rgba(0,130,125,.18); border-color: rgba(0,130,125,.30)}
.pill.gray{background: rgba(128,130,133,.18); border-color: rgba(128,130,133,.30)}

.alert{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(209,50,57,.35);
  background: rgba(209,50,57,.12);
  color: rgba(243,246,255,.92);
}
.footer{font-size:12px;color:rgba(243,246,255,.55);margin-top:18px}
.smallmuted{font-size:12px;color:rgba(243,246,255,.55)}