/*
 * PERABOX Signal
 * Shared product-family styling derived from the original PERABOX staking PWA.
 * App styles own layout and domain-specific illustration; this final layer owns
 * brand, shell, interaction, focus, and surface geometry.
 */

:root {
  --pb-bg: #080808;
  --pb-bg-soft: #0d0d0d;
  --pb-panel: #10100f;
  --pb-panel-strong: #171208;
  --pb-panel-soft: #17120a;
  --pb-canvas: #f3f4ef;
  --pb-surface: #fffdf7;
  --pb-surface-muted: #eceee8;
  --pb-line: rgba(255, 255, 255, 0.09);
  --pb-line-strong: rgba(255, 255, 255, 0.17);
  --pb-text: #f4f2ed;
  --pb-muted: #aaa59e;
  --pb-faint: #77716a;
  --pb-ink: #17150f;
  --pb-ink-muted: #625e56;
  --pb-gold: #e9b949;
  --pb-gold-2: #ffd778;
  --pb-gold-dark: #9f7621;
  --pb-green: #27845f;
  --pb-green-soft: #e0f3e8;
  --pb-blue: #356f9f;
  --pb-blue-soft: #e3eef7;
  --pb-amber: #a8640a;
  --pb-amber-soft: #fff0d6;
  --pb-red: #b83a3d;
  --pb-red-soft: #fbe6e6;
  --pb-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
  --pb-shadow-soft: 0 14px 42px rgba(31, 23, 7, 0.09);
  --pb-radius: 8px;
  --pb-radius-lg: 12px;
  --pb-radius-dialog: 16px;
  --pb-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pb-font-display: Georgia, "Times New Roman", serif;
  --pb-space-1: 4px;
  --pb-space-2: 8px;
  --pb-space-3: 12px;
  --pb-space-4: 16px;
  --pb-space-5: 24px;
  --pb-space-6: 32px;
  --pb-space-7: 48px;
  --pb-duration-fast: 150ms;
  --pb-duration: 200ms;
  --pb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pb-focus: #9a650d;
  --pb-z-base: 0;
  --pb-z-sticky: 20;
  --pb-z-menu: 30;
  --pb-z-scrim: 40;
  --pb-z-overlay: 50;
  --pb-z-toast: 70;
}

body[data-perabox-app] {
  --pb-product-accent: var(--pb-gold-2);
  --pb-product-accent-soft: rgba(255, 215, 120, 0.14);
  accent-color: var(--pb-gold);
  font-family: var(--pb-font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

body[data-perabox-app="customer"] {
  --pb-product-accent: #27845f;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;
}

body[data-perabox-app="driver"] {
  --pb-product-accent: #27845f;
  --radius-small: 8px;
  --radius: 12px;
}

body[data-perabox-app="merchant"] {
  --pb-product-accent: #ff806a;
  --radius: 12px;
}

body[data-perabox-app="admin"] {
  --pb-product-accent: #8caaf7;
  --radius: 12px;
}

body[data-perabox-app="advertising"] {
  --pb-product-accent: #d96f4f;
  --radius: 12px;
  --radius-lg: 14px;
}

body[data-perabox-app] ::selection {
  background: rgba(255, 215, 120, 0.32);
  color: #171208;
}

body[data-perabox-app] *,
body[data-perabox-app] *::before,
body[data-perabox-app] *::after {
  box-sizing: border-box;
}

body[data-perabox-app] :where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
}

body[data-perabox-app] :where(button, [role="button"], summary, a[href]) {
  -webkit-tap-highlight-color: transparent;
}

body[data-perabox-app] :where(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary, a[href]) {
  cursor: pointer;
}

body[data-perabox-app] :where(button, .button, [role="button"]) {
  touch-action: manipulation;
}

body[data-perabox-app] :where(button, .button):disabled,
body[data-perabox-app] [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

body[data-perabox-app] :where(button, .button):active:not(:disabled) {
  transform: translateY(1px);
}

body[data-perabox-app] :where(input, select, textarea)::placeholder {
  color: #77716a;
  opacity: 1;
}

body[data-perabox-app] :where(input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

body[data-perabox-app] :where([aria-busy="true"], .is-loading) {
  cursor: progress;
}

body[data-perabox-app] :where([hidden]) {
  display: none !important;
}

body[data-perabox-app] :where(h1, h2, h3, [id]) {
  scroll-margin-top: 88px;
}

body[data-perabox-app] :where(p, li, dd, .field-help, .form-help) {
  overflow-wrap: anywhere;
}

body[data-perabox-app] :where(.sr-only, .screen-reader-only) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-perabox-app] .skip-link {
  position: fixed;
  z-index: var(--pb-z-toast);
  top: 10px;
  left: 10px;
  min-height: 44px;
  padding: 11px 16px;
  border: 2px solid var(--pb-gold);
  border-radius: var(--pb-radius);
  background: var(--pb-surface);
  color: var(--pb-ink);
  box-shadow: var(--pb-shadow);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - 20px));
  transition: transform var(--pb-duration-fast) var(--pb-ease);
}

