/* ───────────────────────────────────────────────────────────
   RunmAi App Store — design tokens
   ─────────────────────────────────────────────────────────── */
:root {
  --bg:           #f5f7fa;
  --bg-2:         #f8fafc;
  --surface:      #ffffff;
  --surface-2:    #f4f7fb;
  --ink:          #0f172a;
  --ink-2:        #334155;
  --muted:        #64748b;
  --line:         #e6ebf2;
  --line-strong:  #cbd5e1;
  --brand:        #004b7c;
  --brand-2:      #035a96;
  --accent:       #0b63a6;
  --accent-2:     #0891b2;
  --accent-soft:  #e6f3ff;
  --success:      #16a34a;
  --warn:         #d97706;
  --danger:       #dc2626;
  --radius:       14px;
  --radius-sm:    10px;

  /* Fitted shell width — matches the Work app (vo-app-work/apps/Work/work.css:21)
     exactly so the blue header bar and the page content share the same lane and
     don't run edge-to-edge on wide monitors. Drives .wt-page-frame/.wt-page-bg
     (base.css) and the FAB anchor below. */
  --wt-shell-width: 1480px;

  /* Push the right-side FAB stack below the topnav (64px) + header card so
     the buttons never sit under the tabs/header. fab-stack.js reads this. */
  --wt-fab-top:   210px;

  /* Anchor the FAB rail to the RIGHT EDGE of the fitted content lane instead of
     the viewport edge, so the buttons sit beside the content rather than sticking
     out past it on wide screens. !important is REQUIRED: the FAB modules
     (ask-ai.js etc.) inject `:root{--wt-fab-right:8px}` at runtime, which would
     otherwise override this. Floors at 20px so the rail clears the corner even
     when the lane nearly fills a narrow viewport. fab-stack.js reads this. */
  --wt-fab-right: max(20px, calc((100vw - var(--wt-shell-width, 1480px)) / 2)) !important;

  /* Layered shadows — soft + crisp combined */
  --shadow-xs:    0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:    0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:       0 8px 24px -8px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
  --shadow-lg:    0 24px 48px -12px rgba(15,23,42,.25), 0 8px 16px -4px rgba(15,23,42,.08);
  --shadow-glow:  0 0 0 1px rgba(11,99,166,.15), 0 12px 32px -8px rgba(11,99,166,.35);

  /* Motion */
  --ease-out:     cubic-bezier(.2,.8,.2,1);
  --ease-soft:    cubic-bezier(.4,.0,.2,1);
  --dur-1:        160ms;
  --dur-2:        260ms;
  --dur-3:        420ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ───────────────────────────────────────────────────────────
   Base
   ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Animated ambient background — RunmAi navy/cyan drift, no purple/pink */
body::before {
  content: "";
  position: fixed; inset: -20vmax;
  z-index: -2;
  background:
    radial-gradient(40vmax 40vmax at 10% 20%, rgba(0,75,124,.10),  transparent 60%),
    radial-gradient(36vmax 36vmax at 90% 30%, rgba(11,99,166,.10), transparent 60%),
    radial-gradient(34vmax 34vmax at 50% 90%, rgba(8,145,178,.08), transparent 60%),
    radial-gradient(30vmax 30vmax at 80% 80%, rgba(34,211,238,.06), transparent 60%);
  filter: blur(40px) saturate(110%);
  animation: drift 38s var(--ease-soft) infinite alternate;
  will-change: transform;
}
body::after {
  /* very subtle dot grid overlay */
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(15,23,42,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 70%);
  opacity: .5;
}

@keyframes drift {
  0%   { transform: translate3d(0,0,0)         scale(1); }
  50%  { transform: translate3d(-3vmax,2vmax,0) scale(1.05); }
  100% { transform: translate3d(2vmax,-3vmax,0) scale(1.02); }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--accent-soft); color: var(--brand); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.28); }
::-webkit-scrollbar-track { background: transparent; }

/* ───────────────────────────────────────────────────────────
   1. AI TOPNAV (RunmAi `.ai-topnav` — white sticky strip with
   logo + horizontal section links + right-side actions)
   ─────────────────────────────────────────────────────────── */
