:root {
      --bg: #07101d;
      --bg-2: #0b1630;
      --panel: rgba(10, 22, 42, 0.82);
      --panel-2: rgba(11, 24, 45, 0.94);
      --border: rgba(116, 207, 255, 0.12);
      --border-strong: rgba(116, 207, 255, 0.26);
      --text: #eef6ff;
      --muted: #98abc3;
      --cyan: #72ecff;
      --blue: #3aa3ff;
      --green: #40e39b;
      --yellow: #ffd36a;
      --red: #ff7787;
      --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
      --radius-xl: 28px;
      --radius-lg: 22px;
    }

    * { box-sizing: border-box; }

    html, body { margin: 0; }

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(114, 236, 255, 0.15), transparent 22rem),
        radial-gradient(circle at 85% 0%, rgba(58, 163, 255, 0.20), transparent 30rem),
        radial-gradient(circle at 70% 100%, rgba(64, 227, 155, 0.10), transparent 22rem),
        linear-gradient(135deg, #040913 0%, #07101d 45%, #0a1b35 100%);
      min-height: 100vh;
      overflow-x: hidden;
      padding-bottom: 60px;
    }

    body::before {
      content: "";
      position: fixed; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 75%);
    }

    a { color: inherit; }

    /* ── Global loader bar ── */
    .loader-bar {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 3px;
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s;
    }
    .loader-bar.active {
      opacity: 1;
    }
    .loader-bar::before {
      content: "";
      display: block;
      position: absolute;
      top: 0; left: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, var(--cyan), var(--blue), var(--green));
      animation: loader-slide 1.6s ease-in-out infinite;
    }
    @keyframes loader-slide {
      0%   { transform: translateX(-100%); }
      50%  { transform: translateX(0%); }
      100% { transform: translateX(100%); }
    }

    .layout {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      min-height: 100vh;
    }

    .app-shell {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      min-height: 100vh;
    }

    .sidebar {
      padding: 24px 20px;
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(3, 9, 19, 0.72);
      backdrop-filter: blur(16px);
    }

    .app-shell > aside {
      padding: 24px 20px;
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(3, 9, 19, 0.72);
      backdrop-filter: blur(16px);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      height: 100vh;
      position: sticky;
      top: 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 4px 2px 18px;
      margin-bottom: 20px;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }

    .brand-mark {
      width: 58px; height: 58px;
      flex: 0 0 58px;
      border-radius: 18px; display: grid; place-items: center;
      background: linear-gradient(145deg, rgba(114, 236, 255, 0.16), rgba(58, 163, 255, 0.06));
      border: 1px solid var(--border-strong);
      box-shadow: 0 18px 40px rgba(24, 140, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }

    .brand-mark img {
      display: block;
      width: 46px;
      height: 46px;
      max-width: 46px;
      max-height: 46px;
      object-fit: contain;
      object-position: center;
    }

    .brand > div:last-child {
      min-width: 0;
      max-width: calc(100% - 72px);
      overflow: hidden;
    }

    .brand h1 {
      margin: 0;
      color: var(--text);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand-title {
      font-size: 18px; font-weight: 800; letter-spacing: -0.03em;
    }

    .brand-sub {
      font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35;
    }

    .nav {
      display: grid; gap: 10px; margin-top: 6px;
    }

    .nav-item {
      appearance: none; border: 1px solid transparent; background: transparent; color: #c8d7e8;
      position: relative; overflow: hidden;
      display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px;
      font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; transition: 0.2s ease;
    }

    .nav-item::after {
      content: "";
      position: absolute; inset: 10px auto 10px 0;
      width: 3px; border-radius: 0 999px 999px 0;
      background: linear-gradient(180deg, var(--cyan), var(--blue));
      opacity: 0; transform: translateX(-4px);
      transition: 0.2s ease;
    }

    .nav-item.active,
    .nav-item:hover {
      color: #fff; border-color: var(--border);
      background: linear-gradient(135deg, rgba(114, 236, 255, 0.12), rgba(58, 163, 255, 0.06));
    }

    .nav-item.active::after,
    .nav-item:hover::after {
      opacity: 1; transform: translateX(0);
    }

    .nav-icon {
      position: relative; flex: 0 0 auto;
      width: 34px; height: 34px; border-radius: 13px;
      display: grid; place-items: center;
      color: #92efff;
      border: 1px solid rgba(114, 236, 255, 0.14);
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 46%),
        rgba(114, 236, 255, 0.08);
      box-shadow: inset 0 0 18px rgba(114, 236, 255, 0.04);
      transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .nav-item.active .nav-icon,
    .nav-item:hover .nav-icon {
      color: #04111c;
      transform: translateY(-1px);
      border-color: transparent;
      background: linear-gradient(135deg, var(--cyan), var(--blue));
      box-shadow: 0 12px 28px rgba(58, 163, 255, 0.18);
    }

    .nav-icon::before,
    .nav-icon::after {
      content: "";
      position: absolute;
      transition: 0.2s ease;
    }

    .icon-panel::before {
      width: 6px; height: 6px; border-radius: 2px;
      background: currentColor;
      box-shadow: 9px 0 0 currentColor, 0 9px 0 currentColor, 9px 9px 0 currentColor;
      transform: translate(-4px, -4px);
    }

    .icon-invoices::before {
      width: 16px; height: 12px;
      border: 2px solid currentColor;
      border-radius: 4px;
      transform: translateY(1px);
    }

    .icon-invoices::after {
      width: 8px; height: 2px;
      background: currentColor;
      border-radius: 999px;
      transform: translate(-1px, -2px);
      box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
    }

    .icon-system::before {
      width: 18px; height: 18px; border-radius: 50%;
      border: 2px solid currentColor;
      opacity: 0.8;
    }

    .icon-system::after {
      width: 6px; height: 6px; border-radius: 50%;
      background: currentColor;
    }

    .nav-item.active .icon-system::before {
      animation: statusPulse 1.7s ease-out infinite;
    }

    .icon-flow::before {
      width: 2px; height: 18px; border-radius: 999px;
      background: currentColor;
      transform: translateX(-5px);
      opacity: 0.75;
    }

    .icon-flow::after {
      width: 7px; height: 7px; border-radius: 50%;
      background: currentColor;
      box-shadow: 10px 0 0 currentColor, 5px 10px 0 currentColor;
      transform: translate(-5px, -8px);
    }

    .icon-sim::before {
      width: 16px; height: 16px; border: 2px solid currentColor;
      border-radius: 5px; transform: rotate(45deg);
    }

    .icon-sim::after {
      width: 4px; height: 4px; border-radius: 50%;
      background: currentColor;
      box-shadow: 8px 0 0 currentColor, 0 8px 0 currentColor;
      transform: translate(-4px, -4px);
    }

    .icon-credentials::before {
      width: 16px; height: 11px;
      border: 2px solid currentColor;
      border-radius: 4px;
      transform: translateY(4px);
    }

    .icon-credentials::after {
      width: 10px; height: 9px;
      border: 2px solid currentColor;
      border-bottom: 0;
      border-radius: 9px 9px 0 0;
      transform: translateY(-5px);
    }

    .icon-users::before {
      width: 14px; height: 7px;
      border: 2px solid currentColor;
      border-bottom: 0;
      border-radius: 9px 9px 0 0;
      transform: translateY(-6px);
    }

    .icon-users::after {
      width: 14px; height: 7px;
      border: 2px solid currentColor;
      border-top: 0;
      border-radius: 0 0 9px 9px;
      transform: translateY(4px);
    }

    .icon-history::before {
      width: 14px; height: 14px;
      border: 2px solid currentColor;
      border-radius: 50%;
      transform: translateY(-3px);
    }

    .icon-history::after {
      width: 4px; height: 6px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg) translate(3px, 1px);
    }

    .icon-logout::before {
      width: 12px; height: 17px; border: 2px solid currentColor;
      border-right: 0; border-radius: 4px 0 0 4px;
      transform: translateX(-3px);
    }

    .icon-logout::after {
      width: 12px; height: 2px; border-radius: 999px;
      background: currentColor;
      transform: translateX(4px);
      box-shadow: 4px -4px 0 -1px currentColor, 4px 4px 0 -1px currentColor;
    }

    @keyframes statusPulse {
      0% { transform: scale(0.82); opacity: 0.9; }
      100% { transform: scale(1.55); opacity: 0; }
    }

    .side-card {
      margin-top: auto; padding: 0; border-radius: 24px;
      border: 1px solid var(--border);
      background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      box-shadow: var(--shadow);
      position: relative;
      overflow: visible;
    }

    .owner-label {
      display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #90a8c0; margin-bottom: 6px;
    }

    .owner-name {
      display: block; font-size: .94rem; font-weight: 800; color: #fff; line-height: 1.35;
    }

    .owner-meta {
      display: block; font-size: .76rem; color: #90a8c0; margin-top: 8px; line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .owner-meta:empty {
      display: none;
    }

    .account-trigger {
      width: 100%;
      appearance: none;
      border: 0;
      background: transparent;
      color: inherit;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 18px;
      gap: 12px;
      align-items: center;
      padding: 14px;
      text-align: left;
      cursor: pointer;
    }

    .account-trigger::after {
      content: "";
      width: 8px;
      height: 8px;
      border-right: 2px solid #8fa6bf;
      border-bottom: 2px solid #8fa6bf;
      transform: rotate(-135deg);
      justify-self: center;
      transition: 0.18s ease;
    }

    .side-card.open .account-trigger::after {
      transform: rotate(45deg);
    }

    .account-avatar {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #04111c;
      font-size: 17px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--cyan), var(--blue));
      box-shadow: 0 14px 32px rgba(58, 163, 255, 0.18);
    }

    .account-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .account-menu {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 10px);
      display: none;
      padding: 8px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: rgba(5, 14, 28, 0.96);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(14px);
      z-index: 20;
    }

    .side-card.open .account-menu {
      display: grid;
      gap: 6px;
    }

    .account-menu button {
      appearance: none;
      border: 0;
      width: 100%;
      border-radius: 12px;
      padding: 11px 12px;
      text-align: left;
      cursor: pointer;
      color: #dceaf8;
      background: transparent;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
    }

    .account-menu button:hover {
      background: rgba(114, 236, 255, 0.1);
      color: #fff;
    }

    .account-menu .danger {
      color: #ffb7c1;
    }

    .side-card small {
      color: var(--muted); line-height: 1.5;
    }

    .side-card strong {
      display: block; font-size: 17px; font-weight: 800; margin-bottom: 6px;
    }

    .content {
      padding: 28px;
    }

    .app-shell > .view {
      padding: 28px;
      min-width: 0;
    }

    .topbar {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 18px; margin-bottom: 24px;
    }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(114, 236, 255, 0.08); color: #92efff;
      font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
    }

    h1 {
      margin: 14px 0 10px;
      font-size: clamp(38px, 4.8vw, 64px);
      line-height: 0.96; letter-spacing: -0.07em;
    }

    .lead {
      max-width: 820px; margin: 0; color: #b8c8da; font-size: 16px; line-height: 1.6;
    }

    .top-actions {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
    }

    .btn {
      appearance: none; border: 0; height: 48px; padding: 0 18px; border-radius: 16px;
      font-size: 15px; font-weight: 800; cursor: pointer; transition: 0.18s ease; white-space: nowrap;
    }

    .btn:hover { transform: translateY(-1px); }

    .btn-primary {
      color: #04111c;
      background: linear-gradient(135deg, var(--cyan), #66d8ff 45%, var(--blue));
      box-shadow: 0 18px 36px rgba(58, 163, 255, 0.24);
    }

    .btn-secondary {
      color: #e5effa;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .btn-danger {
      color: #ffe8ec;
      background: rgba(255, 119, 135, 0.16);
      border: 1px solid rgba(255, 119, 135, 0.22);
    }

    .btn-sm {
      height: 38px; border-radius: 13px; padding: 0 14px; font-size: 14px;
    }

    .btn-outline {
      color: #e5effa;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .search { position: relative; }
    .search input {
      width: 250px; height: 48px; border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.05); color: #fff;
      outline: none; padding: 0 16px 0 42px; font-size: 14px;
    }
    .search input::placeholder { color: #90a8c0; }
    .search span {
      position: absolute; left: 14px; top: 50%;
      transform: translateY(-50%); color: #90a8c0; font-size: 14px;
    }

    .kpis {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px;
    }

    .card {
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), var(--panel);
      box-shadow: var(--shadow); backdrop-filter: blur(18px);
    }

    .kpi {
      padding: 22px 22px 20px; position: relative; overflow: hidden;
    }

    .kpi::after {
      content: "";
      position: absolute; inset: auto -16px -30px auto; width: 130px; height: 130px;
      background: radial-gradient(circle, rgba(114, 236, 255, 0.14), transparent 65%);
      pointer-events: none;
    }

    .kpi-top {
      display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    }

    .kpi-label {
      color: #b8c8da; font-size: 14px; font-weight: 700;
    }

    .kpi-icon {
      width: 42px; height: 42px; border-radius: 14px;
      display: grid; place-items: center;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 18px;
    }

    .kpi-value {
      margin-top: 16px; font-size: 46px; line-height: 0.95;
      letter-spacing: -0.06em; font-weight: 900;
    }

    .kpi-sub {
      margin-top: 8px; color: var(--muted); font-size: 13px;
    }

    .kpi-trend {
      margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
      padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 900;
      background: rgba(64, 227, 155, 0.12); color: #8dffcb;
      border: 1px solid rgba(64, 227, 155, 0.2);
    }

    .trend-down {
      background: rgba(255, 211, 106, 0.10);
      border-color: rgba(255, 211, 106, 0.16);
      color: #ffe19a;
    }

    .main-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px; align-items: start;
    }

    .panel-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 12px; padding: 22px 24px 8px;
    }

    .panel-title {
      margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.03em;
    }

    .panel-sub {
      margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.45;
    }

    .footer-note-top {
      color: var(--muted); font-size: 12px; line-height: 1.5; padding: 8px 24px 8px;
    }

    .table-toolbar {
      display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px;
    }

    .table-filter {
      min-width: 170px; height: 42px; border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.05); color: #fff;
      padding: 0 14px; outline: none; font-size: 14px;
    }

    .table-wrap {
      padding: 0 10px 10px; overflow: auto;
    }

    table {
      width: 100%; border-collapse: separate; border-spacing: 0 10px; min-width: 760px;
    }

    thead th {
      color: #8ea3bd; font-size: 12px; text-transform: uppercase;
      letter-spacing: 0.12em; font-weight: 900; text-align: left; padding: 8px 14px 0;
    }

    tbody tr {
      background: rgba(255, 255, 255, 0.03); transition: 0.18s ease;
    }

    tbody tr:hover {
      transform: translateY(-1px); background: rgba(255, 255, 255, 0.045);
    }

    tbody td {
      padding: 18px 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      vertical-align: middle;
    }

    tbody td:first-child {
      border-left: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 18px 0 0 18px;
    }

    tbody td:last-child {
      border-right: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 0 18px 18px 0;
    }

    .issuer-name {
      font-size: 17px; font-weight: 800; line-height: 1.15;
    }

    .issuer-desc {
      margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.35;
    }

    td.warn {
      color: #ffd38d;
    }

    td.danger {
      color: #ff9f9f;
    }

    .mono {
      font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
    }

    .status {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 999px;
      font-size: 13px; font-weight: 900; border: 1px solid transparent;
    }

    .status::before {
      content: ""; width: 8px; height: 8px; border-radius: 999px;
      background: currentColor; opacity: 0.9;
    }

    .status.active {
      color: #9ef5d2; background: rgba(64, 227, 155, 0.12);
      border-color: rgba(64, 227, 155, 0.18);
    }

    .status.pending {
      color: #ffe2a1; background: rgba(255, 211, 106, 0.12);
      border-color: rgba(255, 211, 106, 0.18);
    }

    .status.paused {
      color: #ffb1bc; background: rgba(255, 119, 135, 0.12);
      border-color: rgba(255, 119, 135, 0.18);
    }

    .status.inactive {
      color: #ffb1bc; background: rgba(255, 119, 135, 0.12);
      border-color: rgba(255, 119, 135, 0.18);
    }

    .status.approved {
      color: #9ef5d2; background: rgba(64, 227, 155, 0.12);
      border-color: rgba(64, 227, 155, 0.18);
    }

    .status.rejected {
      color: #ffb1bc; background: rgba(255, 119, 135, 0.12);
      border-color: rgba(255, 119, 135, 0.18);
    }

    .status.processing {
      color: #a8d7ff; background: rgba(58, 163, 255, 0.12);
      border-color: rgba(58, 163, 255, 0.18);
    }

    .status.delayed {
      color: #ffe2a1; background: rgba(255, 211, 106, 0.12);
      border-color: rgba(255, 211, 106, 0.22);
    }

    .status.review {
      color: #ffd0a6; background: rgba(255, 160, 77, 0.12);
      border-color: rgba(255, 160, 77, 0.22);
    }

    .status.followup {
      color: #ffd0a6; background: rgba(255, 160, 77, 0.12);
      border-color: rgba(255, 160, 77, 0.22);
    }

    .actions-inline {
      display: flex; gap: 8px; flex-wrap: wrap;
    }

    .side-stack {
      display: grid; gap: 18px;
    }

    .side-card-inner {
      padding: 22px;
    }

    .usage-list {
      display: grid; gap: 14px; margin-top: 16px;
    }

    .usage-item {
      display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
    }

    .usage-item-top {
      display: flex; justify-content: space-between; align-items: center;
    }

    .usage-bar {
      height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
    }

    .usage-fill {
      height: 100%; border-radius: 999px; background: var(--cyan);
    }

    .usage-meta {
      display: flex; flex-direction: column; gap: 8px;
    }

    .usage-name {
      font-size: 15px; font-weight: 700;
    }

    .progress {
      position: relative; height: 10px; border-radius: 999px;
      background: rgba(255, 255, 255, 0.08); overflow: hidden;
    }

    .progress > span {
      position: absolute; inset: 0 auto 0 0; width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--blue));
    }

    .usage-value {
      min-width: 30px; text-align: right; color: #dce8f4;
      font-weight: 800; font-variant-numeric: tabular-nums;
    }

    .mini-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
    }

    .mini {
      padding: 16px; border-radius: 18px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mini-label {
      color: var(--muted); font-size: 12px; text-transform: uppercase;
      letter-spacing: 0.08em; font-weight: 800;
    }

    .mini-value {
      margin-top: 8px; font-size: 24px; font-weight: 900; letter-spacing: -0.04em;
    }

    .mini-note {
      margin-top: 4px; color: #b7c7d8; font-size: 12px; line-height: 1.35;
    }

    .system-list {
      display: grid; gap: 12px; margin-top: 16px;
    }

    .system-row {
      display: flex; justify-content: space-between; gap: 10px; align-items: center;
      padding: 12px 14px; border-radius: 16px;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .system-name {
      color: #dce8f4; font-size: 14px; font-weight: 700;
    }

    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 900;
    }

    .pill.ok {
      color: #9ef5d2; background: rgba(64, 227, 155, 0.12);
    }

    .pill.warn {
      color: #ffe2a1; background: rgba(255, 211, 106, 0.12);
    }

    .empty-state {
      text-align: center; padding: 30px 20px 22px; color: var(--muted);
      font-size: 14px; display: none;
    }

    .empty-state:first-child { display: block; }

    .invoice-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 18px;
    }

    .invoice-filter-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding: 0 24px 20px;
      align-items: start;
    }

    .invoice-filter-grid > * {
      min-width: 0;
    }

    .invoice-filter-stack {
      display: grid;
      gap: 8px;
    }

    .invoice-filter-label {
      display: block;
      margin: 0;
      color: #b7c7d8;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 900;
    }

    .invoice-field {
      margin-bottom: 0;
      display: grid;
      gap: 8px;
    }

    .invoice-field input {
      width: 100%;
    }

    .combo {
      position: relative;
    }

    .combo-trigger {
      width: 100%;
      height: 48px;
      appearance: none;
      border-radius: 15px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font: inherit;
      font-size: 14px;
      cursor: pointer;
      text-align: left;
    }

    .combo-trigger-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .combo-trigger-caret {
      width: 9px;
      height: 9px;
      border-right: 2px solid #8fa6bf;
      border-bottom: 2px solid #8fa6bf;
      transform: rotate(45deg);
      transition: 0.18s ease;
      flex: 0 0 auto;
    }

    .combo.open .combo-trigger {
      border-color: rgba(114, 236, 255, 0.3);
      box-shadow: 0 0 0 1px rgba(114, 236, 255, 0.08);
    }

    .combo.open .combo-trigger-caret {
      transform: rotate(-135deg) translateY(-1px);
    }

    .combo-panel {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      z-index: 25;
      display: none;
      padding: 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: rgba(8, 18, 34, 0.98);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(18px);
    }

    .combo.open .combo-panel {
      display: block;
    }

    .combo-search {
      position: relative;
    }

    .combo-search span {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #90a8c0;
      font-size: 14px;
      pointer-events: none;
    }

    .combo-search input {
      width: 100%;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: #fff;
      padding: 0 14px 0 40px;
      outline: none;
      font-size: 14px;
    }

    .combo-search input::placeholder {
      color: #90a8c0;
    }

    .combo-options {
      display: grid;
      gap: 6px;
      margin-top: 10px;
      max-height: 240px;
      overflow: auto;
    }

    .combo-option {
      appearance: none;
      width: 100%;
      border-radius: 14px;
      border: 1px solid transparent;
      background: rgba(255, 255, 255, 0.03);
      color: #dceaf8;
      padding: 11px 12px;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      transition: 0.18s ease;
    }

    .combo-option:hover,
    .combo-option.active {
      border-color: rgba(114, 236, 255, 0.2);
      background: rgba(114, 236, 255, 0.1);
      color: #fff;
    }

    .invoice-meta {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .invoice-primary {
      font-size: 15px;
      font-weight: 800;
      line-height: 1.3;
    }

    .invoice-secondary {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .invoice-env-badge {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(156,168,187,.24);
      border-radius: 999px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .08em;
      line-height: 1;
      margin-top: 2px;
      padding: 5px 8px;
      text-transform: uppercase;
      white-space: nowrap;
      width: fit-content;
    }

    .invoice-env-badge.production {
      border-color: rgba(36,209,143,.34);
      background: rgba(36,209,143,.1);
      color: #bfffe1;
    }

    .invoice-env-badge.staging {
      border-color: rgba(255,203,107,.34);
      background: rgba(255,203,107,.1);
      color: #ffe0a6;
    }

    .invoice-doc-empty {
      color: #90a8c0;
      font-size: 13px;
      font-weight: 700;
    }

    /* ── modal ── */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(2, 8, 18, 0.68); backdrop-filter: blur(12px);
      display: none; align-items: center; justify-content: center;
      padding: 20px; z-index: 30;
    }

    .modal-backdrop.show { display: flex; }

    .modal {
      width: min(560px, 100%); border-radius: 28px;
      border: 1px solid var(--border);
      background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), rgba(11, 24, 45, 0.94);
      box-shadow: 0 34px 90px rgba(0, 0, 0, 0.45); overflow: hidden;
    }

    .modal-wide {
      width: min(980px, calc(100vw - 32px));
      max-height: calc(100vh - 48px);
      overflow: auto;
    }

    .modal-head {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; padding: 22px 24px 8px;
    }

    .modal-title {
      margin: 0; font-size: 22px; letter-spacing: -0.04em; font-weight: 900;
    }

    .modal-close-btn {
      width: 40px; height: 40px; border-radius: 14px; border: 0;
      cursor: pointer; font-size: 18px; color: #fff;
      background: rgba(255, 255, 255, 0.06);
    }

    .modal-body {
      padding: 8px 24px 24px;
    }

    .form-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    }

    .field {
      display: grid; gap: 8px; margin-bottom: 14px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field label {
      margin: 0; color: #b7c7d8; font-size: 12px;
      text-transform: uppercase; letter-spacing: 0.1em; font-weight: 900;
    }

    .field input,
    .field select {
      height: 48px; border-radius: 15px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.05); color: #fff;
      padding: 0 14px; font-size: 14px; outline: none;
    }

    .field input:focus,
    .field select:focus {
      border-color: rgba(114, 236, 255, 0.7);
      box-shadow: 0 0 0 4px rgba(114, 236, 255, 0.08);
    }

    .field select option {
      background: #0a1630; color: #fff;
    }

    .modal-actions {
      display: flex; justify-content: flex-end; gap: 10px;
      margin-top: 8px; flex-wrap: wrap;
    }

    .issuer-detail-sub {
      margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4;
    }

    .issuer-detail-grid {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
    }

    .issuer-detail-metric {
      border: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(255, 255, 255, 0.04);
      border-radius: 16px; padding: 14px;
    }

    .issuer-detail-metric span {
      display: block; color: #9eb1c8; font-size: 11px; letter-spacing: 0.1em;
      text-transform: uppercase; font-weight: 900;
    }

    .issuer-detail-metric strong {
      display: block; margin-top: 8px; color: #f2f8ff; font-size: 15px;
      line-height: 1.3; word-break: break-word;
    }

    .issuer-detail-tabs {
      display: flex; gap: 8px; padding: 6px; border-radius: 16px;
      background: rgba(255, 255, 255, 0.045); margin-bottom: 16px;
    }

    .issuer-detail-tab {
      flex: 1; min-height: 42px; border: 0; border-radius: 12px;
      background: transparent; color: #b7c7d8; font-weight: 900; cursor: pointer;
    }

    .issuer-detail-tab.active {
      color: #03111d;
      background: linear-gradient(135deg, var(--cyan), var(--blue));
    }

    .issuer-detail-pane { display: none; }
    .issuer-detail-pane.active { display: block; }

    .issuer-sync-toolbar {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
    }

    .issuer-sync-status {
      color: #b7c7d8; font-size: 13px; line-height: 1.4;
    }

    .issuer-sync-table {
      width: 100%; min-width: 640px;
    }

    .issuer-sync-table td {
      padding: 14px;
    }

    /* ── toast ── */
    .toast {
      position: fixed; right: 22px; bottom: 22px;
      padding: 14px 16px; border-radius: 16px;
      background: rgba(12, 34, 28, 0.92); color: #d6ffe9;
      border: 1px solid rgba(64, 227, 155, 0.22);
      box-shadow: var(--shadow); font-weight: 800;
      display: none; z-index: 35;
    }

    .toast.show { display: block; }

    .toast.err {
      background: rgba(34, 12, 12, 0.92); color: #ffe8ec;
      border-color: rgba(255, 119, 135, 0.22);
    }

    .toast.ok {
      display: block;
    }

    /* ── static flow view ── */
    .flow-card {
      padding: 28px;
    }

    .flow-card h2 {
      margin: 0 0 22px;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.03em;
    }

    .flow-list {
      display: grid;
      gap: 12px;
    }

    .flow-list .flow-step {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: start;
      gap: 16px;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.035);
      color: var(--text);
    }

    .flow-list .step-num {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      color: #04111c;
      background: linear-gradient(135deg, var(--cyan), var(--blue));
      font-size: 15px;
      font-weight: 900;
      box-shadow: 0 12px 28px rgba(58, 163, 255, 0.18);
    }

    .flow-list .flow-step strong {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
      line-height: 1.25;
    }

    .flow-list .flow-step span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .footer-note {
      margin: 22px 0 0;
      padding: 16px 18px;
      border: 1px solid rgba(255, 211, 106, 0.16);
      border-radius: 16px;
      background: rgba(255, 211, 106, 0.08);
      color: #ffe4a9;
      font-size: 13px;
      line-height: 1.55;
    }

    /* ── credentials view ── */
    .credentials-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) 390px;
      gap: 18px;
      align-items: start;
    }

    .credentials-section {
      padding: 24px;
    }

    .credentials-section + .credentials-section {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .credentials-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 18px;
    }

    .credentials-sub {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .credentials-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .field-hint {
      color: #7288a2;
      font-size: 12px;
      line-height: 1.35;
    }

    .secret-input {
      position: relative;
    }

    .secret-input input {
      padding-right: 48px;
    }

    .secret-toggle {
      position: absolute;
      right: 7px;
      top: 50%;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 12px;
      cursor: pointer;
      color: #e5f6ff;
      background: rgba(255, 255, 255, 0.07);
      transform: translateY(-50%);
    }

    .secret-toggle::before {
      content: "";
      position: absolute;
      left: 9px;
      top: 13px;
      width: 18px;
      height: 10px;
      border: 2px solid currentColor;
      border-radius: 50%;
    }

    .secret-toggle::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 16px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: currentColor;
    }

    .secret-toggle.revealed::after {
      width: 18px;
      height: 2px;
      border-radius: 999px;
      left: 9px;
      top: 18px;
      transform: rotate(-28deg);
    }

    .copy-row {
      display: flex;
      gap: 10px;
    }

    .copy-row input {
      min-width: 0;
      flex: 1;
    }

    .credentials-switch-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding: 18px;
      margin-bottom: 18px;
      border-radius: 22px;
      border: 1px solid rgba(114, 236, 255, 0.18);
      background:
        radial-gradient(circle at 15% 20%, rgba(114, 236, 255, 0.14), transparent 14rem),
        rgba(255, 255, 255, 0.045);
    }

    .credentials-switch-card strong {
      display: block;
      font-size: 16px;
    }

    .credentials-switch-card span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .segmented-control {
      display: flex;
      flex-shrink: 0;
      gap: 5px;
      padding: 5px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(2, 10, 20, 0.38);
    }

    .segmented-control button {
      min-width: 116px;
      height: 40px;
      border: 0;
      border-radius: 999px;
      padding: 0 14px;
      color: #c4d7ea;
      background: transparent;
      font-weight: 900;
      cursor: pointer;
    }

    .segmented-control button.active {
      color: #04111c;
      background: linear-gradient(135deg, var(--cyan), var(--blue));
      box-shadow: 0 12px 24px rgba(58, 163, 255, 0.2);
    }

    .credentials-env-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .credentials-env {
      position: relative;
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(255, 255, 255, 0.035);
      transition: 0.2s ease;
      overflow: hidden;
    }

    .credentials-env::after {
      content: "";
      position: absolute;
      right: -36px;
      bottom: -52px;
      width: 150px;
      height: 150px;
      pointer-events: none;
      background: radial-gradient(circle, rgba(114, 236, 255, 0.13), transparent 65%);
    }

    .credentials-env.active {
      border-color: rgba(114, 236, 255, 0.38);
      background: linear-gradient(155deg, rgba(114, 236, 255, 0.1), rgba(255, 255, 255, 0.035));
      box-shadow: 0 18px 46px rgba(58, 163, 255, 0.12);
    }

    .credentials-env.production.active {
      border-color: rgba(64, 227, 155, 0.34);
      background: linear-gradient(155deg, rgba(64, 227, 155, 0.09), rgba(255, 255, 255, 0.035));
    }

    .credentials-env:not(.active) {
      opacity: 0.68;
      filter: saturate(0.78);
    }

    .credentials-env-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .credentials-env-title {
      font-size: 17px;
      font-weight: 900;
      letter-spacing: -0.03em;
    }

    .credentials-badge {
      padding: 7px 10px;
      border-radius: 999px;
      color: #bdefff;
      background: rgba(114, 236, 255, 0.1);
      border: 1px solid rgba(114, 236, 255, 0.18);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 950;
    }

    .credentials-env.production .credentials-badge {
      color: #a8ffd2;
      background: rgba(64, 227, 155, 0.1);
      border-color: rgba(64, 227, 155, 0.18);
    }

    .credentials-mini-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .credentials-side {
      display: grid;
      gap: 18px;
    }

    .credentials-status-card {
      padding: 22px;
    }

    .credentials-status-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .credentials-status-row:last-child {
      border-bottom: 0;
    }

    .credentials-status-row strong {
      display: block;
      font-size: 14px;
    }

    .credentials-status-row .desc {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .credentials-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 18px;
    }

    .credentials-metric {
      padding: 15px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.055);
      background: rgba(255, 255, 255, 0.04);
    }

    .credentials-metric small {
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 850;
    }

    .credentials-metric b {
      display: block;
      margin-top: 7px;
      font-size: 21px;
      font-weight: 950;
      letter-spacing: -0.04em;
    }

    .credentials-note {
      padding: 16px;
      margin-top: 16px;
      border-radius: 18px;
      color: #ffe8ad;
      background: rgba(255, 211, 106, 0.08);
      border: 1px solid rgba(255, 211, 106, 0.16);
      font-size: 13px;
      line-height: 1.5;
    }

    /* ── profile view ── */
    .profile-grid {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .profile-photo-card {
      padding: 22px;
      display: grid;
      gap: 14px;
      justify-items: center;
      text-align: center;
    }

    .profile-photo {
      width: 128px;
      height: 128px;
      border-radius: 32px;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #04111c;
      font-size: 40px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--cyan), var(--blue));
      box-shadow: 0 24px 58px rgba(58, 163, 255, 0.24);
    }

    .profile-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-form-card {
      padding: 24px;
    }

    .profile-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .profile-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

    /* ── login screen ── */
    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 15% 10%, rgba(114, 236, 255, 0.15), transparent 22rem),
        radial-gradient(circle at 85% 0%, rgba(58, 163, 255, 0.20), transparent 30rem),
        linear-gradient(135deg, #040913 0%, #07101d 45%, #0a1b35 100%);
    }

    .login-screen.hidden { display: none; }

    .login-card {
      width: min(420px, 90vw);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: 32px 28px;
      text-align: center;
    }

    .login-card h1 {
      margin: 0 0 6px;
      font-size: 24px;
      letter-spacing: -0.04em;
    }

    .login-card h1 span {
      color: var(--cyan);
    }

    .login-card .sub {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 24px;
    }

    .login-card form {
      display: grid;
      gap: 14px;
      text-align: left;
    }

    .login-card label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .login-card input {
      width: 100%;
      height: 48px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0 14px;
      border-radius: 15px;
      outline: none;
      font-size: 14px;
    }

    .login-card input:focus {
      border-color: rgba(114, 236, 255, 0.7);
      box-shadow: 0 0 0 4px rgba(114, 236, 255, 0.08);
    }

    .login-card .err {
      color: var(--red);
      font-size: 13px;
      font-weight: 650;
      min-height: 18px;
    }

    .login-card button {
      appearance: none; border: 0; height: 48px; border-radius: 16px;
      font-size: 15px; font-weight: 800; cursor: pointer; transition: 0.18s ease;
      color: #04111c;
      background: linear-gradient(135deg, var(--cyan), #66d8ff 45%, var(--blue));
      box-shadow: 0 18px 36px rgba(58, 163, 255, 0.24);
    }

    .login-card button:hover { transform: translateY(-1px); }

    /* ── View switching ──────────────────────────────────────────────────── */
    .view { display: none; }
    .view.active { display: block; }

    /* ── responsive ── */
    @media (max-width: 1280px) {
      .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .main-grid { grid-template-columns: 1fr; }
      .credentials-grid { grid-template-columns: 1fr; }
      .credentials-env-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 980px) {
      .layout,
      .app-shell { grid-template-columns: 1fr; }
      .sidebar,
      .app-shell > aside { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); min-height: auto; height: auto; position: relative; }
      .nav { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
      .side-card { display: block; margin-top: 16px; }
      .account-menu { bottom: auto; top: calc(100% + 10px); }
      .content,
      .app-shell > .view { padding: 22px; }
      .topbar { flex-direction: column; }
      .top-actions { justify-content: flex-start; }
      .credentials-switch-card { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 680px) {
      .kpis { grid-template-columns: 1fr; }
      .nav { grid-template-columns: 1fr; }
      .top-actions { width: 100%; }
      .form-grid { grid-template-columns: 1fr; }
      .issuer-detail-grid { grid-template-columns: 1fr 1fr; }
      .issuer-detail-tabs { flex-direction: column; }
      .mini-grid { grid-template-columns: 1fr; }
      .credentials-form,
      .credentials-metrics { grid-template-columns: 1fr; }
      .segmented-control { width: 100%; }
      .segmented-control button { flex: 1; min-width: 0; }
      .profile-grid,
      .profile-form-grid { grid-template-columns: 1fr; }
      .flow-card { padding: 20px; }
      .flow-list .flow-step {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
      }
      .flow-list .step-num {
        width: 36px;
        height: 36px;
        border-radius: 12px;
      }
    }

    /* ── Simulator ────────────────────────────────────────────────────────── */

    .sim-hero{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:22px}
    .sim-hero .headline{font-size:clamp(2rem,3.2vw,3.1rem);line-height:.98;margin:6px 0 10px;color:var(--text)}
    .sim-hero .subtitle{max-width:780px;color:var(--muted);font-size:1rem;line-height:1.7;margin:0}
    .sim-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--green);font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
    .sim-eyebrow::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(36,209,143,.13)}
    .sim-env{display:inline-flex;align-items:center;gap:10px;min-width:max-content;border:1px solid rgba(36,209,143,.24);border-radius:999px;background:rgba(36,209,143,.08);color:#c9ffe1;padding:10px 14px;font-size:.78rem;font-weight:900}
    .sim-env::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(36,209,143,.6);animation:simPulse 1.8s infinite}
    @keyframes simPulse{70%{box-shadow:0 0 0 9px rgba(36,209,143,0)}100%{box-shadow:0 0 0 0 rgba(36,209,143,0)}}

    .sim-workspace{display:grid;grid-template-columns:minmax(340px,450px) minmax(430px,1fr);grid-template-areas:"session phone" "flow flow";gap:24px;align-items:start}
    .sim-workspace>.sim-panel:first-child{grid-area:session}
    .sim-right-grid{display:contents}
    .sim-right-grid>.flow-panel{grid-area:flow}
    .sim-right-grid>.phone-wrap{grid-area:phone}
    .sim-panel{border-radius:8px;background:rgba(10,19,35,.78);box-shadow:0 22px 60px rgba(0,0,0,.24)}
    .sim-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 20px 0}
    .sim-panel-head h2{margin:0;font-size:1rem;color:var(--text)}
    .sim-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.045);color:var(--muted);padding:7px 10px;font-size:.7rem;font-weight:900;white-space:nowrap}
    .sim-chip.ready{border-color:rgba(36,209,143,.28);color:#c9ffe1;background:rgba(36,209,143,.08)}
    .sim-form{display:flex;flex-direction:column;gap:14px;padding:20px}
    .sim-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .sim-field{display:flex;flex-direction:column;gap:7px}
    .sim-field label{color:var(--text);font-size:.74rem;font-weight:900}
    .sim-field label small{color:var(--muted);font-weight:800;margin-left:4px}
    .sim-field input,
    .sim-field select{width:100%;height:42px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(8,15,28,.92);color:var(--text);padding:0 12px;font-size:.84rem;outline:none;transition:border .2s,box-shadow .2s,background .2s}
    .sim-field input:focus,
    .sim-field select:focus{border-color:rgba(56,213,255,.72);box-shadow:0 0 0 3px rgba(56,213,255,.12);background:rgba(9,20,36,.98)}
    .sim-field input::placeholder{color:rgba(156,168,187,.55)}
    .sim-readonly{min-height:42px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(8,15,28,.72);color:var(--text);padding:12px;font-size:.82rem;line-height:1.45}
    .sim-conditional{display:none;animation:msgIn .2s ease both}
    .sim-conditional.show{display:flex}
    .sim-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.035);padding:13px 14px}
    .sim-toggle-copy{display:flex;flex-direction:column;gap:3px}
    .sim-toggle-copy strong{font-size:.82rem;color:var(--text)}
    .sim-toggle-copy span{font-size:.72rem;color:var(--muted);line-height:1.35}
    .sim-switch{position:relative;display:inline-flex;width:48px;height:27px;flex:0 0 auto}
    .sim-switch input{opacity:0;width:0;height:0}
    .sim-slider{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:.2s}
    .sim-slider::before{content:'';position:absolute;width:19px;height:19px;left:4px;top:3px;border-radius:50%;background:#fff;transition:.2s}
    .sim-switch input:checked + .sim-slider{background:var(--green);border-color:var(--green)}
    .sim-switch input:checked + .sim-slider::before{transform:translateX(21px)}
    .sim-actions{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:2px}
    .sim-actions .btn{height:44px;justify-content:center}
    .sim-status{font-size:.78rem;color:var(--muted);min-height:1.2em;text-align:center}
    .sim-error{display:none;font-size:.76rem;color:var(--red);padding:8px 10px;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.18);border-radius:8px}
    .sim-health{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.035);padding:11px 12px}
    .sim-health strong{display:block;color:var(--text);font-size:.78rem;margin-bottom:3px}
    .sim-health span{display:block;color:var(--muted);font-size:.7rem;line-height:1.35}
    .sim-health-pill{border:1px solid rgba(156,168,187,.24);border-radius:999px;color:var(--muted);padding:5px 8px;font-size:.62rem;font-weight:950;white-space:nowrap}
    .sim-health.ok{border-color:rgba(36,209,143,.22);background:rgba(36,209,143,.07)}
    .sim-health.ok .sim-health-pill{border-color:rgba(36,209,143,.32);color:#c9ffe1}
    .sim-health.warn{border-color:rgba(255,203,107,.25);background:rgba(255,203,107,.08)}
    .sim-health.warn .sim-health-pill{border-color:rgba(255,203,107,.32);color:#ffe2a8}
    .sim-health.err{border-color:rgba(255,107,107,.28);background:rgba(255,107,107,.08)}
    .sim-health.err .sim-health-pill{border-color:rgba(255,107,107,.36);color:#ffd0d0}
    .sim-file-row input[type=file]{width:100%;height:auto;padding:9px;color:var(--muted)}
    .sim-file-row input[type=file]::file-selector-button{padding:7px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);cursor:pointer;font-size:.75rem;margin-right:8px}
    .metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid rgba(255,255,255,.08);padding:16px 20px 20px}
    .metric{border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.035);padding:12px}
    .metric b{display:block;font-size:1.15rem;color:var(--text);margin-bottom:2px}
    .metric span{font-size:.7rem;color:var(--muted);font-weight:800}

    .flow-panel{display:flex;flex-direction:column;gap:16px;padding:18px}
    .flow-title{display:flex;align-items:center;justify-content:space-between;gap:14px}
    .flow-title h2{margin:0;font-size:1rem;color:var(--text)}
    .flow-bar-wrap{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
    .flow-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .32s ease}
    .flow-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:none;overflow:visible;padding-right:0}
    .flow-steps::-webkit-scrollbar{width:4px}
    .flow-steps::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
    .flow-step{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025);padding:10px;color:var(--muted)}
    .flow-step .dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:.72rem;font-weight:950;color:var(--muted)}
    .flow-step b{display:block;color:var(--text);font-size:.78rem;margin-bottom:2px}
    .flow-step small{display:block;color:var(--muted);font-size:.68rem;line-height:1.35}
    .flow-step .step-state{font-size:.62rem;font-weight:950;text-transform:uppercase;color:var(--muted)}
    .flow-step.active{border-color:rgba(56,213,255,.34);background:rgba(56,213,255,.07)}
    .flow-step.active .dot{background:var(--cyan);border-color:var(--cyan);color:#05111e}
    .flow-step.done{border-color:rgba(36,209,143,.22)}
    .flow-step.done .dot{background:var(--green);border-color:var(--green);color:#06150e}
    .flow-step.done .step-state{color:var(--green)}
    .flow-step.failed{border-color:rgba(255,107,107,.28)}
    .flow-step.failed .dot{background:var(--red);border-color:var(--red);color:#fff}
    .summary-card{border:1px solid rgba(36,209,143,.2);border-radius:8px;background:linear-gradient(135deg,rgba(36,209,143,.09),rgba(56,213,255,.05));padding:15px}
    .summary-card h3{margin:0 0 12px;font-size:.9rem;color:var(--text)}
    .summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .summary-item{border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(4,10,20,.32);padding:10px}
    .summary-item span,.sim-summary h4{display:block;color:var(--muted);font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
    .summary-item b,.sim-summary .val{display:block;color:var(--text);font-size:.85rem;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .sim-summary{display:none;margin-top:14px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
    .sim-summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .sim-summary-grid>div{border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(4,10,20,.26);padding:10px}

    .phone-wrap{display:flex;justify-content:center;padding:22px;min-height:760px}
    .iphone-frame{width:min(100%,430px);height:720px;border:10px solid #05070b;border-radius:34px;background:#0b1418;box-shadow:0 22px 70px rgba(0,0,0,.36);overflow:hidden;position:relative;display:flex;flex-direction:column}
    .iphone-frame::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:92px;height:22px;border-radius:999px;background:#05070b;z-index:3}
    .iphone-notch{display:none}
    .wa-header{height:66px;background:#202c33;display:flex;align-items:center;justify-content:space-between;padding:18px 13px 10px;color:#e9edef;flex-shrink:0}
    .wa-header-left{display:flex;align-items:center;gap:9px;min-width:0}
    .wa-back{font-size:1.4rem;color:#aebbc3}
    .wa-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#25d366,#0a8f55);display:grid;place-items:center;color:#fff;font-weight:900;flex-shrink:0}
    .wa-header-info{display:flex;flex-direction:column;min-width:0}
    .wa-header-name{font-size:.85rem;font-weight:900;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wa-header-status{font-size:.68rem;color:#8fa0aa}
    .wa-header-right{color:#aebbc3;font-size:1.2rem}
    .wa-chat{flex:1;overflow-y:auto;padding:16px 12px 10px;background:#0b1418;display:flex;flex-direction:column}
    .wa-chat::-webkit-scrollbar{width:4px}
    .wa-chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
    .wa-empty{display:grid;place-items:center;height:100%;text-align:center;color:#8fa0aa}
    .wa-empty strong{display:block;color:#e9edef;margin-bottom:4px}
    .wa-empty p{margin:0;max-width:230px;font-size:.76rem;line-height:1.45}
    .wa-empty-icon{width:48px;height:48px;margin:0 auto 10px;border-radius:16px;background:rgba(37,211,102,.13);border:1px solid rgba(37,211,102,.22);display:grid;place-items:center}
    .wa-empty-icon::before{content:'';width:20px;height:20px;border-radius:50%;border:2px solid #25d366;box-shadow:9px 9px 0 -6px #25d366}
    @keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
    .wa-bubble{max-width:88%;width:fit-content;padding:10px 11px 8px;margin:0 0 9px;border-radius:13px;font-size:.8rem;line-height:1.38;word-break:break-word;animation:msgIn .25s ease both;box-shadow:0 5px 18px rgba(0,0,0,.18)}
    .wa-bubble-bot{background:#202c33;color:#e9edef;align-self:flex-start;border-top-left-radius:4px}
    .wa-bubble-consumer{margin-left:auto;background:#005c4b;color:#e9edef;align-self:flex-end;border-top-right-radius:4px}
    .wa-message-link{color:#7df0b3;text-decoration:underline;text-underline-offset:2px;font-weight:800;overflow-wrap:anywhere}
    .wa-inline-pdf{display:block;margin-top:9px;border-radius:7px;overflow:hidden;background:#075e48;width:min(292px,76vw);box-shadow:0 8px 22px rgba(0,0,0,.2);text-decoration:none}
    .wa-inline-pdf:hover .wa-pdf-name{text-decoration:underline;text-underline-offset:2px}
    .wa-pdf-thumb{height:126px;background:#f7fafb;position:relative;padding:8px 10px;color:#111827}
    .wa-pdf-paper{height:100%;background:#fff;border:1px solid #d8e0e6;box-shadow:0 2px 7px rgba(15,23,42,.16);padding:8px 10px;overflow:hidden}
    .wa-pdf-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}
    .wa-pdf-brand{display:flex;align-items:center;gap:5px;font-weight:900;font-size:.34rem;color:#2563a8}
    .wa-pdf-brand::before{content:'';width:14px;height:9px;border-radius:2px;background:linear-gradient(135deg,#2f78c7 0 48%,#55a6d9 49% 100%);display:block;transform:skew(-12deg)}
    .wa-pdf-title{font-size:.4rem;font-weight:900;color:#222;text-align:center;margin-bottom:5px}
    .wa-pdf-lines{display:grid;gap:3px;margin-left:auto;width:58px}
    .wa-pdf-line{height:2px;background:#b8c4ce;border-radius:99px}
    .wa-pdf-line.short{width:70%;margin-left:auto}
    .wa-pdf-table{border:1px solid #c8d1d8;margin-top:8px}
    .wa-pdf-row{display:grid;grid-template-columns:1.1fr .6fr .8fr;height:12px;border-top:1px solid #d8e0e6}
    .wa-pdf-row:first-child{border-top:0;background:#dfe5e9}
    .wa-pdf-cell{border-left:1px solid #d8e0e6}
    .wa-pdf-cell:first-child{border-left:0}
    .wa-pdf-info{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:12px 12px 13px;color:#fff}
    .wa-pdf-badge{width:31px;height:36px;border-radius:4px;background:#e40046;display:grid;place-items:center;color:#fff;font-size:.6rem;font-weight:950;position:relative}
    .wa-pdf-badge::after{content:'';position:absolute;top:0;right:0;border-top:8px solid rgba(255,255,255,.42);border-left:8px solid transparent}
    .wa-pdf-name{font-size:.9rem;font-weight:900;line-height:1.22;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
    .wa-pdf-meta{font-size:.72rem;color:rgba(255,255,255,.68);margin-top:5px}
    .bubble-header{font-size:.62rem;color:rgba(255,255,255,.52);font-weight:900;margin-bottom:5px}
    .wa-bubble-time{display:block;text-align:right;margin-top:4px;color:rgba(255,255,255,.48);font-size:.62rem}
    .wa-bubble-time.consumer{text-align:right}
    .wa-bubble-doc{padding:0;overflow:hidden;min-width:250px}
    .wa-doc-card{display:flex;align-items:center;gap:12px;padding:12px;background:#1b2730}
    .wa-doc-icon{width:42px;height:42px;border-radius:12px;background:rgba(37,211,102,.16);border:1px solid rgba(37,211,102,.24);display:grid;place-items:center;color:#7ff5b6;font-size:.68rem;font-weight:900;flex:0 0 auto}
    .wa-doc-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
    .wa-doc-title{font-size:.78rem;font-weight:900;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wa-doc-sub{font-size:.67rem;color:#a9bcc8;line-height:1.35}
    .wa-doc-link{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px solid rgba(255,255,255,.07);color:#7df0b3;text-decoration:none;font-size:.74rem;font-weight:900}
    .wa-doc-link span:last-child{font-size:1rem;line-height:1}
    .wa-footer{display:none;align-items:center;gap:8px;padding:9px 11px 13px;background:#0b1418;border-top:1px solid rgba(255,255,255,.04);flex-shrink:0}
    .wa-footer-inner{display:flex;align-items:center;gap:8px;width:100%}
    .wa-footer-input{flex:1;height:38px;border:0;border-radius:999px;background:#202c33;color:#e9edef;padding:0 14px;font-size:.78rem;outline:none}
    .wa-footer-input::placeholder{color:#8fa0aa}
    .wa-send-btn{width:38px;height:38px;border:0;border-radius:999px;background:#25d366;color:#fff;font-weight:950;cursor:pointer}

    /* -- toast -- */
    .sim-toast{position:fixed;bottom:28px;right:28px;z-index:9999;padding:10px 18px;border-radius:12px;font-size:.8rem;font-weight:700;color:#fff;background:var(--green);box-shadow:0 8px 28px rgba(0,0,0,.4);opacity:0;transform:translateY(12px);transition:opacity .25s, transform .25s;pointer-events:none}
    .sim-toast.show{opacity:1;transform:translateY(0)}
    .sim-toast.err{background:var(--red)}

    /* -- chat transcript -- */
    .chat-msg { display: flex; flex-direction: column; margin-bottom: 12px; padding: 0 16px; }
    .chat-msg.user { align-items: flex-end; }
    .chat-msg.bot { align-items: flex-start; }
    .chat-bubble {
      max-width: 80%; padding: 10px 14px; border-radius: 14px;
      font-size: .85rem; line-height: 1.45; word-break: break-word;
    }
    .chat-msg.user .chat-bubble { background: var(--cyan); color: #080d18; border-bottom-right-radius: 4px; }
    .chat-msg.bot .chat-bubble { background: #1e293b; color: #e2e8f0; border-bottom-left-radius: 4px; }
    .chat-time { font-size: .65rem; color: #475569; margin-top: 3px; padding: 0 4px; }

    /* -- status pills -- */
    .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
    .pill.ok { background: rgba(34,197,94,0.15); color: #22c55e; }
    .pill.err { background: rgba(239,68,68,0.15); color: #ef4444; }
    .pill.pending { background: rgba(234,179,8,0.15); color: #eab308; }
    .pill.neutral { background: rgba(100,116,139,0.15); color: #94a3b8; }
    .pill.active { background: rgba(34,211,238,0.15); color: #22d3ee; }
    .pill.inactive { background: rgba(100,116,139,0.10); color: #64748b; }

    /* -- portal logo (top-right corner) -- */
    .portal-logo {
      position: fixed;
      top: 16px;
      left: 20px;
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 0.7rem;
      text-decoration: none;
      line-height: 0;
    }
    .logo-brand {
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      font-weight: 800;
      font-size: 1.1rem;
      color: #e2e8f0;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .logo-brand span { color: #22d3ee; }
    .logo-orbital { position: relative; display: inline-block; width: 36px; height: 36px; }
    .logo-orbital::before, .logo-orbital::after {
      content: ''; position: absolute; inset: -6px; border-radius: 50%;
      border: 1.5px solid transparent;
      animation: orbitSpin 6s linear infinite;
      pointer-events: none;
    }
    .logo-orbital::before {
      border-top-color: rgba(0,212,255,0.5);
      border-right-color: rgba(0,212,255,0.2);
      transform: rotateX(65deg);
    }
    .logo-orbital::after {
      border-bottom-color: rgba(0,119,255,0.4);
      border-left-color: rgba(0,119,255,0.15);
      transform: rotateX(65deg) rotate(45deg);
      animation-duration: 9s;
      animation-delay: -3s;
    }
    @keyframes orbitSpin { 100% { transform: rotateX(65deg) rotate(360deg); } }
    .logo-orbital img { display: block; position: relative; z-index: 1; }

    /* -- footer -- */
    .portal-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99999;
      text-align: center;
      padding: 12px 20px;
      background: #080d18;
      border-top: 1px solid #1e293b;
    }
    .portal-footer p {
      color: #64748b;
      font-size: 12px;
      margin: 0;
    }
    .portal-footer a {
      color: #94a3b8;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s;
    }
    .portal-footer a:hover {
      color: #22d3ee;
    }

    /* -- responsive -- */
    @media(max-width:1400px){
      .sim-workspace{grid-template-columns:minmax(330px,430px) minmax(410px,1fr)}
    }
    @media(max-width:1100px){
      .sim-workspace{grid-template-columns:1fr;grid-template-areas:"session" "phone" "flow"}
      .sim-workspace>.sim-panel:first-child{max-width:none}
      .phone-wrap{justify-content:center;min-height:620px}
      .iphone-frame{height:600px}
      .flow-steps{grid-template-columns:1fr}
    }
    @media(max-width:680px){
      .invoice-summary-grid{grid-template-columns:1fr}
      .sim-hero{flex-direction:column}
      .sim-two,.metric-strip,.summary-grid,.sim-summary-grid{grid-template-columns:1fr}
      .phone-wrap{padding:14px;min-height:560px}
      .iphone-frame{height:540px;border-width:8px;border-radius:28px}
      .sim-actions{grid-template-columns:1fr}
    }

    @media (max-width: 760px) {
      .invoice-filter-grid {
        grid-template-columns: 1fr;
      }
    }