body[data-perabox-app] .skip-link:focus-visible {
  transform: translateY(0);
}

body[data-perabox-app] :where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]
):focus-visible {
  outline: 3px solid var(--pb-focus);
  outline-offset: 3px;
}

body[data-perabox-app] :where(
  button,
  .button,
  .icon-button,
  .nav-item,
  .nav-link,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  min-height: 40px;
}

body[data-perabox-app] :where(.icon-button) {
  min-width: 40px;
}

body[data-perabox-app] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  font-size: max(14px, 1em);
}

body[data-perabox-app] :where(dialog) {
  max-width: min(calc(100vw - 32px), 720px);
  max-height: min(calc(100dvh - 32px), 880px);
  border-radius: var(--pb-radius-dialog);
  overscroll-behavior: contain;
}

body[data-perabox-app] dialog::backdrop {
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(3px);
}

body[data-perabox-app] :where(.sidebar, .topbar, .mobile-header, .mobile-nav, .bottom-nav) {
  z-index: var(--pb-z-sticky);
}

body[data-perabox-app] :where(.sidebar-scrim, .modal-overlay, .dialog-backdrop) {
  z-index: var(--pb-z-scrim);
}

body[data-perabox-app] :where(.modal, .dialog, [role="dialog"]) {
  z-index: var(--pb-z-overlay);
}

body[data-perabox-app] :where(.toast-region, .toast-stack, #toast-region, #toastRegion, #toastStack) {
  z-index: var(--pb-z-toast);
}

body[data-perabox-app] :where(
  .panel,
  .card,
  .metric,
  .metric-card,
  .stat-card,
  .summary-card,
  .service-card,
  .kpi-card
) {
  border-radius: var(--pb-radius-lg);
}

body[data-perabox-app] :where(.panel, .card, .metric, .metric-card, .stat-card, .summary-card, .kpi-card) {
  box-shadow: var(--pb-shadow-soft);
}

body[data-perabox-app] .button-primary,
body[data-perabox-app] .button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
  box-shadow: 0 15px 36px rgba(201, 159, 67, 0.22);
  font-weight: 850;
}

body[data-perabox-app] .button-primary:hover:not(:disabled),
body[data-perabox-app] .button.primary:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(135deg, #ffe39b, #d8ad49);
  color: #171208;
  box-shadow: 0 18px 42px rgba(201, 159, 67, 0.29);
}

/* Customer: calm route artwork inside a warm-black, gold navigation frame. */
body[data-perabox-app="customer"] {
  background: #f1f3ef;
}

body[data-perabox-app="customer"] .sidebar {
  border-right-color: var(--pb-line);
  background:
    radial-gradient(circle at 20% 2%, rgba(233, 185, 73, 0.17), transparent 15rem),
    radial-gradient(circle at 90% 35%, rgba(117, 211, 154, 0.07), transparent 18rem),
    linear-gradient(180deg, var(--pb-bg), var(--pb-bg-soft));
  color: var(--pb-text);
  box-shadow: 18px 0 54px rgba(0, 0, 0, 0.15);
}

