/* =========================================================
   Sky Hub dashboard — definitive port (v4)
   Built from live screenshots of tutorlink.pro/dashboard
   (Overview, Tickets, Settings — desktop, signed in).

   Design language:
   • Soft flat slate page; pure-white panels, 1px hairline
     borders, very soft shadows — NO glass blur gradients
   • Mono uppercase micro-labels (10.5px, 0.18em) everywhere
   • Plain line icons — no tinted icon boxes in the nav
   • Active nav = sky-tint pill; segmented filters = dark pill
   • Status pills = tinted mono uppercase chips
   • KPI cards = mono label, big tabular number, hint, thin
     gradient bar along the bottom

   RULES (lessons from v1–v3): cosmetic properties only.
   No display/height/overflow/position changes on structural
   containers. Everything scoped to body[data-page="dashboard"].
   ========================================================= */

body[data-page="dashboard"] {
  --sk-bg: #F3F7FC;
  --sk-panel: #FFFFFF;
  --sk-line: rgba(15, 23, 42, 0.08);
  --sk-line-soft: rgba(15, 23, 42, 0.05);
  --sk-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 30px -18px rgba(15, 23, 42, 0.12);
  --sk-text: #0F172A;
  --sk-text-2: #475569;
  --sk-text-3: #94A3B8;
  --sk-sky: #0EA5E9;
  --sk-sky-deep: #0284C7;
  --sk-sky-tint: rgba(56, 189, 248, 0.12);
  --sk-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sk-bg) !important;
}

/* Flat page — no aurora bloom behind the dashboard */
body[data-page="dashboard"]::before,
body[data-page="dashboard"]::after {
  display: none !important;
}

/* ─────────────────────────────────────────────
   1. SIDEBAR — white card, plain icons, sky-tint active
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .dashboard-sidebar {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sk-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-page="dashboard"] .sidebar-logo span {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  color: var(--sk-text) !important;
}

/* Mono group labels — SKY HUB section style */
body[data-page="dashboard"] .sidebar-nav-label {
  font-family: var(--sk-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sk-text-3) !important;
}

/* Nav items — plain line icons (kill the tinted boxes).
   Density matches Sky Hub's h-10 rows so the full rail (nav + quick
   actions + plan card + user panel) fits a 900px viewport without
   internal scrolling. */
body[data-page="dashboard"] .sidebar-nav .nav-item {
  color: var(--sk-text-2) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 37px !important;
  padding: 0 12px !important;
  margin-bottom: 2px !important;
}
body[data-page="dashboard"] .sidebar-nav-group { margin: 0 0 8px !important; }
body[data-page="dashboard"] .sidebar-nav-group + .sidebar-nav-group { margin-top: 10px !important; }
body[data-page="dashboard"] .sidebar-nav-label {
  margin: 0 0 4px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.4 !important;
}
body[data-page="dashboard"] .dashboard-sidebar .sidebar-nav { padding-bottom: 8px !important; }
body[data-page="dashboard"] .sidebar-nav .nav-item .nav-icon-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body[data-page="dashboard"] .sidebar-nav .nav-item i {
  color: inherit !important;
  font-size: 14.5px !important;
}
body[data-page="dashboard"] .sidebar-nav .nav-item:hover {
  background: rgba(15, 23, 42, 0.045) !important;
  color: var(--sk-text) !important;
  transform: none !important;
}
body[data-page="dashboard"] .sidebar-nav .nav-item.active {
  background: var(--sk-sky-tint) !important;
  color: var(--sk-sky-deep) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.28) !important;
  animation: none !important;
}
body[data-page="dashboard"] .sidebar-nav .nav-item.active .nav-icon-wrap {
  background: transparent !important;
}
/* No left accent bar — SkyHub uses the pill alone */
body[data-page="dashboard"] .sidebar-nav .nav-item.active::before {
  display: none !important;
}

body[data-page="dashboard"] .sidebar-footer {
  border-top: 1px solid var(--sk-line-soft) !important;
}

/* Bottom user panel — quiet white chip */
body[data-page="dashboard"] .sidebar-user-panel {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 12px !important;
}

