/* =============================================================================
 * console.css — LimeliJourney Platform Console (operator control plane).
 *
 * A SELF-CONTAINED design system for admin.limelijourney.com. Deliberately NOT
 * the tenant dashboard: no lime/forest brand, no Bricolage wordmark, no warm
 * paper. This is an internal control plane governing every client tenant's data,
 * so the register is austere back-office — cool graphite/steel OKLCH neutrals, a
 * monospace "restricted" system voice, hard hairline frames, a faint grid, and a
 * DARK graphite nav rail (vs the tenant app's green rail) as the identity anchor.
 * Restraint IS the signal.
 *
 * No external stylesheets or fonts on the critical path (system sans + monospace,
 * self-hosted Font Awesome) — the whole point of the rebuild is that a hardened
 * browser can never leave this blank waiting on a CDN.
 *
 * TOKENS: the --pc-* set is the source of truth. The --ll-* aliases below map the
 * ported tenant component classes (.ll-*, .adm-*, .aip-*) onto the control-plane
 * palette so proven markup/JS renders in the console's own identity, unchanged.
 * ============================================================================= */

:root {
  /* ---- control-plane palette (cool graphite + steel; never #000/#fff) ---- */
  --pc-canvas:     oklch(0.955 0.006 255);   /* cool slate paper */
  --pc-panel:      oklch(0.995 0.002 255);
  --pc-elevated:   oklch(0.975 0.004 255);
  --pc-sunken:     oklch(0.935 0.007 256);

  --pc-ink:        oklch(0.27 0.018 262);    /* graphite text + primary action */
  --pc-ink-2:      oklch(0.33 0.02 262);
  --pc-text:       oklch(0.29 0.018 262);
  --pc-soft:       oklch(0.46 0.016 260);
  --pc-mute:       oklch(0.585 0.014 260);
  --pc-faint:      oklch(0.7 0.012 258);

  --pc-border:     oklch(0.885 0.008 258);
  --pc-border-2:   oklch(0.80 0.012 258);
  --pc-hair:       oklch(0.91 0.007 258);

  --pc-steel:      oklch(0.52 0.045 258);    /* the one restrained accent */
  --pc-steel-2:    oklch(0.45 0.05 260);
  --pc-steel-soft: oklch(0.93 0.02 258);
  --pc-steel-line: oklch(0.74 0.035 258);
  --pc-steel-ink:  oklch(0.40 0.055 260);

  --pc-ok:         oklch(0.52 0.12 152);
  --pc-ok-soft:    oklch(0.945 0.035 152);
  --pc-ok-line:    oklch(0.72 0.09 152);
  --pc-warn:       oklch(0.64 0.13 75);
  --pc-warn-soft:  oklch(0.95 0.045 80);
  --pc-danger:     oklch(0.53 0.17 25);
  --pc-danger-soft:oklch(0.955 0.03 25);

  /* dark nav rail — the operator-console anchor */
  --pc-rail:       oklch(0.255 0.014 262);
  --pc-rail-2:     oklch(0.225 0.013 262);
  --pc-rail-line:  oklch(0.34 0.014 262);
  --pc-rail-text:  oklch(0.80 0.012 258);
  --pc-rail-mute:  oklch(0.62 0.012 258);
  --pc-rail-active:oklch(0.98 0.004 255);

  --pc-focus:      oklch(0.52 0.045 258 / 0.30);
  --pc-shadow-1:   0 1px 2px oklch(0.3 0.03 260 / 0.06), 0 1px 1px oklch(0.3 0.03 260 / 0.04);
  --pc-shadow-2:   0 12px 32px -18px oklch(0.28 0.03 260 / 0.35);
  --pc-shadow-drawer: -24px 0 60px -30px oklch(0.24 0.03 260 / 0.45);

  --pc-r-lg: 12px;
  --pc-r-md: 10px;
  --pc-r-sm: 7px;

  --pc-ease:   cubic-bezier(0.23, 1, 0.32, 1);        /* strong ease-out */
  --pc-ease-io:cubic-bezier(0.77, 0, 0.175, 1);       /* strong ease-in-out */
  --pc-ease-dr:cubic-bezier(0.32, 0.72, 0, 1);        /* drawer curve */

  --pc-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pc-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* ---- aliases: ported tenant classes render on the control-plane palette --- */
  --ll-bg: var(--pc-canvas);
  --ll-panel: var(--pc-panel);
  --ll-elevated: var(--pc-elevated);
  --ll-border: var(--pc-border);
  --ll-border-strong: var(--pc-border-2);
  --ll-text: var(--pc-text);
  --ll-text-soft: var(--pc-soft);
  --ll-text-mute: var(--pc-mute);
  --ll-green: var(--pc-steel);
  --ll-on-green: oklch(0.98 0.003 255);
  --ll-accent: var(--pc-steel);
  --ll-accent-soft: var(--pc-steel-soft);
  --ll-accent-ink: var(--pc-steel-ink);
  --ll-accent-line: var(--pc-steel-line);
  --ll-success: var(--pc-ok);
  --ll-warn: var(--pc-warn);
  --ll-danger: var(--pc-danger);
  --ll-danger-soft: var(--pc-danger-soft);
  --ll-focus: var(--pc-focus);
  --ll-shadow-1: var(--pc-shadow-1);
  --ll-r-md: var(--pc-r-md);
  --ll-r-sm: var(--pc-r-sm);
  --ll-fs-xs: 0.72rem;
  --ll-fs-sm: 0.82rem;
  --ll-fs-md: 0.9rem;
  --ll-ease: var(--pc-ease);
  --ll-display: var(--pc-sans);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--pc-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pc-text);
  background: var(--pc-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.d-none { display: none !important; }

/* =============================================================================
 * APP SHELL — dark graphite nav rail + light content.
 * ============================================================================= */
.pc-app {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- left nav rail ---- */
.pc-rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  background: var(--pc-rail);
  border-right: 1px solid var(--pc-rail-line);
  /* faint control-plane grid texture */
  background-image:
    linear-gradient(var(--pc-rail-2) 0 0);
  color: var(--pc-rail-text);
  overflow-y: auto;
}
.pc-rail-head {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--pc-rail-line);
}
.pc-brand { display: flex; align-items: center; gap: 11px; }
.pc-brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, oklch(0.42 0.05 258), oklch(0.32 0.045 260));
  border: 1px solid oklch(0.5 0.05 258 / 0.5);
  color: oklch(0.96 0.01 258); font-size: 0.95rem;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12);
}
.pc-brand-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-brand-name {
  font-size: 0.92rem; font-weight: 640; letter-spacing: -0.01em;
  color: var(--pc-rail-active); line-height: 1.1;
}
.pc-brand-tag {
  font-family: var(--pc-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pc-rail-mute);
}