body[data-perabox-app="customer"] .brand {
  color: var(--pb-text);
}

body[data-perabox-app="customer"] .brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(233, 185, 73, 0.42);
  border-radius: var(--pb-radius);
  background: linear-gradient(145deg, rgba(255, 215, 120, 0.17), rgba(8, 8, 8, 0.18));
  color: var(--pb-gold-2);
  transform: none;
}

body[data-perabox-app="customer"] .brand-mark::before {
  content: "PB";
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.06em;
}

body[data-perabox-app="customer"] .brand-mark span {
  display: none;
}

body[data-perabox-app="customer"] .dialog-brand .brand-mark {
  width: 30px;
  height: 30px;
}

body[data-perabox-app="customer"] .nav-item {
  border-radius: var(--pb-radius);
  color: var(--pb-muted);
}

body[data-perabox-app="customer"] .sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--pb-text);
}

body[data-perabox-app="customer"] .sidebar .nav-item.is-active {
  background: rgba(255, 215, 120, 0.13);
  color: var(--pb-gold-2);
  box-shadow: inset 3px 0 var(--pb-gold), 0 12px 30px rgba(0, 0, 0, 0.2);
}

body[data-perabox-app="customer"] .support-card {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius-lg);
  background: rgba(255, 255, 255, 0.045);
}

body[data-perabox-app="customer"] .support-card strong,
body[data-perabox-app="customer"] .user-chip strong {
  color: var(--pb-text);
}

body[data-perabox-app="customer"] .support-card p,
body[data-perabox-app="customer"] .user-chip small,
body[data-perabox-app="customer"] .user-chip > svg {
  color: var(--pb-muted);
}

body[data-perabox-app="customer"] .support-icon {
  border-radius: var(--pb-radius);
  background: rgba(255, 215, 120, 0.13);
  color: var(--pb-gold-2);
}

body[data-perabox-app="customer"] .text-button {
  color: var(--pb-gold-2);
}

body[data-perabox-app="customer"] .user-chip {
  border-top-color: var(--pb-line);
}

body[data-perabox-app="customer"] .sidebar .avatar {
  background: linear-gradient(145deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
}

body[data-perabox-app="customer"] .dispatch-card {
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius-lg);
  background:
    radial-gradient(circle at 16% 0%, rgba(233, 185, 73, 0.17), transparent 18rem),
    linear-gradient(145deg, var(--pb-panel-soft), var(--pb-bg));
  box-shadow: var(--pb-shadow);
}

body[data-perabox-app="customer"] :where(.summary-card, .service-card) {
  border-color: rgba(23, 18, 8, 0.12);
}

body[data-perabox-app="customer"] .mobile-header,
body[data-perabox-app="customer"] .bottom-nav {
  border-color: var(--pb-line);
  background: rgba(8, 8, 8, 0.94);
  color: var(--pb-text);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.24);
}

body[data-perabox-app="customer"] .mobile-header .brand {
  color: var(--pb-text);
}

body[data-perabox-app="customer"] .mobile-notification-button {
  border-color: var(--pb-line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--pb-gold-2);
}

body[data-perabox-app="customer"] .bottom-nav .nav-item {
  color: var(--pb-muted);
}

body[data-perabox-app="customer"] .bottom-nav .nav-item.is-active {
  color: var(--pb-gold-2);
}

body[data-perabox-app="customer"] .bottom-nav .nav-item.is-active::after {
  background: var(--pb-gold-2);
}