.ai-topnav {
  position: sticky; top: 0; z-index: 500;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 32px;
  box-sizing: border-box;
}
.ai-topnav-spacer { height: 0; width: 100%; flex-shrink: 0; }
.ai-topnav-inner {
  max-width: 1620px;
  margin: 0 auto;
  display: flex; align-items: center; height: 56px;
}
.ai-topnav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: #0f172a;
  font-weight: 800; font-size: 15px; letter-spacing: -.3px;
  margin-right: 32px; flex-shrink: 0; overflow: visible;
}
.ai-topnav-brand img {
  height: 60px; width: auto; object-fit: contain;
  display: block;
  margin-left: -8px;
}
.ai-topnav { height: 64px; padding: 0 24px; }
.ai-topnav-inner { height: 64px; }
.ai-topnav-links {
  display: flex; gap: 2px; flex: 1;
  overflow-x: auto; scrollbar-width: none;
}
.ai-topnav-links::-webkit-scrollbar { display: none; }
.ai-topnav-link {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 10px; font-size: 13px; font-weight: 600;
  color: #525252; text-decoration: none; border: none; background: none;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap; cursor: pointer;
}
.ai-topnav-link:hover { background: #f4f4f4; color: #0f172a; }
.ai-topnav-link.is-active {
  background: var(--accent-soft, #e6f3ff);
  color: var(--brand, #004b7c);
}
.ai-topnav-right {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  flex-shrink: 0;
}
.ai-topnav-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #f1f5f9; color: #475569;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; position: relative;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.ai-topnav-btn:hover {
  background: #e2e8f0; color: #0f172a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.ai-topnav-btn svg { width: 16px; height: 16px; display: block; }
.ai-topnav-avatar,
.ai-topnav-signout {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand, #004b7c), var(--brand-2, #035a96));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  overflow: hidden; cursor: pointer; border: 2px solid transparent;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.ai-topnav-avatar:hover,
.ai-topnav-signout:hover {
  border-color: var(--brand, #004b7c);
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}
.ai-topnav-signout[hidden] { display: none; }
@media (max-width: 768px) { .ai-topnav-links { display: none; } }

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ───────────────────────────────────────────────────────────
   4. PH-HUB LAYOUT  (220px sidebar + main content)
   ─────────────────────────────────────────────────────────── */
.ph-hub {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 500px;
}
@media (max-width: 900px) { .ph-hub { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────
   5. LEFT SIDEBAR (.ph-sidebar + .ph-sb-*)
   ─────────────────────────────────────────────────────────── */
.ph-sidebar {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  position: sticky; top: 76px;
  align-self: start;
  max-height: calc(100vh - 96px); overflow-y: auto;
  z-index: 2;
}
.ph-sidebar::-webkit-scrollbar { display: none; }
.ph-sb-label {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 8px 6px 4px;
}
.ph-sb-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none; cursor: pointer;
  border: none; background: none; text-align: left;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.ph-sb-item:hover {
  background: rgba(255,255,255,0.7);
  transform: translateY(-1px);
}
.ph-sb-item.is-active {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  color: var(--brand);
}
.ph-sb-icon {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
}
.ph-sb-icon svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ph-sb-divider {
  height: 1px; background: var(--line);
  margin: 8px 0;
}
.ph-sb-item.ph-sb-add {
  color: var(--accent);
  background: rgba(11,99,166,0.06);
  margin-top: 4px;
}
.ph-sb-item.ph-sb-add:hover {
  background: rgba(11,99,166,0.10);
  color: var(--brand);
}
.ph-sb-item.ph-sb-add .ph-sb-icon {
  font-size: 18px; font-weight: 700; line-height: 1;
}

/* ───────────────────────────────────────────────────────────
   6. MAIN VIEW CARD
   ─────────────────────────────────────────────────────────── */
.view {
  padding: 28px 32px 56px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  animation: viewIn var(--dur-3) var(--ease-out);
  min-height: 60vh;
  box-sizing: border-box;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .view { padding: 20px 18px 40px; }
}
/* ───────────────────────────────────────────────────────────
   Typography
   ─────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0 0 8px; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: 28px; letter-spacing: -.3px; }
h2 { font-size: 19px; margin-top: 26px; }
h3 { font-size: 15px; }
p  { margin: 0 0 12px; color: var(--ink-2); }
.muted { color: var(--muted); }

.section { margin-bottom: 30px; animation: viewIn var(--dur-3) var(--ease-out) both; }
.section:nth-child(2) { animation-delay: 40ms; }
.section:nth-child(3) { animation-delay: 80ms; }
.section:nth-child(4) { animation-delay: 120ms; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.section-head .link {
  font-size: 13px; color: var(--accent);
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.section-head .link:hover { color: var(--accent-2); transform: translateX(2px); }

/* ───────────────────────────────────────────────────────────
   Cards
   ─────────────────────────────────────────────────────────── */
.card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.app-card {
  position: relative;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.app-card::before {
  /* gradient glow that pulses in on hover */
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(11,99,166,.5), rgba(8,145,178,.4) 50%, rgba(14,165,233,.4));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.app-card::after {
  /* faint shine that sweeps on hover */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform var(--dur-3) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.app-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  background: rgba(255,255,255,.95);
}
.app-card:hover::before { opacity: 1; }
.app-card:hover::after  { transform: translateX(120%); }
.app-card > * { position: relative; z-index: 2; }
.app-card.locked { opacity: .85; }
.app-card.locked:hover { opacity: 1; }

.app-card-head { display: flex; align-items: center; gap: 12px; }
.app-card-head-body { flex: 1; min-width: 0; }

/* Get pill (iOS-style action button) */
.get-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--accent-soft);
  color: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
  flex: 0 0 auto;
}
.get-pill:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 6px 16px -4px rgba(11,99,166,.55);
}
.get-pill:active { transform: scale(.98); }
.get-pill i { font-size: 11px; }

.get-pill.restricted {
  background: #fee2e2;
  color: #991b1b;
}
.get-pill.restricted:hover {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(220,38,38,.55);
}
.get-pill.installed {
  background: #ecfdf5;
  color: #047857;
}
.get-pill.installed:hover {
  background: #047857;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(4,120,87,.55);
}
.get-pill.soon {
  background: var(--surface-2);
  color: var(--muted);
  cursor: default;
}
.get-pill.soon:hover { transform: none; box-shadow: none; }
.get-pill.get-pill-xl {
  padding: 10px 22px;
  font-size: 14px;
}

/* Twin action buttons at the bottom of each card (Open Web + Install) */
.app-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.card-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
.card-action i { font-size: 11px; }
.card-action-secondary {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
.card-action-secondary:hover {
  background: #fff;
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.card-action-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(11,99,166,.5);
}
.card-action-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 20px -6px rgba(11,99,166,.65);
}
.card-action-primary.card-action-installed {
  background: linear-gradient(135deg, #16a34a, #059669);
  box-shadow: 0 4px 12px -4px rgba(22,163,74,.5);
}
.card-action-primary.card-action-installed:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 20px -6px rgba(22,163,74,.65);
}
.card-action-soon {
  grid-column: 1 / -1;
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
  cursor: default;
}
/* When restricted (single Request Access button), span both columns */
.card-action[data-request-access] {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border-color: transparent;
}
.card-action[data-request-access]:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* "Updated" chip */
.chip.new-chip {
  background: linear-gradient(135deg, #dbeafe, #ede9fe);
  color: var(--accent);
  border-color: transparent;
}

/* "Installed" chip */
.chip.installed-chip {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

/* Inline "Remove from my computer" text button under the CTA stack */
.btn-link {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out);
}
.btn-link:hover { color: var(--danger); }
.uninstall-link { align-self: center; margin-top: 6px; }
.app-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), #eef2ff);
  color: var(--accent);
  border-radius: 11px;
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -6px rgba(11,99,166,.4);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  overflow: hidden;
  position: relative;
}
.app-icon-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* When an actual SWA icon is in use, neutralize the gradient background so the icon shows true */
.app-icon-live {
  background: #fff;
  border: 1px solid var(--line);
}
.app-card:hover .app-icon {
  transform: rotate(-4deg) scale(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px -6px rgba(11,99,166,.55);
}
.app-title { font-weight: 650; line-height: 1.25; font-size: 15.5px; }
.app-sub {
  font-size: 12px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.app-sub .dot { color: var(--line-strong); }
.app-desc {
  font-size: 13px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 11px; font-weight: 500; letter-spacing: .01em;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.chip:hover { transform: translateY(-1px); }
.chip.status-live        { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.chip.status-beta        { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.chip.status-coming-soon { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.chip.status-deprecated  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.chip.featured           { background: linear-gradient(135deg, #fef9c3, #fde68a); color: #854d0e; border-color: #fde68a; }

.app-actions { display: flex; gap: 8px; margin-top: auto; }

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform var(--dur-3) var(--ease-out);
  pointer-events: none;
}
.btn:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px -8px rgba(11,99,166,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 30px -10px rgba(11,99,166,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.ghost { background: transparent; box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ───────────────────────────────────────────────────────────
   Hero / Home
   ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    radial-gradient(55% 110% at 100% 0%, rgba(34,211,238,.30), transparent 60%),
    radial-gradient(45% 110% at 0% 100%, rgba(8,145,178,.30), transparent 55%),
    linear-gradient(135deg, #004b7c, #035a96);
  color: #fff; padding: 26px 32px;
  border-radius: 16px;
  margin-bottom: 22px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  box-shadow: 0 14px 32px -12px rgba(0,75,124,0.45), 0 4px 12px rgba(15,23,42,0.08);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero h1 { color: #fff; margin: 0; font-size: 26px; letter-spacing: -.4px; }
.hero p  { color: rgba(255,255,255,.92); margin: 6px 0 0; max-width: 60ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.hero .btn:hover { background: rgba(255,255,255,.22); }
.hero .btn.primary { background: #fff; color: var(--brand); border-color: #fff; box-shadow: 0 10px 24px -8px rgba(0,50,80,.4); }
.hero .btn.primary:hover { filter: brightness(1.02); transform: translateY(-2px); }

/* Needs Attention */
.attention {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.attention .item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.attention .item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.attention .count {
  font-size: 24px; font-weight: 750; color: var(--ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.attention .item.zero { border-left-color: var(--success); opacity: .8; }
.attention .item.zero .count { background: var(--success); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.attention .item:not(.zero)::after {
  /* gentle pulse dot */
  content: "";
  position: absolute; top: 10px; right: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 0 rgba(217,119,6,.55);
  animation: pulse 2.2s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(217,119,6,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(217,119,6,0);   }
  100% { box-shadow: 0 0 0 0   rgba(217,119,6,0);   }
}

/* ───────────────────────────────────────────────────────────
   Tile lists
   ─────────────────────────────────────────────────────────── */
.tile-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.tile {
  position: relative;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; align-items: center; gap: 13px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(11,99,166,.08) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform var(--dur-3) var(--ease-out);
  z-index: -1;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.95);
}
.tile:hover::after { transform: translateX(120%); }
.tile .icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), #eef2ff);
  color: var(--accent);
  border-radius: 10px;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px -6px rgba(11,99,166,.5);
  transition: transform var(--dur-2) var(--ease-out);
}
.tile:hover .icon { transform: rotate(-6deg) scale(1.05); }
.tile .name { font-weight: 600; font-size: 14.5px; }
.tile .count { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ───────────────────────────────────────────────────────────
   App detail — App-Store-style
   ─────────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
  margin-bottom: 14px;
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.back-link:hover { color: var(--accent); transform: translateX(-2px); }

.detail-head-xl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(8,145,178,.08), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(11,99,166,.07), transparent 60%),
    rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 30px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
@media (max-width: 760px) {
  .detail-head-xl { grid-template-columns: auto 1fr; }
  .detail-cta { grid-column: 1 / -1; }
}
.app-icon-xl {
  width: 96px !important; height: 96px !important;
  font-size: 42px !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 32px -10px rgba(11,99,166,.55) !important;
}
.detail-head-body h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.3px; }
.detail-tagline { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.5; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-cta { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.btn-xl {
  padding: 12px 22px;
  font-size: 14px;
  border-radius: 999px;
}

.detail-section { margin-bottom: 30px; animation: viewIn var(--dur-3) var(--ease-out) both; }
.detail-section h2 {
  font-size: 18px;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.detail-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0;
  box-shadow: var(--shadow-xs);
}

/* Information grid (Apple-style two-column rows) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.info-grid > div {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.info-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.info-grid > div:nth-child(odd) { border-right: 1px solid var(--line); }
@media (max-width: 720px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-grid > div:nth-child(odd) { border-right: 0; }
  .info-grid > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
.info-grid dt {
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.info-grid dd {
  margin: 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
  text-align: right;
  max-width: 65%;
}

/* Screenshots */
.screenshot-rail {
  display: flex; gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.screenshot {
  flex: 0 0 auto;
  height: 320px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  transition: transform var(--dur-2) var(--ease-out);
}
.screenshot:hover { transform: translateY(-4px) scale(1.01); }

/* ── Old detail-meta-grid kept as alias if used elsewhere ── */
.detail-meta-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
}
.detail-meta-grid dt { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.detail-meta-grid dd { margin: 0; font-size: 14px; color: var(--ink); }

/* ───────────────────────────────────────────────────────────
   Filter chips
   ─────────────────────────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.filter-bar .chip { cursor: pointer; }
.filter-bar .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 6px 16px -6px rgba(11,99,166,.5); }

/* ───────────────────────────────────────────────────────────
   Empty / locked
   ─────────────────────────────────────────────────────────── */
.empty {
  padding: 36px;
  text-align: center; color: var(--muted);
  background: rgba(255,255,255,.7);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.lock-banner {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 12px; color: var(--danger);
}

/* ───────────────────────────────────────────────────────────
   Forms
   ─────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; max-width: 660px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.form input, .form textarea, .form select {
  font: inherit; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.9);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.form input:hover, .form textarea:hover, .form select:hover { border-color: var(--line-strong); }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(11,99,166,.16);
  background: #fff;
}
.form textarea { min-height: 100px; resize: vertical; }

/* ───────────────────────────────────────────────────────────
   Requests — tabbed view
   ─────────────────────────────────────────────────────────── */
.req-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 18px;
  padding: 6px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
}
.req-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 160px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.req-tab i { color: var(--muted); transition: color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.req-tab:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.req-tab:hover i { color: var(--accent); transform: scale(1.08); }
.req-tab.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px -8px rgba(11,99,166,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.req-tab.on i { color: #fff; }
.req-badge {
  min-width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  padding: 0 7px;
  font-size: 11.5px; font-weight: 700;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  color: inherit;
  border: 1px solid rgba(255,255,255,.18);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.req-tab:not(.on) .req-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.req-tab.on .req-badge {
  background: rgba(255,255,255,.28);
  color: #fff;
}
.req-tab:hover .req-badge { transform: scale(1.08); }

.req-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) {
  .req-layout { grid-template-columns: 1fr; }
}

.req-form-wrap,
.req-history-wrap {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  animation: viewIn var(--dur-3) var(--ease-out);
}

.form-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  max-width: none;
}
.form-wide label { font-size: 13px; }
.form-wide label:has(textarea),
.form-wide > div:last-child {
  grid-column: 1 / -1;
}
.form-wide textarea { min-height: 120px; }
@media (max-width: 640px) {
  .form-wide { grid-template-columns: 1fr; }
}

.req-history h3 {
  margin: 0 0 12px;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.req-history-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 560px; overflow-y: auto;
}
.req-history-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.req-history-item:hover {
  background: #fff;
  border-color: var(--line-strong);
  transform: translateX(2px);
}
.req-history-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.req-history-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.req-history-time  { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.req-history-snippet {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.req-history-meta { margin-top: 6px; }

/* ───────────────────────────────────────────────────────────
   Admin table
   ─────────────────────────────────────────────────────────── */
.admin-table {
  width: 100%; border-collapse: collapse;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-table thead { background: var(--surface-2); }
.admin-table th, .admin-table td { padding: 11px 14px; text-align: left; font-size: 13px; }
.admin-table th { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.admin-table tr { border-top: 1px solid var(--line); transition: background var(--dur-1) var(--ease-out); }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table a { color: var(--accent); transition: color var(--dur-1) var(--ease-out); }
.admin-table a:hover { color: var(--accent-2); }

/* ───────────────────────────────────────────────────────────
   Footer
   ─────────────────────────────────────────────────────────── */
.footer {
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
  display: flex; gap: 8px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
}
.footer .dot { opacity: .55; }
.footer a { color: var(--accent); transition: color var(--dur-1) var(--ease-out); }
.footer a:hover { color: var(--accent-2); }
.footer-powered { font-weight: 500; letter-spacing: .3px; opacity: .85; }

/* ───────────────────────────────────────────────────────────
   Install modal
   ─────────────────────────────────────────────────────────── */
.install-modal {
  position: fixed; inset: 0;
  z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  animation: installFade var(--dur-3) var(--ease-out);
}
.install-modal[hidden] { display: none; }
@keyframes installFade { from { opacity: 0; } to { opacity: 1; } }

.install-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,50,80,.55);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
}

.install-modal-card {
  position: relative;
  z-index: 1;
  width: 100%; max-width: 560px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 26px 28px 22px;
  animation: installPop 320ms var(--ease-out);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes installPop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.install-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.install-modal-close:hover { background: #fee2e2; color: var(--danger); }

.install-modal-head {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 18px;
}
.install-modal-icon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), #eef2ff);
  color: var(--accent);
  border-radius: 12px;
  font-size: 22px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -6px rgba(11,99,166,.4);
}
.install-modal-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.install-modal-head h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.install-modal-sub { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

.install-steps {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.install-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.install-step-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.install-steps strong { font-size: 14px; }
.install-steps em { color: var(--accent); font-style: normal; font-weight: 600; }
.install-steps p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.install-steps i { color: var(--accent); }

.install-modal-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; align-items: center;
}
.install-modal-actions .btn.primary { flex: 1 1 auto; min-width: 200px; }
.install-modal-hint {
  margin: 14px 0 0; font-size: 12px; color: var(--muted); text-align: center;
}

/* ───────────────────────────────────────────────────────────
   Toasts (download confirmations, etc.)
   ─────────────────────────────────────────────────────────── */
#toast-host {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 80;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  background: rgba(0,50,80,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 14px;
  max-width: 380px;
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  pointer-events: auto;
}
.toast.on { transform: translateX(0); opacity: 1; }
.toast i { color: var(--success); font-size: 17px; }
.toast-warn i { color: var(--warn); }
@media (max-width: 540px) {
  #toast-host { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   HUB: Dashboard | Marketplace top tabs + profile menu
   ═══════════════════════════════════════════════════════════ */
.ai-toptabs {
  display: flex; align-items: center; gap: 4px;
  margin: 0 auto;            /* centers the tab pair in the topnav */
}
.ai-toptab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: #525252;
  text-decoration: none; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.ai-toptab svg { width: 16px; height: 16px; }
.ai-toptab:hover { background: #f4f4f4; color: #0f172a; }
.ai-toptab.is-active {
  background: var(--accent-soft);
  color: var(--brand);
}

/* Profile menu */
.ai-profile { position: relative; }
.ai-profile-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 248px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.06);
  padding: 6px;
  z-index: 1200;
  transform-origin: top right;
  animation: profileIn .16s cubic-bezier(.2,.8,.2,1);
}
.ai-profile-menu[hidden] { display: none; }
@keyframes profileIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-profile-head {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.ai-profile-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.ai-profile-mail { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.ai-profile-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.ai-profile-item svg { width: 16px; height: 16px; color: var(--muted); }
.ai-profile-item:hover { background: var(--accent-soft); color: var(--brand); }
.ai-profile-item:hover svg { color: var(--accent); }
.ai-profile-item[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD VIEW — installed-app launcher grid
   ═══════════════════════════════════════════════════════════ */
/* Dashboard mode hides the browse sidebar and goes full width */
body[data-view-mode="dashboard"] .ph-sidebar { display: none; }
body[data-view-mode="dashboard"] .ph-hub { grid-template-columns: minmax(0, 1fr); }

.dash-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.dash-head h1 { margin: 0 0 4px; font-size: 24px; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 20px 14px;
}
.dash-app {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 8px;
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dash-app:hover {
  background: var(--accent-soft);
  transform: translateY(-3px);
}
.dash-app.dragging { opacity: .4; }
.dash-app .app-icon {
  width: 64px !important; height: 64px !important;
  font-size: 26px !important;
  border-radius: 16px !important;
}
.dash-app-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-align: center; line-height: 1.25;
}

/* Empty dashboard */
.dash-empty {
  text-align: center;
  padding: 56px 24px;
  max-width: 460px; margin: 0 auto;
}
.dash-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; font-size: 30px;
  box-shadow: 0 12px 28px -8px rgba(0,75,124,0.5);
}
.dash-empty h1 { font-size: 22px; margin-bottom: 8px; }
.dash-empty p { margin-bottom: 22px; }

/* ── Header logo (dashboard-meta .wt-logo-img) ──────────────────────────
   base.css tunes the logo with object-fit:cover + object-position:center 38%
   + scale(1.36) for the old Learning-Hub logo (which had baked-in padding).
   Our molecular mark fills its canvas, so that crops/zooms it. Show it whole,
   centered, with a little breathing room. */
/* The element is <img data-wt-logo-img> with NO class, and dashboard-meta
   sets object-fit:cover inline — so target the attribute + !important to win. */
[data-wt-logo-img] {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(1) !important;
  padding: 5px !important;
  border-radius: 8px !important;
}

/* ── Center the page shell ──────────────────────────────────────────────
   base.css constrains .wt-page-frame/.wt-page-bg to 1620px but the CENTERING
   (margin:0 auto + side padding) lived in the platform's per-page CSS
   (main-dashboard.css/work.css) which we don't load. Without it the shell is
   left-aligned and runs edge-to-edge. Restore it. */
.wt-page-frame {
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.wt-page-bg { margin: 0 auto !important; }

/* Blue header bar — match the Work app exactly (work.css:3898) so the
   dashboard-meta banner is fitted + centered in the same lane as the content
   instead of stretching the full width of the shell. */
#wtHeaderContainer {
  max-width: var(--wt-bar-max-width, 1620px) !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
}

/* ── Branded per-app icon tiles (matches dashboard Quick Launch) ──────────
   appIcon() now renders a per-app gradient set inline; force the glyph white
   and add the iOS-tile highlight so they read as branded app icons. */
.app-icon.app-icon-brand {
  color: #fff !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(15,23,42,0.14), 0 2px 6px rgba(15,23,42,0.08);
}
.app-icon.app-icon-brand::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 12%, rgba(255,255,255,0.38), rgba(255,255,255,0) 62%);
  pointer-events: none;
}
.app-icon.app-icon-brand i { color: #fff !important; position: relative; z-index: 1; }

/* ── PNG app-icon tiles (real generated per-app icons) ──────────────────── */
.app-icon.app-icon-png {
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(15,23,42,0.14), 0 2px 6px rgba(15,23,42,0.08);
}
.app-icon.app-icon-png .app-icon-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit;
  display: block;
}

/* ── Bundles ────────────────────────────────────────────────────────────── */
.bundle-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.bundle-card {
  position: relative;
  border-radius: 18px;
  padding: 22px 22px 18px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 28px -8px rgba(15,23,42,0.30);
  display: flex; flex-direction: column; gap: 14px;
  isolation: isolate;
}
.bundle-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 28% 12%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
}
.bundle-head { display: flex; align-items: flex-start; gap: 14px; }
.bundle-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 22px; color: #fff;
}
.bundle-title { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.bundle-count { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.bundle-desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.92); }
.bundle-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.bundle-app-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; padding: 4px 10px 4px 5px;
  font-size: 12px; font-weight: 600;
}
.bundle-app-chip img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
.bundle-actions { margin-top: auto; display: flex; gap: 10px; align-items: center; }
.bundle-install {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #0f172a;
  border: 0; border-radius: 999px; padding: 9px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bundle-install:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(0,0,0,0.45); }
.bundle-install.installed { background: rgba(255,255,255,0.22); color: #fff; }

/* ── Bundle: look-inside link + detail header ───────────────────────────── */
.bundle-look {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: 12.5px; font-weight: 700;
  text-decoration: none; opacity: .92;
  padding: 8px 4px;
  transition: opacity .15s ease, transform .15s ease;
}
.bundle-look:hover { opacity: 1; transform: translateX(2px); }
.bundle-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  color: #fff; border-radius: 18px;
  padding: 24px 26px; margin-bottom: 22px;
  box-shadow: 0 12px 28px -8px rgba(15,23,42,0.30);
}
.bundle-detail-head .bundle-title { font-size: 22px; }
.bundle-detail-head .bundle-desc { color: rgba(255,255,255,0.92); margin-top: 4px; max-width: 60ch; }

/* ── Force the original circular shape on avatar + every FAB ─────────────── */
.ai-topnav-avatar, .ai-topnav-signout, .ai-topnav-btn { border-radius: 50% !important; }
.wt-ask-ai-fab, .wt-improve-fab, [data-wt-improve-btn],
.wt-notes-fab, [data-wt-notes-btn], [data-wt-edit-fab],
.wt-ideas-fab, [data-wt-ideas-btn], .wt-voice-hist-fab, [data-wt-voice-hist-btn] {
  border-radius: 50% !important;
}

/* ── Richer bundle branding ─────────────────────────────────────────────── */
.bundle-card { padding: 24px 24px 20px; }
.bundle-icon {
  width: 58px; height: 58px; border-radius: 16px; font-size: 25px;
  background: rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 14px rgba(0,0,0,0.18);
}
.bundle-title { font-size: 19px; }
/* App chips: show the real per-app icon bigger, stronger contrast */
.bundle-app-chip {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.6);
  color: #0f172a;
  font-weight: 700;
  padding: 5px 12px 5px 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.bundle-app-chip img { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.bundle-install { box-shadow: 0 8px 18px -4px rgba(0,0,0,0.45); font-weight: 800; }
.bundle-look {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; padding: 9px 16px;
}
.bundle-look:hover { background: rgba(255,255,255,0.26); }

/* ── Personal "On your account" bundle ─────────────────────────────────────
   Full-width, brand-led, sits above the company bundle grid. Distinct from a
   normal bundle card so the user reads it as "this is YOUR thing." */
.personal-bundle {
  position: relative;
  margin: 18px 0 28px;
  padding: 28px 28px 24px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(34,212,253,0.20), transparent 60%),
    linear-gradient(135deg, #004b7c 0%, #0b63a6 55%, #0891b2 100%);
  box-shadow: 0 24px 60px -22px rgba(0,75,124,0.55), 0 4px 12px -4px rgba(0,75,124,0.25);
  overflow: hidden;
  animation: viewIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.personal-bundle::before {
  /* Subtle blueprint texture so it doesn't read as a flat color block */
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 95%, rgba(255,255,255,0.06) 95%) 0 0 / 100% 26px,
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.06) 95%) 0 0 / 26px 100%;
  pointer-events: none;
  opacity: .65;
}
.personal-bundle-head {
  position: relative;
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 16px;
}
.personal-bundle-mark {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 16px;
  font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px rgba(0,0,0,0.20);
}
.personal-bundle-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  margin-bottom: 4px;
}
.personal-bundle-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.personal-bundle-sub {
  margin-top: 4px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.90);
  max-width: 64ch;
  line-height: 1.5;
}
.personal-bundle-apps {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 18px;
}
.personal-bundle-apps .bundle-app-chip {
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-weight: 700;
  padding: 5px 14px 5px 5px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
.personal-bundle-apps .bundle-app-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.20);
}
.personal-bundle-apps .bundle-app-chip.is-missing {
  background: rgba(255,255,255,0.20);
  color: #fff;
  border-color: rgba(255,255,255,0.40);
  box-shadow: none;
}
.personal-bundle-apps .bundle-app-chip.is-missing img { opacity: 0.85; }
.personal-bundle-apps .chip-tick {
  font-size: 11px; color: #16a34a;
  margin-left: 2px;
}
.personal-bundle-actions {
  position: relative;
  display: flex; gap: 12px; align-items: center;
}
.personal-bundle-actions .bundle-install {
  background: #fff;
  color: var(--mrg-ink, #004b7c);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.35);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .18s ease;
}
.personal-bundle-actions .bundle-install:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(0,0,0,0.45);
  filter: brightness(1.04);
}
.personal-bundle-actions .bundle-install.installed,
.personal-bundle-actions .bundle-install[disabled] {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: none;
  cursor: default;
}
.personal-bundle-empty {
  background: linear-gradient(135deg, #1f2937 0%, #334155 100%);
}
.personal-bundle-empty .personal-bundle-mark { background: rgba(255,255,255,0.10); }
.personal-bundle-empty .personal-bundle-body { display: flex; flex-direction: column; gap: 2px; }