.pc-rail-strip {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-bottom: 1px solid var(--pc-rail-line);
  font-family: var(--pc-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pc-rail-mute);
}
.pc-rail-strip .pc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pc-ok); box-shadow: 0 0 0 3px oklch(0.52 0.12 152 / 0.18);
}

.pc-nav { padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.pc-nav-label {
  font-family: var(--pc-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pc-rail-mute);
  padding: 14px 10px 6px;
}
.pc-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--pc-r-sm);
  font-size: 0.875rem; font-weight: 500; color: var(--pc-rail-text);
  background: transparent; border: 1px solid transparent;
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; line-height: 1;
  transition: background-color 0.15s var(--pc-ease), color 0.15s var(--pc-ease);
}
.pc-nav-item i { width: 16px; text-align: center; font-size: 0.9em; color: var(--pc-rail-mute); transition: color 0.15s var(--pc-ease); }
.pc-nav-item:hover { background: oklch(1 0 0 / 0.045); color: var(--pc-rail-active); }
.pc-nav-item:hover i { color: var(--pc-rail-text); }
.pc-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pc-rail), 0 0 0 4px oklch(0.6 0.05 258 / 0.7); }
.pc-nav-item.is-active {
  background: oklch(1 0 0 / 0.08); color: var(--pc-rail-active);
  border-color: oklch(1 0 0 / 0.09);
}
.pc-nav-item.is-active i { color: oklch(0.8 0.06 258); }

.pc-rail-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--pc-rail-line); }
.pc-rail-user { padding: 4px 10px 10px; }
.pc-rail-user .pc-ru-email { font-size: 0.78rem; color: var(--pc-rail-text); word-break: break-all; line-height: 1.35; }
.pc-rail-user .pc-ru-role {
  font-family: var(--pc-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pc-rail-mute); margin-top: 3px;
}
.pc-signout {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--pc-r-sm);
  font-family: inherit; font-size: 0.84rem; font-weight: 500;
  color: var(--pc-rail-text); background: transparent;
  border: 1px solid oklch(1 0 0 / 0.08); cursor: pointer;
  transition: background-color 0.15s var(--pc-ease), color 0.15s var(--pc-ease);
}
.pc-signout i { width: 16px; text-align: center; color: var(--pc-rail-mute); }
.pc-signout:hover { background: oklch(1 0 0 / 0.05); color: var(--pc-rail-active); }
.pc-signout:active { transform: scale(0.99); }

/* ---- main column ---- */
.pc-main { min-width: 0; display: flex; flex-direction: column; }

