/* ══════════════════════════════════════════════════════════════════════════
   LABBIE DASHBOARD — DESKTOP REDESIGN LAYER

   Extracted VERBATIM from the <style id="wbDashDesktopRedesign"> block in
   frontend/dashboard.html and linked from that exact position, so it still
   loads AFTER /assets/glass.css — which is what lets these rules win.

   Consumers:
     frontend/dashboard.html          the Labbie user dashboard
     coldcalling/public/index.html    Labbie AI Cold Calling
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   LABBIE DASHBOARD — DESKTOP REDESIGN (≥901px ONLY)
   Warm cream canvas + golden glow, floating frosted sidebar card,
   large rounded frosted content cards.
   Mobile/tablet (≤900px) is untouched: the new wrapper elements render
   as display:contents / display:none below the breakpoint.
   This block intentionally sits AFTER glass.css — glass.css forces a
   flat white look with !important, so these later equal-or-higher
   specificity rules are what win on desktop. ═══════════════════════ */

/* New elements are inert below the desktop breakpoint so the mobile
   dashboard renders exactly as before. */
.sidebar-brand   { display: none; }
.sidebar-menu-box { display: contents; }   /* transparent passthrough on mobile */
.sb-logout-divider { display: none; }
.tb-user-caret   { display: none; }
.welcome-card, .welcome-head, .welcome-id, .welcome-text { display: contents; }
.welcome-avatar    { display: none; }
/* Account-pill slots (Bug 2): plain in-flow containers inside each view's
   scrolling content, at EVERY width — the pill scrolls away with the page.
   Never fixed, never sticky. The old fixed #floatingUserSlot stays hidden
   and unused. */
.welcome-user-slot { display: flex; justify-content: flex-end; }
.view-user-slot    { float: right; position: relative; z-index: 30; margin-left: 12px; }
.floating-user-slot { display: none; }

