/* ── TOKENS ─────────────────────────────── */
    :root {
      --red:       #ef3636;
      --red-dk:    #c91e1e;
      --red-soft:  #fff0f0;
      --red-mid:   #ffd9d9;
      --black:     #0c0c0c;
      --ink:       #1e1e1e;
      --ink2:      #3a3a3a;
      --mid:       #6b6b6b;
      --dim:       #9e9e9e;
      --border:    #e4e4e4;
      --border-lt: #f0f0f0;
      --bg:        #ffffff;
      --bg-subtle: #f7f7f6;
      --bg-off:    #fafafa;
      --gold-soft: #fffbeb;
      --gold-bdr:  #fcd34d;
      --sh-sm:     0 1px 4px rgba(0,0,0,.06);
      --sh:        0 4px 18px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
      --sh-lg:     0 20px 60px rgba(0,0,0,.14);
      --font:      'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
      --mono:      'Cascadia Mono', Consolas, monospace;
      --r:         8px;
      --r-sm:      5px;
      --r-lg:      14px;
      --nav-h:     60px;
      --left-w:    210px;
    }

    /* ── RESET ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font);
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--ink2);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--red); text-decoration: none; cursor: pointer; }
    a:hover { text-decoration: underline; }
    button, input, select, textarea { font: inherit; }
    .hidden { display: none !important; }

    /* ── TOPBAR ─────────────────────────────── */
    .topbar {
      height: var(--nav-h);
      display: grid;
      grid-template-columns: var(--left-w) 1fr minmax(240px, 500px) auto;
      align-items: center;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 200;
    }

    .brand {
      display: flex;
      align-items: center;
      padding: 0 18px;
      height: 100%;
      border-right: 1px solid var(--border-lt);
    }
    .brand-logo svg { width: 144px; height: auto; display: block; }
    .brand-home-link {
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      color: inherit;
    }
    .brand-home-link:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 4px;
      border-radius: 6px;
    }

    .nav {
      height: 100%;
      display: flex;
      align-items: stretch;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav button {
      height: 100%;
      border: 0;
      background: transparent;
      padding: 0 15px;
      color: var(--mid);
      cursor: pointer;
      font-size: 13.5px;
      font-weight: 500;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: color .15s, border-color .15s;
    }
    .nav button:hover { color: var(--ink); }
    .nav button.active { font-weight: 700; color: var(--ink); border-bottom-color: var(--red); }

    .searchbar {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-subtle);
      border-left: 1px solid var(--border-lt);
      border-right: 1px solid var(--border-lt);
      padding: 0 16px;
    }
    .searchbar span { color: var(--dim); font-size: 18px; flex-shrink: 0; line-height: 1; }
    .searchbar input {
      flex: 1;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 14px;
      color: var(--ink);
    }
    .searchbar input::placeholder { color: var(--dim); }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 0 12px;
    }
    .icon-btn {
      width: 34px;
      height: 34px;
      border: 0;
      background: transparent;
      border-radius: var(--r-sm);
      display: grid;
      place-items: center;
      cursor: pointer;
      color: var(--mid);
      font-size: 15px;
      transition: background .15s, color .15s;
    }
    .icon-btn:hover { background: var(--bg-subtle); color: var(--ink); }

    .profile-chip {
      display: flex;
      align-items: center;
      gap: 7px;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px 11px 4px 5px;
      cursor: pointer;
      margin-left: 4px;
      transition: border-color .15s, box-shadow .15s;
    }
    .profile-chip:hover { border-color: #bbb; box-shadow: var(--sh-sm); }
    #loginText { font-size: 13px; font-weight: 600; color: var(--ink); }

    .avatar-sm {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 9.5px;
      font-weight: 700;
      overflow: hidden;
      flex-shrink: 0;
    }
    .avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

    /* ── ALERT ─────────────────────────────── */
    .alert {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 20px;
      background: var(--gold-soft);
      border-bottom: 1px solid var(--gold-bdr);
      font-size: 13px;
      color: #78350f;
    }
    .alert b { font-weight: 700; }
    .alert button { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: #92400e; line-height: 1; padding: 0 4px; }

    /* ── LAYOUT ─────────────────────────────── */
    .layout {
      display: grid;
      grid-template-columns: var(--left-w) 1fr 320px;
      min-height: calc(100vh - var(--nav-h));
    }

    /* ── LEFT NAV ─────────────────────────────── */
    .leftnav {
      border-right: 1px solid var(--border-lt);
      padding: 28px 12px;
      background: var(--bg);
    }
    .leftnav-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      padding: 0 10px;
      margin-bottom: 5px;
    }
    .leftnav ul { list-style: none; margin: 0 0 24px; }
    .leftnav li {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      color: var(--mid);
      font-size: 13.5px;
      font-weight: 500;
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: background .12s, color .12s;
    }
    .leftnav li:hover { background: var(--bg-subtle); color: var(--ink); }
    .leftnav li.active { background: var(--red-soft); color: var(--red); font-weight: 700; }
    .leftnav li .ni { font-size: 14px; width: 17px; text-align: center; flex-shrink: 0; }

    /* ── MAIN ─────────────────────────────── */
    .main { padding: 40px 44px 80px; }
    .page { display: none; }
    .page.active { display: block; animation: fadeUp .25s ease; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── RIGHT RAIL ─────────────────────────────── */
    .rail {
      border-left: 1px solid var(--border-lt);
      padding: 28px 20px;
      background: var(--bg);
    }
    .rail-ttl {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 12px;
    }
    .rail > a { font-size: 12px; font-weight: 600; color: var(--red); display: inline-block; margin-bottom: 14px; }
    .right-filter { margin-top: 24px; }
    .right-filter button {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 8px 0;
      color: var(--mid);
      font-size: 13px;
      border-bottom: 1px solid var(--border-lt);
      display: flex;
      gap: 8px;
      align-items: center;
      text-align: left;
      cursor: pointer;
      transition: color .15s, background .15s;
    }
    .right-filter button:hover { color: var(--ink); background: var(--bg-subtle); }
    .right-filter button::before { content: '›'; color: var(--red); font-size: 14px; font-weight: 700; }

    /* ── TYPOGRAPHY ─────────────────────────────── */
    .page-title {
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--black);
      margin-bottom: 6px;
      line-height: 1.1;
    }
    .page-sub { color: var(--mid); font-size: 14px; margin-bottom: 28px; max-width: 520px; }
    .sec-title {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -.015em;
      color: var(--ink);
      margin: 32px 0 12px;
    }
    .kicker {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--dim);
    }
    .subtle { color: var(--mid); }

    /* ── TABS ─────────────────────────────── */
    .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
    .tabs button {
      border: 0;
      background: transparent;
      padding: 9px 15px;
      cursor: pointer;
      color: var(--mid);
      font-size: 13px;
      font-weight: 600;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color .15s, border-color .15s;
    }
    .tabs button:hover { color: var(--ink); }
    .tabs button.active { color: var(--red); border-bottom-color: var(--red); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; animation: fadeUp .18s ease; }

    /* ── BUTTONS ─────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1.5px solid var(--border);
      background: var(--bg);
      color: var(--ink);
      padding: 8px 16px;
      border-radius: var(--r-sm);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      transition: border-color .15s, box-shadow .15s;
    }
    .btn:hover { border-color: #c0c0c0; box-shadow: var(--sh-sm); }
    .btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
    .btn.primary:hover { background: var(--red-dk); border-color: var(--red-dk); box-shadow: 0 4px 14px rgba(239,54,54,.28); }
    .btn.black  { background: var(--black); border-color: var(--black); color: #fff; }
    .btn.black:hover { background: #2a2a2a; }
    .btn.danger { background: #fff; border-color: var(--red-mid); color: var(--red-dk); }
    .btn.danger:hover { background: var(--red-soft); border-color: var(--red); }
    .btn.sm { padding: 6px 12px; font-size: 12px; }

    /* ── HERO BANNER ─────────────────────────────── */
    .hero {
      background: var(--black);
      border-radius: var(--r-lg);
      padding: 32px 36px;
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 28px;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 75% 50%, rgba(239,54,54,.22) 0%, transparent 58%);
      pointer-events: none;
    }
    .hero-orb {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 3px solid var(--red);
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }
    .hero-orb::before {
      content: '';
      position: absolute;
      width: 11px; height: 11px;
      background: #fff;
      border-radius: 50%;
      right: -5px; top: 10px;
    }
    .hero-orb::after {
      content: '';
      position: absolute;
      width: 7px; height: 7px;
      background: var(--red);
      border-radius: 50%;
      left: -3px; bottom: 8px;
    }
    .hero-body { flex: 1; position: relative; z-index: 1; }
    .hero-body h3 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
    .hero-body p  { font-size: 13.5px; color: rgba(255,255,255,.55); max-width: 420px; }
    .hero .btn { position: relative; z-index: 1; flex-shrink: 0; }

    /* ── METRICS ─────────────────────────────── */
    .metric-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 32px; }
    .metric {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 18px 20px;
      transition: box-shadow .15s, transform .15s;
    }
    .metric:hover { box-shadow: var(--sh); transform: translateY(-1px); }
    .metric-dot { width: 5px; height: 5px; background: var(--red); border-radius: 50%; margin-bottom: 10px; }
    .metric-val  { font-size: 30px; font-weight: 800; color: var(--black); line-height: 1; margin-bottom: 3px; letter-spacing: -.02em; }
    .metric-lbl  { font-size: 11.5px; color: var(--mid); font-weight: 500; }

    /* ── GRID / CARDS ─────────────────────────────── */
    .g  { display: grid; gap: 13px; }
    .g2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .g3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .g4 { grid-template-columns: repeat(4,minmax(0,1fr)); }

    .card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 18px;
      min-height: 120px;
      cursor: pointer;
      transition: box-shadow .2s, transform .2s, border-color .2s;
    }
    .card:hover { box-shadow: var(--sh); transform: translateY(-2px); border-color: #d0d0d0; }
    .card-ic {
      width: 40px; height: 40px;
      border-radius: var(--r-sm);
      background: var(--red-soft);
      color: var(--red);
      display: grid; place-items: center;
      font-size: 15px; font-weight: 800;
      margin-bottom: 12px;
    }
    .card-title { font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
    .card-desc  { font-size: 12px; color: var(--mid); line-height: 1.4; }

    .tag {
      display: inline-block;
      background: var(--red-soft);
      color: var(--red-dk);
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      margin: 2px 2px 2px 0;
    }

    /* ── NOTICE / PANEL ─────────────────────────────── */
    .notice {
      background: var(--red-soft);
      border: 1px solid var(--red-mid);
      border-left: 3px solid var(--red);
      border-radius: var(--r-sm);
      padding: 14px 16px;
      margin-bottom: 18px;
      font-size: 13.5px;
    }
    .notice b { color: var(--red-dk); }
    .panel {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 22px;
      margin: 14px 0;
    }

    /* ── FORMS ─────────────────────────────── */
    .form { display: grid; gap: 11px; }
    .form label { font-size: 12.5px; font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px; }
    .form input,
    .form textarea,
    .form select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 9px 11px;
      font-size: 13.5px;
      color: var(--ink);
      background: var(--bg);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .form input:focus,
    .form textarea:focus,
    .form select:focus {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(239,54,54,.09);
    }
    .form textarea { min-height: 110px; resize: vertical; }

    /* ── NEWS ─────────────────────────────── */
    .news-item {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 12px;
      border-bottom: 1px solid var(--border-lt);
      padding-bottom: 16px;
      margin-bottom: 16px;
    }
    .news-thumb {
      width: 82px;
      height: 66px;
      background: linear-gradient(135deg, var(--red), var(--black));
      border-radius: var(--r-sm);
      display: grid; place-items: center;
      object-fit: cover;
      color: #fff;
      font-size: 10px; font-weight: 800; letter-spacing: .05em;
    }
    .news-item h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.35; }

    .blog-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 20px;
      transition: box-shadow .2s, transform .15s;
    }
    .blog-card:hover { box-shadow: var(--sh); transform: translateY(-1px); }
    .blog-thumb {
      height: 130px;
      background: linear-gradient(135deg, var(--red), var(--black));
      border-radius: var(--r-sm);
      display: grid; place-items: center;
      color: #fff; font-size: 16px; font-weight: 800;
      margin-bottom: 14px;
    }

    /* ── RESULT CARD ─────────────────────────────── */
    .result-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border-lt);
      border-radius: var(--r);
      padding: 16px;
    }
    .result-card h4 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
    .result-card p  { font-size: 13px; color: var(--mid); }

    /* ── LEARNING ─────────────────────────────── */
    .learning-summary {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    .summary-card {
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px 18px;
      background: var(--bg);
    }
    .summary-card .val {
      font-size: 26px;
      font-weight: 800;
      color: var(--black);
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .summary-card .lbl {
      font-size: 11.5px;
      color: var(--mid);
      font-weight: 600;
    }
    .learning-table {
      display: grid;
      gap: 9px;
    }
    .learning-row {
      display: grid;
      grid-template-columns: minmax(190px,1.2fr) minmax(150px,1fr) 110px 118px minmax(170px,.9fr);
      gap: 12px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: var(--r);
      background: var(--bg);
      padding: 12px 14px;
    }
    .learning-row.header {
      border: 0;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      padding: 0 14px 8px;
      color: var(--dim);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: transparent;
    }
    .learning-row select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 7px 9px;
      color: var(--ink);
      background: var(--bg);
      font-size: 12.5px;
      outline: none;
    }
    .learning-main { min-width: 0; }
    .learning-main strong {
      display: block;
      color: var(--ink);
      font-size: 13.5px;
      margin-bottom: 2px;
      overflow-wrap: anywhere;
    }
    .learning-meta { font-size: 12px; color: var(--mid); }
    .status-pill {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 800;
      background: var(--bg-subtle);
      color: var(--mid);
    }
    .status-pill.ok { background: #ecfdf5; color: #047857; }
    .status-pill.warn { background: #fffbeb; color: #92400e; }
    .status-pill.bad { background: #fef2f2; color: var(--red-dk); }
    .learning-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }
    .learning-actions .subtle { font-size: 11.5px; text-align: right; }
    .learning-empty {
      border: 1px dashed var(--border);
      border-radius: var(--r);
      padding: 18px;
      color: var(--mid);
      background: var(--bg-subtle);
      font-size: 13px;
    }

    /* ── PUBLISHING ─────────────────────────────── */
    .publisher-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: 10px 0 18px;
    }
    .perm-list { display: grid; gap: 9px; }
    .perm-row {
      display: grid;
      grid-template-columns: minmax(210px,1fr) 130px 130px;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px 14px;
      background: var(--bg);
    }
    .perm-row.header {
      border: 0;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      padding: 0 14px 8px;
      color: var(--dim);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: transparent;
    }
    .toggle-cell {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 700;
    }
    .toggle-cell input { width: 16px; height: 16px; accent-color: var(--red); }
    .site-card, .newsletter-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow .2s, transform .15s, border-color .15s;
    }
    .site-card:hover, .newsletter-card:hover { box-shadow: var(--sh); transform: translateY(-1px); border-color: #d0d0d0; }
    .site-card-body, .newsletter-body { padding: 16px; }
    .newsletter-img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      display: block;
      background: var(--bg-subtle);
    }
    .site-preview {
      min-height: 84px;
      background: linear-gradient(135deg, #111, #ef3636);
      color: #fff;
      display: flex;
      align-items: flex-end;
      padding: 16px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .detail-hero-img {
      width: 100%;
      max-height: 330px;
      object-fit: cover;
      border-radius: var(--r);
      border: 1px solid var(--border);
      margin: 10px 0 20px;
      background: var(--bg-subtle);
    }
    .detail-body {
      white-space: pre-wrap;
      font-size: 14px;
      color: var(--ink2);
      line-height: 1.7;
    }

    /* ── PEOPLE / PROFILE ─────────────────────────────── */
    .profile-layout { display: grid; grid-template-columns: 300px 1fr; gap: 22px; }

    .profile-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px;
    }
    .profile-photo {
      width: 88px; height: 88px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: grid; place-items: center;
      font-size: 26px; font-weight: 800;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .profile-photo img { width: 100%; height: 100%; object-fit: cover; }

    .p-row { display: flex; gap: 14px; align-items: center; }
    .divider { height: 1px; background: var(--border); margin: 18px 0; }

    .detail-row {
      display: flex; align-items: flex-start; gap: 9px;
      padding: 7px 0;
      border-bottom: 1px solid var(--border-lt);
      font-size: 13px;
    }
    .detail-row:last-of-type { border-bottom: 0; }
    .detail-icon { color: var(--red); margin-top: 1px; font-size: 13px; }
    .detail-val  { color: var(--ink2); }

    .role-badge {
      display: inline-block;
      background: var(--black);
      color: #fff;
      border-radius: 999px;
      padding: 2px 9px;
      font-size: 11px;
      font-weight: 700;
    }
    .emp-list { display: grid; gap: 10px; }
    .emp-row {
      display: grid;
      grid-template-columns: 44px 1fr auto;
      gap: 12px;
      align-items: center;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px 14px;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .emp-row:hover { border-color: var(--red); box-shadow: var(--sh-sm); transform: translateY(-1px); }

    .av-lg {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: grid; place-items: center;
      font-size: 12px; font-weight: 800;
      overflow: hidden;
      flex-shrink: 0;
    }
    .av-lg img { width: 100%; height: 100%; object-fit: cover; }

    /* ── EMPLOYEE PROFILE PAGE ─────────────────────────────── */
    .ep-page { max-width: 960px; }
    .ep-hero {
      background: var(--black);
      border-radius: var(--r-lg);
      padding: 28px 30px;
      display: grid;
      grid-template-columns: 100px 1fr auto;
      gap: 22px;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }
    .ep-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 80% 50%, rgba(239,54,54,.18) 0%, transparent 60%);
      pointer-events: none;
    }
    .ep-photo {
      width: 88px; height: 88px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid; place-items: center;
      font-size: 24px; font-weight: 800;
      overflow: hidden;
      border: 2.5px solid rgba(255,255,255,.18);
      position: relative; z-index: 1;
    }
    .ep-photo img { width: 100%; height: 100%; object-fit: cover; }
    .ep-info { position: relative; z-index: 1; }
    .ep-info .kicker { color: rgba(255,255,255,.38); margin-bottom: 5px; display: block; }
    .ep-info h1 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 3px; letter-spacing: -.02em; }
    .ep-info h3 { font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,.6); margin-bottom: 5px; }
    .ep-info .subtle { font-size: 12px; color: rgba(255,255,255,.42); }
    .ep-actions { position: relative; z-index: 1; }

    .details-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
    .det-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px 16px;
    }
    .det-box .lbl { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
    .det-box .val { font-size: 13.5px; font-weight: 600; color: var(--ink); }

    .org-list { display: grid; gap: 10px; }
    .org-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px 16px;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }
    .org-card:hover { border-color: var(--red); box-shadow: var(--sh-sm); }

    /* ── SYNC / CODE ─────────────────────────────── */
    .sync-panel {
      background: var(--bg-subtle);
      border: 1px dashed var(--border);
      border-radius: var(--r);
      padding: 18px;
      margin-bottom: 22px;
    }
    .sync-panel h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
    .sync-panel p  { font-size: 13px; color: var(--mid); }
    .code {
      font-family: var(--mono);
      font-size: 12px;
      background: #0c0c0c;
      color: #8fcea0;
      padding: 12px 14px;
      border-radius: var(--r-sm);
      white-space: pre-wrap;
      overflow: auto;
      margin: 10px 0;
    }

    /* ── SUPPORT ─────────────────────────────── */
    .support-box {
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px;
      margin-bottom: 24px;
    }
    .support-box > strong { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
    .qt { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
    .qt button {
      border: 1.5px solid var(--red-mid);
      background: var(--red-soft);
      color: var(--red-dk);
      border-radius: 999px;
      padding: 6px 14px;
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 600;
      transition: all .15s;
    }
    .qt button:hover { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 3px 10px rgba(239,54,54,.22); }

    /* ── CHAT ─────────────────────────────── */
    .chat-shell {
      display: grid;
      grid-template-columns: 220px 1fr;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--sh);
      height: 680px;
    }
    .chat-nav { background: var(--black); display: flex; flex-direction: column; }
    .chat-logo {
      padding: 20px 18px 16px;
      display: flex; align-items: center; gap: 9px;
      font-size: 17px; font-weight: 800; color: #fff;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .chat-orb {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid var(--red);
      flex-shrink: 0;
    }
    .chat-nav button {
      display: flex; align-items: center; gap: 9px;
      width: 100%; padding: 12px 18px;
      border: 0; background: transparent;
      font-size: 13px; font-weight: 600;
      color: rgba(255,255,255,.48);
      cursor: pointer;
      transition: background .12s, color .12s;
      text-align: left;
    }
    .chat-nav button:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
    .chat-nav button.active { color: #fff; background: rgba(239,54,54,.14); border-left: 2.5px solid var(--red); }

    .chat-main { display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
    .chat-head {
      padding: 24px 28px 16px;
      border-bottom: 1px solid var(--border-lt);
      text-align: center;
      flex-shrink: 0;
    }
    .chat-head-orb {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 2.5px solid var(--red);
      margin: 0 auto 10px;
    }
    .chat-head h1 { font-size: 24px; font-weight: 800; color: var(--black); letter-spacing: -.02em; }
    .chat-head p  { font-size: 12px; color: var(--mid); margin-top: 2px; }

    .chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 24px; overflow: hidden; }
    .chat-status {
      display: flex; gap: 14px; flex-wrap: wrap;
      font-size: 11px; font-weight: 600; color: var(--mid);
      margin-bottom: 12px; flex-shrink: 0;
    }
    .sdot { display: inline-block; width: 6px; height: 6px; background: #22c55e; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
    .sdot.warn { background: #f59e0b; }
    .messages {
      flex: 1;
      min-height: 220px;
      overflow-y: auto;
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px;
      margin-bottom: 12px;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .msg {
      padding: 9px 13px;
      margin-bottom: 9px;
      max-width: 82%;
      border-radius: var(--r);
      font-size: 13.5px;
      line-height: 1.5;
      animation: msgIn .18s ease;
    }
    @keyframes msgIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
    .msg.user { background: var(--red); color: #fff; margin-left: auto; border-radius: var(--r) 3px var(--r) var(--r); }
    .msg.bot  { background: #fff; border: 1px solid var(--border); color: var(--ink2); border-radius: 3px var(--r) var(--r) var(--r); }

    .chat-input { display: grid; grid-template-columns: 1fr auto; gap: 8px; flex-shrink: 0; }
    .chat-input input {
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: 9px 12px;
      font-size: 13.5px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .chat-input input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,54,54,.08); }

    /* ── SUPPORT DESK / QUEUES ─────────────────────────────── */
    .desk-wrap { margin-top: 22px; display: grid; gap: 14px; }
    .desk-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
    .desk-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px;
    }
    .desk-card h4 { font-size: 14px; color: var(--ink); margin-bottom: 5px; }
    .desk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .queue-row {
      display: grid;
      grid-template-columns: minmax(150px,1fr) 96px auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--border-lt);
      border-radius: var(--r-sm);
      padding: 10px 12px;
      background: var(--bg-subtle);
      margin-top: 8px;
    }
    .ticket-row {
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 13px 14px;
      background: var(--bg);
      margin-top: 9px;
    }
    .ticket-meta { font-size: 12px; color: var(--mid); margin-top: 4px; }
    .ticket-update {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 8px 10px;
      min-height: 64px;
      resize: vertical;
      outline: none;
      margin-top: 9px;
    }
    .fastpass {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      background: #ecfdf5;
      color: #047857;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 800;
      margin-top: 6px;
    }

    .teach-box {
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px;
      margin-top: 10px;
      flex-shrink: 0;
    }
    .teach-box b { font-size: 13px; }
    .teach-box p { font-size: 12.5px; color: var(--mid); margin: 5px 0 10px; }
    .teach-box textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 9px;
      font-size: 13px;
      min-height: 72px;
      resize: vertical;
      outline: none;
      margin-bottom: 8px;
    }

    /* ── SEARCH ─────────────────────────────── */
    .chip {
      display: inline-flex; align-items: center;
      background: var(--red-soft);
      color: var(--red-dk);
      border: 1px solid var(--red-mid);
      border-radius: 999px;
      padding: 4px 11px;
      margin: 3px;
      font-size: 12px; font-weight: 700;
    }

    /* ── MODAL ─────────────────────────────── */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center;
      z-index: 999;
    }
    .modal-backdrop.show { display: flex; }
    .modal {
      background: #fff;
      width: min(580px, 92vw);
      border-radius: var(--r-lg);
      padding: 28px;
      box-shadow: var(--sh-lg);
      animation: mIn .2s ease;
    }
    @keyframes mIn { from { opacity:0; transform: scale(.96) translateY(7px); } to { opacity:1; transform: scale(1) translateY(0); } }
    .modal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .modal-hdr h2 { font-size: 20px; font-weight: 800; color: var(--black); letter-spacing: -.02em; }
    .modal .x {
      width: 30px; height: 30px;
      border: 1px solid var(--border);
      background: var(--bg-subtle);
      border-radius: 50%;
      font-size: 15px; cursor: pointer;
      display: grid; place-items: center;
      transition: background .12s;
    }
    .modal .x:hover { background: var(--border); }

    /* ── FEEDBACK ─────────────────────────────── */
    .feedback { position: fixed; right: 0; top: 45%; display: flex; flex-direction: column; z-index: 80; }
    .feedback .open { width: 38px; height: 38px; background: var(--red); color: #fff; border: 0; cursor: pointer; border-radius: var(--r-sm) 0 0 0; display: grid; place-items: center; font-size: 15px; }
    .feedback .label { background: var(--black); color: #fff; writing-mode: vertical-rl; padding: 7px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

    /* ── FOOTER ─────────────────────────────── */
    footer {
      background: var(--black);
      padding: 52px 44px;
      display: grid;
      grid-template-columns: 1fr repeat(3, 170px);
      gap: 44px;
    }
    .ft-brand p { color: rgba(255,255,255,.38); font-size: 13px; margin-top: 12px; }
    footer svg { width: 180px; height: auto; }
    .ft-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 12px; }
    .ft-col a { display: block; color: rgba(255,255,255,.58); font-size: 13px; margin: 7px 0; transition: color .15s; }
    .ft-col a:hover { color: #fff; text-decoration: none; }

    /* ── RESPONSIVE ─────────────────────────────── */
    @media (max-width: 1200px) {
      .layout { grid-template-columns: var(--left-w) 1fr; }
      .rail { display: none; }
      .g4 { grid-template-columns: repeat(3,1fr); }
      .topbar { grid-template-columns: var(--left-w) 1fr 340px auto; }
      .profile-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      .topbar { grid-template-columns: 1fr auto; }
      .nav, .searchbar { display: none; }
      .layout { grid-template-columns: 1fr; }
      .leftnav { display: none; }
      .main { padding: 22px 16px; }
      .g2, .g3, .g4, .metric-row, .details-grid, .learning-summary { grid-template-columns: 1fr; }
      .learning-row, .learning-row.header, .perm-row, .perm-row.header { grid-template-columns: 1fr; }
      .learning-row.header, .perm-row.header { display: none; }
      .learning-actions { justify-content: flex-start; flex-wrap: wrap; }
      .publisher-toolbar { align-items: flex-start; flex-direction: column; }
      .hero { flex-direction: column; align-items: flex-start; }
      .ep-hero { grid-template-columns: 1fr; }
      .profile-layout { grid-template-columns: 1fr; }
      .chat-shell { grid-template-columns: 1fr; height: auto; }
      .chat-nav {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
      }
      .chat-logo {
        border-bottom: 0;
        border-right: 1px solid rgba(255,255,255,.07);
        flex-shrink: 0;
        min-width: max-content;
      }
      .chat-nav button {
        border-left: 0;
        border-bottom: 2.5px solid transparent;
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .chat-nav button.active {
        border-left: 0;
        border-bottom-color: var(--red);
      }
      .desk-grid, .queue-row { grid-template-columns: 1fr; }
      footer { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      .chat-head { padding: 20px 18px 14px; }
      .chat-body { padding: 14px; }
      .chat-input { grid-template-columns: 1fr; }
      .msg { max-width: 100%; }
      .profile-chip { padding-right: 6px; }
      #loginText { display: none; }
    }


    /* ── ENTERPRISE ENHANCEMENTS ─────────────────────────────── */
    body.dark-mode {
      --black:#f8fafc; --ink:#f3f4f6; --ink2:#d1d5db; --mid:#a3a3a3; --dim:#777;
      --border:#303030; --border-lt:#252525; --bg:#101010; --bg-subtle:#181818; --bg-off:#141414;
      --red-soft:rgba(239,54,54,.13); --red-mid:rgba(239,54,54,.28); --gold-soft:#2b2411; --gold-bdr:#5e4c15;
      --sh-sm:0 1px 4px rgba(0,0,0,.28); --sh:0 10px 28px rgba(0,0,0,.35),0 1px 5px rgba(0,0,0,.3); --sh-lg:0 24px 70px rgba(0,0,0,.55);
    }
    body.dark-mode .brand-logo text { fill:#f8fafc; }
    body.dark-mode .modal, body.dark-mode .msg.bot, body.dark-mode .form input, body.dark-mode .form textarea, body.dark-mode .form select, body.dark-mode .learning-row select, body.dark-mode .chat-input input, body.dark-mode .ticket-update { background:#151515; color:var(--ink); }
    body.dark-mode .profile-chip, body.dark-mode .btn { background:#151515; color:var(--ink); }
    body.dark-mode .btn.primary { background:var(--red); color:#fff; }
    body.dark-mode .btn.black { background:#f8fafc; color:#111; }
    body.sidebar-collapsed { --left-w:72px; }
    body.sidebar-collapsed .leftnav-label { display:none; }
    body.sidebar-collapsed .leftnav { padding-left:9px; padding-right:9px; }
    body.sidebar-collapsed .leftnav li { justify-content:center; font-size:0; padding:10px 0; }
    body.sidebar-collapsed .leftnav li .ni { font-size:15px; width:auto; }
    body.sidebar-collapsed .brand { justify-content:center; padding:0 8px; }
    body.sidebar-collapsed .brand-logo svg { width:40px; }
    body.sidebar-collapsed .brand-logo text { display:none; }
    .mobile-menu-btn { display:none; }
    .profile-menu { position:absolute; right:12px; top:52px; width:220px; display:none; z-index:500; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-lg); overflow:hidden; }
    .profile-menu.show { display:block; }
    .profile-menu button { width:100%; border:0; background:transparent; text-align:left; padding:11px 14px; color:var(--ink2); cursor:pointer; font-size:13px; border-bottom:1px solid var(--border-lt); }
    .profile-menu button:hover { background:var(--bg-subtle); color:var(--ink); }
    .profile-menu .pm-head { padding:14px; border-bottom:1px solid var(--border-lt); }
    .toast-stack { position:fixed; right:22px; bottom:22px; display:grid; gap:10px; z-index:1500; }
    .toast { max-width:360px; background:var(--black); color:#fff; border-radius:var(--r); box-shadow:var(--sh-lg); padding:12px 14px; font-size:13px; animation:toastIn .22s ease; }
    @keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .dash-hero { background:linear-gradient(135deg,var(--black),#2a1010); color:#fff; border-radius:var(--r-lg); padding:28px; margin-bottom:22px; position:relative; overflow:hidden; }
    .dash-hero::after { content:''; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(239,54,54,.28); }
    .dash-hero h2 { font-size:28px; font-weight:800; letter-spacing:-.03em; margin-bottom:5px; position:relative; z-index:1; color:#fff; }
    .dash-hero p { color:rgba(255,255,255,.62); max-width:720px; position:relative; z-index:1; }
    .dash-actions { margin-top:16px; display:flex; gap:9px; flex-wrap:wrap; position:relative; z-index:1; }
    .module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
    .module-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:18px; min-height:132px; box-shadow:var(--sh-sm); }
    .module-card h4 { font-size:14px; color:var(--ink); margin-bottom:6px; }
    .module-card p { color:var(--mid); font-size:12.5px; }
    .module-card .big { font-size:30px; font-weight:800; color:var(--black); line-height:1; margin-bottom:5px; }
    .module-card .mini { font-size:11px; color:var(--dim); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
    .flow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
    .flow span { background:var(--bg-subtle); border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; color:var(--ink2); }
    .flow b { color:var(--red); }
    .pill-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
    .pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:800; background:var(--bg-subtle); color:var(--ink2); border:1px solid var(--border); }
    .pill.red { background:var(--red-soft); color:var(--red-dk); border-color:var(--red-mid); }
    .pill.green { background:#ecfdf5; color:#047857; border-color:#bbf7d0; }
    body.dark-mode .pill.green { background:rgba(16,185,129,.12); color:#7dd3b0; border-color:rgba(16,185,129,.24); }
    .admin-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:start; }
    .matrix { display:grid; gap:8px; }
    .matrix-row { display:grid; grid-template-columns:180px repeat(4,1fr); gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); font-size:12.5px; }
    .matrix-row.header { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; }
    .check { color:#047857; font-weight:900; }
    .audit-row { display:grid; grid-template-columns:150px 170px 1fr; gap:10px; padding:10px 12px; border:1px solid var(--border-lt); border-radius:var(--r-sm); background:var(--bg-subtle); margin-top:8px; font-size:12.5px; }
    .audit-row strong { color:var(--ink); }
    .manual-section { display:grid; grid-template-columns:54px 1fr auto; gap:13px; align-items:center; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r); background:var(--bg); transition:box-shadow .15s, transform .15s; }
    .manual-section:hover { box-shadow:var(--sh); transform:translateY(-1px); }
    .manual-icon { width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--red-soft); color:var(--red); font-weight:900; }
    .onboard-step { display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r); margin-top:9px; background:var(--bg); }
    .onboard-step .num { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--black); color:#fff; font-size:12px; font-weight:800; }
    .integration-card { border:1px solid var(--border); border-radius:var(--r); padding:14px; background:var(--bg); }
    .source-card { margin-top:9px; border-left:3px solid var(--red); padding:10px 12px; background:var(--bg-subtle); border-radius:var(--r-sm); font-size:12.5px; }
    .empty-state { border:1px dashed var(--border); border-radius:var(--r); padding:18px; background:var(--bg-subtle); color:var(--mid); font-size:13px; text-align:center; }
    .skeleton-card { border-radius:var(--r); min-height:96px; background:linear-gradient(90deg,var(--bg-subtle),var(--border-lt),var(--bg-subtle)); background-size:220% 100%; animation:skeleton 1.3s ease-in-out infinite; }
    @keyframes skeleton { 0% { background-position:0 0; } 100% { background-position:-220% 0; } }
    @media (max-width: 1100px) { .module-grid, .admin-grid { grid-template-columns:1fr; } .matrix-row { grid-template-columns:1fr; } .audit-row { grid-template-columns:1fr; } }
    @media (max-width: 900px) { .mobile-menu-btn { display:grid; } body.mobile-nav-open .leftnav { display:block; position:fixed; top:var(--nav-h); left:0; bottom:0; width:250px; z-index:400; box-shadow:var(--sh-lg); } body.mobile-nav-open::after { content:''; position:fixed; inset:var(--nav-h) 0 0 0; background:rgba(0,0,0,.28); z-index:350; } }


    /* ── V4 OPERATING HUB MODULES ─────────────────────────────── */
    .command-panel {
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
      padding: 22px;
      margin: 0 0 28px;
      box-shadow: var(--sh-sm);
    }
    .command-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 16px;
    }
    .command-head h2 { font-size: 23px; font-weight: 850; color: var(--black); letter-spacing: -.025em; }
    .command-head p { color: var(--mid); font-size: 13px; max-width: 650px; margin-top: 4px; }
    .command-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
    .command-card {
      border: 1px solid var(--border);
      border-radius: var(--r);
      background: var(--bg);
      padding: 14px;
      min-height: 112px;
      transition: transform .15s, box-shadow .15s, border-color .15s;
      cursor: pointer;
    }
    .command-card:hover { transform: translateY(-1px); box-shadow: var(--sh); border-color: #d0d0d0; }
    .command-card .top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
    .command-card .value { font-size: 25px; font-weight: 850; color: var(--black); line-height:1; }
    .command-card .label { font-size: 12px; font-weight: 750; color: var(--ink); margin-bottom:4px; }
    .command-card .desc { font-size: 11.5px; color: var(--mid); line-height:1.35; }
    .status-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block; }
    .status-dot.warn { background:#f59e0b; }
    .status-dot.bad { background:var(--red); }
    .workbench-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start; }
    .ops-table { display:grid; gap:8px; }
    .ops-row { display:grid; grid-template-columns: 1.15fr .8fr .8fr .7fr auto; gap:10px; align-items:center; border:1px solid var(--border); border-radius:var(--r); padding:11px 12px; background:var(--bg); font-size:12.5px; }
    .ops-row.header { border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; color:var(--dim); font-size:10.5px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
    .ops-row strong { color:var(--ink); }
    .ops-mini-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; }
    .ops-mini { border:1px solid var(--border); border-radius:var(--r); background:var(--bg); padding:13px; }
    .ops-mini .num { font-size:24px; font-weight:850; color:var(--black); line-height:1; }
    .ops-mini .txt { font-size:11.5px; color:var(--mid); margin-top:4px; }
    .workflow-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0; }
    .workflow-line span { border:1px solid var(--border); border-radius:999px; padding:5px 10px; background:var(--bg); font-size:11.5px; font-weight:750; color:var(--ink); }
    .workflow-line b { color:var(--red); }
    .progress-shell { height:8px; border-radius:999px; background:var(--border-lt); overflow:hidden; }
    .progress-fill { height:100%; border-radius:999px; background:var(--red); width:0%; }
    .notification-bell { position:relative; }
    .notification-badge { position:absolute; top:2px; right:2px; min-width:14px; height:14px; padding:0 4px; border-radius:999px; background:var(--red); color:white; font-size:9px; font-weight:850; display:grid; place-items:center; }
    .feedback-strip { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:10px; }
    .feedback-strip button { font-size:11.5px; padding:5px 9px; }
    .upload-zone { border:1px dashed var(--border); border-radius:var(--r); padding:16px; background:var(--bg-subtle); }
    .deployment-lane { display:grid; grid-template-columns: 140px 1fr 170px; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r); margin-top:8px; background:var(--bg); }
    .deployment-lane strong { color:var(--ink); }
    .risk-chip { display:inline-block; border-radius:999px; padding:3px 8px; font-size:11px; font-weight:850; background:var(--bg-subtle); color:var(--mid); border:1px solid var(--border); }
    .risk-chip.high, .risk-chip.critical { background:#fef2f2; color:var(--red-dk); border-color:var(--red-mid); }
    .risk-chip.medium { background:#fffbeb; color:#92400e; border-color:#fcd34d; }
    body.dark-mode .command-panel, body.dark-mode .command-card, body.dark-mode .ops-row, body.dark-mode .ops-mini, body.dark-mode .deployment-lane, body.dark-mode .workflow-line span { background:#151515; }
    body.dark-mode .progress-shell { background:#262626; }
    @media (max-width: 1200px) { .command-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .workbench-grid { grid-template-columns:1fr; } }
    @media (max-width: 900px) { .command-grid, .ops-mini-grid { grid-template-columns:1fr; } .ops-row, .ops-row.header, .deployment-lane { grid-template-columns:1fr; } .ops-row.header { display:none; } .command-head { flex-direction:column; } }

  

    /* ── V22 ENTRA LOGIN GATE ─────────────────────────────── */
    body.auth-locked .topbar,
    body.auth-locked #loginStrip,
    body.auth-locked .layout,
    body.auth-locked .feedback,
    body.auth-locked footer,
    body.auth-locked .modal-backdrop:not(#twogLoginGate) {
      display: none !important;
    }
    body.auth-ready #twogLoginGate { display: none !important; }
    #twogLoginGate {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
      background: #fff;
      color: var(--ink);
    }
    .twog-login-brand-panel {
      background: var(--black);
      color: #fff;
      padding: 52px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100vh;
    }
    .twog-login-brand-panel::after {
      content: '';
      position: absolute;
      width: 420px;
      height: 420px;
      right: -140px;
      top: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(239,54,54,.34), rgba(239,54,54,0) 66%);
      pointer-events: none;
    }
    .twog-login-logo svg { width: 210px; max-width: 70vw; height: auto; display: block; }
    .twog-login-brand-panel h1 {
      font-size: clamp(38px, 5vw, 72px);
      line-height: .98;
      letter-spacing: -.05em;
      margin: 0 0 18px;
      max-width: 650px;
      position: relative;
      z-index: 1;
    }
    .twog-login-brand-panel p {
      color: rgba(255,255,255,.62);
      font-size: 16px;
      max-width: 560px;
      position: relative;
      z-index: 1;
    }
    .twog-login-card-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 42px;
      background: linear-gradient(180deg,#fff,#fafafa);
    }
    .twog-login-card {
      width: min(440px, 100%);
      border: 1px solid var(--border);
      border-radius: 22px;
      background: #fff;
      box-shadow: var(--sh-lg);
      padding: 34px;
    }
    .twog-login-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      color: var(--dim);
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .twog-login-card h2 {
      font-size: 30px;
      line-height: 1.08;
      color: var(--black);
      letter-spacing: -.035em;
      margin-bottom: 10px;
    }
    .twog-login-card p { color: var(--mid); margin-bottom: 22px; }
    .twog-login-btn {
      width: 100%;
      justify-content: center;
      font-size: 15px;
      padding: 13px 18px;
      border-radius: 12px;
    }
    .twog-login-status {
      margin-top: 16px;
      border: 1px solid var(--border-lt);
      border-radius: 12px;
      background: var(--bg-subtle);
      padding: 12px 14px;
      color: var(--mid);
      font-size: 12.5px;
      line-height: 1.5;
    }
    .twog-login-status.error { border-color: var(--red-mid); background: var(--red-soft); color: var(--red-dk); }
    .twog-login-checks { display: grid; gap: 8px; margin-top: 18px; }
    .twog-login-check {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      color: var(--mid);
      font-size: 12px;
    }
    .twog-login-check b { color: var(--ink); }
    @media (max-width: 900px) {
      #twogLoginGate { grid-template-columns: 1fr; }
      .twog-login-brand-panel { min-height: auto; padding: 34px 24px; }
      .twog-login-card-wrap { padding: 24px; }
    }