/* ─────────────────────────────────────────────
   2. TOPBAR — flat white bar
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .dashboard-topbar {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--sk-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="dashboard"] .topbar-left h2 {
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--sk-text) !important;
}
body[data-page="dashboard"] .dashboard-topbar .topbar-icon-btn,
body[data-page="dashboard"] .dashboard-topbar .nav-notif-btn {
  background: transparent !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 10px !important;
  color: var(--sk-text-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="dashboard"] .dashboard-topbar .topbar-icon-btn:hover,
body[data-page="dashboard"] .dashboard-topbar .nav-notif-btn:hover {
  background: rgba(15, 23, 42, 0.045) !important;
  color: var(--sk-text) !important;
  border-color: var(--sk-line) !important;
}
body[data-page="dashboard"] .user-profile-dropdown {
  background: transparent !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 999px !important;
}
body[data-page="dashboard"] .profile-text .role {
  font-family: var(--sk-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  color: var(--sk-text-3) !important;
}

/* ─────────────────────────────────────────────
   3. HOME — flat header (breadcrumb → title → sub → dark CTA)
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .welcome-banner.home-welcome-v2,
body[data-page="dashboard"] .home-welcome-v2 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 4px 2px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
body[data-page="dashboard"] .welcome-banner.home-welcome-v2::before,
body[data-page="dashboard"] .welcome-banner.home-welcome-v2::after {
  display: none !important;
}
body[data-page="dashboard"] .home-welcome-deco { display: none !important; }

/* Mono breadcrumb eyebrow — "SKY HUB · OVERVIEW" pattern */
body[data-page="dashboard"] .home-welcome-eyebrow {
  font-family: var(--sk-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--sk-sky-deep) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  display: block !important;
}
body[data-page="dashboard"] .home-welcome-eyebrow::before { display: none !important; }

/* Big Alphakind page title */
body[data-page="dashboard"] .home-welcome-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  color: var(--sk-text) !important;
  margin: 0 0 6px !important;
}
body[data-page="dashboard"] .home-welcome-sub {
  color: var(--sk-text-2) !important;
  font-size: 14px !important;
  margin: 0 0 14px !important;
}

