/* Diesel Fangs — Driver Hub */
:root {
  --main: #420102;
  --main-lift: #5c1415;
  --ink: #121010;
  --panel: #1c1a1a;
  --panel-2: #242121;
  --charcoal: #2e2b2b;
  --silver: #c2b6b6;
  --muted: #8f8484;
  --line: rgba(194, 182, 182, 0.12);
  --white: #f5f0f0;
  --green: #b9d0ae;
  --amber: #e0bd80;
  --sidebar-w: 248px;
  --font-display: "Oswald", sans-serif;
  --font-body: "Manrope", sans-serif;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--silver);
  font: 14px/1.55 var(--font-body);
}
body.modal-open { overflow: hidden; }

/* Clickable person → mini profile */
.person-hit{cursor:pointer}
.person-hit:hover{filter:brightness(1.06)}
.rank-row.person-hit:hover,.member-card.person-hit:hover,.celeb-chip.person-hit:hover,.roster-row.person-hit:hover{
  background:rgba(66,1,2,.18);
}
tr.person-hit{cursor:pointer}
tr.person-hit:hover td{background:rgba(66,1,2,.16)}

.member-pop{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
}
.member-pop[hidden]{display:none!important}
.member-pop__shade{
  position:absolute;inset:0;background:rgba(6,4,4,.65);backdrop-filter:blur(5px);
}
.member-pop__card{
  position:relative;z-index:1;width:min(380px,100%);
  padding:1.35rem 1.25rem 1.2rem;
  border:1px solid rgba(194,182,182,.16);border-radius:20px;
  background:
    radial-gradient(80% 50% at 0% 0%, rgba(66,1,2,.4), transparent 55%),
    linear-gradient(180deg,#221c1c,#141010);
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  animation:modalIn .25s var(--ease) both;
}
.member-pop__close{position:absolute;top:.85rem;right:.85rem}
.member-pop__top{display:flex;gap:.9rem;align-items:center;padding-right:2rem;margin-bottom:1rem}
.member-pop__top img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(201,162,122,.4);
}
.member-pop__top strong{
  display:block;color:#fff;font:600 1.25rem/1.15 var(--font-display);
  text-transform:uppercase;letter-spacing:.03em;
}
.member-pop__top span{
  display:block;margin-top:.2rem;color:var(--muted);
  font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.member-pop__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:.9rem;
}
.member-pop__stats div{
  padding:.55rem .5rem;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);text-align:center;
}
.member-pop__stats label{
  display:block;font-size:.58rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.member-pop__stats b{display:block;margin-top:.2rem;color:#fff;font:600 .95rem var(--font-display)}
.member-pop__meta{display:flex;flex-direction:column;gap:.45rem}
.member-pop__meta .mp-row{
  display:flex;justify-content:space-between;gap:.75rem;
  padding:.4rem 0;border-bottom:1px solid rgba(194,182,182,.08);
  font-size:.82rem;
}
.member-pop__meta .mp-row:last-child{border-bottom:0}
.member-pop__meta .mp-row span{color:var(--muted)}
.member-pop__meta .mp-row b{color:var(--white);font-weight:650;text-align:right}
.mp-rankpath{
  margin-bottom:.65rem;padding:.7rem .75rem;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.mp-rankpath__head{
  display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;
  margin-bottom:.45rem;font-size:.78rem;
}
.mp-rankpath__head span{color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mp-rankpath__head b{color:var(--white);font-weight:650;text-align:right;line-height:1.25}
.mp-rankpath .progress{height:.35rem;border-radius:0}
.member-pop__bio{
  margin:.85rem 0 0;padding:.75rem .85rem;border-radius:12px;
  border:1px solid var(--line);background:rgba(0,0,0,.22);
  color:var(--silver);font-size:.84rem;line-height:1.45;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
button, input, select { font: inherit; }
a { color: inherit; }

/* Auth */
.auth-screen {
  min-height: 100vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 55% 45% at 50% 20%, rgba(92, 20, 21, 0.45), transparent 60%),
    var(--ink);
}
.auth-screen:not([hidden]) { display: flex; }
.hub[hidden], .auth-screen[hidden] { display: none !important; }
.auth-screen > * { max-width: 440px; }
.auth-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 14px 28px rgba(66, 1, 2, 0.5));
}
.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--main-lift);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}
.auth-screen h1,
.topbar h1,
.card-title {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.auth-screen h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); margin-bottom: 0.75rem; }
.auth-screen p:not(.eyebrow) { color: var(--silver); margin: 0 0 1.5rem; }
.red-button,
.ghost-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s;
}
.red-button {
  color: #fff;
  background: var(--main);
  box-shadow: 0 10px 28px rgba(66, 1, 2, 0.4);
}
.red-button:hover { background: var(--main-lift); transform: translateY(-2px); }
.ghost-button {
  color: var(--silver);
  border-color: var(--line);
  background: transparent;
}
.ghost-button:hover { border-color: var(--silver); color: var(--white); }
.auth-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.form-error { color: #e0a0a0 !important; }
.loader {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(194, 182, 182, 0.15);
  border-top-color: var(--main-lift);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Shell */
.hub { min-height: 100vh; }
.sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  padding: 1.35rem 1rem 1.1rem;
  background: linear-gradient(180deg, #1a1717 0%, #141212 100%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
  text-decoration: none;
  font: 600 1.05rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.5rem 1rem;
}
.brand-lockup img { width: 42px; height: 42px; object-fit: contain; }
.brand-lockup b { color: var(--silver); font-weight: 500; display: block; font-size: 0.72rem; letter-spacing: 0.14em; margin-top: 0.2rem; }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.side-nav a,
.logout-link {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 10px;
  padding: 0 0.85rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 650;
  transition: background 0.2s, color 0.2s;
}
.side-nav svg,
.logout-link svg,
.menu-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.side-nav a:hover { background: rgba(194, 182, 182, 0.06); color: var(--white); }
.side-nav a.active {
  color: var(--white);
  background: linear-gradient(90deg, var(--main), rgba(66, 1, 2, 0.35));
  box-shadow: inset 3px 0 0 #c48a8a;
}
.logout-link { margin-top: auto; color: var(--muted); }
.logout-link:hover { color: var(--white); }

.hub-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  background:
    radial-gradient(ellipse 50% 35% at 80% 0%, rgba(92, 20, 21, 0.22), transparent 55%),
    var(--ink);
}
.topbar {
  height: 84px;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(18, 16, 16, 0.72);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: right;
}
.account strong { display: block; color: var(--white); font-size: 0.92rem; }
.account span {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 800;
}
.account img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(194, 182, 182, 0.22);
  background: var(--charcoal);
}
.menu-button {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  padding: 0.25rem;
  cursor: pointer;
}

.view {
  max-width: 1480px;
  margin: 0 auto;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem) 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Direct children already spaced by .view gap */
.view > .welcome,
.view > .stats-grid,
.view > .content-grid,
.view > .two-grid,
.view > .panel,
.view > .roster,
.view > .ranks-page,
.view > .ops,
.view > .ov-spotlights,
.view > .ov-announces {
  margin-top: 0;
  margin-bottom: 0;
}

/* Cards / grids */
.welcome {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.welcome p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  max-width: 48ch;
}
.welcome__badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem}
.role-chip{
  --rb:#8f8484;
  display:inline-flex;align-items:center;max-width:100%;
  height:26px;padding:0 .7rem;border-radius:8px;
  border:1px solid rgba(194,182,182,.16);background:rgba(0,0,0,.28);
  box-shadow:inset 3px 0 0 var(--rb);color:var(--silver);
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rank-prog{display:grid;gap:.65rem}
.rank-prog__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.rank-prog__bar{
  height:8px;border-radius:999px;background:rgba(0,0,0,.35);
  border:1px solid rgba(194,182,182,.12);overflow:hidden;
}
.rank-prog__bar i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg, var(--main), #9a3030);
}
.member-pop__top span{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}