body[data-perabox-app="customer"] .bottom-nav .nav-main > span {
  border-color: var(--pb-bg);
  background: linear-gradient(135deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
}

/* Driver: dark command rail and header, with green reserved for readiness. */
body[data-perabox-app="driver"] .sidebar,
body[data-perabox-app="driver"] .topbar {
  border-color: var(--pb-line);
  background:
    radial-gradient(circle at 18% 2%, rgba(233, 185, 73, 0.16), transparent 17rem),
    radial-gradient(circle at 95% 32%, rgba(117, 211, 154, 0.08), transparent 20rem),
    linear-gradient(180deg, var(--pb-bg), var(--pb-bg-soft));
  color: var(--pb-text);
}

body[data-perabox-app="driver"] .sidebar {
  box-shadow: 18px 0 54px rgba(0, 0, 0, 0.16);
}

body[data-perabox-app="driver"] .brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(233, 185, 73, 0.42);
  border-radius: var(--pb-radius);
  background: linear-gradient(145deg, rgba(255, 215, 120, 0.18), rgba(8, 8, 8, 0.18));
  box-shadow: none;
  color: var(--pb-gold-2);
}

body[data-perabox-app="driver"] .brand-mark > span {
  font-size: 0;
}

body[data-perabox-app="driver"] .brand-mark > span::before {
  content: "PB";
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.06em;
}

body[data-perabox-app="driver"] .brand-mark::after {
  right: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border-color: var(--pb-bg);
  background: var(--pb-green);
  box-shadow: 0 0 14px rgba(117, 211, 154, 0.68);
}

body[data-perabox-app="driver"] .brand-copy small,
body[data-perabox-app="driver"] .side-profile-copy small,
body[data-perabox-app="driver"] .support-card small {
  color: var(--pb-muted);
}

body[data-perabox-app="driver"] .nav-item {
  border-radius: var(--pb-radius);
  color: var(--pb-muted);
}

body[data-perabox-app="driver"] .nav-item.is-active {
  background: rgba(255, 215, 120, 0.13);
  color: var(--pb-gold-2);
}

body[data-perabox-app="driver"] .nav-item.is-active::before {
  background: var(--pb-gold);
}

body[data-perabox-app="driver"] .nav-count {
  background: var(--pb-gold-2);
  color: #171208;
}

body[data-perabox-app="driver"] .support-card {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius-lg);
  background: rgba(255, 255, 255, 0.045);
}

body[data-perabox-app="driver"] .support-icon {
  border-radius: var(--pb-radius);
  background: rgba(255, 215, 120, 0.13);
  color: var(--pb-gold-2);
}

body[data-perabox-app="driver"] .side-profile {
  border-top-color: var(--pb-line);
}

body[data-perabox-app="driver"] .topbar-copy p {
  color: var(--pb-gold);
  letter-spacing: 0.12em;
}

body[data-perabox-app="driver"] .topbar-copy h1,
body[data-perabox-app="driver"] .mobile-brand {
  color: var(--pb-text);
}

body[data-perabox-app="driver"] .sync-state,
body[data-perabox-app="driver"] .availability-label small {
  color: var(--pb-muted);
}

body[data-perabox-app="driver"] .topbar .icon-button,
body[data-perabox-app="driver"] .availability-control {
  border-color: var(--pb-line-strong);
  background: rgba(255, 255, 255, 0.055);
  color: var(--pb-text);
  box-shadow: none;
}

body[data-perabox-app="driver"] .availability-control.is-online {
  border-color: rgba(117, 211, 154, 0.42);
  background: rgba(117, 211, 154, 0.08);
}

body[data-perabox-app="driver"] :where(.metric-card, .panel) {
  border-color: rgba(23, 18, 8, 0.12);
}

body[data-perabox-app="driver"] .metric-primary {
  border-color: rgba(233, 185, 73, 0.28);
  background:
    radial-gradient(circle at 100% 100%, rgba(233, 185, 73, 0.17), transparent 11rem),
    linear-gradient(145deg, var(--pb-panel-soft), var(--pb-bg));
}

body[data-perabox-app="driver"] .mobile-nav {
  border-top-color: var(--pb-line);
  background: rgba(8, 8, 8, 0.95);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.27);
}

body[data-perabox-app="driver"] .mobile-nav > button {
  color: var(--pb-muted);
}