/* CTA: dark slate pill (SkyHub "Open new ticket") + quiet ghost */
body[data-page="dashboard"] .home-welcome-actions .lg-btn-primary {
  background: #0F172A !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 22px -10px rgba(15, 23, 42, 0.45) !important;
}
body[data-page="dashboard"] .home-welcome-actions .lg-btn-primary:hover {
  background: #1E293B !important;
  transform: translateY(-1px) !important;
}
body[data-page="dashboard"] .home-welcome-actions .lg-btn-glass {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 999px !important;
  color: var(--sk-text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────
   4. KPI STRIP — mono label, big number, gradient bar
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .home-stat-pill,
body[data-page="dashboard"] .home-stat-pill--rich {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sk-shadow) !important;
  padding: 16px 18px 18px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body[data-page="dashboard"] .home-stat-pill:hover {
  transform: none !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

/* SkyHub KPI cards have no icon chip */
body[data-page="dashboard"] .home-stat-pill-icon { display: none !important; }

body[data-page="dashboard"] .home-stat-pill-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
/* Label ABOVE the number — mono uppercase */
body[data-page="dashboard"] .home-stat-pill-label {
  order: -1 !important;
  font-family: var(--sk-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sk-text-3) !important;
  margin: 0 0 6px !important;
}
body[data-page="dashboard"] .home-stat-pill-num {
  font-family: var(--font-display) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--sk-text) !important;
  line-height: 1 !important;
}

/* Thin gradient bar along the bottom — accent varies per card.
   Every geometry prop is !important: a legacy polish rule sizes this
   same pseudo to a 120×120 radial glow, which blew the bars up into
   giant corner blobs. */
body[data-page="dashboard"] .home-stat-pill::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: auto !important;
  bottom: 12px !important;
  width: auto !important;
  height: 4px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background: linear-gradient(90deg, #38BDF8, rgba(56, 189, 248, 0.1)) !important;
  pointer-events: none !important;
}
body[data-page="dashboard"] .home-stat-pill:has(.home-stat-icon-purple)::after {
  background: linear-gradient(90deg, #FB923C, rgba(251, 146, 60, 0.1)) !important;
}
body[data-page="dashboard"] .home-stat-pill:has(.home-stat-icon-amber)::after {
  background: linear-gradient(90deg, #34D399, rgba(52, 211, 153, 0.1)) !important;
}
body[data-page="dashboard"] .home-stat-pill:has(.home-stat-icon-green)::after {
  background: linear-gradient(90deg, #A78BFA, rgba(167, 139, 250, 0.1)) !important;
}

/* Kill legacy decorations inside KPI cards — the big radial corner
   blobs painted by polish-pass pseudos on the inner rows. */
body[data-page="dashboard"] .home-stat-pill-top::before,
body[data-page="dashboard"] .home-stat-pill-top::after,
body[data-page="dashboard"] .home-stat-pill-body::before,
body[data-page="dashboard"] .home-stat-pill-body::after,
body[data-page="dashboard"] .home-stat-pill-foot::before,
body[data-page="dashboard"] .home-stat-pill-foot::after,
body[data-page="dashboard"] .home-stat-pill--rich::before {
  display: none !important;
  content: none !important;
}
body[data-page="dashboard"] .home-stat-pill-top,
body[data-page="dashboard"] .home-stat-pill-body {
  background: none !important;
}
/* Foot content sits above the bar */
body[data-page="dashboard"] .home-stat-pill-foot {
  margin-bottom: 10px !important;
  border-top: 0 !important;
}
body[data-page="dashboard"] .home-stat-delta {
  font-family: var(--sk-mono) !important;
  font-size: 10.5px !important;
}
body[data-page="dashboard"] .home-stat-link {
  color: var(--sk-sky-deep) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────
   5. PANELS — dash cards, lists, pills (home + everywhere)
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .dash-card,
body[data-page="dashboard"] .dash-need-help {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sk-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="dashboard"] .dash-card::before,
body[data-page="dashboard"] .dash-card::after { display: none !important; }

body[data-page="dashboard"] .dash-card-head-text h4 {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--sk-text) !important;
  text-transform: none !important;
}
body[data-page="dashboard"] .dash-card-sub {
  color: var(--sk-text-3) !important;
  font-size: 12px !important;
}
body[data-page="dashboard"] .dash-card-head-icon {
  border-radius: 9px !important;
}
body[data-page="dashboard"] .dash-card-see-all {
  background: transparent !important;
  border: 0 !important;
  color: var(--sk-sky-deep) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body[data-page="dashboard"] .dash-card-see-all:hover { text-decoration: underline !important; }

/* Home ticket list rows — activity-row style */
body[data-page="dashboard"] #dash-my-tickets-list .dash-ticket-item {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body[data-page="dashboard"] #dash-my-tickets-list .dash-ticket-item:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(56, 189, 248, 0.04) !important;
}

/* Quick actions — flat ghost rows */
body[data-page="dashboard"] .quick-actions .lg-btn-glass {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 12px !important;
  color: var(--sk-text-2) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body[data-page="dashboard"] .quick-actions .lg-btn-glass:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(56, 189, 248, 0.06) !important;
  color: var(--sk-text) !important;
}
body[data-page="dashboard"] .quick-actions .lg-btn-primary {
  background: linear-gradient(180deg, #22BDFF, #0AA1E7) !important;
  border-radius: 12px !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px -10px rgba(34, 189, 255, 0.5) !important;
}

/* Need Help — quiet white card, no violet wash */
body[data-page="dashboard"] .dash-need-help {
  background: var(--sk-panel) !important;
}
body[data-page="dashboard"] .dash-need-help .lg-btn-primary {
  background: linear-gradient(180deg, #22BDFF, #0AA1E7) !important;
  border-radius: 999px !important;
}

/* ─────────────────────────────────────────────
   6. STATUS PILLS — tinted mono chips (global)
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .lg-tag,
body[data-page="dashboard"] .glass-status {
  font-family: var(--sk-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  border: 0 !important;
}
body[data-page="dashboard"] .lg-tag-open,
body[data-page="dashboard"] .status-open {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #0369A1 !important;
}
body[data-page="dashboard"] .lg-tag-pending,
body[data-page="dashboard"] .status-pending {
  background: rgba(251, 191, 36, 0.2) !important;
  color: #92400E !important;
}
body[data-page="dashboard"] .lg-tag-closed,
body[data-page="dashboard"] .status-closed {
  background: rgba(52, 211, 153, 0.18) !important;
  color: #065F46 !important;
}

/* ─────────────────────────────────────────────
   7. TICKETS TAB — white panels, dark segmented filters
   ───────────────────────────────────────────── */
body[data-page="dashboard"] #tab-tickets .ticket-sidebar,
body[data-page="dashboard"] #tab-support .ticket-sidebar,
body[data-page="dashboard"] #tab-tickets .ticket-main,
body[data-page="dashboard"] #tab-support .ticket-main {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sk-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="dashboard"] .ticket-sidebar-top {
  background: transparent !important;
  border-bottom: 1px solid var(--sk-line-soft) !important;
}

/* Filter pills → SkyHub segmented control (dark active) */
body[data-page="dashboard"] .ticket-filter-pills {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}
body[data-page="dashboard"] .ticket-filter-pill {
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--sk-text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body[data-page="dashboard"] .ticket-filter-pill:hover {
  color: var(--sk-text) !important;
  background: rgba(15, 23, 42, 0.04) !important;
  transform: none !important;
}
body[data-page="dashboard"] .ticket-filter-pill.active {
  background: #0F172A !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.4) !important;
}

/* Search box */
body[data-page="dashboard"] .ticket-sidebar-search {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 10px !important;
}
body[data-page="dashboard"] .ticket-sidebar-search input {
  color: var(--sk-text) !important;
}

/* Section header ("Your Tickets") — mono rule */
body[data-page="dashboard"] .ticket-section-header,
body[data-page="dashboard"] .ticket-section-header h4 {
  font-family: var(--sk-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sk-text-3) !important;
}

/* Ticket cards in the list */
body[data-page="dashboard"] #tab-tickets .ticket-sidebar-card,
body[data-page="dashboard"] #tab-support .ticket-sidebar-card {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body[data-page="dashboard"] #tab-tickets .ticket-sidebar-card:hover,
body[data-page="dashboard"] #tab-support .ticket-sidebar-card:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: var(--sk-shadow) !important;
  transform: none !important;
}
body[data-page="dashboard"] #tab-tickets .ticket-sidebar-card.active,
body[data-page="dashboard"] #tab-support .ticket-sidebar-card.active {
  background: rgba(56, 189, 248, 0.06) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
}
body[data-page="dashboard"] .ticket-card-name { color: var(--sk-text) !important; }
body[data-page="dashboard"] .ticket-card-ticket-id,
body[data-page="dashboard"] .ticket-card-time {
  font-family: var(--sk-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--sk-text-3) !important;
}

/* Chat surfaces */
body[data-page="dashboard"] .ticket-chat-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sk-line-soft) !important;
}
body[data-page="dashboard"] #tab-tickets .ticket-msg-inner {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
body[data-page="dashboard"] #tab-tickets .ticket-msg--me .ticket-msg-inner {
  background: rgba(56, 189, 248, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}
body[data-page="dashboard"] .ticket-chat-compose {
  background: var(--sk-panel) !important;
  border-top: 1px solid var(--sk-line-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="dashboard"] #ticket-chat-input {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 12px !important;
  color: var(--sk-text) !important;
}
body[data-page="dashboard"] .ticket-chat-attach {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 10px !important;
  color: var(--sk-text-2) !important;
}

/* Addon rail (right side of tickets) */
body[data-page="dashboard"] .ads-section-label {
  font-family: var(--sk-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sk-text-3) !important;
}
body[data-page="dashboard"] .ads-usage-panel,
body[data-page="dashboard"] .ads-inventory-panel {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--sk-shadow) !important;
}

/* ─────────────────────────────────────────────
   8. SETTINGS TAB — white mini-nav + form cards,
      mono field labels (the "Universal account" look)
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .sett-layout {
  background: transparent !important;
}
body[data-page="dashboard"] .sett-sidebar {
  background: var(--sk-panel) !important;
  border-right: 1px solid var(--sk-line-soft) !important;
}
body[data-page="dashboard"] .sett-sidebar-label {
  font-family: var(--sk-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  color: var(--sk-text-3) !important;
}
body[data-page="dashboard"] .sett-sidebar-item {
  border-radius: 10px !important;
  color: var(--sk-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body[data-page="dashboard"] .sett-sidebar-item:hover {
  background: rgba(15, 23, 42, 0.04) !important;
  color: var(--sk-text) !important;
}
body[data-page="dashboard"] .sett-sidebar-item.active {
  background: var(--sk-sky-tint) !important;
  color: var(--sk-sky-deep) !important;
  font-weight: 600 !important;
}

body[data-page="dashboard"] #tab-settings,
body[data-page="dashboard"] .settings-v2-wrap {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sk-shadow) !important;
}
body[data-page="dashboard"] .sett-pane-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--sk-text) !important;
}
body[data-page="dashboard"] .sett-pane-meta { color: var(--sk-text-3) !important; }

/* Field labels → mono uppercase (PROFILE PICTURE / USERNAME pattern) */
body[data-page="dashboard"] #tab-settings label,
body[data-page="dashboard"] #tab-settings .sett-field-label,
body[data-page="dashboard"] .creator-field label,
body[data-page="dashboard"] .sp-section-title {
  font-family: var(--sk-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sk-text-3) !important;
}
body[data-page="dashboard"] #tab-settings .sett-input,
body[data-page="dashboard"] #tab-settings .sett-textarea,
body[data-page="dashboard"] #tab-settings input[type="text"],
body[data-page="dashboard"] #tab-settings input[type="email"],
body[data-page="dashboard"] #tab-settings input[type="url"],
body[data-page="dashboard"] #tab-settings textarea {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 12px !important;
  color: var(--sk-text) !important;
  box-shadow: none !important;
}
body[data-page="dashboard"] #tab-settings input:focus,
body[data-page="dashboard"] #tab-settings textarea:focus {
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16) !important;
}