.pc-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 0 32px; height: 56px;
  background: oklch(0.985 0.003 255 / 0.86);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--pc-border);
}
.pc-topbar-title { font-size: 0.9rem; font-weight: 600; color: var(--pc-text); letter-spacing: -0.005em; }
.pc-topbar-sep { color: var(--pc-faint); }
.pc-topbar-crumb { font-family: var(--pc-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pc-mute); }
.pc-topbar-env {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pc-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pc-mute);
  padding: 5px 10px; border: 1px solid var(--pc-border); border-radius: 999px;
  background: var(--pc-panel);
}
.pc-topbar-env .pc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-steel); }

.pc-content { padding: 30px 32px 64px; }
.pc-view[hidden] { display: none; }

/* =============================================================================
 * GATE — never-blank auth states. This is the whole reason for the rebuild.
 * ============================================================================= */
#pc-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--pc-canvas);
  background-image:
    linear-gradient(oklch(0.90 0.008 258 / 0.4) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.90 0.008 258 / 0.4) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center;
}
#pc-gate[hidden] { display: none; }
.pc-gate-card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--pc-panel); border: 1px solid var(--pc-border);
  border-radius: var(--pc-r-lg); padding: 34px 30px;
  box-shadow: var(--pc-shadow-2);
}
.pc-gate-mark {
  width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.pc-gate-mark.is-verify { background: var(--pc-steel-soft); color: var(--pc-steel); }
.pc-gate-mark.is-deny { background: var(--pc-steel-soft); color: var(--pc-steel-ink); }
.pc-gate-mark.is-error { background: var(--pc-danger-soft); color: var(--pc-danger); }
.pc-gate-spin {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid oklch(0.52 0.045 258 / 0.28); border-top-color: var(--pc-steel);
  animation: pc-spin 0.7s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }
.pc-gate-eyebrow {
  font-family: var(--pc-mono); font-size: 0.64rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--pc-steel); margin-bottom: 8px;
}
.pc-gate-title { font-size: 1.05rem; font-weight: 650; color: var(--pc-ink); margin-bottom: 8px; }
.pc-gate-sub { font-size: 0.86rem; color: var(--pc-soft); line-height: 1.55; margin: 0 auto; max-width: 34ch; }
.pc-gate-actions { margin-top: 20px; }
.pc-gate-foot {
  font-family: var(--pc-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--pc-mute); text-align: center; margin-top: 18px;
}

/* =============================================================================
 * PAGE PRIMITIVES (ported .ll-page etc. re-styled)
 * ============================================================================= */
.ll-page { max-width: 1240px; }
.ll-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.ll-page h1 { font-size: 1.55rem; font-weight: 660; letter-spacing: -0.02em; color: var(--pc-ink); }
.ll-sub { margin-top: 7px; font-size: 0.9rem; color: var(--pc-soft); line-height: 1.55; max-width: 74ch; }
.ll-cell-muted, .ll-cell-mute { color: var(--pc-mute); }
.ll-count { font-size: 0.78rem; color: var(--pc-mute); font-variant-numeric: tabular-nums; }

/* =============================================================================
 * BUTTONS
 * ============================================================================= */
.ll-btn {
  font-family: inherit; font-size: 0.85rem; font-weight: 550; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 15px; border-radius: var(--pc-r-sm); cursor: pointer;
  border: 1px solid var(--pc-border-2); background: var(--pc-panel); color: var(--pc-text);
  transition: background-color 0.15s var(--pc-ease), border-color 0.15s var(--pc-ease),
              color 0.15s var(--pc-ease), transform 0.08s var(--pc-ease), box-shadow 0.15s var(--pc-ease);
}
.ll-btn:hover { background: var(--pc-elevated); border-color: var(--pc-border-2); }
.ll-btn:active { transform: scale(0.97); }
.ll-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pc-focus); }
.ll-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.ll-btn i { font-size: 0.9em; }

.ll-btn-primary {
  background: var(--pc-ink); border-color: var(--pc-ink); color: oklch(0.98 0.003 255);
}
.ll-btn-primary:hover { background: var(--pc-ink-2); border-color: var(--pc-ink-2); }

.ll-btn-ghost { background: transparent; border-color: var(--pc-border); color: var(--pc-soft); }
.ll-btn-ghost:hover { background: var(--pc-elevated); color: var(--pc-text); }

.ll-btn-subtle { background: transparent; border-color: transparent; color: var(--pc-mute); }
.ll-btn-subtle:hover { background: var(--pc-sunken); color: var(--pc-text); }

.ll-btn-sm { padding: 7px 11px; font-size: 0.8rem; gap: 6px; }

.btn-spinner.d-none, .btn-label.d-none { display: none; }