/* Members roster */
.roster{display:flex;flex-direction:column;gap:1.15rem}
.roster-bar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.05rem;border-radius:12px;
  border:1px solid rgba(194,182,182,.1);background:rgba(0,0,0,.2);
}
.roster-bar__filters{display:flex;flex-wrap:wrap;gap:.85rem}
.roster-bar__filters label{display:grid;gap:.3rem;min-width:150px}
.roster-bar__filters span{
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.roster-bar__filters .field{height:38px;min-width:170px}
.roster-bar__count{
  margin:0;color:var(--muted);font:600 .9rem/1 var(--font-display);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.roster-bar__count b{color:#fff;font-weight:700}

.roster-groups{display:flex;flex-direction:column;gap:1.35rem}
.roster-group{
  --rc:#7d8fa6;
  display:flex;flex-direction:column;gap:.55rem;
}
.roster-group__head{
  display:flex;align-items:center;gap:.7rem;
  padding:0 .15rem .15rem;
}
.roster-group__mark{
  width:.28rem;height:1.55rem;border-radius:99px;flex:none;
  background:var(--rc);
}
.roster-group__title{display:grid;gap:.12rem;min-width:0}
.roster-group__title h3{
  margin:0;color:#fff;font:700 .95rem/1.15 var(--font-display);
  letter-spacing:.04em;text-transform:uppercase;
}
.roster-group__title span{
  color:var(--muted);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;
}
.roster-group__list{display:grid;gap:.4rem}

.roster-row{
  --rc:#7d8fa6;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:.9rem;align-items:center;
  width:100%;padding:.75rem .9rem;border-radius:12px;text-align:left;
  border:1px solid rgba(194,182,182,.09);
  border-left:3px solid var(--rc);
  background:rgba(12,10,10,.52);
  color:inherit;font:inherit;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.roster-row:hover{
  border-color:rgba(194,182,182,.22);
  background:rgba(255,255,255,.035);
  transform:translateY(-1px);
}
.roster-row .avatar{width:44px;height:44px;border-radius:11px}
.roster-row__who{min-width:0;display:grid;gap:.4rem}
.roster-row__who strong{
  color:#fff;font-size:.98rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.roster-row__chips{display:flex;flex-wrap:wrap;gap:.35rem}
.roster-chip{
  --rc:#7d8fa6;
  display:inline-flex;align-items:center;max-width:100%;
  height:22px;padding:0 .55rem 0 .65rem;border-radius:6px;
  border:1px solid rgba(194,182,182,.14);
  background:rgba(0,0,0,.28);
  box-shadow:inset 3px 0 0 var(--rc);
  color:#e6dede;
  font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.roster-chip--rank{
  border-style:dashed;
  color:#d4cbcb;
}
.roster-chip--muted{
  --rc:#6a6262;
  border-style:solid;
  color:var(--muted);
  font-weight:700;
}
.roster-row__stat{text-align:right}
.roster-row__stat b{
  display:block;color:#fff;font:600 1.02rem/1 var(--font-display);
  font-variant-numeric:tabular-nums;
}
.roster-row__stat small{display:block;margin-top:.28rem;color:var(--muted);font-size:.7rem}
@media (max-width:640px){
  .roster-row{
    grid-template-columns:40px minmax(0,1fr);
    grid-template-areas:
      "av who"
      "av stat";
    row-gap:.35rem;
  }
  .roster-row .avatar{grid-area:av;width:40px;height:40px}
  .roster-row__who{grid-area:who}
  .roster-row__stat{grid-area:stat;text-align:left}
}

/* Ranks page */
.ranks-page{display:flex;flex-direction:column;gap:1.5rem}
.ranks-page > .panel{margin:0}
.rpath__you{
  margin:0 0 1.1rem;padding:.75rem .9rem;border-radius:12px;
  border:1px solid rgba(194,182,182,.12);background:rgba(0,0,0,.22);
  color:var(--muted);font-size:.88rem;
}
.rpath__you b{color:#fff;font-weight:700}
.rank-ladder{display:grid;gap:.55rem}
.rank-step{
  --rc:#8f8484;
  display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;
  padding:.85rem 1rem;border-radius:12px;
  border:1px solid rgba(194,182,182,.1);background:rgba(0,0,0,.18);
}
.rank-step.is-mine{
  border-color:rgba(66,1,2,.5);
  background:rgba(66,1,2,.2);
}
.rank-step.is-unlocked:not(.is-mine){border-color:rgba(194,182,182,.18)}
.rank-step__n{
  font:600 1rem/1 var(--font-display);color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:2rem;
}
.rank-step.is-mine .rank-step__n{color:#fff}
.rank-step__copy strong{
  display:block;color:#fff;font:600 1rem/1.2 var(--font-display);
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:.15rem;
}
.rank-step:not(.is-unlocked):not(.is-mine) .rank-step__copy strong{color:var(--muted)}
.rank-step__holders{display:flex;align-items:center}
.rank-step__holders img{
  width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:2px solid var(--panel);margin-left:-8px;cursor:pointer;background:var(--charcoal);
}
.rank-step__holders img:first-child{margin-left:0}
.rpath__name{
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  color:var(--silver);font:inherit;font-size:.78rem;cursor:pointer;
}
.rpath__name:hover{color:#fff;text-decoration:underline}
.rroles{display:grid;gap:.55rem}
.rroles__row{
  --rc:#8f8484;
  display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:start;
  padding:.9rem 1rem;border-radius:12px;
  border:1px solid rgba(194,182,182,.1);background:rgba(0,0,0,.18);
}
.rroles__mark{
  width:3px;align-self:stretch;min-height:2rem;border-radius:99px;background:var(--rc);
}
.rroles__main strong{
  display:block;font:600 .92rem/1.2 var(--font-display);color:#fff;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3rem;
}
.rroles__main p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .05rem}
.rroles__sep{color:var(--muted);margin:0 .35rem;font-size:.78rem}
.rroles__count{
  font:600 .95rem/1 var(--font-display);color:var(--muted);
  font-variant-numeric:tabular-nums;padding-top:.15rem;
}
@media (max-width:640px){
  .rank-step{grid-template-columns:auto 1fr;gap:.55rem}
  .rank-step__holders{grid-column:1 / -1}
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 0;
}
.stat-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 1.15rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(66, 1, 2, 0.18), transparent 55%),
    var(--panel);
}
.stat-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  right: -18px;
  top: -22px;
  border-radius: 50%;
  background: rgba(92, 20, 21, 0.28);
}
.stat-card label {
  display: block;
  position: relative;
  z-index: 1;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
.stat-card strong {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 0.85rem;
  color: var(--white);
  font: 600 clamp(1.35rem, 2.2vw, 1.85rem)/1 var(--font-display);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-card small {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.content-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 1.25rem;
  margin-bottom: 0;
  align-items: stretch;
}
.content-grid--solo {
  grid-template-columns: 1fr;
}
.content-grid > .grid-cell {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.content-grid > .grid-cell > .panel {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.content-grid > .grid-cell > .panel .panel__body {
  flex: 1;
}
.two-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.two-grid > * {
  display: flex;
  min-width: 0;
}
.two-grid > * > .panel,
.two-grid > .panel {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1.25rem 1.3rem 1.35rem;
  min-width: 0;
}
.panel__body { min-height: 0; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.card-title { font-size: 1.05rem; }
.subtle-link {
  color: #cba5a5;
  text-decoration: none;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.subtle-link:hover { color: var(--white); }

.job-list,
.rank-list { display: flex; flex-direction: column; gap: 0.45rem; }
.job-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.job-row:hover { border-color: var(--line); }
.job-row strong { color: var(--white); font-size: 0.9rem; }
.job-row span { color: var(--muted); font-size: 0.78rem; }
.job-row .job-distance {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--silver);
  font: 500 1rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.rank-row {
  display: grid;
  grid-template-columns: 2rem 2rem 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.5rem;
  border-radius: 10px;
}
.rank-row.you { background: rgba(92, 20, 21, 0.28); }
.rank-num { font: 500 0.85rem var(--font-display); color: var(--muted); }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--charcoal);
}
.rank-row strong {
  font-size: 0.85rem;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-row span {
  font: 500 0.85rem var(--font-display);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}

.highlight-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 88px;
  padding: 0.35rem 0;
}
.highlight-card .avatar { width: 52px; height: 52px; }
.highlight-card strong { display: block; color: var(--white); font-size: 0.98rem; }
.highlight-card span { font-size: 0.8rem; color: var(--muted); }

.empty {
  padding: 1.75rem 0.5rem;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}
.section-intro { margin: 0 0 1.1rem; color: var(--muted); }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.metric {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 12px;
  padding: 0.95rem 1rem;
}
.metric label {
  display: block;
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.metric strong {
  display: block;
  color: var(--white);
  font: 500 1.35rem/1.1 var(--font-display);
  margin-top: 0.4rem;
}

.progress-row { margin: 0.85rem 0; }
.progress-row > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--white);
  font-size: 0.85rem;
}
.progress-row b { font: 500 0.9rem var(--font-display); color: var(--silver); }
.progress {
  height: 5px;
  margin-top: 0.45rem;
  background: #151313;
  border-radius: 999px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--main), #9d4545);
  border-radius: inherit;
}

.toolbar { display: flex; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.field {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1a1818;
  color: var(--white);
  padding: 0 0.85rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.84rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea.field {
  height: auto;
  min-height: 88px;
  padding: 0.7rem 0.85rem;
  resize: vertical;
  font: inherit;
}
.field:hover { border-color: rgba(194, 182, 182, 0.28); }
.field:focus {
  border-color: rgba(196, 138, 138, 0.55);
  box-shadow: 0 0 0 3px rgba(66, 1, 2, 0.35);
  background-color: #1e1a1a;
}
/* Native selects are replaced by the custom .df-select component */
.df-select { position: relative; display: block; width: 100%; }
.df-select select { display: none !important; }
.setting-row .df-select { width: auto; min-width: 150px; }
.sorter .df-select { width: auto; min-width: 176px; }
.df-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  width: 100%;
  height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1a1818;
  color: var(--white);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.setting-row .df-select__btn, .sorter .df-select__btn { height: 34px; font-size: 0.78rem; }
.df-select__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-select__btn svg { width: 11px; height: 8px; flex: 0 0 auto; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.df-select__btn:hover { border-color: rgba(194, 182, 182, 0.32); }
.df-select.is-open .df-select__btn {
  border-color: rgba(196, 138, 138, 0.55);
  box-shadow: 0 0 0 3px rgba(66, 1, 2, 0.35);
  background: #1e1a1a;
}
.df-select.is-open .df-select__btn svg { transform: rotate(180deg); color: #fff; }
.df-select__list {
  position: fixed;
  z-index: 90;
  max-height: 264px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid rgba(194, 182, 182, 0.16);
  border-radius: 12px;
  background: rgba(24, 20, 20, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 55px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s cubic-bezier(.21,1.02,.6,1), visibility .18s;
}
.df-select.is-open .df-select__list { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.df-select__list::-webkit-scrollbar { width: 8px; }
.df-select__list::-webkit-scrollbar-thumb { background: rgba(194,182,182,.18); border-radius: 99px; }
.df-select__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--silver);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.df-select__opt svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0; color: #c48a8a; transition: opacity .14s ease; }
.df-select__opt:hover { background: rgba(194, 182, 182, 0.08); color: #fff; }
.df-select__opt.is-selected {
  background: linear-gradient(90deg, rgba(66, 1, 2, 0.55), rgba(66, 1, 2, 0.2));
  color: #fff;
}
.df-select__opt.is-selected svg { opacity: 1; }
.reduce-motion .df-select__list { transition: opacity .05s linear !important; transform: none !important; }
input.field[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) sepia(0.1);
  cursor: pointer;
  transition: filter .15s ease;
}
input.field[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { filter: invert(1); }
.search-field { flex: 1; min-width: 180px; max-width: 360px; }

.data-wrap { overflow: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  min-width: 860px;
}
.data-table th {
  text-align: left;
  padding: 0 0.7rem 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.data-table td {
  padding: 0.8rem 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--silver);
  white-space: nowrap;
  vertical-align: middle;
}
.data-table td strong { color: var(--white); }
.cell-sub { margin-top: 0.15rem; font-size: 0.7rem; color: var(--muted); }
.driver-cell { display: flex; align-items: center; gap: 0.55rem; }
.driver-cell .avatar { width: 28px; height: 28px; }

.status {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  font-weight: 800;
  background: rgba(133, 157, 111, 0.15);
  color: var(--green);
}
.status.progress {
  background: rgba(196, 154, 81, 0.13);
  color: var(--amber);
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.8rem;
}
.member-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s, transform 0.25s var(--ease);
}
.member-card:hover {
  border-color: rgba(194, 182, 182, 0.28);
  transform: translateY(-2px);
}
.member-card .avatar { width: 44px; height: 44px; }
.member-card strong { display: block; color: var(--white); font-size: 0.9rem; }
.member-card span { display: block; color: var(--muted); font-size: 0.72rem; }
.member-card .member-data { margin-left: auto; text-align: right; }
.member-data strong {
  font: 500 0.95rem var(--font-display);
  font-variant-numeric: tabular-nums;
}

.event {
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--main-lift);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 12px 12px 0;
  margin-bottom: 0.65rem;
}
.event strong { color: var(--white); }
.event p { color: var(--muted); margin: 0.3rem 0 0; font-size: 0.82rem; }

.admin-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1rem;
}
.admin-form { display: grid; gap: 0.65rem; }
.admin-form label {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.admin-form button {
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--main);
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.admin-form button:hover { background: var(--main-lift); }
.link-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.link-row button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #d38e8e;
  font-size: 0.68rem;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.notice {
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.82rem;
  color: var(--muted);
}
.mobile-shade { display: none; }

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 960px) {
  .sidebar {
    transform: translateX(-105%);
    transition: transform 0.25s var(--ease);
  }
  .sidebar.open { transform: none; }
  .mobile-shade.open {
    display: block;
    position: fixed;
    z-index: 30;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .hub-main { margin-left: 0; }
  .menu-button { display: block; }
  .content-grid,
  .two-grid,
  .admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .account div { display: none; }
  .toolbar { flex-direction: column; }
  .search-field { max-width: none; }
}

.account{
  cursor:pointer;
  border:0;
  background:transparent;
  font:inherit;
  color:inherit;
}
.toast-host{
  position:fixed;
  top:calc(84px + .9rem);
  right:clamp(1rem,2.5vw,1.75rem);
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.6rem;
  pointer-events:none;
  width:min(380px,calc(100vw - 2rem));
}
.toast{
  --toast-accent:#8aa2c0;
  --toast-accent-soft:rgba(138,162,192,.16);
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  width:100%;
  padding:.85rem 2.4rem .95rem .95rem;
  border-radius:14px;
  border:1px solid rgba(194,182,182,.14);
  background:
    linear-gradient(135deg, var(--toast-accent-soft), transparent 45%),
    rgba(26,22,22,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 20px 50px rgba(0,0,0,.55);
  overflow:hidden;
  pointer-events:auto;
  opacity:0;
  transform:translateX(24px) scale(.97);
  transition:opacity .28s cubic-bezier(.21,1.02,.73,1), transform .28s cubic-bezier(.21,1.02,.73,1);
}
.toast.is-in{opacity:1;transform:translateX(0) scale(1)}
.toast.is-out{opacity:0;transform:translateX(28px) scale(.96)}
.toast__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:10px;
  color:var(--toast-accent);
  background:var(--toast-accent-soft);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--toast-accent) 35%, transparent) inset;
}
.toast__icon svg{width:17px;height:17px}
.toast__body{display:grid;gap:.15rem;min-width:0;padding-top:.05rem}
.toast__title{
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--toast-accent);
}
.toast__msg{font-size:.84rem;font-weight:600;color:#f2eded;line-height:1.4;overflow-wrap:anywhere}
.toast__close{
  position:absolute;top:.55rem;right:.55rem;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:8px;border:0;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.toast__close:hover{background:rgba(255,255,255,.08);color:#fff}
.toast__close svg{width:13px;height:13px}
.toast__bar{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg, var(--toast-accent), color-mix(in srgb, var(--toast-accent) 35%, transparent));
  transform-origin:left;
  animation:toastbar linear forwards;
}
.toast.is-held .toast__bar{animation-play-state:paused}
@keyframes toastbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast--ok{--toast-accent:#4ade80;--toast-accent-soft:rgba(74,222,128,.13)}
.toast--err{--toast-accent:#f87171;--toast-accent-soft:rgba(248,113,113,.14)}
.toast--info{--toast-accent:#93b4d6;--toast-accent-soft:rgba(147,180,214,.13)}
@media (max-width:640px){
  .toast-host{top:auto;bottom:1rem;right:1rem}
}
/* Global smoothness */
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view>*{animation:viewIn .3s cubic-bezier(.21,.9,.35,1) both}
.panel{transition:border-color .22s ease,box-shadow .22s ease}
.panel:hover{border-color:rgba(194,182,182,.2)}
.stat-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.stat-card:hover{transform:translateY(-2px);border-color:rgba(194,182,182,.22);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.app-card,.event{transition:border-color .2s ease,background .2s ease}
.app-card:hover,.event:hover{border-color:rgba(194,182,182,.22)}
.app-actions button{transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease,filter .18s ease}
.app-actions button:hover{border-color:rgba(194,182,182,.4)}
.app-actions button.accept:hover{filter:brightness(1.18)}
.app-actions button:active{transform:scale(.96)}
.admin-form button{transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.admin-form button:active{transform:scale(.98)}
.profile-menu__links a,.subtle-link{transition:background .16s ease,color .16s ease}
.account img{transition:border-color .2s ease,transform .2s ease}
.account:hover img{border-color:rgba(194,182,182,.45)}

.reduce-motion .toast{transition:opacity .1s linear!important;transform:none!important}
.reduce-motion .toast__bar{animation:none!important}
.reduce-motion .app-photo img{transition:none!important}
.reduce-motion .view>*{animation:none!important}
.reduce-motion .stat-card:hover{transform:none!important}
.reduce-motion .ps__pulse,.reduce-motion .profile-pane.is-active,.reduce-motion .ps__shell{animation:none!important}
.reduce-motion *{transition-duration:.01s!important}

/* Layout utilities */
.stack{margin-top:1rem}
.stack-s{margin-top:.75rem}
.stack-b{margin-bottom:1rem}
.scroll-list{max-height:640px;overflow-y:auto;padding-right:.35rem}
.scroll-list::-webkit-scrollbar{width:8px}
.scroll-list::-webkit-scrollbar-thumb{background:rgba(194,182,182,.18);border-radius:99px}
.scroll-list::-webkit-scrollbar-thumb:hover{background:rgba(194,182,182,.3)}

/* Admin / stats / board tabs — flush segmented control */
.admin-tabs{
  display:inline-flex;
  flex-wrap:wrap;
  gap:0;
  padding:0;
  margin-bottom:1.15rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,.25);
  overflow:hidden;
}
.admin-tab{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:36px;padding:0 .95rem;
  border:0;border-radius:0;
  border-right:1px solid var(--line);
  background:transparent;color:var(--muted);
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.admin-tab:last-child{border-right:0}
.admin-tab em{
  font-style:normal;font-size:.6rem;
  min-width:1.25rem;height:1.25rem;padding:0 .3rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:rgba(194,182,182,.1);color:var(--silver);
  transition:background .18s ease,color .18s ease;
}
.admin-tab:hover{color:var(--white);background:rgba(255,255,255,.04)}
.admin-tab.is-active{background:var(--main);color:#fff}
.admin-tab.is-active em{background:rgba(255,255,255,.16);color:#fff}

/* Polls */
.poll-opts{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.poll-opt{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;min-height:42px;padding:.55rem .9rem;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(0,0,0,.25);color:var(--silver);
  font:inherit;font-size:.85rem;text-align:left;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,transform .15s ease;
}
.poll-opt span,.poll-opt b{position:relative;z-index:1}
.poll-opt b{font:600 .8rem var(--font-display);color:var(--white);white-space:nowrap}
.poll-opt i{
  position:absolute;inset:0 auto 0 0;z-index:0;
  background:linear-gradient(90deg,rgba(66,1,2,.55),rgba(66,1,2,.25));
  border-radius:inherit;
  transition:width .4s ease;
}
.poll-opt:hover:not(:disabled){border-color:var(--main);color:var(--white);transform:translateY(-1px)}
.poll-opt:disabled{cursor:default;opacity:.75}
.poll-opt.is-mine{border-color:var(--main);color:var(--white)}
.poll-opt.is-mine i{background:linear-gradient(90deg,rgba(66,1,2,.85),rgba(66,1,2,.4))}

/* Advanced activity chart */
.achart{display:flex;flex-direction:column;gap:.85rem}
.achart__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;
}
.achart__stats > div{
  padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.18));
}
.achart__stats label{
  display:block;font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.achart__stats b{
  display:block;margin-top:.3rem;font:600 1.05rem/1.1 var(--font-display);color:var(--white);
}
.achart__frame{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(66,1,2,.28), transparent 55%),
    linear-gradient(180deg,#141010,#0c0a0a);
  padding:.35rem .2rem .15rem;
}
.achart__svg{display:block;width:100%;height:auto;min-height:210px}
.achart__grid{stroke:rgba(194,182,182,.08);stroke-width:1}
.achart__ylabel,.achart__xlabel{
  fill:rgba(194,182,182,.55);font-size:11px;font-family:inherit;
}
.achart__ylabel{text-anchor:end}
.achart__xlabel{text-anchor:middle}
.achart__area{opacity:.95}
.achart__line{stroke:#c9a27a;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(201,162,122,.35))}
.achart__col{fill:url(#achartBar);opacity:.88;transition:opacity .18s ease,filter .18s ease}
.achart__bar.is-peak .achart__col{fill:url(#achartPeak);opacity:1;filter:drop-shadow(0 0 8px rgba(66,1,2,.55))}
.achart__bar.is-today .achart__col{opacity:1}
.achart__hit{fill:transparent;cursor:crosshair}
.achart__bar:hover .achart__col{opacity:1;filter:brightness(1.15)}
.achart__tip{
  position:absolute;z-index:2;pointer-events:none;
  min-width:120px;padding:.45rem .65rem;border-radius:10px;
  border:1px solid rgba(201,162,122,.35);background:rgba(12,8,8,.92);
  color:#fff;font-size:.75rem;font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.45);
  white-space:nowrap;
}
@media (max-width:720px){
  .achart__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Achievements */
.achieve-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.75rem;
}
.achieve{
  display:flex;gap:.8rem;align-items:flex-start;
  padding:.9rem;border:1px solid var(--line);border-radius:14px;
  background:rgba(0,0,0,.22);opacity:.72;transition:border-color .2s ease,opacity .2s ease,transform .2s ease;
}
.achieve.is-unlocked{
  opacity:1;border-color:rgba(201,162,122,.35);
  background:linear-gradient(145deg,rgba(66,1,2,.28),rgba(0,0,0,.2));
}
.achieve:hover{transform:translateY(-2px)}
.achieve__icon{
  width:2.4rem;height:2.4rem;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(194,182,182,.08);font-size:1.2rem;flex:0 0 auto;
}
.achieve.is-unlocked .achieve__icon{background:rgba(66,1,2,.45);box-shadow:0 0 0 1px rgba(201,162,122,.25)}
.achieve__body{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.achieve__body strong{color:var(--white);font-size:.95rem}
.achieve__body span{color:var(--muted);font-size:.78rem;line-height:1.35}
.achieve__body em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--silver)}
.achieve.is-unlocked .achieve__body em{color:#c9a27a}
.achieve__bar{
  height:4px;margin:.35rem 0 .15rem;border-radius:99px;background:rgba(194,182,182,.1);overflow:hidden;
}
.achieve__bar i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#420102,#8b1518,#c9a27a);
}

/* Banner studio */
/* Onboarding — full-bleed atmosphere, centered card */
.onboard-screen{
  position:relative;
  justify-content:center;
  align-items:center;
  padding:2.5rem 1.25rem;
  overflow:auto;
  background:
    linear-gradient(180deg, rgba(10,6,6,.72) 0%, rgba(12,8,8,.88) 45%, #0c0a0a 100%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(66,1,2,.55), transparent 70%),
    url("../assets/brand/banner-bg.png") center/cover no-repeat,
    var(--ink);
}
.onboard-screen > *{max-width:none}
.onboard-shell{
  width:min(640px, 100%);
  margin:0 auto;
  padding:2rem 1.75rem 1.75rem;
  border:1px solid rgba(194,182,182,.14);
  border-radius:22px;
  background:
    linear-gradient(165deg, rgba(36,28,28,.92), rgba(16,12,12,.94));
  box-shadow:
    0 0 0 1px rgba(66,1,2,.25) inset,
    0 28px 80px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  text-align:left;
  animation:onboardIn .55s var(--ease) both;
}
@keyframes onboardIn{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}
.onboard-brand{
  text-align:center;
  margin-bottom:1.5rem;
  padding-bottom:1.35rem;
  border-bottom:1px solid var(--line);
}
.onboard-brand .auth-logo{
  width:96px;height:96px;margin:0 auto 1rem;
}
.onboard-brand h1{
  font-size:clamp(2.4rem, 6vw, 3.2rem);
  margin:0 0 .45rem;
  letter-spacing:.04em;
}
.onboard-lead{
  margin:0 auto;
  max-width:34ch;
  color:var(--silver) !important;
  font-size:.95rem;
  line-height:1.5;
}
.onboard-form{display:flex;flex-direction:column;gap:1.1rem;width:100%}
.onboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem 1rem;
}
.onboard-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.onboard-field--full{grid-column:1 / -1}
.onboard-field label{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;
}
.onboard-field .opt{
  font-size:.62rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(143,132,132,.75);
}
.onboard-form .field{
  width:100%;
  min-height:44px;
  border-radius:12px;
  background-color:rgba(0,0,0,.35);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.onboard-form .field:focus{
  border-color:rgba(201,162,122,.45);
  box-shadow:0 0 0 3px rgba(66,1,2,.35);
}
.onboard-form textarea.field{min-height:96px;resize:vertical}
.onboard-submit{
  width:100%;
  margin-top:.15rem;
  min-height:48px;
  justify-content:center;
}
@media (max-width:620px){
  .onboard-shell{padding:1.5rem 1.15rem 1.25rem;border-radius:18px}
  .onboard-grid{grid-template-columns:1fr}
  .onboard-field--full{grid-column:auto}
}

/* Celebrations / live */
.celeb-strip{display:flex;flex-direction:column;gap:.55rem}
.celeb-chip{
  display:flex;align-items:center;gap:.75rem;
  padding:.55rem .2rem;
}
.celeb-chip strong{display:block;color:var(--white)}
.celeb-chip span{color:var(--muted);font-size:.8rem}
.live-list{display:flex;flex-direction:column;gap:.65rem}
.live-list .highlight-card{align-items:center}

/* Handbook */
.handbook{display:flex;flex-direction:column;gap:1rem}
.handbook__sec{
  padding:1.15rem 1.2rem;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18));
}
.handbook__sec h3{
  margin:0 0 .65rem;font:600 1.25rem/1.2 var(--font-display);color:var(--white);
}
.handbook__body{color:var(--silver);font-size:.92rem;line-height:1.55}
.handbook__body p{margin:0 0 .7rem}
.handbook__body p:last-child{margin-bottom:0}
.handbook__body ul{margin:.35rem 0 .7rem 1.1rem;padding:0}
.handbook__body li{margin:.2rem 0}
.handbook__body h3,.handbook__body h4{margin:.8rem 0 .4rem;color:var(--white);font-family:var(--font-display)}
.hb-field{
  border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem 1rem;margin:0 0 1rem;
}
.hb-field legend{
  padding:0 .4rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);
}
.admin-layout--full{grid-column:1 / -1}

.banner-block{margin-top:1.75rem}
.banner-studio{display:flex;flex-direction:column;gap:.85rem}
.banner-studio canvas{
  width:100%;height:auto;aspect-ratio:3/1;border-radius:14px;
  border:1px solid var(--line);background:#0c0a0a;display:block;
}
.banner-studio__actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
tr.you-row td{background:rgba(66,1,2,.18)}

/* Shared buttons */
.btn-primary{
  height:42px;padding:0 1.2rem;border-radius:999px;border:1px solid var(--main);
  background:var(--main);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn-primary:hover{filter:brightness(1.18);box-shadow:0 8px 22px rgba(66,1,2,.5)}
.btn-primary:active{transform:scale(.98)}
.chip-btn{
  height:32px;padding:0 .85rem;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--silver);font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease;
}
.chip-btn:hover{border-color:rgba(194,182,182,.4);color:#fff;background:rgba(194,182,182,.06)}
.chip-btn:active{transform:scale(.96)}
.chip-btn--danger{color:#e0a0a0;border-color:rgba(224,160,160,.35)}
.chip-btn--danger:hover{border-color:rgba(224,160,160,.6);color:#f3c1c1}

/* List toolbars (filters + sorter) */
.list-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:.85rem;flex-wrap:wrap;margin-bottom:1rem;
}
.list-toolbar .app-filters{margin-bottom:0}
.sorter{
  display:inline-flex;align-items:center;gap:.55rem;color:var(--muted);
  font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.sorter .field{height:34px;width:auto;min-width:170px;font-size:.78rem}

/* Admin form polish */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.form-grid label{display:block;margin-bottom:.35rem}
.field--file{padding:.45rem .6rem;height:auto;cursor:pointer}
.field--file::file-selector-button{
  margin-right:.7rem;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--silver);font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.admin-side{display:flex;flex-direction:column}
.quick-links{margin:0}

/* RSVP */
.rsvp-row{display:flex;align-items:center;gap:.7rem;margin-top:.85rem;flex-wrap:wrap}
.rsvp-avatars{display:flex}
.rsvp-avatars img{
  width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:2px solid var(--panel);background:var(--charcoal);
  margin-left:-8px;
}
.rsvp-avatars img:first-child{margin-left:0}
.rsvp-row .chip-btn{margin-left:auto}
.chip-btn--go{background:var(--main);border-color:var(--main);color:#fff}
.chip-btn--go:hover{filter:brightness(1.18);color:#fff;background:var(--main)}

/* Overview announcements — only rendered when posts exist */
.ov-announces{display:flex;flex-direction:column;gap:.65rem}
.ov-announce{
  padding:1rem 1.15rem 1.1rem;
  border:1px solid rgba(194,182,182,.14);
  border-left:3px solid var(--main-lift);
  border-radius:12px;
  background:
    linear-gradient(115deg, rgba(66,1,2,.32), transparent 42%),
    rgba(0,0,0,.28);
}
.ov-announce__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;margin-bottom:.45rem;
}
.ov-announce__eyebrow{
  margin:0;font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);
}
.ov-announce__head span{color:var(--muted);font-size:.72rem}
.ov-announce strong{
  display:block;color:#fff;font:700 1.15rem/1.2 var(--font-display);
  letter-spacing:.02em;
}
.ov-announce p{
  margin:.45rem 0 0;color:var(--silver);font-size:.9rem;line-height:1.5;
  white-space:pre-wrap;
}

/* Overview spotlights — latest delivery + driver of the month */
.ov-spotlights{
  display:grid;grid-template-columns:1.05fr .95fr;gap:1.15rem;
}
.ov-spot{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:1rem;
  padding:1.2rem 1.25rem 1.25rem;
  border:1px solid var(--line);border-radius:16px;
  background:
    linear-gradient(145deg, rgba(66,1,2,.28), transparent 55%),
    var(--panel);
  transition:border-color .2s ease, transform .2s var(--ease);
}
.ov-spot:hover{border-color:rgba(194,182,182,.28);transform:translateY(-2px)}
.ov-spot--dotm{
  background:
    linear-gradient(160deg, rgba(201,162,122,.14), transparent 50%),
    linear-gradient(145deg, rgba(66,1,2,.22), transparent 60%),
    var(--panel);
}
.ov-spot__head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.ov-spot__eyebrow{
  margin:0;color:var(--muted);
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.ov-spot__time,.ov-spot__badge{
  height:24px;padding:0 .65rem;border-radius:999px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line);background:rgba(0,0,0,.25);
  color:var(--silver);font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
}
.ov-spot__badge{
  color:#c9a27a;border-color:rgba(201,162,122,.35);background:rgba(201,162,122,.1);
}
.ov-spot__body{display:flex;align-items:center;gap:1rem;min-width:0}
.ov-spot__body .avatar{width:56px;height:56px;flex-shrink:0}
.ov-spot__crown{position:relative;flex-shrink:0}
.ov-spot__crown .avatar{
  width:64px;height:64px;border:2px solid rgba(201,162,122,.65);
  box-shadow:0 0 0 4px rgba(66,1,2,.35), 0 12px 28px rgba(0,0,0,.35);
}
.ov-spot__crown::after{
  content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:36px;height:3px;border-radius:99px;background:#c9a27a;
  opacity:.75;
}
.ov-spot__main{min-width:0;display:grid;gap:.25rem}
.ov-spot__route,.ov-spot__name{
  color:#fff;font:600 1.25rem/1.2 var(--font-display);
  letter-spacing:.03em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ov-spot__by{margin:0;color:var(--muted);font-size:.82rem}
.ov-spot__chips{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem;
}
.ov-spot__chips span{
  height:26px;padding:0 .6rem;border-radius:8px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line);background:rgba(0,0,0,.22);
  color:var(--silver);font-size:.7rem;font-weight:650;
}
.ov-spot__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;
  padding-top:.85rem;border-top:1px solid var(--line);
}
.ov-spot__stats div{
  padding:.65rem .7rem;border-radius:10px;
  border:1px solid var(--line);background:rgba(0,0,0,.2);
}
.ov-spot__stats label{
  display:block;margin-bottom:.3rem;color:var(--muted);
  font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.ov-spot__stats b{
  color:#fff;font:600 1.05rem/1 var(--font-display);
  font-variant-numeric:tabular-nums;
}
@media (max-width:960px){
  .ov-spotlights{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ov-spot__stats{grid-template-columns:1fr}
  .ov-spot__route,.ov-spot__name{font-size:1.1rem;white-space:normal}
}

/* Legacy DOTM (if referenced elsewhere) */
.dotm{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.dotm__badge{position:relative}
.dotm__badge .avatar{width:56px;height:56px;border:2px solid #c48a8a;box-shadow:0 0 18px rgba(66,1,2,.6)}
.dotm__info{display:grid;gap:.15rem}
.dotm__info strong{color:#fff;font-size:1.1rem}
.dotm__info span{color:var(--muted);font-size:.78rem}
.dotm__stats{display:flex;gap:1.6rem;margin-left:auto;flex-wrap:wrap}
.dotm__stats label{display:block;color:var(--muted);font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem}
.dotm__stats b{font:500 1.15rem/1 var(--font-display);color:var(--white)}
@media (max-width:640px){.dotm__stats{margin-left:0}}

/* Convoy banner */
.convoy-banner{display:block;margin:-1rem -1.1rem .85rem;border-radius:12px 12px 0 0;overflow:hidden;border-bottom:1px solid var(--line)}
.convoy-banner img{display:block;width:100%;max-height:180px;object-fit:cover}
.convoy-card{overflow:hidden}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .list-toolbar{align-items:flex-start;flex-direction:column}
}
.account{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:inherit}
.account:hover strong{color:#fff}
.hub-main{position:relative}
/* Profile settings studio */
.ps{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:1.1rem;
}
.ps[hidden]{display:none!important}
.ps__shade{
  position:absolute;inset:0;
  background:rgba(4,3,3,.78);
  backdrop-filter:blur(8px);
  animation:fadeShade .22s ease both;
}
@keyframes fadeShade{from{opacity:0}to{opacity:1}}
.ps__shell{
  position:relative;z-index:1;
  width:min(860px,100%);
  height:min(640px,90vh);
  display:grid;
  grid-template-columns:230px 1fr;
  border:1px solid rgba(194,182,182,.14);
  border-radius:20px;
  overflow:hidden;
  background:#141010;
  box-shadow:0 40px 100px rgba(0,0,0,.65);
  animation:modalIn .3s var(--ease) both;
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}
.ps__rail{
  display:flex;flex-direction:column;
  padding:1.25rem 1rem 1rem;
  background:
    linear-gradient(165deg, rgba(66,1,2,.55) 0%, transparent 42%),
    linear-gradient(180deg,#1c1515,#100d0d);
  border-right:1px solid rgba(194,182,182,.1);
}
.ps__identity{text-align:center;padding:0 .35rem .9rem}
.ps__avatar-wrap{position:relative;width:76px;height:76px;margin:0 auto .75rem}
.ps__avatar-wrap img{
  width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(201,162,122,.4);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.ps__pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(201,162,122,.25);
  animation:psPulse 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes psPulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.06);opacity:.15}
}
.ps__identity strong{
  display:block;color:#fff;font:600 1.05rem/1.15 var(--font-display);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:.2rem;
}
.ps__identity > span{
  display:block;color:var(--muted);font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.85rem;
}
.ps__chips{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.ps__chip{
  display:grid;gap:.15rem;padding:.4rem .2rem;
  border-radius:10px;background:rgba(0,0,0,.28);
  border:1px solid rgba(194,182,182,.1);
}
.ps__chip em{
  font-style:normal;font-size:.52rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.ps__chip b{font:600 .78rem/1 var(--font-display);color:var(--white)}
.ps__nav{display:grid;gap:.3rem;margin-top:.35rem}
.ps__nav-btn{
  display:flex;align-items:center;gap:.65rem;
  height:42px;padding:0 .85rem;border:0;border-radius:11px;
  background:transparent;color:var(--muted);cursor:pointer;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.ps__nav-btn svg{
  width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.ps__nav-btn:hover{color:var(--white);background:rgba(255,255,255,.04)}
.ps__nav-btn.is-active{
  color:#fff;background:var(--main);
  box-shadow:0 8px 20px rgba(66,1,2,.35);
}
.ps__logout{
  margin-top:auto;display:block;text-align:center;text-decoration:none;
  padding:.75rem;border-radius:11px;
  border:1px solid rgba(194,182,182,.16);
  color:var(--silver);font-size:.65rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ps__logout:hover{color:#fff;border-color:rgba(224,160,160,.4);background:rgba(66,1,2,.35)}
.ps__main{display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#1a1515,#121010)}
.ps__top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.35rem 1rem;border-bottom:1px solid rgba(194,182,182,.1);
}
.ps__top .eyebrow{margin:0 0 .2rem}
.ps__top h2{
  margin:0;font:600 1.45rem/1.1 var(--font-display);
  color:#fff;letter-spacing:.03em;text-transform:uppercase;
}
.ps__close,.profile-modal__close{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--silver);cursor:pointer;
  display:grid;place-items:center;padding:0;font-size:1.35rem;line-height:1;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ps__close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.ps__close:hover,.profile-modal__close:hover{
  color:#fff;border-color:rgba(194,182,182,.4);background:rgba(66,1,2,.45);
}
.ps__body{flex:1;overflow:auto;padding:1.15rem 1.35rem 1.4rem}
.profile-pane[hidden]{display:none!important}
.profile-pane.is-active{animation:psPane .22s var(--ease) both}
@keyframes psPane{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.ps__lead{margin:0 0 1.15rem;color:var(--muted);font-size:.9rem;line-height:1.45;max-width:38ch}
.ps-links{
  display:grid;gap:0;
  border:1px solid rgba(194,182,182,.12);
  border-radius:16px;
  background:rgba(0,0,0,.2);
  overflow:hidden;
}
.ps-link{
  display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:.85rem;
  padding:.85rem 1rem;text-decoration:none;
  border-bottom:1px solid rgba(194,182,182,.08);
  transition:background .16s ease;
}
.ps-link:last-child{border-bottom:0}
.ps-link:hover{background:rgba(255,255,255,.035)}
.ps-link__logo{
  width:36px;height:36px;border-radius:9px;display:block;
  object-fit:cover;object-position:center;
  background:#0e0c0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.ps-link__text{display:grid;gap:.12rem;min-width:0}
.ps-link__text strong{color:#fff;font-size:.92rem;font-weight:650}
.ps-link__text small{color:var(--muted);font-size:.74rem}
.ps-link__go{
  color:var(--muted);font-size:.95rem;line-height:1;
  transition:color .16s ease,transform .16s ease;
}
.ps-link:hover .ps-link__go{color:#fff;transform:translateX(2px)}
.ps-section{margin-bottom:1.25rem}
.ps-section h3{
  margin:0 0 .65rem;font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.ps-field{display:flex;flex-direction:column;gap:.35rem;margin:0}
.ps-field > span{
  font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ps-field .field{width:100%}
.field--native{
  appearance:none;-webkit-appearance:none;
  padding-right:2.1rem;
  background-color:#1a1818;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238f8484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat !important;
  background-position:right .85rem center !important;
  background-size:12px 8px !important;
  cursor:pointer;
}
.field--native:focus{background-color:#1e1a1a}
.ps-unit-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.ps-unit{display:grid;gap:.4rem}
.ps-unit > span{
  font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ps-seg{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:0;padding:3px;border-radius:12px;
  background:rgba(0,0,0,.35);border:1px solid rgba(194,182,182,.12);
}
.ps-seg button{
  height:36px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.ps-seg button:hover{color:var(--white)}
.ps-seg button.is-active{
  background:var(--main);color:#fff;
  box-shadow:0 6px 14px rgba(66,1,2,.35);
}
.ps-toggles{
  display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
}
.ps-toggle{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  margin:0;padding:.85rem .9rem;border-radius:14px;cursor:pointer;
  border:1px solid rgba(194,182,182,.1);
  background:rgba(0,0,0,.22);
  transition:border-color .18s ease,background .18s ease;
}
.ps-toggle:hover{border-color:rgba(194,182,182,.22);background:rgba(0,0,0,.3)}
.ps-toggle span{display:grid;gap:.2rem;min-width:0}
.ps-toggle strong{color:var(--silver);font-size:.84rem;font-weight:650}
.ps-toggle small{color:var(--muted);font-size:.72rem;line-height:1.35}
.ps-toggle input{
  appearance:none;-webkit-appearance:none;
  position:relative;flex:0 0 auto;
  width:40px;height:22px;margin:.15rem 0 0;
  border-radius:999px;border:1px solid var(--line);
  background:rgba(0,0,0,.35);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ps-toggle input::after{
  content:"";position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;background:var(--muted);
  transition:transform .22s cubic-bezier(.3,1.4,.6,1),background .22s ease;
}
.ps-toggle input:checked{
  background:var(--main);border-color:var(--main);
  box-shadow:0 0 12px rgba(66,1,2,.45);
}
.ps-toggle input:checked::after{transform:translateX(18px);background:#fff}
.ps-form{display:flex;flex-direction:column;gap:0;min-height:100%}
.ps-form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem .85rem;
}
.ps-field--full{grid-column:1 / -1}
.ps-form textarea.field{min-height:92px;height:auto;resize:vertical}
.ps-form-foot{margin-top:1.1rem;display:flex;justify-content:flex-end}
.ps-form-foot .btn-primary{min-width:160px;min-height:44px}
@media (max-width:720px){
  .ps__shell{
    grid-template-columns:1fr;
    height:auto;max-height:92vh;
  }
  .ps__rail{
    border-right:0;border-bottom:1px solid rgba(194,182,182,.1);
    padding:1rem;
  }
  .ps__identity{
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:.85rem;row-gap:.15rem;text-align:left;align-items:center;
    padding-bottom:.75rem;
  }
  .ps__avatar-wrap{grid-row:1 / 3;margin:0}
  .ps__chips{grid-column:1 / -1;margin-top:.65rem}
  .ps__nav{grid-template-columns:repeat(3,1fr);gap:.3rem}
  .ps__nav-btn{justify-content:center;padding:0 .4rem;height:40px;font-size:.6rem}
  .ps__nav-btn span{display:none}
  .ps__logout{margin-top:.65rem}
  .ps-unit-row,.ps-toggles,.ps-form-grid{grid-template-columns:1fr}
}
.hub.compact .stat-card{min-height:88px;padding:.85rem}
.hub.compact .stat-card strong{font-size:1.25rem;margin-top:.45rem}
.app-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.filter-chip{
  height:32px;padding:0 .85rem;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-size:.65rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease;
}
.filter-chip:hover{color:var(--silver);border-color:rgba(194,182,182,.35);background:rgba(194,182,182,.05)}
.filter-chip.is-active{background:var(--main);border-color:var(--main);color:#fff;box-shadow:0 6px 16px rgba(66,1,2,.4)}
.app-card{padding:1rem;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.2);margin-bottom:.7rem}
.app-card__top{display:flex;justify-content:space-between;gap:1rem;align-items:start;margin-bottom:.55rem}
.app-card strong{color:#fff;font-size:1.05rem}
.app-card__meta{margin:.35rem 0;color:var(--silver);font-size:.8rem}
.app-card__about{margin:.55rem 0 0;color:var(--muted);font-size:.85rem;white-space:pre-wrap;line-height:1.45}
.app-card .status--accepted{color:#9dcea0;border-color:rgba(157,206,160,.35)}
.app-card .status--rejected{color:#e0a0a0;border-color:rgba(224,160,160,.35)}
.app-card .status--archived{color:var(--muted)}
.app-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.app-actions button{height:34px;padding:0 .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--silver);font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.app-actions button:disabled{opacity:.5;cursor:wait}
.app-actions button.accept{background:var(--main);border-color:var(--main);color:#fff}
.app-actions button.reject{color:#e0a0a0;border-color:rgba(224,160,160,.35)}
.app-card--full{padding:1.15rem 1.2rem}
.app-photos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
  margin-top:.85rem;
}
.app-photo{
  display:block;
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#120f0f;
}
.app-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}
.app-photo:hover img{transform:scale(1.04)}
.event .app-actions button,
.event > .app-card__top > button{
  height:32px;padding:0 .8rem;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--silver);font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.event > .app-card__top > button.reject{color:#e0a0a0;border-color:rgba(224,160,160,.35)}
@media (max-width:720px){
  .app-photos{grid-template-columns:1fr}
}

/* Events calendar */
.ecal__views{
  display:flex;gap:0;margin:0 0 1rem;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  width:fit-content;max-width:100%;
}
.ecal__views .admin-tab{
  border:0;border-right:1px solid var(--line);border-radius:0;
  min-width:110px;
}
.ecal__views .admin-tab:last-child{border-right:0}
.ecal{
  display:flex;flex-direction:column;gap:.85rem;
}
.ecal__toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.ecal__nav{display:flex;align-items:center;gap:.55rem}
.ecal__nav-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--silver);font-size:1.25rem;line-height:1;
  cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.ecal__nav-btn:hover{color:#fff;border-color:rgba(194,182,182,.35);background:rgba(66,1,2,.4)}
.ecal__month{
  margin:0;min-width:11rem;text-align:center;
  font:600 1.2rem/1.1 var(--font-display);color:#fff;
  letter-spacing:.03em;text-transform:uppercase;
}
.ecal__meta{display:flex;align-items:center;gap:.75rem}
.ecal__legend{
  display:flex;gap:1rem;flex-wrap:wrap;
  color:var(--muted);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.ecal__legend span{display:inline-flex;align-items:center;gap:.4rem}
.ecal__dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;
}
.ecal__dot--convoy{background:var(--main)}
.ecal__dot--tmp{background:#8a7a6a}
.ecal__weekdays{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;
}
.ecal__dow{
  text-align:center;font-size:.62rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:.2rem 0;
}
.ecal__grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;
}
.ecal__cell{
  min-height:92px;padding:.45rem .4rem .5rem;
  border:1px solid rgba(194,182,182,.1);
  border-radius:12px;background:rgba(0,0,0,.2);
  color:inherit;font:inherit;text-align:left;
  display:flex;flex-direction:column;gap:.35rem;
  cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.ecal__cell--empty{
  min-height:92px;border:1px dashed rgba(194,182,182,.06);
  background:transparent;pointer-events:none;
}
.ecal__cell:hover{border-color:rgba(194,182,182,.28);background:rgba(255,255,255,.03)}
.ecal__cell.is-today{border-color:rgba(201,162,122,.4)}
.ecal__cell.is-selected{
  border-color:var(--main);
  background:rgba(66,1,2,.28);
  box-shadow:inset 0 0 0 1px rgba(66,1,2,.35);
}
.ecal__cell.has-events .ecal__num{color:#fff}
.ecal__num{
  font:600 .85rem/1 var(--font-display);color:var(--silver);
  font-variant-numeric:tabular-nums;
}
.ecal__cell.is-today .ecal__num{
  display:inline-grid;place-items:center;
  width:1.55rem;height:1.55rem;border-radius:50%;
  background:var(--main);color:#fff;
}
.ecal__chips{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.ecal__chip{
  display:block;padding:.18rem .35rem;border-radius:6px;
  font-size:.62rem;font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ecal__chip--convoy{
  background:rgba(66,1,2,.55);color:#fff;
}
.ecal__chip--tmp{
  background:rgba(194,182,182,.12);color:var(--silver);
}
.ecal__more{
  font-size:.6rem;font-weight:800;color:var(--muted);
  letter-spacing:.04em;
}
.ecal__detail{
  margin-top:.35rem;padding-top:.95rem;
  border-top:1px solid rgba(194,182,182,.12);
}
.ecal__detail-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.75rem;
}
.ecal__detail-head strong{
  font:600 1.05rem/1.2 var(--font-display);color:#fff;
  letter-spacing:.03em;text-transform:uppercase;
}
.ecal__list-block{margin-top:1.15rem}
.ecal__list-sub{
  margin:0 0 .65rem;font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:720px){
  .ecal__cell{min-height:72px;padding:.35rem .3rem}
  .ecal__chip{font-size:.58rem}
  .ecal__month{min-width:9rem;font-size:1.05rem}
}
@media (max-width:520px){
  .ecal__chip,.ecal__more{display:none}
  .ecal__cell.has-events .ecal__num::after{
    content:"";display:block;width:6px;height:6px;margin-top:.25rem;
    border-radius:50%;background:var(--main);
  }
  .ecal__cell{min-height:48px;align-items:center}
  .ecal__cell--empty{min-height:48px}
}

/* ── Admin Operations studio ── */
.ops{display:flex;flex-direction:column;gap:1.35rem}
.ops__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.ops__head .card-title{margin:.15rem 0 0;color:#fff}
.ops__sub{margin:.35rem 0 0;color:var(--muted);font-size:.88rem;max-width:48ch}
.ops-live{
  display:inline-flex;align-items:center;gap:.35rem;
  height:22px;padding:0 .55rem;border-radius:999px;
  border:1px solid rgba(185,208,174,.28);background:rgba(185,208,174,.1);
  color:var(--green);font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.ops-live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px rgba(185,208,174,.18);
}
.ops-live--lg{height:28px;padding:0 .85rem;font-size:.62rem;margin-top:.15rem}

.ops__metrics{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;
}
.ops-metric{
  position:relative;overflow:hidden;
  padding:1rem 1.05rem 1.05rem;
  border:1px solid var(--line);border-radius:12px;
  background:
    linear-gradient(165deg, rgba(66,1,2,.22), transparent 60%),
    var(--panel);
}
.ops-metric__top{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.55rem}
.ops-metric label{
  color:var(--muted);font-size:.62rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.ops-metric strong{
  display:block;color:#fff;font:600 1.85rem/1 var(--font-display);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
}

.ops__shell{
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.15rem;align-items:start;
  min-height:520px;
}
.ops__rail{
  position:sticky;top:1rem;
  display:flex;flex-direction:column;gap:1.15rem;
  padding:1rem .85rem 1rem;
  border:1px solid var(--line);border-radius:14px;
  background:
    linear-gradient(180deg, rgba(66,1,2,.16), transparent 40%),
    rgba(18,16,16,.92);
}
.ops__group{display:flex;flex-direction:column;gap:.2rem}
.ops__group > p{
  margin:0 0 .4rem .55rem;color:var(--muted);
  font-size:.58rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.ops__nav{
  display:flex;align-items:center;justify-content:space-between;gap:.55rem;
  width:100%;min-height:38px;padding:.45rem .7rem;
  border:0;border-radius:9px;background:transparent;
  color:var(--silver);font:inherit;font-size:.84rem;text-align:left;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.ops__nav em{
  font-style:normal;min-width:1.4rem;height:1.35rem;padding:0 .35rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;background:rgba(194,182,182,.1);color:var(--muted);
  font-size:.65rem;font-weight:700;
}
.ops__nav:hover{background:rgba(255,255,255,.04);color:#fff}
.ops__nav.is-active{
  background:rgba(66,1,2,.55);color:#fff;
  box-shadow:inset 2px 0 0 #c9a27a;
}
.ops__nav.is-active em{background:rgba(255,255,255,.14);color:#fff}
.ops__rail-foot{
  margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.35rem;
}
.ops__rail-foot a{
  color:var(--muted);text-decoration:none;font-size:.72rem;padding:.25rem .55rem;
  border-radius:7px;transition:color .15s ease,background .15s ease;
}
.ops__rail-foot a:hover{color:#fff;background:rgba(255,255,255,.04)}

.ops__main{min-width:0}
.ops-split{
  display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.2fr);
  gap:1.1rem;align-items:start;
}
.ops-split--solo{grid-template-columns:1fr}
.ops-card{
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.ops-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.95rem 1.15rem;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.18);
}
.ops-card__head h3{
  margin:0;color:#fff;font:600 1rem/1.2 var(--font-display);
  letter-spacing:.04em;text-transform:uppercase;
}
.ops-card__tag{
  height:22px;padding:0 .55rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(194,182,182,.08);
  color:var(--muted);font-size:.58rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;
}
.ops-card__body{padding:1.15rem 1.2rem 1.25rem}
.ops-card .event{margin-bottom:.7rem}
.ops-card .event:last-child{margin-bottom:0}

.ops-rows{display:flex;flex-direction:column}
.ops-row{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.9rem 0;border-bottom:1px solid var(--line);
}
.ops-row:last-child{border-bottom:0;padding-bottom:0}
.ops-row:first-child{padding-top:0}
.ops-row__ico{
  flex:0 0 36px;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(66,1,2,.28);color:#c9a27a;
}
.ops-row__ico svg{width:16px;height:16px}
.ops-row__main{flex:1;min-width:0;display:grid;gap:.15rem}
.ops-row__main strong{color:#fff;font-size:.95rem;font-weight:650}
.ops-row__main span{color:var(--muted);font-size:.75rem}
.ops-row__main p{
  margin:.35rem 0 0;color:var(--silver);font-size:.82rem;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;
}
.ops-row__main .subtle-link{margin-top:.2rem;display:inline-block;word-break:break-all}
.ops-row .chip-btn{margin-left:auto;flex-shrink:0}
.ops-row--stack .ops-row__main{padding-right:.25rem}
.ops-scroll{max-height:640px;overflow-y:auto;padding-right:.25rem}
.ops-scroll::-webkit-scrollbar{width:8px}
.ops-scroll::-webkit-scrollbar-thumb{background:rgba(194,182,182,.18);border-radius:99px}

.ops .admin-form{gap:.45rem}
.ops .admin-form .btn-primary,
.ops .admin-form button[type="submit"]{
  margin-top:.15rem;border-radius:8px;letter-spacing:.1em;
}
.ops .filter-chip em{
  font-style:normal;margin-left:.2rem;opacity:.75;font-weight:700;
}
.ops .hb-field{
  margin:0 0 1rem;padding:1rem;border:1px solid var(--line);border-radius:12px;
  background:rgba(0,0,0,.18);
}
.ops .hb-field legend{
  padding:0 .4rem;color:var(--muted);font-size:.62rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}

@media (max-width:1200px){
  .ops__metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .ops__shell{grid-template-columns:1fr}
  .ops__rail{position:static;flex-direction:row;flex-wrap:wrap;gap:.65rem;align-items:flex-start}
  .ops__group{flex:1 1 140px;min-width:140px}
  .ops__rail-foot{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;margin-top:0}
  .ops-split{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ops__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-metric strong{font-size:1.5rem}
}

/* Admin tab workspace */
.ops-pane{display:flex;flex-direction:column;gap:1rem}
.ops-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;
}
.ops-kpi{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:rgba(0,0,0,.22);
}
.ops-kpi span{
  color:var(--muted);font-size:.6rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.ops-kpi b{color:#fff;font:600 1.15rem/1 var(--font-display);font-variant-numeric:tabular-nums}

.ops-workspace{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.95fr);
  gap:1rem;align-items:start;
}
.ops-card--main{min-width:0}
.ops-card--compose{
  position:sticky;top:.75rem;
  align-self:start;
}
.ops-card--compose .ops-card__head{padding:.7rem .95rem}
.ops-card--compose .ops-card__body{padding:.85rem .95rem .95rem}
.ops-card--solo{width:100%}

.ops-sec{
  padding:0 0 .65rem;margin:0 0 .65rem;
  border-bottom:1px solid var(--line);
}
.ops-sec:last-of-type{border-bottom:0;margin-bottom:.2rem;padding-bottom:.15rem}
.ops-sec__label{
  margin:0 0 .4rem;color:var(--muted);
  font-size:.55rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.ops-sec__fields{display:grid;gap:.45rem}
.ops-field{display:grid;gap:.2rem;min-width:0}
.ops-compose{gap:.35rem!important}
.ops-compose label.ops-field{
  text-transform:none;letter-spacing:normal;font-weight:inherit;
  font-size:inherit;color:inherit;
}
.ops-field > span{
  color:var(--muted);font-size:.58rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.ops-compose .field,
.ops-compose .df-select__btn{
  height:34px;padding:0 .7rem;font-size:.8rem;border-radius:8px;
}
.ops-compose textarea.field{
  height:auto;min-height:56px;padding:.5rem .7rem;font-size:.8rem;
}
.ops-compose .field--file{
  height:auto;min-height:34px;padding:.3rem .45rem;font-size:.72rem;
}
.ops-compose .field--file::file-selector-button{
  padding:.3rem .65rem;font-size:.58rem;
}
.ops-compose .form-grid{gap:.45rem}
.ops-compose .form-grid .ops-field{margin:0}
.ops-compose__foot{
  display:flex;flex-direction:column;gap:.4rem;padding-top:.15rem;
}
.ops-compose__foot .btn-primary,
.ops-compose__foot button[type="submit"]{
  height:36px;margin-top:0;border-radius:8px;font-size:.65rem;
}
.ops-hint{
  margin:0 0 1rem;padding:.75rem .9rem;border-radius:10px;
  border:1px solid var(--line);background:rgba(0,0,0,.2);
  color:var(--muted);font-size:.8rem;line-height:1.45;
}
.ops-hint code{
  color:#c9a27a;font-size:.78rem;
}

.ops-empty{
  display:grid;place-items:center;text-align:center;gap:.45rem;
  min-height:280px;padding:2.5rem 1.5rem;
  border:1px dashed rgba(194,182,182,.18);border-radius:12px;
  background:rgba(0,0,0,.14);
}
.ops-empty strong{
  color:#fff;font:600 1.05rem/1.2 var(--font-display);
  letter-spacing:.04em;text-transform:uppercase;
}
.ops-empty p{
  margin:0;max-width:34ch;color:var(--muted);font-size:.84rem;line-height:1.5;
}

.ops-scroll--list{max-height:min(70vh,720px)}
.ops-items{display:flex;flex-direction:column;gap:.75rem}

.ops-item{
  padding:1rem 1.05rem;border:1px solid var(--line);border-radius:12px;
  background:rgba(0,0,0,.2);
}
.ops-item .convoy-banner{
  margin:-1rem -1.05rem .85rem;border-radius:12px 12px 0 0;
}
.ops-item__top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  margin-bottom:.55rem;
}
.ops-item__title{display:grid;gap:.2rem;min-width:0}
.ops-item__title strong{
  color:#fff;font-size:1.02rem;font-weight:700;line-height:1.25;
}
.ops-item__title span{color:var(--silver);font-size:.8rem}
.ops-item__meta{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.55rem;
}
.ops-item__meta span{
  height:24px;padding:0 .55rem;border-radius:999px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line);background:rgba(194,182,182,.06);
  color:var(--muted);font-size:.65rem;font-weight:700;
}
.ops-item__desc{
  margin:0 0 .55rem;color:var(--silver);font-size:.82rem;line-height:1.45;
}
.ops-item__links{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.55rem}
.ops-item__actions{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem;padding-top:.7rem;
  border-top:1px solid var(--line);
}
.ops-item__actions button{
  height:32px;padding:0 .85rem;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--silver);font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.ops-item__actions button:hover{color:#fff;border-color:rgba(194,182,182,.35)}
.ops-item__actions button.reject{color:#e0a0a0;border-color:rgba(224,160,160,.3)}

.ops-badge{
  flex-shrink:0;height:24px;padding:0 .6rem;border-radius:999px;
  display:inline-flex;align-items:center;
  font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--silver);background:rgba(194,182,182,.08);
}
.ops-badge--published{
  color:var(--green);border-color:rgba(185,208,174,.3);background:rgba(185,208,174,.1);
}
.ops-badge--cancelled{
  color:#e0a0a0;border-color:rgba(224,160,160,.3);background:rgba(224,160,160,.08);
}
.ops-badge--done{
  color:var(--amber);border-color:rgba(224,189,128,.28);background:rgba(224,189,128,.08);
}

@media (max-width:1100px){
  .ops-workspace{grid-template-columns:1fr}
  .ops-card--compose{position:static}
  .ops-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ops-kpis{grid-template-columns:1fr 1fr}
}