/* ─────────────────────────────────────────────
   9. GALLERY + misc shared surfaces
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .dash-recent-gallery-tile {
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 12px !important;
}
body[data-page="dashboard"] .gallery-viewer-card {
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
}

/* Generic primary buttons inside the dashboard pick up the cyan pill */
body[data-page="dashboard"] .ticket-new-btn-full {
  background: linear-gradient(180deg, #22BDFF, #0AA1E7) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px -10px rgba(34, 189, 255, 0.5) !important;
}

/* Scrollbars — thin + quiet on white panels */
body[data-page="dashboard"] *::-webkit-scrollbar { width: 8px; height: 8px; }
body[data-page="dashboard"] *::-webkit-scrollbar-track { background: transparent; }
body[data-page="dashboard"] *::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

/* ─────────────────────────────────────────────
   10. NOTIFICATIONS — un-clip the dropdown
   The topbar is an .lg-glass-card, which carries overflow:hidden
   (glass.css) for its sheen sweep. That clipped the absolutely
   positioned .notif-dropdown into invisibility. The skyhub topbar
   is flat (no sheen), so releasing overflow is free.
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .dashboard-topbar {
  overflow: visible !important;
  position: relative;
  z-index: 80 !important;
}
body[data-page="dashboard"] .dashboard-topbar::before,
body[data-page="dashboard"] .dashboard-topbar::after { display: none !important; }
body[data-page="dashboard"] .nav-notifications { position: relative !important; }
body[data-page="dashboard"] .notif-dropdown {
  z-index: 400 !important;
  background: var(--sk-panel) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="dashboard"] .notif-section-label {
  font-family: var(--sk-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sk-text-3) !important;
}

/* ─────────────────────────────────────────────
   11. 1-1 CHROME — topbar search, collapse rail,
   quick actions, current-plan card (Sky Hub Layout.jsx)
   ───────────────────────────────────────────── */

/* Topbar centre search (injected by js/dashboard-skyhub.js) */
body[data-page="dashboard"] .skt-search {
  flex: 1 1 auto;
  max-width: 430px;
  margin: 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 11px;
  color: var(--sk-text-3);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body[data-page="dashboard"] .skt-search:focus-within {
  border-color: rgba(34, 189, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(34, 189, 255, 0.14);
}
body[data-page="dashboard"] .skt-search i { font-size: 12.5px; color: var(--sk-text-3); }
body[data-page="dashboard"] .skt-search input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 13px;
  color: var(--sk-text);
  padding: 0 !important;
}
body[data-page="dashboard"] .skt-search input::placeholder { color: var(--sk-text-3); }
body[data-page="dashboard"] .skt-search kbd,
body[data-page="dashboard"] .skt-collapse-row kbd {
  font-family: var(--sk-mono);
  font-size: 10px;
  color: var(--sk-text-3);
  background: rgba(15, 23, 42, 0.05);
  border-radius: 6px;
  padding: 2px 6px;
  border: 0;
}
@media (max-width: 860px) { body[data-page="dashboard"] .skt-search { display: none; } }

/* Collapse row — top of the sidebar nav (⌘\) */
body[data-page="dashboard"] .skt-collapse-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 34px !important;
  min-height: 34px;
  padding: 0 12px;
  margin: 0 0 4px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--sk-text-3);
  transition: background .15s ease, color .15s ease;
}
body[data-page="dashboard"] .skt-collapse-row:hover { background: rgba(15, 23, 42, 0.045); color: var(--sk-text); }
body[data-page="dashboard"] .skt-collapse-row i { font-size: 12px; transition: transform .2s ease; }
body[data-page="dashboard"] .skt-collapse-row span { flex: 1; text-align: left; }
body[data-page="dashboard"] .dash-nav-collapse-btn { display: none !important; }
/* On mobile the sidebar collapses to a compact drawer/bar — keep only the
   core nav there; the injected desktop chrome would overflow it. */