/* =============================================================================
 * BADGES
 * ============================================================================= */
.ll-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; letter-spacing: 0.01em;
}
.ll-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.85;
}
.ll-badge-success { background: var(--pc-ok-soft); color: oklch(0.42 0.11 152); border-color: var(--pc-ok-line); }
.ll-badge-warn    { background: var(--pc-warn-soft); color: oklch(0.48 0.12 70); border-color: oklch(0.78 0.1 78); }
.ll-badge-danger  { background: var(--pc-danger-soft); color: oklch(0.47 0.16 25); border-color: oklch(0.8 0.11 25); }
.ll-badge-neutral { background: var(--pc-sunken); color: var(--pc-soft); border-color: var(--pc-border); }
.ll-badge-neutral::before { opacity: 0.55; }

/* =============================================================================
 * DATA TABLE
 * ============================================================================= */
.ll-tablewrap {
  border: 1px solid var(--pc-border); border-radius: var(--pc-r-md);
  background: var(--pc-panel); overflow: hidden; box-shadow: var(--pc-shadow-1);
}
.ll-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.ll-table thead th {
  text-align: left; font-family: var(--pc-mono);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--pc-mute); background: var(--pc-elevated);
  padding: 11px 18px; border-bottom: 1px solid var(--pc-border); white-space: nowrap;
}
.ll-table tbody td { padding: 13px 18px; border-bottom: 1px solid var(--pc-hair); color: var(--pc-text); vertical-align: middle; }
.ll-table tbody tr:last-child td { border-bottom: none; }
.ll-table tbody tr.ll-row { cursor: pointer; transition: background-color 0.12s var(--pc-ease); }
.ll-table tbody tr.ll-row:hover { background: var(--pc-steel-soft); }
.ll-table tbody tr.ll-row:focus-visible { outline: none; background: var(--pc-steel-soft); box-shadow: inset 0 0 0 2px var(--pc-steel-line); }
.ll-sortable { cursor: pointer; user-select: none; }
.ll-sortable:hover { color: var(--pc-text); }
.ll-sort-ind { color: var(--pc-steel); font-size: 0.7em; }
.ll-table tfoot td { padding: 13px 18px; border-top: 2px solid var(--pc-border-2); font-weight: 600; color: var(--pc-text); font-variant-numeric: tabular-nums; }

/* =============================================================================
 * FORM CONTROLS
 * ============================================================================= */
.ll-field { display: block; }
.ll-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--pc-soft);
}
.ll-input, .ll-select {
  width: 100%; font-family: inherit; font-size: 0.88rem; color: var(--pc-text);
  background: var(--pc-panel); border: 1px solid var(--pc-border-2); border-radius: var(--pc-r-sm);
  padding: 9px 12px;
  transition: border-color 0.15s var(--pc-ease), box-shadow 0.15s var(--pc-ease);
}
.ll-input::placeholder { color: var(--pc-faint); }
.ll-input:focus, .ll-select:focus { outline: none; border-color: var(--pc-steel); box-shadow: 0 0 0 3px var(--pc-focus); }
.ll-select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}
.ll-search { position: relative; display: flex; align-items: center; }
.ll-search i { position: absolute; left: 12px; color: var(--pc-faint); font-size: 0.85rem; pointer-events: none; }
.ll-search input {
  width: 100%; font-family: inherit; font-size: 0.88rem; color: var(--pc-text);
  background: var(--pc-panel); border: 1px solid var(--pc-border-2); border-radius: var(--pc-r-sm);
  padding: 9px 12px 9px 34px;
  transition: border-color 0.15s var(--pc-ease), box-shadow 0.15s var(--pc-ease);
}
.ll-search input::placeholder { color: var(--pc-faint); }
.ll-search input:focus { outline: none; border-color: var(--pc-steel); box-shadow: 0 0 0 3px var(--pc-focus); }
.ll-filter-label { font-size: 0.78rem; font-weight: 500; color: var(--pc-soft); display: inline-flex; align-items: center; gap: 6px; }
.ll-filter-label i { color: var(--pc-faint); }

/* =============================================================================
 * SKELETON + EMPTY / ERROR
 * ============================================================================= */
.ll-skel {
  height: 11px; border-radius: 5px; max-width: 100%;
  background: linear-gradient(90deg, var(--pc-sunken) 25%, var(--pc-elevated) 37%, var(--pc-sunken) 63%);
  background-size: 400% 100%; animation: pc-shimmer 1.3s ease-in-out infinite;
}
@keyframes pc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.ll-empty { text-align: center; padding: 48px 24px; }
.ll-empty-icon {
  width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-steel-soft); color: var(--pc-steel); font-size: 1.1rem;
}
.ll-empty.is-error .ll-empty-icon { background: var(--pc-danger-soft); color: var(--pc-danger); }
.ll-empty h3 { font-size: 0.98rem; font-weight: 620; color: var(--pc-ink); margin-bottom: 5px; }
.ll-empty p { font-size: 0.85rem; color: var(--pc-mute); line-height: 1.55; max-width: 42ch; margin: 0 auto; }

