/* Benytra — shared theme (Lumina Slate, refined) */

* { box-sizing: border-box; }
body { position: relative; }

/* Subtle depth mesh behind the whole app instead of a flat black canvas */
.app-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(192, 193, 255, 0.07), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(137, 206, 255, 0.05), transparent 55%),
    #0b1326;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2d3449; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #31394d; }

.glass { background: rgba(11, 19, 38, 0.72); backdrop-filter: blur(14px); }

.num { font-variant-numeric: tabular-nums; }

/* Sidebar nav */
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 8px;
  color: #a9a7c4; font-family: Geist, sans-serif; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-item:hover { background: #161d30; color: #e4e8ff; }
.nav-item.active { background: #161d30; color: #dcdcff; box-shadow: inset 2.5px 0 0 0 #c0c1ff; }
.nav-item .material-symbols-outlined { font-size: 19px; }

/* Tabs */
.tab-btn {
  padding: 7px 15px; border-radius: 8px; font-size: 12.5px;
  font-family: Geist, sans-serif; font-weight: 600; letter-spacing: 0.01em;
  color: #a9a7c4; transition: background .15s ease, color .15s ease; cursor: pointer;
}
.tab-btn.active { background: #c0c1ff; color: #1000a9; }

/* Cards */
.card {
  background: #131b2e;
  border: 1px solid rgba(70, 69, 84, 0.28);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.24), 0 12px 24px -14px rgba(0,0,0,0.55);
}
.card-flat {
  background: #171f33;
  border: 1px solid rgba(70, 69, 84, 0.22);
  border-radius: 16px;
}
.card-interactive { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; cursor: pointer; }
.card-interactive:hover { border-color: rgba(192,193,255,0.3); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 18px 32px -14px rgba(0,0,0,0.6); }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px;
  background: #c0c1ff; color: #1000a9; font-family: Geist, sans-serif; font-size: 13px; font-weight: 600;
  transition: filter .15s ease, transform .1s ease; white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px;
  border: 1px solid rgba(144,143,160,0.22); color: #c7c4d7; background: transparent;
  font-family: Geist, sans-serif; font-size: 13px; font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: #171f33; border-color: rgba(192,193,255,0.28); }

.btn-hero {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px;
  background: linear-gradient(90deg, #c0c1ff, #8083ff);
  color: #1000a9; font-family: Geist, sans-serif; font-size: 13px; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(192,193,255,0.15), 0 8px 20px -6px rgba(192,193,255,0.35);
  transition: box-shadow .15s ease, transform .1s ease; white-space: nowrap;
}
.btn-hero:hover { box-shadow: 0 0 0 1px rgba(192,193,255,0.25), 0 10px 26px -6px rgba(192,193,255,0.5); }
.btn-hero:active { transform: scale(0.98); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: Geist, sans-serif; }
.chip-primary { background: rgba(192,193,255,0.14); color: #c0c1ff; }
.chip-tertiary { background: rgba(137,206,255,0.14); color: #89ceff; }
.chip-error { background: rgba(255,180,171,0.14); color: #ffb4ab; }
.chip-neutral { background: rgba(199,196,215,0.08); color: #a9a7c4; }

/* Modern row (replaces plain <tr> hover) */
.row-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.row { display: flex; align-items: center; padding: 11px 14px; border-radius: 10px; transition: background .15s ease; }
.row:hover { background: #171f33; }

/* Bars */
.bar-track { height: 7px; border-radius: 999px; background: #060e20; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; }
.segment-bar { height: 6px; border-radius: 999px; overflow: hidden; display: flex; background: #060e20; }

/* Video cards (Instagram) */
.video-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; cursor: pointer; }
.video-card:hover { border-color: rgba(192,193,255,0.32); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 18px 32px -14px rgba(0,0,0,0.6); }
.video-thumb { aspect-ratio: 4 / 5; border-radius: 15px 15px 0 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

/* Modal */
.modal-backdrop { backdrop-filter: blur(6px); }
.modal-panel { max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7); }

/* Section heading */
.section-eyebrow { font-family: Geist, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(199,196,215,0.45); }