/* ===================================================
   AURUM_CONTROL v3 — Institutional Doctrine UI
   =================================================== */

:root{
  --bg-0:#0b0f14;
  --bg-1:#0f1620;

  --panel: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.10);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);

  --teal:#2aa9b3;
}

/* ---------- Base ---------- */

html,body{
  height:100%;
  margin:0;
  color:var(--text);
  font-family: Inter, system-ui, sans-serif;
}

/* ---------- Institutional Background ---------- */

body{
  background:
    radial-gradient(1100px 700px at 50% 18%, rgba(42,169,179,0.10), transparent 60%),
    radial-gradient(900px 600px at 20% 85%, rgba(255,255,255,0.05), transparent 65%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));

  background-attachment: fixed;
}

/* subtle vignette + engineering grid */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(circle at 50% 35%, transparent 35%, rgba(0,0,0,0.55) 80%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);

  background-size:
    auto,
    64px 64px,
    64px 64px;

  mix-blend-mode: overlay;
  opacity:0.22;
}

/* tiny film noise */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.01),
      rgba(255,255,255,0.01) 1px,
      rgba(0,0,0,0.01) 2px,
      rgba(0,0,0,0.01) 3px
    );

  opacity:0.08;
  mix-blend-mode: soft-light;
}

/* ---------- Layout ---------- */

.shell{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:70px 24px 60px;
  text-align:center;
}

.brandRow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  opacity:0.9;
}

.brandMark{
  color:var(--teal);
}

.title{
  margin-top:18px;
  font-size:48px;
  line-height:1.15;
  font-weight:700;
}

.subtitle{
  margin:20px auto 26px;
  max-width:850px;
  font-size:19px;
  color:var(--muted);
  line-height:1.4;
}

/* ---------- Metadata block ---------- */

.statusBlock{
  margin:0 auto;
  max-width:700px;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:14px 20px;
  backdrop-filter: blur(10px);
}

.statusLine{
  display:flex;
  justify-content:center;
  gap:12px;
  align-items:center;
}

.statusPill{
  border:1px solid rgba(42,169,179,0.35);
  background:rgba(42,169,179,0.10);
  color:rgba(42,169,179,0.95);
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}

.statusMeta{
  margin-top:8px;
  font-size:13px;
  opacity:0.8;
}

/* ---------- Cards ---------- */

.sections{
  margin-top:34px;
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}

.sectionCard{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:12px;
  padding:16px;
  text-align:left;
  backdrop-filter: blur(10px);
}

.sectionTitle{
  font-weight:700;
  margin-bottom:6px;
}

.sectionDesc{
  font-size:14px;
  color:var(--muted);
}
/* ===== Authority Alignment Move (v3 polish) ===== */

/* Make panels feel less “app UI” and more “institutional” */
.statusBlock,
.sectionCard{
  border-radius: 10px;                 /* less rounded */
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}

/* Reduce the “pillow” feeling */
.sectionCard{ padding: 15px 16px; }
.statusBlock{ padding: 13px 18px; }

/* Typography hierarchy: slightly more doctrine-grade */
.title{
  letter-spacing: -0.01em;
  text-shadow: 0 8px 26px rgba(0,0,0,0.35);
}

.subtitle{
  max-width: 900px;
  font-size: 18px;                     /* slightly tighter */
  opacity: 0.92;
}

/* Metadata pill: more like a label tag */
.statusPill{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
}

/* Make the grid/noise a touch calmer */
body::before{ opacity: 0.18; }
body::after{ opacity: 0.06; }

/* Improve overall vertical rhythm */
.shell{
  padding-top: 78px;
}

.sections{
  margin-top: 30px;
  gap: 12px;
}