/* =============================================================================
 * FORM BANNER (drawer error surface)
 * ============================================================================= */
.ll-form-banner {
  display: none; align-items: flex-start; gap: 9px;
  font-size: 0.82rem; line-height: 1.45; border-radius: var(--pc-r-sm);
  padding: 11px 12px; margin-bottom: 14px; border: 1px solid transparent;
}
.ll-form-banner.ll-show { display: flex; }
.ll-form-banner.ll-err { background: var(--pc-danger-soft); color: oklch(0.44 0.15 25); border-color: oklch(0.8 0.11 25); }
.ll-form-banner i { margin-top: 1px; }

/* =============================================================================
 * DRAWER (slide-over) + TOAST — ported LLDrawer/LLToast class contract.
 * ============================================================================= */
.ll-drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(0.28 0.02 260 / 0); backdrop-filter: blur(0px);
  display: flex; justify-content: flex-end;
  transition: background-color 0.32s var(--pc-ease-dr), backdrop-filter 0.32s var(--pc-ease-dr);
}
.ll-drawer-overlay.ll-open { background: oklch(0.28 0.02 260 / 0.4); backdrop-filter: blur(2px); }
.ll-drawer {
  width: 480px; max-width: 94vw; height: 100%;
  background: var(--pc-canvas); border-left: 1px solid var(--pc-border);
  box-shadow: var(--pc-shadow-drawer);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.34s var(--pc-ease-dr);
}
.ll-drawer.ll-wide { width: 660px; }
.ll-drawer-overlay.ll-open .ll-drawer { transform: translateX(0); }
.ll-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 24px; border-bottom: 1px solid var(--pc-border); background: var(--pc-panel);
}
.ll-drawer-head h2 { font-size: 1.1rem; font-weight: 640; letter-spacing: -0.01em; color: var(--pc-ink); }
.ll-drawer-sub { font-size: 0.8rem; color: var(--pc-mute); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ll-drawer-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--pc-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--pc-mute); cursor: pointer;
  transition: background-color 0.15s var(--pc-ease), color 0.15s var(--pc-ease);
}
.ll-drawer-close:hover { background: var(--pc-sunken); color: var(--pc-text); }
.ll-drawer-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pc-focus); }
.ll-drawer-body { flex: 1; overflow-y: auto; padding: 22px 24px; }
.ll-drawer-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--pc-border); background: var(--pc-panel);
}

.ll-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.ll-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-radius: var(--pc-r-md);
  background: var(--pc-ink); color: oklch(0.96 0.005 255); font-size: 0.85rem; font-weight: 500;
  box-shadow: var(--pc-shadow-2); min-width: 240px; max-width: 380px;
  transform: translateY(12px); opacity: 0;
  transition: transform 0.3s var(--pc-ease), opacity 0.3s var(--pc-ease);
}
.ll-toast.ll-in { transform: translateY(0); opacity: 1; }
.ll-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-steel); flex-shrink: 0; }
.ll-toast-success .ll-toast-dot { background: var(--pc-ok); }
.ll-toast-error .ll-toast-dot { background: var(--pc-danger); }
.ll-toast-info .ll-toast-dot { background: var(--pc-steel); }

@media (prefers-reduced-motion: reduce) {
  .ll-drawer, .ll-drawer-overlay, .ll-toast, .ll-btn, .ll-skel, .pc-gate-spin, .ll-row { transition: none !important; animation: none !important; }
  .ll-drawer { transform: none; }
}

@media (max-width: 900px) {
  .pc-app { grid-template-columns: 1fr; }
  .pc-rail { position: static; height: auto; flex-direction: column; }
  .pc-content { padding: 22px 18px 48px; }
  .pc-topbar { padding: 0 18px; }
}

/* =============================================================================
 * TENANTS + ADMINISTRATORS view (ported .adm-*, restyled via --ll-* aliases)
 * ============================================================================= */
.adm-hide { display: none !important; }

/* Section tabs (Tenants | Administrators) */
.adm-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 20px;
    background: var(--ll-elevated); border: 1px solid var(--ll-border); border-radius: var(--ll-r-md); }