body[data-perabox-app="driver"] .mobile-nav > button.is-active {
  color: var(--pb-gold-2);
}

body[data-perabox-app="driver"] .mobile-online > span {
  border-color: var(--pb-bg);
  background: linear-gradient(135deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
}

/* Merchant: retain the dense operational layout and coral sales semantics. */
body[data-perabox-app="merchant"] .sidebar,
body[data-perabox-app="merchant"] .topbar {
  border-color: var(--pb-line);
  background:
    radial-gradient(circle at 18% 2%, rgba(233, 185, 73, 0.16), transparent 17rem),
    radial-gradient(circle at 100% 42%, rgba(255, 128, 106, 0.06), transparent 20rem),
    linear-gradient(180deg, var(--pb-bg), var(--pb-bg-soft));
  color: var(--pb-text);
}

body[data-perabox-app="merchant"] .sidebar {
  box-shadow: 18px 0 54px rgba(0, 0, 0, 0.16);
}

body[data-perabox-app="merchant"] .brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(233, 185, 73, 0.42);
  border-radius: var(--pb-radius);
  background: linear-gradient(145deg, rgba(255, 215, 120, 0.18), rgba(8, 8, 8, 0.18));
  color: var(--pb-gold-2);
  transform: none;
}

body[data-perabox-app="merchant"] .brand-mark svg {
  display: none;
}

body[data-perabox-app="merchant"] .brand-mark::before {
  content: "PB";
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.06em;
}

body[data-perabox-app="merchant"] .brand small {
  color: var(--pb-gold);
}

body[data-perabox-app="merchant"] .nav-link {
  border-radius: var(--pb-radius);
  color: var(--pb-muted);
}

body[data-perabox-app="merchant"] .nav-link.is-active {
  background: rgba(255, 215, 120, 0.14);
  color: var(--pb-gold-2);
  box-shadow: inset 3px 0 var(--pb-gold), 0 12px 30px rgba(0, 0, 0, 0.2);
}

body[data-perabox-app="merchant"] .nav-link.is-active .nav-count {
  background: var(--pb-gold-2);
  color: #171208;
}

body[data-perabox-app="merchant"] .store-mini,
body[data-perabox-app="merchant"] .side-profile {
  border-color: var(--pb-line);
}

body[data-perabox-app="merchant"] .store-avatar {
  background: linear-gradient(145deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
}

body[data-perabox-app="merchant"] .page-heading p {
  color: var(--pb-gold);
  letter-spacing: 0.12em;
}

body[data-perabox-app="merchant"] .page-heading h1 {
  color: var(--pb-text);
}

body[data-perabox-app="merchant"] .page-heading h1 span,
body[data-perabox-app="merchant"] .connection-pill {
  color: var(--pb-muted);
}

body[data-perabox-app="merchant"] .topbar .icon-button,
body[data-perabox-app="merchant"] .connection-pill {
  border-color: var(--pb-line-strong);
  background: rgba(255, 255, 255, 0.055);
}

body[data-perabox-app="merchant"] :where(.panel, .stat-card) {
  border-color: rgba(23, 18, 8, 0.12);
}

body[data-perabox-app="merchant"] .stat-card.accent-card,
body[data-perabox-app="merchant"] .setup-banner {
  border-color: rgba(233, 185, 73, 0.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 185, 73, 0.16), transparent 12rem),
    linear-gradient(145deg, var(--pb-panel-soft), var(--pb-bg));
}

/* Admin: a compact command bar and readable task surfaces for operators. */
body[data-perabox-app="admin"] .sidebar {
  background:
    radial-gradient(circle at 18% 2%, rgba(233, 185, 73, 0.16), transparent 17rem),
    radial-gradient(circle at 100% 44%, rgba(140, 170, 247, 0.06), transparent 19rem),
    linear-gradient(180deg, var(--pb-bg), var(--pb-bg-soft));
  box-shadow: 18px 0 54px rgba(0, 0, 0, 0.16);
}