@media (max-width: 900px) {
  body[data-page="dashboard"] .skt-collapse-row,
  body[data-page="dashboard"] .skt-quick-group,
  body[data-page="dashboard"] .skt-plan-card { display: none !important; }
}

/* Collapsed rail — icon-only (class set by main.js's existing toggle) */
@media (min-width: 901px) {
  body[data-page="dashboard"] .dashboard-container:has(.dashboard-sidebar.nav-collapsed) {
    grid-template-columns: 78px 1fr !important;
  }
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed { width: 78px !important; min-width: 78px !important; }
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .sidebar-nav-label,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .nav-item > span:not(.nav-icon-wrap),
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .nav-item .lg-badge,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-collapse-row span,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-collapse-row kbd,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-quick > span:not(.skt-quick-icon),
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-quick-arrow,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-plan-card,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .sidebar-logo span,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .sup-info,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .sup-actions { display: none !important; }
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .nav-item,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-quick,
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-collapse-row { justify-content: center !important; padding: 0 !important; }
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .skt-collapse-row i { transform: rotate(180deg); }
  body[data-page="dashboard"] .dashboard-sidebar.nav-collapsed .sidebar-user-panel { justify-content: center !important; }
}

/* Mono micro-label shared by sidebar groups + plan card */
body[data-page="dashboard"] .skt-mono-label {
  font-family: var(--sk-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--sk-text-3) !important;
  margin: 0 0 8px !important;
  padding: 0 12px !important;
}