.adm-tab { font: inherit; font-size: var(--ll-fs-sm); font-weight: 550; line-height: 1;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 9px 15px; border: 1px solid transparent; border-radius: var(--ll-r-sm);
    background: transparent; color: var(--ll-text-soft);
    transition: background-color .15s var(--ll-ease), color .15s var(--ll-ease), box-shadow .15s var(--ll-ease); }
.adm-tab i { font-size: .85em; color: var(--ll-text-mute); transition: color .15s var(--ll-ease); }
.adm-tab:hover { color: var(--ll-text); }
.adm-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ll-focus); }
.adm-tab.is-active { background: var(--ll-panel); color: var(--ll-text); border-color: var(--ll-border-strong);
    box-shadow: var(--ll-shadow-1); }
.adm-tab.is-active i { color: var(--ll-green); }

/* Administrators panel */
.adm-admin-intro { max-width: 68ch; margin-bottom: 18px; }
.adm-admin-intro p { margin: 0; font-size: var(--ll-fs-md); color: var(--ll-text-soft); line-height: 1.55; }
.adm-admin-intro strong { color: var(--ll-text); font-weight: 600; }
.adm-addadmin { border: 1px solid var(--ll-border); background: var(--ll-panel);
    border-radius: var(--ll-r-md); padding: 18px; margin-bottom: 26px; }
.adm-addadmin-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.adm-addadmin-field { flex: 1 1 260px; min-width: 0; }
.adm-addadmin-field .ll-label { display: block; margin-bottom: 6px; }
.adm-addadmin .ll-btn-primary { flex-shrink: 0; }
.adm-admin-hint { display: flex; align-items: flex-start; gap: 7px; margin: 11px 0 0;
    font-size: var(--ll-fs-xs); color: var(--ll-text-mute); line-height: 1.5; }
.adm-admin-hint i { margin-top: 1px; }
.adm-admin-msg:empty { display: none; }
.adm-admin-msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px;
    font-size: var(--ll-fs-sm); line-height: 1.5; padding: 10px 12px; border-radius: var(--ll-r-sm);
    border: 1px solid transparent; }
.adm-admin-msg i { margin-top: 1px; flex-shrink: 0; }
.adm-admin-msg-err { background: var(--ll-danger-soft); color: var(--ll-danger); border-color: var(--ll-danger); }
.adm-admin-msg-ok { background: var(--ll-accent-soft); color: var(--ll-accent-ink); border-color: var(--ll-accent-line); }
.adm-roster-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.adm-roster-head h2 { font-family: var(--ll-display); font-size: 1.05rem; font-weight: 600;
    letter-spacing: -0.01em; color: var(--ll-text); margin: 0; }
