:root {
  --rdn-cyan: #67e8f9;
  --rdn-green: #22c55e;
  --rdn-panel: rgba(8, 20, 38, .96);
  --rdn-border: rgba(103, 232, 249, .22);
  --rdn-muted: rgba(220, 240, 255, .66);
  --noc-bg-0: #020814;
  --noc-bg-1: #061426;
  --noc-panel: rgba(7, 22, 40, .92);
  --noc-border: rgba(0, 205, 255, .28);
  --noc-text: #f5f8ff;
  --noc-muted: #9fb2cc;
  --noc-cyan: #20d9ff;
  --noc-green: #29f3a3;
  --noc-yellow: #ffc247;
  --noc-red: #ff4f6d;
  --hub-bg: #06101f;
  --hub-surface: rgba(7, 22, 40, .96);
  --hub-surface-2: rgba(9, 27, 49, .96);
  --hub-border: rgba(0, 205, 255, .28);
  --hub-text: #f5f8ff;
  --hub-muted: #9fb2cc;
  --hub-accent: #20d9ff;
  --hub-danger: #ff4f6d;
  --hub-success: #29f3a3;
  --hub-warning: #ffc247;
  --hub-emergency: #c62828;
  --hub-training: #2e7d32;
  --hub-promo: #eceff1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--hub-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 200, 255, .14), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(13, 110, 253, .12), transparent 30%),
    radial-gradient(circle at 70% 85%, rgba(25, 135, 84, .10), transparent 32%),
    linear-gradient(135deg, #06101f 0%, #0b1830 45%, #050b16 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(103, 232, 249, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 0%, rgba(0,0,0,.55), transparent 72%);
}

.main-shell, .hub-shell, .login-wrap { position: relative; z-index: 1; }

a { color: var(--hub-accent); text-decoration: none; }
a:hover { color: #9ef0ff; text-decoration: underline; }

/* Navbar */
.rdn-navbar {
  min-height: 76px;
  background: linear-gradient(180deg, rgba(2,12,27,.98), rgba(5,25,52,.96) 55%, rgba(4,38,64,.92));
  border-bottom: 1px solid rgba(0,229,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  z-index: 1030;
}
.rdn-navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(32,217,255,.65), rgba(41,243,163,.45), transparent);
}
.rdn-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none !important; }
.rdn-brand-title {
  display: block;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  line-height: 1.1;
}
.rdn-brand-subtitle {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rdn-cyan);
}
.rdn-main-menu .nav-link {
  color: rgba(220,240,255,.72) !important;
  font-weight: 700;
  border-radius: 12px;
  padding: .45rem .75rem !important;
  margin: 0 .1rem;
}
.rdn-main-menu .nav-link:hover,
.rdn-main-menu .nav-link.active {
  color: #fff !important;
  background: rgba(103,232,249,.08);
}
.rdn-entity-name {
  color: var(--rdn-muted);
  font-size: .85rem;
  font-weight: 600;
}
.rdn-lang {
  max-width: 72px;
  background: rgba(3,11,23,.82);
  border-color: var(--hub-border);
  color: var(--hub-text);
}

/* Surfaces */
.hub-card, .card, .noc-card {
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 14px 42px rgba(0,0,0,.28), 0 0 26px rgba(103,232,249,.04);
  color: var(--hub-text);
}
.hub-card h1, .hub-card h2, .hub-card h3,
.card h1, .card h2, .card h3 {
  margin: 0 0 .65rem;
  font-weight: 800;
  color: #fff;
}
.hub-muted, .text-muted { color: var(--hub-muted) !important; }
.hub-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.hub-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

label { display: block; margin: .35rem 0 .15rem; color: var(--hub-muted); font-size: 12px; font-weight: 700; }
input, select, textarea,
.form-control, .form-select {
  width: 100%;
  max-width: 420px;
  background: rgba(3, 11, 23, .82) !important;
  border: 1px solid var(--hub-border) !important;
  color: var(--hub-text) !important;
  border-radius: 10px !important;
  padding: .45rem .65rem;
}
textarea { max-width: 100%; min-height: 80px; }
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  border-color: rgba(32,217,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(32,217,255,.15) !important;
}