body[data-perabox-app="admin"] .brand img {
  border: 1px solid rgba(233, 185, 73, 0.36);
  border-radius: var(--pb-radius);
}

body[data-perabox-app="admin"] .brand small {
  color: var(--pb-gold);
}

body[data-perabox-app="admin"] .nav-item {
  border-radius: var(--pb-radius);
  color: var(--pb-muted);
}

body[data-perabox-app="admin"] .nav-item.active {
  background: rgba(255, 215, 120, 0.13);
  color: var(--pb-gold-2);
  box-shadow: inset 3px 0 var(--pb-gold);
}

body[data-perabox-app="admin"] .nav-item.active .nav-icon {
  color: var(--pb-gold-2);
}

body[data-perabox-app="admin"] .side-card {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius-lg);
  background: rgba(255, 255, 255, 0.045);
}

body[data-perabox-app="admin"] .topbar {
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius-lg);
  background:
    radial-gradient(circle at 0 0, rgba(233, 185, 73, 0.14), transparent 18rem),
    linear-gradient(135deg, var(--pb-panel-soft), var(--pb-bg));
  color: var(--pb-text);
  box-shadow: var(--pb-shadow-soft);
}

body[data-perabox-app="admin"] .crumb {
  color: var(--pb-gold);
}

body[data-perabox-app="admin"] .topbar h1 {
  color: var(--pb-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
}

body[data-perabox-app="admin"] .topbar :where(.search, .icon-button) {
  border-color: var(--pb-line-strong);
  background: rgba(255, 255, 255, 0.055);
  color: var(--pb-muted);
}

body[data-perabox-app="admin"] .topbar .search input {
  color: var(--pb-text);
}

body[data-perabox-app="admin"] .topbar kbd {
  border-color: var(--pb-line-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--pb-muted);
}

body[data-perabox-app="admin"] :where(.metric, .card, .operator-status, .integration-card, .table-card) {
  border-color: rgba(23, 18, 8, 0.12);
  border-radius: var(--pb-radius-lg);
}

body[data-perabox-app="admin"] :where(.metric strong, .topbar h1) {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 850;
}

body[data-perabox-app="admin"] :where(.card-header p, .metric small, .operator-status small, .operator-guide small) {
  font-size: 13px;
  line-height: 1.5;
}

body[data-perabox-app="admin"] :where(.card-header h3, .operator-guide strong, .button) {
  font-size: 14px;
}

/* Reach: staking shell and controls, while campaign art keeps its own colors. */
body[data-perabox-app="advertising"] .sidebar,
body[data-perabox-app="advertising"] .topbar {
  border-color: var(--pb-line);
  background:
    radial-gradient(circle at 18% 2%, rgba(233, 185, 73, 0.16), transparent 17rem),
    radial-gradient(circle at 100% 42%, rgba(217, 111, 79, 0.07), transparent 20rem),
    linear-gradient(180deg, var(--pb-bg), var(--pb-bg-soft));
  color: var(--pb-text);
}

body[data-perabox-app="advertising"] .sidebar {
  box-shadow: 18px 0 54px rgba(0, 0, 0, 0.16);
}

body[data-perabox-app="advertising"] .sidebar::before {
  background: radial-gradient(circle, rgba(233, 185, 73, 0.18), transparent 67%);
}

body[data-perabox-app="advertising"] :where(.brand img, .mobile-brand img) {
  border: 1px solid rgba(233, 185, 73, 0.36);
  border-radius: var(--pb-radius);
  box-shadow: none;
}

body[data-perabox-app="advertising"] .brand small {
  color: var(--pb-gold);
}

body[data-perabox-app="advertising"] .nav-item {
  border-radius: var(--pb-radius);
  color: var(--pb-muted);
}

body[data-perabox-app="advertising"] .nav-item.is-active {
  background: rgba(255, 215, 120, 0.13);
  color: var(--pb-gold-2);
  box-shadow: inset 3px 0 var(--pb-gold);
}

body[data-perabox-app="advertising"] .side-insight {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius-lg);
  background: linear-gradient(145deg, rgba(255, 215, 120, 0.09), rgba(255, 255, 255, 0.035));
}