.adm-admin-actcol { width: 1%; }
.adm-admin-act { text-align: right; white-space: nowrap; }
.ll-badge.adm-you { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }
.adm-admin-remove[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Toolbar */
.adm-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-toolbar .ll-search { flex: 1 1 260px; max-width: 380px; }
.adm-rangewrap { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.adm-rangewrap .ll-filter-label { white-space: nowrap; }
.adm-rangewrap .ll-select { width: auto; min-width: 160px; }

.ll-table td.adm-num, .ll-table th.adm-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-tname { display: flex; flex-direction: column; gap: 2px; }
.adm-tname .adm-tname-main { font-weight: 600; color: var(--ll-text); }
.adm-tname .adm-tname-sub { font-size: var(--ll-fs-xs); color: var(--ll-text-mute); font-variant-numeric: tabular-nums; }
.adm-cell-mute { color: var(--ll-text-mute); }
.ll-table tfoot td.adm-num { text-align: right; }

/* Drawer detail: definition grids */
.adm-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 2px 0 4px; }
.adm-kv.adm-kv-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-kv > div { display: flex; flex-direction: column; gap: 3px; }
.adm-kv dt, .adm-k { font-size: var(--ll-fs-xs); color: var(--ll-text-mute); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.adm-kv dd, .adm-v { margin: 0; font-size: var(--ll-fs-md); color: var(--ll-text); font-weight: 550; font-variant-numeric: tabular-nums; }
.adm-v.adm-v-mono { font-family: var(--pc-mono); font-size: var(--ll-fs-sm); font-weight: 500; }
.adm-drawer-sec { margin-top: 24px; }
.adm-drawer-sec > h3 {
    font-family: var(--ll-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ll-text); margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.adm-drawer-sec > h3 i { color: var(--pc-steel); font-size: 0.9em; }
.adm-drawer-sec > .adm-sec-cap { font-size: var(--ll-fs-sm); color: var(--ll-text-mute); margin: 0 0 14px; line-height: 1.5; }

/* Tracking domains */
.adm-domain { border: 1px solid var(--ll-border); border-radius: var(--ll-r-md); background: var(--ll-panel); margin-bottom: 12px; overflow: hidden; }
.adm-domain-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.adm-domain-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-domain-name { font-weight: 600; color: var(--ll-text); font-size: var(--ll-fs-md); word-break: break-all; }
.adm-domain-meta { font-size: var(--ll-fs-xs); color: var(--ll-text-mute); }
.adm-domain-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ll-badge.adm-badge-anim { transition: color .2s var(--ll-ease), background-color .2s var(--ll-ease); }

/* DNS records handoff block: the trust surface. Cool steel tint (not the tenant green). */
.adm-dns { border-top: 1px solid var(--ll-border); background: var(--pc-sunken); padding: 14px 15px; }
.adm-dns-lead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.adm-dns-lead p { margin: 0; font-size: var(--ll-fs-sm); color: var(--ll-text-soft); line-height: 1.5; max-width: 46ch; }
.adm-dns-lead p strong { color: var(--ll-text); font-weight: 600; }
.adm-dns-note { font-size: var(--ll-fs-xs); color: var(--ll-text-mute); margin: 10px 0 0; line-height: 1.5; }
.adm-dns-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ll-border); border-radius: var(--ll-r-sm); overflow: hidden; background: var(--ll-panel); }
.adm-dns-table th { text-align: left; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ll-text-mute); background: var(--ll-elevated); padding: 7px 11px; border-bottom: 1px solid var(--ll-border); }
.adm-dns-table td { padding: 9px 11px; border-bottom: 1px solid var(--ll-border); vertical-align: middle; font-size: var(--ll-fs-sm); color: var(--ll-text); }
.adm-dns-table tr:last-child td { border-bottom: none; }
.adm-dns-table .adm-dns-type { font-weight: 600; }
.adm-dns-table .adm-dns-val { font-family: var(--pc-mono); word-break: break-all; color: var(--ll-text); }
.adm-dns-table .adm-dns-ttl { color: var(--ll-text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-dns-table td.adm-dns-copycell { width: 1%; white-space: nowrap; text-align: right; }

.adm-copy {
    font: inherit; font-size: var(--ll-fs-xs); font-weight: 550; line-height: 1;
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 6px 10px; border-radius: var(--ll-r-sm);
    border: 1px solid var(--ll-border-strong); background: var(--ll-panel); color: var(--ll-text-soft);
    transition: background-color .16s var(--ll-ease), color .16s var(--ll-ease), border-color .16s var(--ll-ease), transform .08s var(--ll-ease);
}
.adm-copy:hover { background: var(--ll-elevated); color: var(--ll-text); }
.adm-copy:active { transform: scale(0.97); }
.adm-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ll-focus); }
.adm-copy.is-copied { color: var(--ll-accent-ink); background: var(--ll-accent-soft); border-color: var(--ll-accent-line); }

.adm-adddomain { border: 1px dashed var(--ll-border-strong); border-radius: var(--ll-r-md); padding: 15px; }
.adm-adddomain .adm-add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.adm-adddomain .adm-add-domain-field { flex: 1 1 220px; }
.adm-mode { display: inline-flex; border: 1px solid var(--ll-border-strong); border-radius: var(--ll-r-sm); overflow: hidden; }
.adm-mode button { font: inherit; font-size: var(--ll-fs-sm); font-weight: 550; padding: 9px 14px; border: none; background: var(--ll-panel); color: var(--ll-text-soft); cursor: pointer; transition: background-color .15s var(--ll-ease), color .15s var(--ll-ease); }
.adm-mode button + button { border-left: 1px solid var(--ll-border-strong); }
.adm-mode button[aria-pressed="true"] { background: var(--ll-green); color: var(--ll-on-green); }
.adm-add-err { font-size: var(--ll-fs-xs); color: var(--ll-danger); margin: 8px 0 0; min-height: 1em; }

.adm-charges { list-style: none; margin: 0; padding: 0; }
.adm-charges li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ll-border); font-size: var(--ll-fs-sm); }
.adm-charges li:last-child { border-bottom: none; }
.adm-charges .adm-charge-desc { color: var(--ll-text-soft); }
.adm-charges .adm-charge-amt { font-weight: 600; color: var(--ll-text); font-variant-numeric: tabular-nums; }
.adm-charges .adm-charge-when { font-size: var(--ll-fs-xs); color: var(--ll-text-mute); }

.adm-empty-inline { text-align: center; padding: 22px 12px; color: var(--ll-text-mute); font-size: var(--ll-fs-sm); border: 1px dashed var(--ll-border); border-radius: var(--ll-r-md); }
.adm-btn-spin { display: inline-block; }
.adm-btn .btn-spinner.d-none, .adm-btn .btn-label.d-none { display: none; }