/* Quick actions — tinted icon chip + label + up-right arrow */
body[data-page="dashboard"] .skt-quick {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--sk-text-2);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
body[data-page="dashboard"] .skt-quick:hover { background: rgba(15, 23, 42, 0.045); color: var(--sk-text); transform: translateX(1px); }
body[data-page="dashboard"] .skt-quick > span:not(.skt-quick-icon) { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="dashboard"] .skt-quick-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--qa, #0ea5e9) 11%, transparent);
  color: var(--qa, #0ea5e9);
  font-size: 11.5px;
}
body[data-page="dashboard"] .skt-quick-arrow {
  font-size: 10.5px;
  color: var(--sk-text-3);
  transform: rotate(-45deg);
}

/* Current-plan card — soft sky radial in the corner, sky CTA pill.
   The sidebar is a flex column with the nav at flex:1 — without these
   flex guards the card gets crushed to its label height. The nav takes
   the squeeze instead (internal scroll on short viewports). */
body[data-page="dashboard"] .dashboard-sidebar .sidebar-nav {
  min-height: 0 !important;
  overflow-y: auto !important;
}
body[data-page="dashboard"] .skt-plan-card,
body[data-page="dashboard"] .sidebar-user-panel {
  flex: 0 0 auto !important;
}
body[data-page="dashboard"] .skt-plan-card {
  position: relative;
  overflow: hidden;
  margin: 10px 12px 12px;
  padding: 14px;
  background: var(--sk-panel);
  border: 1px solid var(--sk-line);
  border-radius: 16px;
}
body[data-page="dashboard"] .skt-plan-card .skt-mono-label { padding: 0 !important; }
body[data-page="dashboard"] .skt-plan-glow {
  position: absolute;
  top: -48px;
  right: -48px;
  width: 128px;
  height: 128px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34, 189, 255, 0.4), transparent 70%);
  pointer-events: none;
}
body[data-page="dashboard"] .skt-plan-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--sk-text);
  text-transform: capitalize;
  margin: 2px 0 1px;
}
body[data-page="dashboard"] .skt-plan-sub { font-size: 12px; color: var(--sk-text-2); min-height: 15px; }
body[data-page="dashboard"] .skt-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22BDFF, #0AA1E7);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px -8px rgba(34, 189, 255, 0.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
body[data-page="dashboard"] .skt-plan-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(34, 189, 255, 0.65); }
body[data-page="dashboard"] .skt-plan-btn i { font-size: 10px; transform: rotate(-45deg); }

/* Welcome CTA — right-aligned on desktop (Sky Hub header row) */
@media (min-width: 1020px) {
  body[data-page="dashboard"] .home-welcome-v2 { position: relative !important; }
  body[data-page="dashboard"] .home-welcome-left { padding-right: 330px !important; }
  body[data-page="dashboard"] .home-welcome-actions {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* Activity rows — mono platform chip ("● SKY THUMBNAILS") */
body[data-page="dashboard"] .skt-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sk-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-sky-deep);
  background: rgba(34, 189, 255, 0.09);
  border: 1px solid rgba(34, 189, 255, 0.22);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
body[data-page="dashboard"] .skt-platform-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #22BDFF;
}