@media (min-width: 901px) {
  :root {
    --dash-accent: #6b7280;
    --dash-card: #ffffff;
    --dash-card-border: rgba(17,24,39,0.07);
    --dash-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 30px rgba(17,24,39,0.05);
  }

  /* ── Warm premium canvas: cream base + golden glow right/bottom ── */
  html { background: #f4efe4 !important; }
  body {
    background:
      radial-gradient(1150px 760px at 104% 106%, rgba(255,170,36,0.50), rgba(255,170,36,0) 62%),
      radial-gradient(820px 560px at 103% -6%,  rgba(255,205,105,0.38), rgba(255,205,105,0) 56%),
      linear-gradient(150deg, #f7f5f2 0%, #f7f1e6 52%, #f5ecd8 100%) !important;
  }

  /* ── Topbar folds away on desktop: the brand lives in the sidebar and
        the account pill is relocated into the welcome card (same DOM
        nodes — see placeUserPill() — so all menu logic is unchanged). ── */
  body .topbar { display: none !important; }
  .layout { height: 100vh; padding: 14px; gap: 14px; }
  /* Top padding = brand pill (44px) + sidebar gap (12px) so content lines up
     with the sidebar menu-card top. The main box itself spans the full sidebar
     height (top & bottom borderline), and scrolls internally so long views
     (Settings, Billing) stay fully reachable. */
  .main   { padding: 56px 18px 28px 4px; overflow-y: auto !important; }
  .main::-webkit-scrollbar { width: 10px; }
  .main::-webkit-scrollbar-track { background: transparent; }
  .main::-webkit-scrollbar-thumb { background: rgba(17,24,39,0.16); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

  /* ── Sidebar: transparent column holding individual isolated boxes ── */
  body .sidebar, body .sidebar.g-sidebar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-right: none !important;
    border-radius: 0;
    box-shadow: none !important;
    width: 264px;
    padding: 0;
    gap: 12px;
    overflow: visible;
  }

  /* Brand: its own isolated pill box — matches the workspace standard
     ([●] Labbie | DASHBOARD ▾): rounded pill, solid dark dot, no "W". */
  .sidebar-brand {
    position: relative;
    z-index: 40;
    align-self: flex-start;   /* hug content like the workspace pill, don't stretch */
    display: inline-flex; align-items: center;
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(17,24,39,0.07);
    border-radius: 999px;
    box-shadow: var(--dash-shadow);
  }
  .sidebar-brand-pill {
    display: inline-flex; align-items: center; gap: 9px;
    width: auto;
    padding: 7px 16px 7px 11px;
    border: 0; background: none; cursor: pointer;
    color: inherit; font: inherit;
  }
  /* Logo URL is relative to THIS stylesheet — see the note in
     labbie-dashboard-shell.css. Do not re-absolutise. */
  .sidebar-brand .brand-mark { width: 28px !important; height: 28px !important; background: url("brand/labbie-logo.png") center / contain no-repeat !important; border-radius: 0 !important; display: block; flex-shrink: 0; }
  .sidebar-brand .brand-mark::after { content: none; }
  .sidebar-brand-word { font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 0.95rem; letter-spacing: -0.02em; color: #16140f; }
  .sb-ws-sep   { width: 1px; height: 18px; background: rgba(0,0,0,0.12); margin: 0 2px; flex-shrink: 0; }
  .sb-ws-label { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 0.66rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #6b7280; }
  .sb-ws-label::after { content: '▾'; font-size: 0.78rem; color: #6b7280; letter-spacing: 0; margin-left: 5px; }
  .sb-chevron  { display: none; }
  .sidebar-brand-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.14); padding: 6px; z-index: 50; }
  .sidebar-brand-menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; font-size: 0.88rem; font-weight: 400; color: #374151; text-decoration: none; transition: background 120ms, color 120ms; white-space: nowrap; }
  .sidebar-brand-menu-item svg { flex-shrink: 0; color: #6b7280; }
  .sidebar-brand-menu-item:hover { background: #f3f4f6; color: #111827; }

  /* Menu + Sign out share ONE isolated box that fills the sidebar height. */
  .sidebar-menu-box {
    display: flex; flex-direction: column; gap: 3px;
    flex: 1;
    padding: 12px;
    background: var(--dash-card);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid var(--dash-card-border);
    border-radius: 18px;
    box-shadow: var(--dash-shadow);
  }

  body .sidebar .nav-item svg { display: block !important; width: 18px !important; height: 18px !important; flex-shrink: 0; color: #6b7280; }
  body .sidebar .nav-item.active svg { color: var(--text); }
  body .sidebar .nav-item {
    padding: 11px 13px !important;
    border-radius: 13px !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    gap: 12px;
    color: #404656;
  }
  body .sidebar .nav-item:hover  { background: rgba(17,24,39,0.05) !important; color: var(--text); }
  body .sidebar .nav-item.active { background: #f1ece2 !important; color: var(--text) !important; font-weight: 500 !important; }
  /* Sign out sits at the bottom of the same box, set off by a hairline. */
  body .sidebar .sb-logout-divider { display: block; height: 1px; background: rgba(17,24,39,0.08); margin: 0 4px 8px; }
  body .sidebar .nav-item.logout {
    margin-top: 0;
    padding: 11px 13px !important;
    border-radius: 13px !important;
    background: none !important;
    color: #404656 !important;
    font-weight: 400 !important;
    gap: 12px;
    justify-content: flex-start;
  }
  body .sidebar .nav-item.logout svg { display: block !important; width: 18px !important; height: 18px !important; flex-shrink: 0; }
  body .sidebar .nav-item.logout:hover { background: rgba(17,24,39,0.04) !important; color: var(--text) !important; }

  /* ── Headlines (shared by every dashboard view) ── */
  body .page-title { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; font-size: 1.45rem !important; font-weight: 400 !important; letter-spacing: -0.025em !important; color: var(--text); }
  body .page-sub   { font-size: 0.92rem !important; }

  /* ── Welcome / credits card ── */
  .welcome-card {
    display: block;
    /* Own stacking level so the account dropdown inside always paints above
       the section cards that follow (they create stacking contexts too via
       will-change: transform). */
    position: relative;
    z-index: 30;
    background: var(--dash-card);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--dash-card-border);
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: var(--dash-shadow);
    margin-bottom: 14px;
  }
  .welcome-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
  .welcome-id   { display: flex; align-items: center; gap: 16px; min-width: 0; }
  .welcome-text { display: block; min-width: 0; }
  .welcome-avatar { display: grid; width: 44px; height: 44px; background: var(--token-avatar-bg, #111827) !important; color: var(--token-avatar-color, #fff) !important; font-size: 0.95rem; font-weight: 500; }
  .welcome-avatar.has-image { display: block; background: none !important; }
  .welcome-text .page-title { font-size: 1.3rem !important; margin-bottom: 2px; line-height: 1.2; }
  .welcome-text .page-sub   { margin-bottom: 0; color: var(--dash-accent) !important; }

  /* The account pill lives in the welcome card on the Dashboard view, and in
     an IN-CONTENT .view-user-slot on every other view (placeUserPill() moves
     it), so the avatar/name/menu is available everywhere and scrolls away
     with the page (Bug 2). The legacy #floatingUserSlot stays hidden. */
  .welcome-user-slot { display: block; flex-shrink: 0; }
  .floating-user-slot { display: none; }
  .welcome-user-slot .tb-user, .floating-user-slot .tb-user { font-size: 0.9rem !important; }
  .welcome-user-slot .tb-user-trigger, .floating-user-slot .tb-user-trigger {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 999px;
    padding: 7px 14px 7px 7px;
    gap: 9px;
    box-shadow: 0 10px 26px rgba(146,104,32,0.10);
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .welcome-user-slot .tb-user-trigger:hover, .floating-user-slot .tb-user-trigger:hover { border-color: rgba(17,24,39,0.18); }
  .welcome-user-slot .avatar, .floating-user-slot .avatar { width: 28px; height: 28px; font-size: 0.78rem; }
  .welcome-user-slot #topName, .floating-user-slot #topName { font-weight: 400; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .welcome-user-slot .tb-user-caret, .floating-user-slot .tb-user-caret { display: block; color: var(--muted); flex-shrink: 0; }
  .welcome-user-slot .account-popover, .floating-user-slot .account-popover, .view-user-slot .account-popover { top: calc(100% + 8px); }

  /* ── Account-pill chrome fallback (desktop only) ──
     Glass-pill look for the pill in ANY container. IN-FLOW ONLY (Bug 2): the
     pill is never fixed/sticky — it sits in the active view's in-content slot
     and scrolls away with the page. Mobile (<901px) is outside this media
     query and keeps the plain mobile chrome. */
  .tb-user { font-size: 0.9rem !important; }
  .tb-user .tb-user-trigger {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 999px;
    padding: 7px 14px 7px 7px;
    gap: 9px;
    box-shadow: 0 10px 26px rgba(146,104,32,0.10);
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .tb-user .tb-user-trigger:hover { border-color: rgba(17,24,39,0.18); }
  .tb-user .avatar { width: 28px; height: 28px; font-size: 0.78rem; }
  .tb-user #topName { font-weight: 400; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-user .tb-user-caret { display: block; color: var(--muted); flex-shrink: 0; }

  body .usage-strip {
    background: rgba(255,255,255,0.60) !important;
    border: 1px solid rgba(17,24,39,0.07) !important;
    border-radius: 16px !important;
    padding: 13px 18px 12px !important;
    margin-bottom: 0 !important;
    gap: 10px;
  }
  body .usage-strip:hover { border-color: rgba(17,24,39,0.16) !important; }
  body .usage-strip-label { color: var(--dash-accent) !important; font-weight: 500 !important; font-size: 0.72rem !important; letter-spacing: 0.09em !important; }
  body .usage-strip-value { color: var(--dash-accent); font-size: 0.92rem; }
  body .usage-strip-value strong { color: var(--text); font-weight: 600; }
  body .usage-strip-link  { color: var(--dash-accent) !important; font-weight: 500; }
  body .usage-strip .credit-bar { height: 8px; background: rgba(17,24,39,0.10) !important; margin: 2px 0; }

  /* ── Section cards (Continue building / Published Websites / Billing / Settings) ── */
  body .section-card, body .section-card.g-card {
    background: var(--dash-card) !important;
    backdrop-filter: blur(20px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
    border: 1px solid var(--dash-card-border) !important;
    border-radius: 18px !important;
    padding: 18px 22px !important;
    box-shadow: var(--dash-shadow) !important;
    margin-bottom: 14px;
  }
  body .section-card:hover { background: rgba(255,255,255,0.90) !important; border-color: rgba(255,255,255,0.72) !important; box-shadow: 0 22px 56px rgba(146,104,32,0.11) !important; }
  body .cb-title      { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; font-size: 1.18rem !important; font-weight: 400 !important; letter-spacing: -0.02em !important; }
  body .cb-subtitle   { color: var(--dash-accent) !important; font-size: 0.88rem !important; }
  body .section-title, body .section-head .section-title { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; font-size: 1.12rem !important; font-weight: 400 !important; letter-spacing: -0.02em !important; }
  body .cb-header { margin-bottom: 14px; }
  body .cb-create-btn, body .cb-create-btn.g-btn-primary { padding: 11px 20px !important; font-size: 0.88rem !important; font-weight: 500 !important; gap: 8px; box-shadow: 0 10px 24px rgba(17,24,39,0.16) !important; }

  /* ── Project cards: larger premium thumbnails, kebab over the thumb ── */
  body .cb-grid { grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); gap: 14px; }
  body .cb-card {
    border-radius: 16px !important;
    border: 1px solid rgba(17,24,39,0.07) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(146,104,32,0.07) !important;
    overflow: hidden;
  }
  body .cb-card:hover { transform: translateY(-2px) !important; border-color: rgba(17,24,39,0.14) !important; box-shadow: 0 18px 44px rgba(146,104,32,0.12) !important; }
  body .cb-card-thumb { height: 104px; border-radius: 16px 16px 0 0; border-bottom: 1px solid rgba(17,24,39,0.06); }
  body .cb-card-body { padding: 13px 16px 14px; }
  body .cb-card-name { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; font-weight: 400 !important; font-size: 0.95rem !important; margin-bottom: 2px; }
  body .cb-card-date { font-size: 0.8rem; }
  body .cb-card .cb-card-menu { position: absolute; top: 10px; right: 10px; z-index: 5; }
  body .cb-card .cb-btn-menu {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: none !important;
    color: #ffffff;
    opacity: 1;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
  }
  body .cb-card .cb-btn-menu:hover,
  body .cb-card .cb-btn-menu[aria-expanded="true"] { background: rgba(17,24,39,0.20) !important; color: #fff; }

  /* ── Published Websites: clean left-aligned empty state ── */
  body #publishedEmpty {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    align-items: center;
    justify-items: start;
    text-align: left;
    padding: 10px 4px 6px !important;
  }
  body #publishedEmpty .cb-empty-icon { grid-row: 1 / span 2; width: 54px; height: 54px; margin: 0; border-radius: 999px; background: rgba(17,24,39,0.06); border-color: rgba(17,24,39,0.10); }
  body #publishedEmpty strong { margin: 0 0 2px; align-self: end; font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; }
  body #publishedEmpty p { margin: 0; align-self: start; color: var(--dash-accent); }

  /* ── Light polish for the sibling views sharing this page ── */
  body .proj-search { background: rgba(255,255,255,0.85); border-radius: 14px; border-color: rgba(17,24,39,0.08); }
  body .plan-card { border-radius: 20px !important; }

  /* ── Desktop selection: warm gold (drag rectangle + selected cards) ──
     Reference #FCE194 / #FDE9B2 / edge #FBD773. Desktop-only on purpose:
     mobile long-press select (≤900px) keeps the base blue ring. !important
     + later source order so the gold ring beats the card's :hover shadow,
     same guarantee the base .cb-card.selected rule establishes. */
  body .wse-selbox {
    background: rgba(252,225,148,0.28);
    border: 1px solid rgba(251,215,115,0.85);
  }
  body .cb-card.selected {
    border-color: rgba(251,215,115,0.95) !important;
    box-shadow: 0 0 0 2px rgba(251,215,115,0.95), 0 0 0 6px rgba(252,225,148,0.35),
                0 14px 34px rgba(146,104,32,0.18) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE PREMIUM SKIN  — ≤900px
   Brings the desktop Workspace aesthetic (warm cream canvas, layered
   glass cards, soft golden shadows) to the mobile dashboard. Pure
   visual upgrade: no layout/hierarchy/markup/behaviour changes — every
   section, flow and data binding is untouched.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root {
    --dash-accent: #6b6256;
    --dash-card: rgba(255,255,255,0.74);
    --dash-card-border: rgba(255,255,255,0.72);
    --dash-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 14px 34px rgba(146,104,32,0.10);
  }

  /* ── Warm premium canvas: cream base + golden glow (matches desktop) ── */
  html {
    background:
      radial-gradient(900px 640px at 106% 104%, rgba(255,170,36,0.42), rgba(255,170,36,0) 60%),
      radial-gradient(680px 460px at 104% -4%,  rgba(255,205,105,0.34), rgba(255,205,105,0) 56%),
      linear-gradient(160deg, #f7f5f2 0%, #f7f1e6 50%, #f5ecd8 100%) !important;
  }
  body { background: transparent !important; }

  /* ── Let the whole dashboard scroll on phones (base sets html/body to
        height:100% + overflow:hidden, which clips everything below the fold).
        Specificity matches the base rule and wins by source order, so the
        menu-open scroll-lock (body.menu-open) still takes precedence. ── */
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }

  /* ── Topbar → floating rounded glass pill ── */
  body .topbar {
    height: 56px;
    margin: 10px 12px 2px;
    top: 8px;
    padding: 0 16px;
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.72);
    border-bottom: 1px solid rgba(255,255,255,0.72);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 14px 34px rgba(146,104,32,0.12);
  }
  body .topbar-menu:hover,
  body .topbar-menu:focus-visible { background: rgba(17,24,39,0.05); }

  /* ── Main: a touch more breathing room ── */
  body .main { padding: 16px 16px 80px; position: relative; }

  /* ── Account pill on mobile (Bug 2): the welcome-card wrappers are
        display:contents here, so an in-flow slot would become its own row and
        push the greeting/credits down. Instead the slot is absolutely
        positioned at the top-right of .main — it takes NO layout space, stays
        inside the normal scrolling content (NOT fixed/sticky), and scrolls
        away with the page. Avatar-only ≤900px (name hidden) so it never
        collides with the greeting. ── */
  .welcome-user-slot { position: absolute; top: 14px; right: 16px; margin: 0; z-index: 40; }
  .welcome-user-slot #topName { display: none; }

  /* ── Greeting (renders directly on the cream — welcome-card is display:contents) ── */
  body .welcome-text .page-title,
  body #viewDashboard .page-title {
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #16140f;
    margin-bottom: 6px;
    /* clearance for the absolutely-positioned account pill top-right */
    padding-right: 52px;
  }
  body .welcome-text .page-sub,
  body #viewDashboard .page-sub {
    color: var(--dash-accent);
    font-size: 0.95rem;
    margin-bottom: 22px;
  }

  /* ── Credits card ── */
  body .usage-strip {
    background: var(--dash-card) !important;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--dash-card-border) !important;
    border-radius: 22px !important;
    padding: 20px 22px !important;
    margin-bottom: 18px !important;
    box-shadow: var(--dash-shadow);
    gap: 12px;
  }
  body .usage-strip:hover { border-color: rgba(255,255,255,0.9) !important; box-shadow: 0 20px 48px rgba(146,104,32,0.13); }
  body .usage-strip-label { color: var(--dash-accent); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; }
  body .usage-strip-value { color: var(--dash-accent); font-size: 0.92rem; }
  body .usage-strip-value strong { color: #16140f; font-weight: 700; }
  body .usage-strip-link { color: var(--dash-accent) !important; font-weight: 500; }
  body .usage-strip .credit-bar { height: 8px; background: rgba(17,24,39,0.10); margin: 4px 0; }

  /* ── Section cards (Continue building / Published Websites) ── */
  body .section-card {
    background: var(--dash-card) !important;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--dash-card-border) !important;
    border-radius: 24px !important;
    padding: 22px 20px !important;
    box-shadow: var(--dash-shadow) !important;
    margin-bottom: 18px;
  }
  body .cb-title {
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.03em;
    color: #16140f;
    margin-bottom: 6px;
  }
  body .cb-subtitle { color: var(--dash-accent) !important; font-size: 0.9rem; }
  body .section-title {
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.03em;
    color: #16140f;
  }

  /* Create-new-website pill: dark with warm-toned shadow */
  body .cb-create-btn {
    padding: 12px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(17,24,39,0.18);
  }

  /* ── Project cards: warmer surface, deeper layered shadow, taller thumb ── */
  body .cb-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 10px 26px rgba(146,104,32,0.10);
    overflow: hidden;
  }
  body .cb-card:hover { box-shadow: 0 16px 38px rgba(146,104,32,0.14); }
  body .cb-card-thumb { height: 96px; border-radius: 18px 18px 0 0; border-bottom: 1px solid rgba(17,24,39,0.05); }
  body .cb-card-name { color: #16140f; }
  body .cb-card-date { color: var(--dash-accent); }
  body .cb-card .cb-btn-menu { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }

  /* ── Published Websites empty state → left-aligned with soft round icon ── */
  body #publishedEmpty {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: center;
    justify-items: start;
    text-align: left;
    padding: 6px 2px !important;
  }
  body #publishedEmpty .cb-empty-icon {
    grid-row: 1 / span 2;
    width: 54px; height: 54px;
    margin: 0;
    border-radius: 999px;
    background: rgba(17,24,39,0.06);
    border-color: rgba(17,24,39,0.10);
  }
  body #publishedEmpty strong { margin: 0 0 2px; align-self: end; font-weight: 600; color: #16140f; }
  body #publishedEmpty p { margin: 0; align-self: start; color: var(--dash-accent); }
}