@media (max-width: 720px) {
    .adm-kv, .adm-kv.adm-kv-3 { grid-template-columns: 1fr 1fr; }
    .ll-tablewrap { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .adm-copy, .adm-copy:active, .ll-badge.adm-badge-anim { transition: none; transform: none; }
}

/* =============================================================================
 * AI PRICING view (ported .aip-*, restyled via --ll-* aliases)
 * ============================================================================= */
.aip-section { margin-bottom: 40px; }
.aip-section-head { margin-bottom: 14px; }
.aip-section-head h2 {
    font-family: var(--ll-display); font-size: 1.2rem; font-weight: 640;
    letter-spacing: -0.015em; color: var(--ll-text); margin: 0;
}
.aip-section-head .aip-cap {
    font-size: var(--ll-fs-sm); color: var(--ll-text-mute); margin: 5px 0 0;
    max-width: 68ch; line-height: 1.5;
}
.ll-table td.aip-num, .ll-table th.aip-num { text-align: right; font-variant-numeric: tabular-nums; }
.aip-editcell { display: inline-flex; align-items: center; gap: 4px; }
.aip-editcell .aip-affix { color: var(--ll-text-mute); font-size: var(--ll-fs-sm); }
.aip-input {
    width: 92px; font: inherit; font-size: var(--ll-fs-sm); color: var(--ll-text);
    text-align: right; padding: 6px 9px; border: 1px solid var(--ll-border-strong);
    border-radius: var(--ll-r-sm); background: var(--ll-panel); font-variant-numeric: tabular-nums;
    transition: border-color .14s var(--ll-ease), box-shadow .14s var(--ll-ease);
}
.aip-input:focus { outline: none; border-color: var(--ll-accent-line); box-shadow: 0 0 0 3px var(--ll-focus); }
.aip-input.aip-invalid { border-color: var(--ll-danger); box-shadow: 0 0 0 3px var(--ll-danger-soft); }
.aip-input-sm { width: 74px; }
.aip-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.aip-toggle input { width: 16px; height: 16px; accent-color: var(--pc-steel); cursor: pointer; }
.aip-toggle span { font-size: var(--ll-fs-sm); color: var(--ll-text-soft); }
.aip-rowsave { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.aip-savestate { font-size: var(--ll-fs-xs); color: var(--ll-text-mute); font-variant-numeric: tabular-nums; min-height: 1em; }
.aip-savestate.aip-ok { color: var(--ll-success); }
.aip-savestate.aip-err { color: var(--ll-danger); }
.ll-btn.aip-save-btn { transition: transform 160ms var(--ll-ease), background-color .15s var(--ll-ease), opacity .15s ease; }
.ll-btn.aip-save-btn:not(:disabled):active { transform: scale(0.97); }
.aip-margin { font-weight: 650; font-variant-numeric: tabular-nums; }
.aip-margin.aip-pos { color: var(--ll-success); }
.aip-margin.aip-neg { color: var(--ll-danger); }
.aip-margin-badge { margin-left: 8px; }
.aip-tier-select { width: auto; min-width: 132px; padding: 6px 9px; font-size: var(--ll-fs-sm); }
.aip-key { font-weight: 600; color: var(--ll-text); }
.aip-key .aip-key-sub { display: block; font-size: var(--ll-fs-xs); color: var(--ll-text-mute); font-weight: 450; margin-top: 1px; }
.aip-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.aip-sum { display: inline-flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1px solid var(--ll-border); border-radius: var(--ll-r-md); background: var(--ll-panel); min-width: 148px; }
.aip-sum .aip-sum-n { font-family: var(--ll-display); font-size: 1.3rem; font-weight: 650; color: var(--ll-text); line-height: 1; font-variant-numeric: tabular-nums; }
.aip-sum .aip-sum-n.aip-pos { color: var(--ll-success); }
.aip-sum .aip-sum-n.aip-neg { color: var(--ll-danger); }
.aip-sum .aip-sum-l { font-size: var(--ll-fs-xs); color: var(--ll-text-mute); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.aip-usebar { display: block; height: 5px; border-radius: 3px; background: var(--ll-elevated); overflow: hidden; margin-top: 5px; max-width: 130px; }
.aip-usebar > i { display: block; height: 100%; background: var(--ll-accent); border-radius: 3px; }
.aip-usebar.aip-over > i { background: var(--ll-warn); }

@media (max-width: 720px) {
    .aip-input { width: 78px; }
}
@media (prefers-reduced-motion: reduce) {
    .ll-btn.aip-save-btn { transition: none; }
    .ll-btn.aip-save-btn:not(:disabled):active { transform: none; }
}