body[data-perabox-app="advertising"] .side-insight-icon {
  border-radius: var(--pb-radius);
  background: linear-gradient(135deg, var(--pb-gold-2), var(--pb-gold));
}

body[data-perabox-app="advertising"] .side-insight p {
  color: var(--pb-gold-2);
}

body[data-perabox-app="advertising"] .mode-switch {
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius-lg);
  background: rgba(255, 255, 255, 0.055);
}

body[data-perabox-app="advertising"] .mode-switch button {
  color: var(--pb-muted);
}

body[data-perabox-app="advertising"] .mode-switch button.is-active {
  background: linear-gradient(135deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
  box-shadow: 0 8px 22px rgba(201, 159, 67, 0.2);
}

body[data-perabox-app="advertising"] .topbar :where(.top-icon) {
  border-color: var(--pb-line-strong);
  background: rgba(255, 255, 255, 0.055);
  color: var(--pb-text);
}

body[data-perabox-app="advertising"] .connection-state {
  color: var(--pb-muted);
}

body[data-perabox-app="advertising"] :where(.kpi-card, .panel) {
  border-color: rgba(23, 18, 8, 0.12);
}

body[data-perabox-app="advertising"] .kpi-card.featured {
  border-color: rgba(233, 185, 73, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 185, 73, 0.17), transparent 13rem),
    linear-gradient(145deg, var(--pb-panel-soft), var(--pb-bg));
}

body[data-perabox-app="advertising"] .page-heading .button-primary {
  background: linear-gradient(135deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
}

body[data-perabox-app="advertising"] .mobile-nav {
  border-top-color: var(--pb-line);
  background: rgba(8, 8, 8, 0.95);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.27);
}

body[data-perabox-app="advertising"] .mobile-nav > button {
  color: var(--pb-muted);
}

body[data-perabox-app="advertising"] .mobile-nav > button.is-active {
  color: var(--pb-gold-2);
}

body[data-perabox-app="advertising"] .mobile-create > span {
  border-color: var(--pb-bg);
  background: linear-gradient(135deg, var(--pb-gold-2), var(--pb-gold));
  color: #171208;
}

body[data-perabox-app] :where(.mobile-nav, .bottom-nav) {
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}

@media (max-width: 820px) {
  body[data-perabox-app] :where(
    .button,
    .icon-button,
    .nav-item,
    .nav-link,
    .mobile-nav > button,
    .bottom-nav .nav-item,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea
  ) {
    min-height: 44px;
  }

  body[data-perabox-app] :where(.icon-button) {
    min-width: 44px;
  }

  body[data-perabox-app] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    font-size: 16px;
  }

  body[data-perabox-app="admin"] .topbar {
    min-height: 72px;
  }

  body[data-perabox-app="admin"] .nav-item.active {
    box-shadow: inset 0 -3px var(--pb-gold);
  }
}

@media (pointer: coarse) {
  body[data-perabox-app] :where(
    button,
    .button,
    .icon-button,
    .nav-item,
    .nav-link,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select
  ) {
    min-height: 44px;
  }

  body[data-perabox-app] :where(.icon-button) {
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  body[data-perabox-app] *,
  body[data-perabox-app] *::before,
  body[data-perabox-app] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  body[data-perabox-app] {
    --pb-line: rgba(255, 255, 255, 0.28);
    --pb-line-strong: rgba(255, 255, 255, 0.48);
    --pb-muted: #d2cec7;
  }

  body[data-perabox-app] :where(.panel, .card, .metric, .metric-card, .stat-card, .summary-card, .kpi-card) {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  body[data-perabox-app] :where(.sidebar, .topbar, .panel, .card, .metric, .metric-card, .kpi-card) {
    border: 1px solid CanvasText;
  }

  body[data-perabox-app] :where(button, .button, a, input, select, textarea):focus-visible {
    outline: 3px solid Highlight;
  }
}