/* ─────────────────────────────────────────────
   12. LOCKER — reusable creative vault (Locker.jsx 1-1)
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .lk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 4px 2px;
  margin-bottom: 18px;
}
body[data-page="dashboard"] .lk-eyebrow {
  font-family: var(--sk-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sk-sky-deep);
  margin: 0 0 6px;
}
body[data-page="dashboard"] .lk-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--sk-text);
  margin: 0 0 6px;
}
body[data-page="dashboard"] .lk-title i { color: #22BDFF; font-size: 0.78em; }
body[data-page="dashboard"] .lk-sub { font-size: 14px; color: var(--sk-text-2); max-width: 620px; margin: 0; }

body[data-page="dashboard"] .lk-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--sk-panel);
  border: 1px solid var(--sk-line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sk-text-2);
  flex: 0 0 auto;
}
body[data-page="dashboard"] .lk-save-badge .fa-circle-check { color: #10B981; }
body[data-page="dashboard"] .lk-save-badge .fa-spinner { animation: lk-spin 0.9s linear infinite; }
@keyframes lk-spin { to { transform: rotate(360deg); } }

body[data-page="dashboard"] .lk-error {
  background: #FFF1F2;
  border: 1px solid rgba(244, 63, 94, 0.25);
  color: #BE123C;
  border-radius: 12px;
  padding: 11px 15px;
  font-size: 13px;
  margin-bottom: 14px;
}

body[data-page="dashboard"] .lk-panel { margin-bottom: 16px; padding: 20px !important; }
body[data-page="dashboard"] .lk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
body[data-page="dashboard"] .lk-section-title { display: flex; align-items: center; gap: 10px; }
body[data-page="dashboard"] .lk-section-title h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sk-text);
  margin: 0;
}
body[data-page="dashboard"] .lk-section-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(34, 189, 255, 0.12);
  color: var(--sk-sky-deep);
  font-size: 13px;
}
body[data-page="dashboard"] .lk-hint { font-family: var(--sk-mono); font-size: 11px; color: var(--sk-text-3); }

body[data-page="dashboard"] .lk-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
body[data-page="dashboard"] .lk-btn:disabled { opacity: 0.5; cursor: default; }
body[data-page="dashboard"] .lk-btn i { font-size: 11px; }
body[data-page="dashboard"] .lk-btn-sky { background: linear-gradient(180deg, #22BDFF, #0AA1E7); color: #fff; box-shadow: 0 8px 18px -8px rgba(34, 189, 255, 0.55); }
body[data-page="dashboard"] .lk-btn-sky:hover:not(:disabled) { transform: translateY(-1px); }
body[data-page="dashboard"] .lk-btn-dark { background: #0F172A; color: #fff; }
body[data-page="dashboard"] .lk-btn-dark:hover:not(:disabled) { background: #1E293B; }

/* Images — empty dropzone + square-card grid */
body[data-page="dashboard"] .lk-dropzone {
  width: 100%;
  margin-top: 14px;
  padding: 38px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 2px dashed var(--sk-line);
  border-radius: 16px;
  color: var(--sk-text-3);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
body[data-page="dashboard"] .lk-dropzone:hover,
body[data-page="dashboard"] .lk-dropzone.is-drag { border-color: rgba(34, 189, 255, 0.6); color: var(--sk-sky-deep); }
body[data-page="dashboard"] .lk-dropzone i { font-size: 26px; margin-bottom: 6px; }
body[data-page="dashboard"] .lk-dropzone strong { font-size: 13px; font-weight: 700; }
body[data-page="dashboard"] .lk-dropzone span { font-size: 11.5px; }

body[data-page="dashboard"] .lk-img-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) { body[data-page="dashboard"] .lk-img-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { body[data-page="dashboard"] .lk-img-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body[data-page="dashboard"] .lk-img-card {
  position: relative;
  border: 1px solid var(--sk-line);
  border-radius: 13px;
  overflow: hidden;
  background: var(--sk-bg);
}
body[data-page="dashboard"] .lk-img-card .lk-img-thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--sk-bg);
}
body[data-page="dashboard"] .lk-img-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease, background .15s ease;
}
body[data-page="dashboard"] .lk-img-card:hover .lk-img-remove,
body[data-page="dashboard"] .lk-img-remove:focus { opacity: 1; }
body[data-page="dashboard"] .lk-img-remove:hover { background: #E11D48; }
body[data-page="dashboard"] .lk-img-label {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-top: 1px solid var(--sk-line);
  background: var(--sk-panel);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--sk-text);
  outline: none;
}
body[data-page="dashboard"] .lk-img-label::placeholder { color: var(--sk-text-3); }

/* Links — label + url + trash rows */
body[data-page="dashboard"] .lk-empty-note { margin: 13px 0 0; font-size: 13px; color: var(--sk-text-3); }
body[data-page="dashboard"] .lk-link-rows { margin-top: 13px; display: flex; flex-direction: column; gap: 8px; }
body[data-page="dashboard"] .lk-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body[data-page="dashboard"] .lk-input {
  height: 36px;
  padding: 0 12px;
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--sk-text);
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
body[data-page="dashboard"] .lk-input:focus { border-color: rgba(34, 189, 255, 0.55) !important; }
body[data-page="dashboard"] .lk-input::placeholder { color: var(--sk-text-3); }
body[data-page="dashboard"] .lk-link-label { width: 176px; flex: 0 0 auto; }
body[data-page="dashboard"] .lk-link-url { flex: 1 1 220px; min-width: 0; }
body[data-page="dashboard"] .lk-trash {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text-3);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease;
}
body[data-page="dashboard"] .lk-trash:hover { color: #E11D48; background: #FFF1F2; }

/* Notes — title + body cards */
body[data-page="dashboard"] .lk-note-rows { margin-top: 13px; display: flex; flex-direction: column; gap: 10px; }
body[data-page="dashboard"] .lk-note-card { border: 1px solid var(--sk-line); border-radius: 13px; padding: 12px 13px; }
body[data-page="dashboard"] .lk-note-head { display: flex; align-items: center; gap: 8px; }
body[data-page="dashboard"] .lk-note-title {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sk-text);
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto;
}
body[data-page="dashboard"] .lk-note-title::placeholder,
body[data-page="dashboard"] .lk-note-body::placeholder { color: var(--sk-text-3); }
body[data-page="dashboard"] .lk-note-card .lk-trash { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
body[data-page="dashboard"] .lk-note-body {
  display: block;
  width: 100%;
  margin-top: 5px;
  border: 0 !important;
  background: transparent !important;
  resize: none;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sk-text-2);
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 40px;
}
body[data-page="dashboard"] .lk-skeleton {
  height: 150px;
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(15,23,42,0.05) 40%, rgba(15,23,42,0.09) 50%, rgba(15,23,42,0.05) 60%);
  background-size: 200% 100%;
  animation: lk-shimmer 1.4s ease infinite;
  margin-bottom: 16px;
}
@keyframes lk-shimmer { to { background-position: -200% 0; } }

