:root{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#0f172a;
  background:#f4f6fa;
}

*{box-sizing:border-box}
body{margin:0;background:#f4f6fa}

.topbar{
  min-height:92px;
  background:#000;
  color:#fff;
  padding:18px max(24px,calc((100vw - 1168px)/2));
  display:flex;
  align-items:center;
  gap:28px;
  box-shadow:0 1px 0 #171717;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:28px;
  border-right:1px solid #262626;
}

.brand-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:0 0 48px;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-copy strong{
  color:#fff;
  font-size:21px;
  line-height:1;
  font-weight:800;
}

.brand-copy span{
  color:#9b6cff;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:2px;
}

.topbar-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
}

.topbar-copy strong{font-size:16px}
.topbar-copy small{color:#94a3b8}

main{
  max-width:1168px;
  padding:30px 24px;
  margin:auto;
}

.card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:24px;
  margin-bottom:20px;
  box-shadow:0 4px 18px rgba(15,23,42,.04);
}

.login{
  max-width:460px;
  margin:36px auto;
}

h2{margin-top:0;color:#111827}
p{color:#64748b;line-height:1.5}

form{display:grid;gap:16px}

label{
  display:grid;
  gap:7px;
  font-size:14px;
  font-weight:700;
  color:#334155;
}

input,button{
  font:inherit;
  padding:11px 14px;
  border:1px solid #cbd5e1;
  border-radius:9px;
}

input{
  width:100%;
  background:#fff;
  color:#0f172a;
}

input:focus{
  outline:none;
  border-color:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139,92,246,.12);
}

button{
  cursor:pointer;
  background:#334155;
  color:#fff;
  border-color:#475569;
  font-weight:700;
}

button:hover{
  background:#475569;
}

button.primary{
  background:#7c3aed;
  border-color:#8b5cf6;
  color:#fff;
}

button.primary:hover{
  background:#6d28d9;
}

button:disabled{
  opacity:.6;
  cursor:wait;
}

#logout{
  background:#334155;
  border-color:#475569;
  min-width:130px;
}

.login a{
  display:block;
  margin-top:20px;
  color:#7c3aed;
  font-size:14px;
  font-weight:700;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

.section-head h2{margin-bottom:5px}
.section-head p{margin:0}

.company-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:18px;
}

.company-grid .card{margin:0 0 20px}

.badge{
  display:inline-block;
  padding:5px 9px;
  border-radius:30px;
  font-size:12px;
  background:#f1f5f9;
}

.badge.active{
  background:#ede9fe;
  color:#6d28d9;
}

.metrics{
  display:flex;
  gap:26px;
  margin:20px 0;
}

.metrics strong{
  display:block;
  font-size:24px;
}

.metrics span{
  font-size:13px;
  color:#64748b;
}

.metadata{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:12px;
  padding:18px;
  background:#f8fafc;
  border-radius:10px;
  margin:20px 0;
  overflow-wrap:anywhere;
}

.metadata dt{color:#64748b}
.metadata dd{margin:0}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.check{
  display:flex;
  align-items:center;
  gap:10px;
}

.check input{width:auto}

#message:empty{display:none}

#message{
  padding:14px;
  border-radius:9px;
  background:#ede9fe;
  color:#5b21b6;
}

#message.error{
  background:#fff0ee;
  color:#912d26;
}

input[type="color"]{
  height:46px;
  padding:6px;
  cursor:pointer;
}

[hidden]{display:none!important}

@media(max-width:700px){
  .topbar{
    padding:16px;
    flex-wrap:wrap;
  }

  .brand{
    border-right:0;
    padding-right:0;
  }

  .topbar-copy{
    order:3;
    flex-basis:100%;
  }

  main{padding:16px}
  .card{padding:18px}
  .settings-grid{grid-template-columns:1fr}
  .section-head{align-items:flex-start}
  .metadata{grid-template-columns:1fr;gap:6px}
  .metadata dd{margin-bottom:10px}
}