button, .btn {
  display: inline-block;
  background: linear-gradient(135deg, #14c7e8 0%, #1d64d8 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .42rem .8rem;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none !important;
}
button.secondary, .btn.secondary, .btn-noc-outline {
  background: rgba(255,255,255,.06);
  color: #dff8ff;
  border: 1px solid rgba(150, 220, 255, .35);
}
button.danger, .btn.danger { background: var(--hub-danger); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn:hover, button:hover { filter: brightness(1.06); color: #fff; }

.table, .noc-table { width: 100%; border-collapse: collapse; color: #dbe8f8; }
.table th, .table td, .noc-table th, .noc-table td {
  text-align: left; padding: .65rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle;
}
.table th, .noc-table th {
  color: #b3c0d4; font-weight: 800; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .04em;
  background: rgba(7, 20, 37, .35);
}
.table tbody tr:hover td { background: rgba(0, 191, 255, .07); }

.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: var(--hub-surface-2); color: var(--hub-text);
}
.badge.emergency { background: var(--hub-emergency); }
.badge.training, .badge.flyforsmile { background: var(--hub-training); }
.badge.promotional { background: #546e7a; color: #fff; }
.badge.active { background: rgba(41,243,163,.2); color: var(--hub-success); border: 1px solid rgba(41,243,163,.35); }

.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem;
  border-bottom: 1px solid var(--hub-border); padding-bottom: .15rem;
}
.tabs a {
  padding: .5rem .75rem; color: var(--hub-muted); font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0;
}
.tabs a.active, .tabs a:hover {
  color: #fff; border-bottom-color: var(--hub-accent);
  background: rgba(32,217,255,.06); text-decoration: none;
}

.alert, .hub-alert {
  padding: .65rem .85rem; border-radius: 12px; margin-bottom: .85rem;
  border: 1px solid transparent;
}
.alert.error, .alert-danger { background: rgba(255,79,109,.12); border-color: rgba(255,79,109,.45); color: #ffd0d8; }
.alert.ok, .alert-success { background: rgba(41,243,163,.1); border-color: rgba(41,243,163,.4); color: #c9ffe8; }
.alert.warn, .alert-warning { background: rgba(255,194,71,.1); border-color: rgba(255,194,71,.4); color: #ffe9b8; }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.login-card { width: 100%; max-width: 400px; }

.chat-layout { display: grid; grid-template-columns: 240px 1fr; gap: .85rem; min-height: 480px; }
.chat-sidebar, .chat-main {
  background: var(--hub-surface); border: 1px solid var(--hub-border); border-radius: 16px;
}
.chat-sidebar { padding: .65rem; overflow: auto; }
.chat-sidebar a {
  display: block; padding: .45rem .55rem; border-radius: 10px; color: var(--hub-muted); font-weight: 600;
}
.chat-sidebar a.active, .chat-sidebar a:hover {
  background: rgba(32,217,255,.08); color: var(--hub-text); text-decoration: none;
}
.chat-messages { padding: .85rem; height: 380px; overflow: auto; }
.chat-msg { margin-bottom: .65rem; }
.chat-msg .meta { font-size: 11px; color: var(--hub-muted); }
.chat-msg .transport {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--hub-surface-2); padding: 0 .3rem; border-radius: 3px; margin-right: .25rem;
}
.chat-compose { display: flex; gap: .4rem; padding: .65rem; border-top: 1px solid var(--hub-border); }
.chat-compose input { flex: 1; max-width: none; }

.ops-frame {
  width: 100%; min-height: 72vh; border: 1px solid var(--hub-border);
  border-radius: 14px; background: #000; box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.ops-toolbar { display: flex; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }

.noc-hero {
  border: 1px solid rgba(0,205,255,.36);
  border-radius: 18px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
  background:
    radial-gradient(circle at 90% 20%, rgba(32,217,255,.16), transparent 35%),
    linear-gradient(105deg, rgba(7,24,43,.98), rgba(4,13,28,.98));
}
.noc-kicker {
  color: var(--noc-cyan); font-size: .72rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
}
.noc-title { font-weight: 900; margin: 0; color: #fff; font-size: clamp(1.4rem, 2vw, 2rem); }

@media (max-width: 800px) {
  .chat-layout { grid-template-columns: 1fr; }
  .main-shell { padding: .85rem !important; }
}