/* ─────────────────────────────────────────────
   13. APP SHELL — the page itself never scrolls
   The skip-link was rendering as a normal inline element (a later
   sheet overrode style.css's position:absolute), adding a ~25px line
   box above .dashboard-container → document grew past 100vh → a
   page-level scrollbar over the whole dashboard. Force it out of
   flow, and hard-lock page scrolling on desktop so only the main
   content pane scrolls (sidebar + topbar stay pinned).
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .skip-link {
  position: absolute !important;
  top: -64px !important;
  left: 12px !important;
  display: inline-block !important;
}
body[data-page="dashboard"] .skip-link:focus,
body[data-page="dashboard"] .skip-link:focus-visible {
  top: 12px !important;
}

@media (min-width: 901px) {
  html:has(body[data-page="dashboard"]) {
    height: 100% !important;
    overflow: hidden !important;
  }
  body[data-page="dashboard"] {
    height: 100vh !important;
    overflow: hidden !important;
  }
  body[data-page="dashboard"] .dashboard-container {
    height: 100vh !important;
    width: 100% !important;
  }
  /* Main column is the one and only scroller */
  body[data-page="dashboard"] .dashboard-main {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* Keep the topbar pinned while the content scrolls beneath it.
     (§10 set position:relative for the dropdown z-index — sticky
     serves both: it creates the same stacking context.) */
  body[data-page="dashboard"] .dashboard-topbar {
    position: sticky !important;
    top: 0 !important;
  }
}

/* The intro veil suffers the same position-downgrade as the skip-link
   (computed relative instead of fixed), leaving a logo-height block in
   normal flow that shoves the whole shell down until dashboard.js
   removes the node. Pin it to the viewport unconditionally. */
body[data-page="dashboard"] .dash-intro-veil {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
}

/* While stuck, scrolled content showed through the 20px breathing gap
   above the floating topbar card (main's padding-top). Paint that band
   page-background via an extra solid shadow layer — no extra elements,
   no pseudo (the sheen pseudos are disabled in §10). */
@media (min-width: 901px) {
  body[data-page="dashboard"] .dashboard-topbar {
    box-shadow: var(--sk-shadow), 0 -22px 0 6px var(--sk-bg) !important;
  }
}

/* ─────────────────────────────────────────────
   14. TICKET DEADLINE PICKER — "When do you need it?"
   Second step of the plan-picker modal (js/plan-picker.js).
   ───────────────────────────────────────────── */
body[data-page="dashboard"] .ppk-deadline { display: flex; flex-direction: column; gap: 10px; }
body[data-page="dashboard"] .ppk-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 6px 12px 6px 7px;
  background: var(--sk-bg);
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sk-text);
}
body[data-page="dashboard"] .ppk-plan-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
}
body[data-page="dashboard"] .ppk-plan-lead {
  font-family: var(--sk-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-3);
}
body[data-page="dashboard"] .ppk-label {
  font-family: var(--sk-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sk-text-3);
  margin-top: 4px;
}
body[data-page="dashboard"] .ppk-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-text);
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  color-scheme: light;
}
body[data-page="dashboard"] .ppk-input:focus {
  border-color: rgba(34, 189, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(34, 189, 255, 0.14) !important;
}
body[data-page="dashboard"] .ppk-quick { display: flex; gap: 7px; flex-wrap: wrap; }
body[data-page="dashboard"] .ppk-chip {
  height: 29px;
  padding: 0 12px;
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  background: var(--sk-panel);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--sk-text-2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body[data-page="dashboard"] .ppk-chip:hover {
  border-color: rgba(34, 189, 255, 0.5);
  color: var(--sk-sky-deep);
  background: rgba(34, 189, 255, 0.07);
}
body[data-page="dashboard"] .ppk-hint { margin: 0; font-size: 12px; color: var(--sk-text-3); }
body[data-page="dashboard"] .ppk-hint strong { color: var(--sk-text-2); font-weight: 700; }
body[data-page="dashboard"] .ppk-error {
  margin: 0;
  padding: 9px 13px;
  background: #FFF1F2;
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 10px;
  color: #BE123C;
  font-size: 12.5px;
}
body[data-page="dashboard"] .ppk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 6px;
}
body[data-page="dashboard"] .ppk-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  background: var(--sk-panel);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
body[data-page="dashboard"] .ppk-back:hover { background: rgba(15, 23, 42, 0.045); color: var(--sk-text); }
body[data-page="dashboard"] .ppk-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #22BDFF, #0AA1E7);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(34, 189, 255, 0.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
body[data-page="dashboard"] .ppk-confirm:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(34, 189, 255, 0.65); }
body[data-page="dashboard"] .ppk-confirm i { font-size: 11px; }