/*
 * DeVanzare Account Control Center
 * Shared visual layer for the authenticated account sections.
 * This file deliberately preserves the visibility state controlled by account/index.html.
 */

:root {
  --cc-bg: #f6f4f8;
  --cc-surface: #ffffff;
  --cc-surface-soft: #faf8fc;
  --cc-surface-purple: #f4effb;
  --cc-ink: #241d29;
  --cc-ink-soft: #403746;
  --cc-muted: #746b79;
  --cc-muted-2: #918895;
  --cc-line: #e7e0e9;
  --cc-line-strong: #d9cfde;
  --cc-purple: #6d28d9;
  --cc-purple-dark: #4c1d95;
  --cc-purple-ink: #5b21b6;
  --cc-purple-pale: #eee5fb;
  --cc-green: #147a42;
  --cc-green-bg: #e8f7ed;
  --cc-amber: #925d00;
  --cc-amber-bg: #fff3dc;
  --cc-red: #ae2f26;
  --cc-red-bg: #fdecea;
  --cc-blue: #235f9e;
  --cc-blue-bg: #e9f3ff;
  --cc-teal: #0f766e;
  --cc-teal-bg: #e7f6f3;
  --cc-shadow-sm: 0 8px 24px rgba(42, 25, 48, 0.045);
  --cc-shadow-md: 0 18px 48px rgba(42, 25, 48, 0.09);
  --cc-radius-sm: 12px;
  --cc-radius: 18px;
  --cc-radius-lg: 24px;
  --cc-control: 46px;
  --cc-transition: 160ms ease;
}

html {
  background: var(--cc-bg);
}

body {
  background:
    radial-gradient(circle at 92% 5%, rgba(109, 40, 217, 0.055), transparent 24rem),
    var(--cc-bg);
  color: var(--cc-ink);
}

body > .header {
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid rgba(224, 216, 228, 0.9);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 18px rgba(37, 24, 43, 0.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body > .header .header-main {
  min-height: 70px;
  display: flex;
  align-items: center;
}

body > .header .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-ink);
  text-decoration: none;
}

body > .header .logo > b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #7c3aed, #551aaa);
  color: #fff;
  box-shadow: 0 9px 22px rgba(109, 40, 217, 0.24);
}

body > .header .logo > strong {
  font-size: 23px;
  letter-spacing: -0.035em;
}

#accountApp,
#accountApp *,
#accountApp *::before,
#accountApp *::after,
.cc-modal,
.cc-modal *,
#accToast {
  box-sizing: border-box;
}

#accountApp.account-shell {
  width: min(1440px, calc(100% - 40px));
  margin: 26px auto 64px;
  grid-template-columns: 282px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

#accountApp button,
#accountApp input,
#accountApp select,
#accountApp textarea,
#accountApp a {
  font: inherit;
}

#accountApp button,
#accountApp select,
#accountApp input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#accountApp textarea {
  font-size: 14px;
}

#accountApp p,
#accountApp li,
#accountApp label,
#accountApp td,
#accountApp small {
  font-size: 13px;
  line-height: 1.5;
}

#accountApp h1,
#accountApp h2,
#accountApp h3,
#accountApp h4,
#accountApp p {
  overflow-wrap: anywhere;
}

#accountApp button,
#accountApp a,
#accountApp input,
#accountApp select,
#accountApp textarea,
#accountApp summary {
  -webkit-tap-highlight-color: transparent;
}

#accountApp button:focus-visible,
#accountApp a:focus-visible,
#accountApp input:focus-visible,
#accountApp select:focus-visible,
#accountApp textarea:focus-visible,
#accountApp summary:focus-visible,
.cc-dropzone:focus-within {
  outline: 3px solid rgba(139, 92, 246, 0.28);
  outline-offset: 2px;
}

/* Sidebar and account navigation */

#accountApp .account-sidebar {
  position: sticky;
  top: 92px;
  min-height: min(790px, calc(100vh - 116px));
  max-height: calc(100vh - 116px);
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--cc-radius-lg);
  background:
    radial-gradient(circle at 12% 0, rgba(153, 88, 223, 0.2), transparent 17rem),
    linear-gradient(165deg, #28192e 0%, #1d1521 70%);
  box-shadow: 0 22px 50px rgba(33, 23, 36, 0.16);
}

#accountApp .profile-mini {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 4px 4px 18px;
  border-bottom-color: rgba(255, 255, 255, 0.11);
}

#accountApp .profile-mini .avatar {
  grid-row: 1 / span 2;
  width: 54px;
  height: 54px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: linear-gradient(145deg, #8b5cf6, #5b21b6);
  color: #fff;
  box-shadow: 0 10px 24px rgba(91, 33, 182, 0.28);
}

#accountApp .profile-mini b {
  align-self: end;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#accountApp .profile-mini small {
  align-self: start;
  overflow: hidden;
  margin: 0;
  color: #bfb3c3;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#accountApp .accnav {
  min-height: 0;
  margin: 14px -4px 0;
  padding: 0 4px 8px;
  overflow: auto;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  scrollbar-width: thin;
}

#accountApp .accnav::-webkit-scrollbar {
  width: 6px;
}

#accountApp .accnav::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
}

#accountApp .accnav-group {
  display: block;
  margin: 16px 12px 6px;
  color: #9f92a5;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1.2;
}

#accountApp .accnav-group:first-child {
  margin-top: 4px;
}

#accountApp .accnav button,
#accountApp .accnav .account-nav-item {
  width: 100%;
  min-height: 44px;
  margin: 2px 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #d7cedb;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: color var(--cc-transition), background var(--cc-transition), border-color var(--cc-transition), transform var(--cc-transition);
}

#accountApp .accnav button:hover,
#accountApp .accnav .account-nav-item:hover {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateX(2px);
}

#accountApp .accnav button.active,
#accountApp .accnav .account-nav-item.active {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #7533df, #5b21b6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(91, 33, 182, 0.24);
}

#accountApp .accnav button > span {
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

#accountApp .accnav .package-nav {
  border-color: rgba(216, 180, 254, 0.14);
  background: rgba(109, 40, 217, 0.2);
  color: #f4eaff;
}

#accountApp .side-bottom {
  margin-top: auto;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#accountApp .side-bottom button,
#accountApp #logoutBtn {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f0f7;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

#accountApp #contactDeVanzare {
  min-height: 44px;
  margin: 12px 0 0 !important;
  padding: 11px 13px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216, 180, 254, 0.2);
  border-radius: 12px !important;
  background: rgba(109, 40, 217, 0.2) !important;
  color: #f2e9ff !important;
  font-size: 14px;
  text-align: center;
}

/* Main heading and global actions */

#accountApp .account-main {
  min-width: 0;
}

#accountApp .account-top {
  min-height: 86px;
  margin-bottom: 20px;
  padding: 2px 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#accountApp .account-top small,
#accountApp #accCrumb {
  color: var(--cc-purple-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

#accountApp .account-top h1 {
  margin: 4px 0 5px;
  color: var(--cc-ink);
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

#accountApp .account-top p {
  margin: 0;
  color: var(--cc-muted);
  font-size: 14px;
}

#accountApp .account-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

#accountApp .account-top .publish-now,
#accountApp .account-top .buy-packages-now,
#accountApp .cc-button {
  min-height: var(--cc-control);
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition: transform var(--cc-transition), box-shadow var(--cc-transition), background var(--cc-transition), opacity var(--cc-transition);
}

#accountApp .account-top .publish-now,
#accountApp .cc-button--primary {
  background: linear-gradient(135deg, #7635df, #5b21b6);
  color: #fff;
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.22);
}

#accountApp .account-top .buy-packages-now {
  border-color: #2b1d31;
  background: #2b1d31;
  color: #fff;
  box-shadow: 0 9px 22px rgba(33, 23, 36, 0.14);
}

#accountApp .account-top button:hover,
#accountApp .cc-button:hover {
  transform: translateY(-1px);
}

#accountApp button:disabled,
#accountApp .cc-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
  box-shadow: none;
}

/* Shared section, hero and card surfaces */

#accountApp .account-view,
#accountApp .account-panel,
#accountApp section[data-account-panel] {
  min-width: 0;
  animation: cc-view-in 180ms ease both;
}

@keyframes cc-view-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#accountApp .acc-card,
#accountApp .package-state-card,
#accountApp .pricing-public-section,
#accountApp .oh-property-panel,
#accountApp .oh-editor-card,
#accountApp .cc-card,
#accountApp .account-panel > .panel,
#accountApp .account-panel > div > .panel {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}

#accountApp .acc-card,
#accountApp .cc-card {
  padding: 22px;
}

#accountApp .acc-card h2,
#accountApp .acc-card h3,
#accountApp .cc-card h2,
#accountApp .cc-card h3 {
  color: var(--cc-ink);
  letter-spacing: -0.025em;
}

#accountApp .acc-card h2,
#accountApp .cc-card h2 {
  font-size: 22px;
}

#accountApp .acc-card h3,
#accountApp .cc-card h3 {
  font-size: 18px;
}

#accountApp .card-head,
#accountApp .sectionhead,
#accountApp .cc-section-head {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#accountApp .card-head h2,
#accountApp .card-head h3,
#accountApp .sectionhead h2,
#accountApp .sectionhead h3,
#accountApp .cc-section-head h2,
#accountApp .cc-section-head h3 {
  margin: 2px 0 0;
}

#accountApp .card-head p,
#accountApp .sectionhead p,
#accountApp .cc-section-head p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--cc-muted);
  font-size: 14px;
}

#accountApp .card-head > button,
#accountApp .small-btn,
#accountApp .sectionhead > button,
#accountApp .account-panel button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--cc-ink-soft);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition), transform var(--cc-transition);
}

#accountApp .card-head > button:hover,
#accountApp .small-btn:hover,
#accountApp .sectionhead > button:hover,
#accountApp .account-panel button:hover {
  border-color: #cdb8ea;
  background: var(--cc-surface-purple);
  color: var(--cc-purple-ink);
  transform: translateY(-1px);
}

#accountApp .business-banner,
#accountApp .business-dashboard,
#accountApp .package-hero,
#accountApp .promotion-account-hero,
#accountApp .zads-account-hero,
#accountApp .cc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--cc-radius-lg);
  box-shadow: 0 20px 44px rgba(50, 25, 63, 0.12);
}

#accountApp .business-banner::after,
#accountApp .business-dashboard::after,
#accountApp .package-hero::after,
#accountApp .promotion-account-hero::after,
#accountApp .zads-account-hero::after,
#accountApp .cc-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  right: -85px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.17), transparent 68%);
  pointer-events: none;
}

#accountApp .business-banner,
#accountApp .business-dashboard,
#accountApp .cc-hero {
  padding: 28px;
  background: linear-gradient(125deg, #211724 0%, #462258 64%, #6d28d9 150%);
  color: #fff;
}

#accountApp :where(.business-banner, .business-dashboard, .package-hero, .promotion-account-hero, .zads-account-hero, .cc-hero) small {
  color: #dec9ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

#accountApp :where(.business-banner, .business-dashboard, .package-hero, .promotion-account-hero, .zads-account-hero, .cc-hero) h2 {
  margin: 8px 0;
  color: #fff;
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

#accountApp :where(.business-banner, .business-dashboard, .package-hero, .promotion-account-hero, .zads-account-hero, .cc-hero) p {
  max-width: 760px;
  margin: 8px 0 0;
  color: #e5dce9;
  font-size: 14px;
  line-height: 1.6;
}

/* KPI cards and dashboard */

#accountApp .account-kpis,
#accountApp .promotion-account-kpis,
#accountApp .zads-user-kpis,
#accountApp .user-meta-kpis,
#accountApp .cc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}

#accountApp .account-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#accountApp :where(.account-kpis, .promotion-account-kpis, .zads-user-kpis, .user-meta-kpis, .cc-kpi-grid) article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fdfcfd);
  box-shadow: var(--cc-shadow-sm);
}

#accountApp :where(.account-kpis, .promotion-account-kpis, .zads-user-kpis, .user-meta-kpis, .cc-kpi-grid) :where(small, span) {
  color: var(--cc-muted);
  font-size: 13px !important;
  line-height: 1.4;
}

#accountApp :where(.account-kpis, .promotion-account-kpis, .zads-user-kpis, .user-meta-kpis, .cc-kpi-grid) small {
  color: var(--cc-muted-2);
  font-weight: 900;
  letter-spacing: 0.055em;
}

#accountApp :where(.account-kpis, .promotion-account-kpis, .zads-user-kpis, .user-meta-kpis, .cc-kpi-grid) strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--cc-ink);
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

#accountApp .acc-grid,
#accountApp .cc-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(310px, 0.72fr);
  gap: 16px;
  align-items: start;
}

#accountApp .performance-row {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 0;
  border-top-color: var(--cc-line);
}

#accountApp .performance-row:first-child,
#accountApp .quick-action:first-child,
#accountApp .message-preview:first-child {
  border-top: 0;
}

#accountApp .perf-thumb {
  width: 92px;
  height: 72px;
  border: 1px solid #ece5ef;
  border-radius: 13px;
  background: var(--cc-surface-purple);
  color: var(--cc-purple);
}

#accountApp .performance-row b,
#accountApp .quick-action b,
#accountApp .message-preview b {
  color: var(--cc-ink);
  font-size: 14px;
}

#accountApp .performance-row small,
#accountApp .quick-action small,
#accountApp .message-preview small,
#accountApp .perf-stats span {
  color: var(--cc-muted);
  font-size: 13px;
}

#accountApp .perf-stats {
  gap: 8px 14px;
  flex-wrap: wrap;
}

#accountApp .perf-actions button,
#accountApp .quick-action button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cc-ink-soft);
  font-size: 13px;
  font-weight: 800;
}

#accountApp .perf-actions .promote,
#accountApp .quick-action button {
  border-color: #ddcef2;
  background: var(--cc-surface-purple);
  color: var(--cc-purple-ink);
}

#accountApp .quick-action {
  gap: 14px;
  padding: 15px 0;
  border-top-color: var(--cc-line);
}

/* Forms and controls */

#accountApp .form-grid,
#accountApp .cc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#accountApp .form-grid > label,
#accountApp .account-panel > label,
#accountApp .cc-field {
  display: block;
  color: var(--cc-ink-soft);
  font-size: 14px;
  font-weight: 800;
}

#accountApp :where(.account-panel, .account-view, .cc-field) input:not([type="checkbox"]):not([type="radio"]),
#accountApp :where(.account-panel, .account-view, .cc-field) select,
#accountApp :where(.account-panel, .account-view, .cc-field) textarea {
  width: 100%;
  min-height: var(--cc-control);
  margin-top: 7px;
  padding: 11px 13px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--cc-ink);
  outline: none;
  transition: border-color var(--cc-transition), box-shadow var(--cc-transition), background var(--cc-transition);
}

#accountApp :where(.account-panel, .account-view, .cc-field) textarea {
  min-height: 116px;
  resize: vertical;
}

#accountApp :where(.account-panel, .account-view, .cc-field) input:focus,
#accountApp :where(.account-panel, .account-view, .cc-field) select:focus,
#accountApp :where(.account-panel, .account-view, .cc-field) textarea:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.13);
}

#accountApp input[type="checkbox"],
#accountApp input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--cc-purple);
}

#accountApp input[type="file"] {
  width: 100%;
  min-height: 52px;
  padding: 7px;
  border: 1px dashed #cdb8e6;
  border-radius: 13px;
  background: #faf7fe;
  color: var(--cc-muted);
  font-size: 14px;
}

#accountApp input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 12px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--cc-purple);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

#accountApp .filterbar,
#accountApp .cc-toolbar {
  margin-bottom: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--cc-line);
  border-radius: 15px;
  background: var(--cc-surface-soft);
}

#accountApp .filterbar input,
#accountApp .filterbar select,
#accountApp .cc-toolbar input,
#accountApp .cc-toolbar select {
  min-height: 44px;
  margin: 0;
  border-radius: 11px;
  background: #fff;
}

/* Tabs, tables and statuses */

#accountApp .listing-tabs,
#accountApp .cc-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

#accountApp .listing-tab,
#accountApp .cc-tab {
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--cc-line);
  border-radius: 15px;
  background: #fff;
  color: var(--cc-ink);
  box-shadow: var(--cc-shadow-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--cc-transition), background var(--cc-transition), transform var(--cc-transition), box-shadow var(--cc-transition);
}

#accountApp .listing-tab:hover,
#accountApp .cc-tab:hover {
  border-color: #cbb5e8;
  transform: translateY(-1px);
}

#accountApp .listing-tab.active,
#accountApp .cc-tab.active,
#accountApp .cc-tab[aria-selected="true"] {
  border-color: #b99ade;
  background: linear-gradient(180deg, #faf7fe, #f3ecfb);
  box-shadow: 0 10px 26px rgba(109, 40, 217, 0.09);
}

#accountApp .listing-tab small,
#accountApp .listing-tab span,
#accountApp .cc-tab small,
#accountApp .cc-tab span {
  color: var(--cc-muted);
  font-size: 13px;
}

#accountApp .listing-tab strong,
#accountApp .cc-tab strong {
  margin: 5px 0 2px;
  color: var(--cc-ink);
  font-size: 25px;
}

#accountApp .list-table,
#accountApp .cc-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  color: var(--cc-ink-soft);
  font-size: 14px;
}

#accountApp .list-table th,
#accountApp .cc-table th {
  padding: 12px 10px;
  border-bottom: 1px solid var(--cc-line-strong);
  background: #faf8fb;
  color: var(--cc-muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: left;
}

#accountApp .list-table th:first-child,
#accountApp .cc-table th:first-child {
  border-radius: 11px 0 0 0;
}

#accountApp .list-table th:last-child,
#accountApp .cc-table th:last-child {
  border-radius: 0 11px 0 0;
}

#accountApp .list-table td,
#accountApp .cc-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #eee9f0;
  vertical-align: middle;
}

#accountApp .list-table tbody tr,
#accountApp .cc-table tbody tr {
  transition: background var(--cc-transition);
}

#accountApp .list-table tbody tr:hover,
#accountApp .cc-table tbody tr:hover {
  background: #fcfafd;
}

#accountApp .list-table td button,
#accountApp .cc-table td button {
  min-height: 38px;
  margin: 3px 4px 3px 0;
  padding: 7px 10px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--cc-ink-soft);
  font-size: 13px;
  font-weight: 750;
}

#accountApp .listing-metrics {
  gap: 6px;
}

#accountApp .listing-metrics span {
  padding: 7px 9px;
  border: 1px solid #ece5f0;
  border-radius: 9px;
  background: #f8f5fa;
  color: var(--cc-muted);
  font-size: 13px;
}

#accountApp .status-pill,
#accountApp .package-order-status,
#accountApp .user-meta-status,
#accountApp .zads-user-status,
#accountApp .zads-user-payment,
#accountApp .promotion-user-status,
#accountApp .oh-status,
#accountApp .cc-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0edf2;
  color: #6f6672;
  font-size: 13px !important;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}

#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .oh-status, .cc-badge).ACTIVE,
#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .oh-status, .cc-badge).DELIVERING,
#accountApp .oh-status.on,
#accountApp .cc-badge--success {
  background: var(--cc-green-bg);
  color: var(--cc-green);
}

#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).PENDING,
#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).PENDING_PAYMENT,
#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).AWAITING_PAYMENT,
#accountApp .cc-badge--warning {
  background: var(--cc-amber-bg);
  color: var(--cc-amber);
}

#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).READY,
#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).SCHEDULED,
#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).IN_REVIEW,
#accountApp .cc-badge--info {
  background: var(--cc-blue-bg);
  color: var(--cc-blue);
}

#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).REJECTED,
#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).FAILED,
#accountApp :where(.status-pill, .package-order-status, .user-meta-status, .zads-user-status, .zads-user-payment, .promotion-user-status, .cc-badge).BLOCKED_QUALITY,
#accountApp .cc-badge--danger {
  background: var(--cc-red-bg);
  color: var(--cc-red);
}

#accountApp .status-pill.INACTIVE,
#accountApp .status-pill.PAYMENT_DUE,
#accountApp .oh-status.off,
#accountApp .cc-badge--neutral {
  background: #f0edf2;
  color: #6f6672;
}

#accountApp .status-pill.PAYMENT_DUE {
  background: var(--cc-amber-bg);
  color: var(--cc-amber);
}

/* Messages, offers, favorites and notifications */

#accountApp .message-preview {
  position: relative;
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  align-items: center;
  border-top: 1px solid var(--cc-line);
}

#accountApp .message-preview b,
#accountApp .message-preview small {
  grid-column: 1;
}

#accountApp .message-preview button,
#accountApp .message-preview a {
  grid-column: 2;
  grid-row: 1 / span 2;
}

#accountApp .offer-box {
  margin-bottom: 12px;
  padding: 18px;
  border: 1px solid #ddcff0;
  border-radius: 15px;
  background: linear-gradient(180deg, #fdfbff, #f8f3fc);
}

#accountApp .offer-box strong {
  display: block;
  margin: 7px 0;
  color: var(--cc-purple-dark);
  font-size: 25px;
}

#accountApp .offer-box p {
  color: var(--cc-muted);
}

#accountApp .favorite-account-row {
  padding: 16px 0 !important;
  border-bottom-color: var(--cc-line) !important;
}

#accountApp .favorite-account-row > a:first-child {
  border: 1px solid #e7dcef;
  border-radius: 13px !important;
  background: var(--cc-surface-purple) !important;
}

#accountApp .favorite-account-row > div > a {
  color: var(--cc-ink) !important;
  font-size: 15px;
}

#accountApp .favorite-account-row > button {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px;
  border-color: #d9cce5 !important;
  background: var(--cc-surface-purple) !important;
  color: var(--cc-purple) !important;
}

/* Standard and Business packages */

#accountApp .package-hero {
  padding: 28px;
  background: linear-gradient(125deg, #211724, #512267 70%, #6d28d9 150%);
}

#accountApp .package-category-picker {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
}

#accountApp .business-category-picker {
  margin: 0 0 16px;
  border-color: var(--cc-line);
  background: var(--cc-surface-soft);
  color: var(--cc-ink);
}

#accountApp .business-category-picker label,
#accountApp .business-category-picker strong {
  color: var(--cc-ink-soft);
}

#accountApp .package-category-picker label,
#accountApp .package-category-picker strong,
#accountApp .package-category-picker select {
  font-size: 14px;
}

#accountApp .package-category-picker select {
  min-height: 44px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 11px;
}

#accountApp .pricing-public-section {
  padding: 22px;
}

#accountApp .public-pricing-head small,
#accountApp .public-pricing-head p,
#accountApp .public-pricing-head > span {
  font-size: 13px;
}

#accountApp .public-pricing-head h3 {
  font-size: 22px;
}

#accountApp .public-package-grid {
  gap: 14px;
}

#accountApp .public-package {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--cc-line);
  border-radius: 17px;
  background: linear-gradient(180deg, #fff, #fcfafc);
  box-shadow: 0 7px 20px rgba(42, 25, 48, 0.035);
  transition: border-color var(--cc-transition), transform var(--cc-transition), box-shadow var(--cc-transition);
}

#accountApp .public-package:hover {
  border-color: #cdb8e7;
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(83, 40, 106, 0.09);
}

#accountApp .public-package h4 {
  font-size: 19px;
}

#accountApp .public-package small,
#accountApp .public-package span,
#accountApp .public-package p,
#accountApp .public-package li,
#accountApp .package-state-row,
#accountApp .package-state-row small {
  font-size: 13px;
  line-height: 1.5;
}

#accountApp .public-package ul {
  min-height: 0;
  padding-left: 0;
  list-style: none;
}

#accountApp .public-price {
  font-size: 28px;
}

#accountApp .public-package button {
  min-height: 46px;
  border-radius: 12px;
  font-size: 14px;
}

#accountApp .package-discount {
  font-size: 13px;
}

#accountApp .package-formula {
  padding: 10px !important;
}

#accountApp .package-state-card {
  padding: 20px;
}

#accountApp .package-state-row {
  padding: 12px 0;
  align-items: center;
  border-top-color: var(--cc-line);
}

/* Promotions */

#accountApp .promotion-account-hero {
  padding: 28px;
  background: linear-gradient(125deg, #21152c, #5d268d 74%, #7638d8 150%);
}

#accountApp .promotion-account-hero > span,
#accountApp .promotion-order-builder .card-head > span,
#accountApp .promotion-order-builder .card-head small,
#accountApp .promotion-user-history .card-head small,
#accountApp .promotion-account-help > small {
  font-size: 13px;
}

#accountApp .promotion-account-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

#accountApp .promotion-listing-picker,
#accountApp .promotion-listing-picker select {
  font-size: 14px;
}

#accountApp .promotion-listing-picker select {
  min-height: 46px;
  border-radius: 12px;
}

#accountApp .promotion-product-select {
  gap: 12px;
}

#accountApp .promotion-select-card {
  min-height: 150px;
  padding: 16px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  border-radius: 15px;
  transition: border-color var(--cc-transition), background var(--cc-transition), transform var(--cc-transition);
}

#accountApp .promotion-select-card:hover {
  border-color: #cdb8e7;
  transform: translateY(-1px);
}

#accountApp .promotion-product-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 19px !important;
}

#accountApp .promotion-product-copy small,
#accountApp .promotion-product-copy em,
#accountApp .promotion-product-copy > span,
#accountApp .promotion-order-footer small,
#accountApp .promotion-order-footer p,
#accountApp .promotion-account-help li,
#accountApp .promotion-user-row small,
#accountApp .promotion-user-metrics small,
#accountApp .promotion-user-metrics span {
  font-size: 13px;
  line-height: 1.45;
}

#accountApp .promotion-product-copy b {
  font-size: 15px;
}

#accountApp .promotion-product-copy em {
  min-height: 38px;
}

#accountApp .promotion-select-card > strong {
  margin-top: 32px;
  font-size: 18px;
}

#accountApp .promotion-order-footer {
  padding-top: 17px;
}

#accountApp .promotion-order-footer button {
  min-height: 46px;
  border-radius: 12px;
  font-size: 14px;
}

#accountApp .promotion-account-help {
  top: 92px;
}

#accountApp .promotion-user-row,
#accountApp .promotion-user-row.promotion-right-row {
  padding: 16px 0;
  border-top-color: var(--cc-line);
}

#accountApp .promotion-user-metrics {
  gap: 8px;
}

#accountApp .promotion-user-metrics span {
  min-width: 0;
  padding: 10px;
  border: 1px solid #ece6ef;
  border-radius: 10px;
  background: var(--cc-surface-soft);
}

/* DeVanzare Ads */

#accountApp .zads-account-hero {
  padding: 28px;
  background: linear-gradient(125deg, #16352f, #165a51 75%, #1b7267 150%);
}

#accountApp .zads-account-hero small,
#accountApp .zads-account-hero p,
#accountApp .zads-account-hero > span,
#accountApp .zads-order-card .card-head small,
#accountApp .zads-quote-box > small,
#accountApp .zads-user-history .card-head small,
#accountApp .zads-order-card .card-head > span {
  font-size: 13px;
}

#accountApp .zads-account-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
}

#accountApp .zads-form-grid {
  gap: 14px;
}

#accountApp .zads-form-grid label,
#accountApp .zads-form-grid input,
#accountApp .zads-form-grid select,
#accountApp .zads-form-grid textarea,
#accountApp .zads-field > small,
#accountApp .zads-targeting summary,
#accountApp .zads-targeting p {
  font-size: 14px;
}

#accountApp .zads-option-grid {
  gap: 9px;
}

#accountApp .zads-option-grid label {
  min-height: 52px;
  padding: 11px;
  align-items: center;
  border-radius: 12px;
  font-size: 14px;
}

#accountApp .zads-option-grid label small {
  font-size: 13px;
}

#accountApp .zads-targeting {
  padding: 14px;
  border-radius: 13px;
}

#accountApp .zads-order-actions button {
  min-height: 44px;
  font-size: 14px;
}

#accountApp .zads-quote-box {
  top: 92px;
}

#accountApp .zads-quote-box p,
#accountApp .zads-quote-lines div,
#accountApp .zads-capacity-ok,
#accountApp .zads-user-row small,
#accountApp .zads-user-metrics small,
#accountApp .zads-user-dates > small,
#accountApp .zads-user-dates button {
  font-size: 13px;
}

#accountApp .zads-quote-lines div {
  padding: 11px 0;
}

#accountApp .zads-user-row {
  grid-template-columns: minmax(220px, 1fr) minmax(340px, 1.2fr) 190px;
  padding: 16px 0;
}

#accountApp .zads-user-metrics {
  gap: 8px;
}

#accountApp .zads-user-metrics span {
  padding: 10px;
  border: 1px solid #e4ecea;
  border-radius: 10px;
}

/* Meta Ads */

#accountApp .user-meta-row {
  grid-template-columns: minmax(220px, 1fr) minmax(250px, 0.7fr) auto auto;
  gap: 14px;
  padding: 16px 0;
  border-top-color: var(--cc-line);
}

#accountApp .user-meta-row > div:first-child small,
#accountApp .user-meta-plan small,
#accountApp .user-meta-plan b,
#accountApp .user-meta-row > button {
  font-size: 13px;
}

#accountApp .user-meta-plan span {
  padding: 11px;
  border: 1px solid #eee8f1;
  border-radius: 11px;
  background: var(--cc-surface-soft);
}

#accountApp .user-meta-row > button {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
}

/* Open House */

#accountApp .oh-layout {
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 18px;
}

#accountApp .oh-property-panel,
#accountApp .oh-editor-card {
  padding: 20px;
}

#accountApp .oh-panel-head small,
#accountApp .oh-selected-head small,
#accountApp .oh-step small,
#accountApp .openhouse-property small {
  font-size: 13px;
}

#accountApp .oh-panel-head h3,
#accountApp .oh-selected-head h2 {
  color: var(--cc-ink);
}

#accountApp .oh-icon-btn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 12px;
}

#accountApp .openhouse-property {
  min-height: 78px;
  margin-top: 9px;
  padding: 11px;
  border-radius: 14px;
}

#accountApp .openhouse-property b {
  font-size: 14px;
}

#accountApp .oh-section {
  padding-top: 20px;
  margin-top: 20px;
}

#accountApp .oh-step b,
#accountApp .oh-form-grid label,
#accountApp .oh-slot-preview,
#accountApp .oh-message {
  font-size: 14px;
}

#accountApp .oh-form-grid input,
#accountApp .oh-form-grid select,
#accountApp .oh-section textarea {
  min-height: 46px;
  border-radius: 12px;
  font-size: 14px;
}

#accountApp .oh-primary,
#accountApp .oh-danger,
#accountApp .oh-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#accountApp #openHouseStatsContent .row {
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--cc-line);
}

/* Legacy Store, Following, Import and Saved Searches panels */

#accountApp .account-panel {
  color: var(--cc-ink);
}

#accountApp .account-panel > .sectionhead {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--cc-radius-lg);
  background: linear-gradient(125deg, #211724, #4b245d 70%, #6d28d9 150%);
  color: #fff;
  box-shadow: 0 20px 44px rgba(50, 25, 63, 0.11);
}

#accountApp .account-panel > .sectionhead h2 {
  color: #fff;
  font-size: 27px;
  letter-spacing: -0.035em;
}

#accountApp .account-panel > .sectionhead p {
  color: #e3d9e7;
}

#accountApp .account-panel > .sectionhead > button {
  border-color: rgba(255, 255, 255, 0.2);
  background: #fff;
  color: var(--cc-purple-dark);
}

#accountApp #storeEditor,
#accountApp #storeEmpty,
#accountApp #followingStores,
#accountApp #followingFeed,
#accountApp #businessImportLocked,
#accountApp #businessImportApp > .acc-card,
#accountApp #watchlist > .acc-card {
  padding: 22px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}

#accountApp #storeEditor > label {
  display: block;
  margin-top: 14px;
  color: var(--cc-ink-soft);
  font-size: 14px;
  font-weight: 800;
}

#accountApp #storeEditor > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#accountApp #openStoreLink,
#accountApp .account-panel .panel a,
#accountApp #savedSearchAlerts a,
#accountApp #savedSearches a {
  color: var(--cc-purple-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

#accountApp #openStoreLink:hover,
#accountApp .account-panel .panel a:hover {
  text-decoration: underline;
}

#accountApp #followingStores,
#accountApp #followingFeed {
  display: grid;
  gap: 10px;
}

#accountApp #following > h3 {
  margin: 24px 0 12px;
  font-size: 20px;
}

#accountApp .account-panel .panel,
#accountApp #importValidationResult .panel,
#accountApp #importBatches .panel,
#accountApp #savedSearches .panel,
#accountApp #savedSearchAlerts .panel {
  margin: 0 0 10px;
  padding: 16px;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fcfafc);
  color: var(--cc-ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

#accountApp .account-panel .panel strong {
  color: var(--cc-ink);
  font-size: 14px;
}

#accountApp #businessImportApp {
  display: grid;
  gap: 14px;
}

#accountApp #businessImportApp > .acc-card {
  margin-top: 0 !important;
}

#accountApp #businessImportLocked button {
  margin: 5px 5px 5px 0;
}

#accountApp #downloadImportTemplate,
#accountApp #validateImportBtn,
#accountApp #confirmExcelImport,
#accountApp #saveStoreBtn,
#accountApp #createStoreBtn {
  min-height: 46px;
  padding: 11px 16px;
  border-color: var(--cc-purple) !important;
  background: var(--cc-purple) !important;
  color: #fff !important;
  font-weight: 850;
}

#accountApp #downloadImportTemplate,
#accountApp #validateImportBtn {
  margin-top: 14px;
}

#accountApp #importValidationResult {
  margin-top: 14px;
}

#accountApp #importValidationResult > button {
  margin: 4px 7px 4px 0;
}

#accountApp #manualCreditsBox {
  margin: 16px 0;
  border-color: #d9c6ee;
  background: linear-gradient(135deg, #fff, #f6effd);
}

/* Empty, loading, error, upload and feedback patterns */

#accountApp .empty-note {
  color: var(--cc-muted);
  font-size: 14px;
  line-height: 1.55;
}

#accountApp [id] > .empty-note:only-child,
#accountApp [id] > p.empty-note:only-child,
#accountApp .cc-empty,
#accountApp .cc-loading,
#accountApp .cc-error {
  min-height: 116px;
  padding: 28px 20px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--cc-line-strong);
  border-radius: 14px;
  background: var(--cc-surface-soft);
  color: var(--cc-muted);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

#accountApp .cc-loading::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 3px solid #ddd2e8;
  border-top-color: var(--cc-purple);
  border-radius: 50%;
  animation: cc-spin 700ms linear infinite;
}

@keyframes cc-spin {
  to { transform: rotate(360deg); }
}

#accountApp .cc-error {
  border-color: #efc7c3;
  background: #fff8f7;
  color: var(--cc-red);
}

#accountApp .cc-dropzone {
  min-height: 154px;
  padding: 24px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 2px dashed #cbb6e5;
  border-radius: 17px;
  background: linear-gradient(180deg, #fcfaff, #f7f1fd);
  color: var(--cc-muted);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--cc-transition), background var(--cc-transition), transform var(--cc-transition);
}

#accountApp .cc-dropzone:hover,
#accountApp .cc-dropzone.is-dragging {
  border-color: var(--cc-purple);
  background: #f3ebfd;
  transform: translateY(-1px);
}

#accountApp .cc-dropzone strong {
  color: var(--cc-ink);
  font-size: 16px;
}

#accountApp .cc-inline-message {
  min-height: 44px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  background: var(--cc-surface-soft);
  color: var(--cc-muted);
  font-size: 14px;
}

#accountApp .cc-inline-message--success {
  border-color: #bae0c8;
  background: var(--cc-green-bg);
  color: var(--cc-green);
}

#accountApp .cc-inline-message--error {
  border-color: #efc7c3;
  background: var(--cc-red-bg);
  color: var(--cc-red);
}

#accToast {
  position: fixed;
  z-index: 1000;
  right: 22px;
  bottom: 22px;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 50px;
  padding: 13px 17px;
  display: none;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #281d2d;
  color: #fff;
  box-shadow: 0 18px 45px rgba(28, 17, 32, 0.24);
  font-size: 14px;
  font-weight: 750;
}
#accToast.show:not(:empty) {
  display: flex;
}
#accToast:empty {
  display: none !important;
}

.cc-modal {
  position: fixed;
  z-index: 900;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(26, 18, 30, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.cc-modal[hidden] {
  display: none;
}

.cc-modal__dialog,
#accountApp dialog {
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--cc-line);
  border-radius: 22px;
  background: #fff;
  color: var(--cc-ink);
  box-shadow: 0 30px 80px rgba(25, 15, 30, 0.22);
}

.cc-modal__actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Tablet */

@media (max-width: 1180px) {
  #accountApp.account-shell {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
  }

  #accountApp .account-kpis,
  #accountApp .promotion-account-kpis,
  #accountApp .zads-user-kpis,
  #accountApp .user-meta-kpis,
  #accountApp .cc-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp .acc-grid,
  #accountApp .cc-two-column,
  #accountApp .promotion-account-layout,
  #accountApp .zads-account-layout {
    grid-template-columns: 1fr;
  }

  #accountApp .promotion-account-help,
  #accountApp .zads-quote-box {
    position: static;
  }

  #accountApp .promotion-user-row,
  #accountApp .promotion-user-row.promotion-right-row,
  #accountApp .zads-user-row {
    grid-template-columns: 1fr;
  }

  #accountApp .zads-user-dates {
    align-items: flex-start;
  }

  #accountApp .user-meta-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #accountApp .user-meta-plan {
    grid-column: 1 / -1;
  }

  #accountApp .oh-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

/* Compact tablet and mobile navigation */

@media (max-width: 900px) {
  body > .header .header-main {
    min-height: 62px;
  }

  #accountApp.account-shell {
    width: min(100% - 24px, 820px);
    margin-top: 16px;
    display: block !important;
  }

  #accountApp .account-sidebar {
    position: static;
    min-height: 0;
    max-height: none;
    margin-bottom: 18px;
    padding: 14px;
  }

  #accountApp .profile-mini {
    grid-template-columns: 48px minmax(0, 1fr);
    padding-bottom: 13px;
  }

  #accountApp .profile-mini .avatar {
    width: 48px;
    height: 48px;
  }

  #accountApp .accnav {
    margin: 12px -4px 0;
    padding: 0 4px 8px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  #accountApp .accnav-group {
    display: none;
  }

  #accountApp .accnav button,
  #accountApp .accnav .account-nav-item {
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 13px;
    scroll-snap-align: start;
  }

  #accountApp .accnav button:hover,
  #accountApp .accnav .account-nav-item:hover {
    transform: none;
  }

  #accountApp .side-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #accountApp #contactDeVanzare {
    margin: 0 !important;
  }

  #accountApp .account-top {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  #accountApp .account-top-actions {
    width: 100%;
  }

  #accountApp .account-top-actions > button {
    flex: 1 1 0;
  }

  #accountApp .listing-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp .public-package-grid,
  #accountApp .package-hero,
  #accountApp .package-account-state,
  #accountApp .oh-layout {
    grid-template-columns: 1fr;
  }

  #accountApp .promotion-product-select {
    grid-template-columns: 1fr;
  }

  #accountApp .oh-property-panel {
    max-height: 480px;
    overflow: auto;
  }

  #accountApp .list-table {
    min-width: 860px;
  }
}

/* Phones, including 390px viewport */

@media (max-width: 600px) {
  body > .header .header-main {
    padding-inline: 12px;
  }

  body > .header .logo > b {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  body > .header .logo > strong {
    font-size: 20px;
  }

  #accountApp.account-shell {
    width: calc(100% - 20px);
    margin: 12px auto 38px;
  }

  #accountApp .account-sidebar {
    border-radius: 18px;
  }

  #accountApp .account-top h1 {
    font-size: 29px;
  }

  #accountApp .account-top-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #accountApp .account-top-actions > button {
    width: 100%;
  }

  #accountApp .acc-card,
  #accountApp .pricing-public-section,
  #accountApp .package-state-card,
  #accountApp .oh-property-panel,
  #accountApp .oh-editor-card,
  #accountApp .cc-card,
  #accountApp #storeEditor,
  #accountApp #storeEmpty,
  #accountApp #followingStores,
  #accountApp #followingFeed,
  #accountApp #businessImportLocked,
  #accountApp #businessImportApp > .acc-card,
  #accountApp #watchlist > .acc-card {
    padding: 17px;
    border-radius: 16px;
  }

  #accountApp .business-banner,
  #accountApp .business-dashboard,
  #accountApp .package-hero,
  #accountApp .promotion-account-hero,
  #accountApp .zads-account-hero,
  #accountApp .cc-hero,
  #accountApp .account-panel > .sectionhead {
    padding: 21px;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 18px;
  }

  #accountApp .account-panel > .sectionhead > button {
    width: 100%;
  }

  #accountApp .account-kpis,
  #accountApp .promotion-account-kpis,
  #accountApp .zads-user-kpis,
  #accountApp .user-meta-kpis,
  #accountApp .cc-kpi-grid,
  #accountApp .listing-tabs,
  #accountApp .cc-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp :where(.account-kpis, .promotion-account-kpis, .zads-user-kpis, .user-meta-kpis, .cc-kpi-grid) article {
    padding: 15px;
  }

  #accountApp :where(.account-kpis, .promotion-account-kpis, .zads-user-kpis, .user-meta-kpis, .cc-kpi-grid) strong {
    font-size: 23px;
  }

  #accountApp .listing-tab,
  #accountApp .cc-tab {
    min-height: 92px;
    padding: 14px;
  }

  #accountApp .form-grid,
  #accountApp .cc-form-grid,
  #accountApp .settings-form-grid,
  #accountApp .zads-form-grid,
  #accountApp .zads-option-grid,
  #accountApp .oh-form-grid {
    grid-template-columns: 1fr;
  }

  #accountApp .zads-form-grid .span2,
  #accountApp .settings-form-grid .settings-span-2 {
    grid-column: auto;
  }

  #accountApp .filterbar,
  #accountApp .cc-toolbar,
  #accountApp .card-head,
  #accountApp .sectionhead,
  #accountApp .cc-section-head,
  #accountApp .promotion-order-footer {
    align-items: stretch;
    flex-direction: column;
  }

  #accountApp .filterbar > *,
  #accountApp .cc-toolbar > *,
  #accountApp .card-head > button,
  #accountApp .promotion-order-footer > button {
    width: 100%;
  }

  #accountApp .performance-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  #accountApp .perf-thumb {
    width: 72px;
    height: 62px;
  }

  #accountApp .perf-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp .message-preview {
    grid-template-columns: 1fr;
  }

  #accountApp .message-preview b,
  #accountApp .message-preview small,
  #accountApp .message-preview button,
  #accountApp .message-preview a {
    grid-column: 1;
    grid-row: auto;
  }

  #accountApp .favorite-account-row {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #accountApp .favorite-account-row > a:first-child {
    width: 70px !important;
    height: 62px !important;
  }

  #accountApp .favorite-account-row > button {
    grid-column: 2;
    justify-self: start;
  }

  #accountApp .promotion-select-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  #accountApp .promotion-select-card > strong {
    grid-column: 2;
    margin: 0;
  }

  #accountApp .promotion-user-metrics,
  #accountApp .zads-user-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp .user-meta-row {
    grid-template-columns: 1fr;
  }

  #accountApp .user-meta-plan {
    grid-template-columns: 1fr 1fr;
  }

  #accountApp #storeEditor > div:last-child,
  #accountApp .cc-modal__actions {
    align-items: stretch;
    flex-direction: column;
  }

  #accountApp #storeEditor > div:last-child > *,
  .cc-modal__actions > * {
    width: 100%;
  }

  #accToast {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none;
  }
}

@media (max-width: 410px) {
  #accountApp .account-kpis,
  #accountApp .promotion-account-kpis,
  #accountApp .zads-user-kpis,
  #accountApp .user-meta-kpis,
  #accountApp .cc-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #accountApp .listing-tabs,
  #accountApp .cc-tabs {
    grid-template-columns: 1fr;
  }

  #accountApp .user-meta-plan,
  #accountApp .promotion-user-metrics,
  #accountApp .zads-user-metrics {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #accountApp *,
  #accountApp *::before,
  #accountApp *::after,
  .cc-modal *,
  #accToast {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Account Control Center compatibility layer
   Maps the final account-control-center.js / index.html component vocabulary
   to the shared DeVanzare visual system. Keep this block last so it can safely
   normalize both the new components and the older inline account stylesheet.
   -------------------------------------------------------------------------- */

/* Visibility remains owned by HTML and JavaScript. Grid/flex declarations must
   never override the native hidden state. */
#accountApp [hidden],
#accountApp .cc-store-layout[hidden],
#accountApp .cc-grid[hidden],
#accountApp .cc-card[hidden] {
  display: none !important;
}

/* Shared composition primitives */

#accountApp .cc-stack {
  display: grid;
  min-width: 0;
  gap: 12px;
}

#accountApp .cc-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#accountApp .cc-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}

#accountApp .cc-two-column {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#accountApp .cc-store-grid,
#accountApp .cc-listing-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#accountApp .cc-section-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 176px;
  margin: 0 0 20px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(109, 40, 217, 0.18);
  border-radius: var(--cc-radius-lg);
  background:
    radial-gradient(circle at 87% 8%, rgba(255, 255, 255, 0.26), transparent 12rem),
    linear-gradient(135deg, #f3edfc 0%, #fbf9fd 57%, #eee4fb 100%);
  box-shadow: var(--cc-shadow-sm);
}

#accountApp .cc-section-hero::after {
  position: absolute;
  z-index: -1;
  right: -48px;
  bottom: -72px;
  width: 210px;
  height: 210px;
  border: 34px solid rgba(109, 40, 217, 0.06);
  border-radius: 50%;
  content: "";
}

#accountApp .cc-section-hero > div {
  min-width: 0;
  max-width: 760px;
}

#accountApp .cc-section-hero h2 {
  max-width: 720px;
  margin: 5px 0 8px;
  color: var(--cc-ink);
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

#accountApp .cc-section-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--cc-muted);
  font-size: 14px;
  line-height: 1.65;
}

#accountApp .cc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cc-purple-ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#accountApp .cc-eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-purple);
  box-shadow: 0 0 0 5px rgba(109, 40, 217, 0.1);
  content: "";
}

#accountApp .cc-subsection-head,
#accountApp .cc-step-head {
  display: flex;
  min-width: 0;
  margin: 24px 0 14px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#accountApp .cc-subsection-head small,
#accountApp .cc-step-head small {
  display: block;
  margin: 0 0 3px;
  color: var(--cc-purple-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

#accountApp .cc-subsection-head h3,
#accountApp .cc-step-head h3 {
  margin: 0;
  color: var(--cc-ink);
  font-size: 20px;
  letter-spacing: -0.02em;
}

#accountApp .cc-step-head {
  justify-content: flex-start;
  margin-top: 0;
}

#accountApp .cc-step-head > span {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #7c3aed, #5b21b6);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(109, 40, 217, 0.2);
}

#accountApp .cc-step-head p {
  margin: 4px 0 0;
  color: var(--cc-muted);
}

/* Toolbars, filters, fields and actions */

#accountApp .cc-toolbar {
  display: flex;
  min-width: 0;
  margin: 0 0 18px;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--cc-shadow-sm);
}

#accountApp .cc-search,
#accountApp .cc-select,
#accountApp .cc-label,
#accountApp .cc-saved-search-settings label,
#accountApp .cc-crm-row label,
#accountApp .cc-offer-actions label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--cc-ink-soft);
  font-size: 12px;
  font-weight: 800;
}

#accountApp .cc-search {
  position: relative;
  flex: 1 1 280px;
}

#accountApp .cc-search input,
#accountApp .cc-select,
#accountApp .cc-label input,
#accountApp .cc-label select,
#accountApp .cc-label textarea,
#accountApp .cc-saved-search input[type="text"],
#accountApp .cc-saved-search input:not([type]),
#accountApp .cc-saved-search-settings select,
#accountApp .cc-offer-actions input,
#accountApp .cc-crm-row select,
#accountApp .cc-crm-row textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 11px;
  outline: 0;
  background: #fff;
  color: var(--cc-ink);
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--cc-transition), box-shadow var(--cc-transition), background var(--cc-transition);
}

#accountApp .cc-label textarea,
#accountApp .cc-crm-row textarea {
  min-height: 100px;
  resize: vertical;
}

#accountApp .cc-search input:focus,
#accountApp .cc-select:focus,
#accountApp .cc-label input:focus,
#accountApp .cc-label select:focus,
#accountApp .cc-label textarea:focus,
#accountApp .cc-saved-search input:focus,
#accountApp .cc-saved-search-settings select:focus,
#accountApp .cc-offer-actions input:focus,
#accountApp .cc-crm-row select:focus,
#accountApp .cc-crm-row textarea:focus {
  border-color: #9b72df;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.1);
}

#accountApp .cc-search input::placeholder,
#accountApp .cc-label input::placeholder,
#accountApp .cc-label textarea::placeholder,
#accountApp .cc-crm-row textarea::placeholder {
  color: var(--cc-muted-2);
  opacity: 1;
}

#accountApp select.cc-select {
  display: block;
}

#accountApp .cc-filter-pills {
  display: flex;
  min-width: 0;
  margin: 0 0 18px;
  padding: 5px;
  overflow-x: auto;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  background: var(--cc-surface-soft);
  scrollbar-width: thin;
}

#accountApp .cc-filter-pills button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cc-muted);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: color var(--cc-transition), background var(--cc-transition), box-shadow var(--cc-transition);
}

#accountApp .cc-filter-pills button:hover {
  background: #fff;
  color: var(--cc-purple-ink);
}

#accountApp .cc-filter-pills button.active,
#accountApp .cc-filter-pills button[aria-selected="true"] {
  background: #fff;
  color: var(--cc-purple-ink);
  box-shadow: 0 5px 14px rgba(59, 36, 66, 0.1);
}

#accountApp .cc-primary,
#accountApp .cc-secondary,
#accountApp .cc-primary-link,
#accountApp .cc-secondary-link,
#accountApp .cc-text-action,
#accountApp .cc-danger-text {
  display: inline-flex;
  min-height: 44px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--cc-transition), border-color var(--cc-transition), background var(--cc-transition), box-shadow var(--cc-transition), color var(--cc-transition), opacity var(--cc-transition);
}

#accountApp .cc-primary,
#accountApp .cc-primary-link {
  border: 1px solid var(--cc-purple);
  background: linear-gradient(145deg, #7c3aed, #5b21b6);
  color: #fff;
  box-shadow: 0 9px 20px rgba(109, 40, 217, 0.19);
}

#accountApp .cc-secondary,
#accountApp .cc-secondary-link {
  border: 1px solid var(--cc-line-strong);
  background: #fff;
  color: var(--cc-ink-soft);
  box-shadow: 0 4px 12px rgba(42, 25, 48, 0.035);
}

#accountApp .cc-text-action,
#accountApp .cc-danger-text {
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

#accountApp .cc-text-action {
  color: var(--cc-purple-ink);
}

#accountApp .cc-danger-text {
  color: var(--cc-red);
}

#accountApp .cc-primary:hover,
#accountApp .cc-primary-link:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #6d28d9, #4c1d95);
  box-shadow: 0 12px 25px rgba(109, 40, 217, 0.26);
}

#accountApp .cc-secondary:hover,
#accountApp .cc-secondary-link:hover {
  transform: translateY(-1px);
  border-color: #bda8d1;
  color: var(--cc-purple-ink);
}

#accountApp .cc-text-action:hover {
  background: var(--cc-purple-pale);
}

#accountApp .cc-danger-text:hover {
  border-color: rgba(174, 47, 38, 0.16);
  background: var(--cc-red-bg);
}

#accountApp .cc-primary:disabled,
#accountApp .cc-secondary:disabled,
#accountApp .cc-text-action:disabled,
#accountApp .cc-danger-text:disabled {
  transform: none;
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none;
}

#accountApp .cc-row-actions,
#accountApp .cc-form-actions,
#accountApp .cc-notification-actions,
#accountApp .cc-offer-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#accountApp .cc-form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding: 16px 0 0;
  border-top: 1px solid var(--cc-line);
}

#accountApp .cc-form-actions .cc-inline-status {
  margin-right: auto;
}

#accountApp .cc-row-actions > a:not(.cc-primary):not(.cc-primary-link):not(.cc-secondary):not(.cc-secondary-link),
#accountApp .cc-row-actions > button:not(.cc-primary):not(.cc-secondary):not(.cc-danger-text),
#accountApp .cc-notification-actions > a:not(.cc-primary):not(.cc-primary-link):not(.cc-secondary):not(.cc-secondary-link),
#accountApp .cc-notification-actions > button:not(.cc-primary):not(.cc-secondary):not(.cc-danger-text),
#accountApp .cc-search-alert > div:last-of-type > a,
#accountApp .cc-search-alert > div:last-of-type > button,
#accountApp .cc-crm-row > button {
  display: inline-flex;
  min-height: 44px;
  padding: 9px 13px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cc-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--cc-ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--cc-transition), background var(--cc-transition), color var(--cc-transition), transform var(--cc-transition);
}

#accountApp .cc-row-actions > a:hover,
#accountApp .cc-row-actions > button:not(.cc-danger-text):hover,
#accountApp .cc-notification-actions > a:hover,
#accountApp .cc-notification-actions > button:hover,
#accountApp .cc-search-alert > div:last-of-type > a:hover,
#accountApp .cc-search-alert > div:last-of-type > button:hover,
#accountApp .cc-crm-row > button:hover {
  transform: translateY(-1px);
  border-color: #bda8d1;
  background: var(--cc-purple-pale);
  color: var(--cc-purple-ink);
}

/* State, feedback and status language */

#accountApp .cc-state {
  display: grid;
  min-height: 178px;
  padding: 28px 20px;
  place-items: center;
  align-content: center;
  gap: 9px;
  border: 1px dashed var(--cc-line-strong);
  border-radius: var(--cc-radius);
  background: var(--cc-surface-soft);
  color: var(--cc-muted);
  text-align: center;
}

#accountApp .cc-state strong {
  color: var(--cc-ink);
  font-size: 15px;
}

#accountApp .cc-state p {
  max-width: 520px;
  margin: 0;
}

#accountApp .cc-loading {
  border-style: solid;
  background: linear-gradient(110deg, #fbfafd 10%, #f2edf8 28%, #fbfafd 46%);
  background-size: 240% 100%;
  animation: cc-skeleton-sweep 1.6s linear infinite;
}

#accountApp .cc-empty::before,
#accountApp .cc-error::before {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 21px;
  font-weight: 900;
}

#accountApp .cc-empty::before {
  background: var(--cc-purple-pale);
  color: var(--cc-purple-ink);
  content: "·";
}

#accountApp .cc-error {
  border-color: rgba(174, 47, 38, 0.28);
  background: #fffafa;
}

#accountApp .cc-error::before {
  background: var(--cc-red-bg);
  color: var(--cc-red);
  content: "!";
}

#accountApp .cc-spinner {
  width: 30px;
  height: 30px;
  display: inline-block;
  border: 3px solid rgba(109, 40, 217, 0.18);
  border-top-color: var(--cc-purple);
  border-radius: 50%;
  animation: cc-spin 0.72s linear infinite;
}

@keyframes cc-spin {
  to { transform: rotate(360deg); }
}

@keyframes cc-skeleton-sweep {
  to { background-position-x: -240%; }
}

#accountApp .cc-status {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 999px;
  background: #f5f2f7;
  color: var(--cc-ink-soft);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.035em;
  text-align: center;
  text-transform: uppercase;
}

#accountApp .cc-status::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#accountApp [class*="cc-status-active"],
#accountApp [class*="cc-status-paid"],
#accountApp [class*="cc-status-accepted"],
#accountApp [class*="cc-status-approved"],
#accountApp [class*="cc-status-complete"],
#accountApp [class*="cc-status-completed"],
#accountApp [class*="cc-status-imported"],
#accountApp [class*="cc-status-success"] {
  border-color: rgba(20, 122, 66, 0.2);
  background: var(--cc-green-bg);
  color: var(--cc-green);
}

#accountApp [class*="cc-status-pending"],
#accountApp [class*="cc-status-awaiting"],
#accountApp [class*="cc-status-draft"],
#accountApp [class*="cc-status-in_review"],
#accountApp [class*="cc-status-in-review"],
#accountApp [class*="cc-status-scheduled"],
#accountApp [class*="cc-status-partial"],
#accountApp [class*="cc-status-processing"] {
  border-color: rgba(146, 93, 0, 0.2);
  background: var(--cc-amber-bg);
  color: var(--cc-amber);
}

#accountApp [class*="cc-status-new"],
#accountApp [class*="cc-status-open"],
#accountApp [class*="cc-status-ready"],
#accountApp [class*="cc-status-sent"] {
  border-color: rgba(35, 95, 158, 0.2);
  background: var(--cc-blue-bg);
  color: var(--cc-blue);
}

#accountApp [class*="cc-status-inactive"],
#accountApp [class*="cc-status-cancel"],
#accountApp [class*="cc-status-reject"],
#accountApp [class*="cc-status-fail"],
#accountApp [class*="cc-status-expir"],
#accountApp [class*="cc-status-withdraw"],
#accountApp [class*="cc-status-rolled_back"] {
  border-color: rgba(174, 47, 38, 0.2);
  background: var(--cc-red-bg);
  color: var(--cc-red);
}

#accountApp .cc-inline-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 7px;
  color: var(--cc-muted);
  font-size: 12px;
  font-weight: 800;
}

#accountApp .cc-inline-status:not(:empty)::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--cc-muted-2);
  content: "";
}

#accountApp .cc-inline-status[data-kind="loading"]::before {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  border: 2px solid rgba(109, 40, 217, 0.18);
  border-top-color: var(--cc-purple);
  background: transparent;
  animation: cc-spin 0.72s linear infinite;
}

#accountApp .cc-inline-status[data-kind="success"] { color: var(--cc-green); }
#accountApp .cc-inline-status[data-kind="success"]::before { background: var(--cc-green); }
#accountApp .cc-inline-status[data-kind="warning"] { color: var(--cc-amber); }
#accountApp .cc-inline-status[data-kind="warning"]::before { background: var(--cc-amber); }
#accountApp .cc-inline-status[data-kind="error"] { color: var(--cc-red); }
#accountApp .cc-inline-status[data-kind="error"]::before { background: var(--cc-red); }

/* Informational and KPI blocks */

#accountApp .cc-kpi-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

#accountApp .cc-kpi-grid > * {
  min-width: 0;
  min-height: 110px;
  padding: 17px;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}

#accountApp .cc-kpi-grid small {
  display: block;
  color: var(--cc-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#accountApp .cc-kpi-grid strong,
#accountApp .cc-kpi-grid b {
  display: block;
  margin-top: 7px;
  color: var(--cc-ink);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

#accountApp .cc-kpi-grid p {
  margin: 6px 0 0;
  color: var(--cc-muted);
}

#accountApp .cc-info-card {
  display: flex;
  min-width: 0;
  padding: 16px 18px;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(109, 40, 217, 0.17);
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f4fd, #fff);
  color: var(--cc-ink-soft);
}

#accountApp .cc-info-card strong,
#accountApp .cc-info-card b {
  color: var(--cc-ink);
}

#accountApp .cc-info-card p {
  margin: 3px 0 0;
  color: var(--cc-muted);
}

#accountApp .cc-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--cc-purple-pale);
  color: var(--cc-purple-ink);
  font-size: 17px;
  font-weight: 900;
}

#accountApp .cc-deals-note {
  margin: 14px 0 18px;
}

#accountApp .cc-history-card {
  margin-top: 18px;
}

/* Store editor and uploads */

#accountApp .cc-store-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 16px;
  align-items: start;
}

#accountApp .cc-form-card,
#accountApp .cc-media-card {
  min-width: 0;
  overflow: visible;
}

#accountApp .cc-media-card {
  display: grid;
  gap: 13px;
}

#accountApp .cc-upload {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 96px;
  padding: 16px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1.5px dashed #bda8d1;
  border-radius: 15px;
  background: linear-gradient(135deg, #fbf9fd, #f5f0fb);
  color: var(--cc-ink-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--cc-transition), background var(--cc-transition), box-shadow var(--cc-transition), transform var(--cc-transition);
}

#accountApp .cc-upload:hover,
#accountApp .cc-upload:focus-within {
  transform: translateY(-1px);
  border-color: var(--cc-purple);
  background: var(--cc-purple-pale);
  box-shadow: 0 9px 22px rgba(109, 40, 217, 0.09);
}

#accountApp .cc-upload.compact {
  min-height: 70px;
  padding: 12px;
  justify-content: flex-start;
  text-align: left;
}

#accountApp .cc-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#accountApp .cc-upload > span {
  display: grid;
  gap: 3px;
}

#accountApp .cc-upload b {
  color: var(--cc-purple-ink);
  font-size: 14px;
}

#accountApp .cc-upload small {
  color: var(--cc-muted);
  font-size: 12px;
}

#accountApp .cc-media-preview {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 120px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  background:
    linear-gradient(45deg, #f1edf3 25%, transparent 25%),
    linear-gradient(-45deg, #f1edf3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1edf3 75%),
    linear-gradient(-45deg, transparent 75%, #f1edf3 75%),
    #faf9fb;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

#accountApp .cc-media-preview:empty::after {
  padding: 10px;
  color: var(--cc-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  content: "Previzualizarea imaginii";
}

#accountApp .cc-media-preview.square {
  width: min(160px, 100%);
  aspect-ratio: 1;
}

#accountApp .cc-media-preview.cover {
  aspect-ratio: 16 / 6;
}

#accountApp .cc-media-preview img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

/* Listings and stores */

#accountApp .cc-listing-card,
#accountApp .cc-followed-store {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
  transition: transform var(--cc-transition), border-color var(--cc-transition), box-shadow var(--cc-transition);
}

#accountApp .cc-listing-card:hover,
#accountApp .cc-followed-store:hover {
  transform: translateY(-2px);
  border-color: #d4c4e2;
  box-shadow: var(--cc-shadow-md);
}

#accountApp .cc-listing-card > img,
#accountApp .cc-listing-card > .cc-listing-placeholder {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
  background: #f1edf3;
}

#accountApp .cc-listing-placeholder,
#accountApp .cc-media-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f0e8fa, #faf8fc);
  color: var(--cc-purple-ink);
  font-size: 24px;
  font-weight: 900;
}

#accountApp .cc-listing-card > div:not(.cc-row-actions) {
  min-width: 0;
  padding: 15px;
}

#accountApp .cc-listing-card small,
#accountApp .cc-listing-card time,
#accountApp .cc-followed-store small {
  color: var(--cc-muted);
}

#accountApp .cc-listing-card a,
#accountApp .cc-followed-store a {
  color: var(--cc-ink);
  text-decoration: none;
}

#accountApp .cc-listing-card a:hover,
#accountApp .cc-followed-store a:hover {
  color: var(--cc-purple-ink);
}

#accountApp .cc-listing-card strong,
#accountApp .cc-listing-card b {
  display: block;
  margin: 5px 0;
  color: var(--cc-ink);
  font-size: 15px;
  line-height: 1.35;
}

#accountApp .cc-listing-card p {
  margin: 4px 0;
  color: var(--cc-muted);
}

#accountApp .cc-listing-card .cc-row-actions {
  padding: 0 15px 15px;
}

#accountApp .cc-favorite-card {
  display: grid;
  grid-template-rows: auto 1fr;
}

#accountApp .cc-favorite-card .cc-inline-status {
  grid-column: 1 / -1;
}

#accountApp .cc-favorite-card .cc-row-actions {
  margin-top: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--cc-line);
}

#accountApp .cc-followed-store {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 13px;
  padding: 16px;
  align-items: start;
}

#accountApp .cc-followed-store > img,
#accountApp .cc-followed-store > .cc-media-fallback {
  width: 64px;
  height: 64px;
  grid-row: 1 / span 2;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  object-fit: cover;
}

#accountApp .cc-followed-store > div {
  min-width: 0;
}

#accountApp .cc-followed-store strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

#accountApp .cc-followed-store p {
  margin: 4px 0;
  color: var(--cc-muted);
}

#accountApp .cc-followed-store label {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.65fr);
  gap: 10px;
  align-items: center;
  color: var(--cc-ink-soft);
  font-weight: 800;
}

#accountApp .cc-followed-store select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--cc-ink);
}

#accountApp .cc-followed-store > .cc-danger-text,
#accountApp .cc-followed-store > .cc-inline-status {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Offers, notifications and messages */

#accountApp .cc-offer-card,
#accountApp .cc-notification,
#accountApp .cc-conversation,
#accountApp .cc-saved-search,
#accountApp .cc-search-alert,
#accountApp .cc-order-row,
#accountApp .cc-import-row,
#accountApp .cc-crm-row {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: var(--cc-surface);
  box-shadow: 0 6px 18px rgba(42, 25, 48, 0.035);
}

#accountApp .cc-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(125px, auto) minmax(190px, auto);
  gap: 18px;
  align-items: center;
}

#accountApp .cc-offer-main,
#accountApp .cc-offer-value {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#accountApp .cc-offer-main small,
#accountApp .cc-offer-value small {
  color: var(--cc-muted);
}

#accountApp .cc-offer-main a {
  color: var(--cc-ink);
  text-decoration: none;
}

#accountApp .cc-offer-main a:hover {
  color: var(--cc-purple-ink);
}

#accountApp .cc-offer-main strong {
  font-size: 15px;
}

#accountApp .cc-offer-value b {
  color: var(--cc-ink);
  font-size: 19px;
  letter-spacing: -0.025em;
}

#accountApp .cc-offer-actions {
  justify-content: flex-end;
}

#accountApp .cc-offer-actions label {
  flex: 1 1 150px;
}

#accountApp .cc-offer-actions .cc-inline-status {
  flex-basis: 100%;
  justify-content: flex-end;
}

#accountApp .cc-notification {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

#accountApp .cc-notification.is-unread,
#accountApp .cc-search-alert.is-unread,
#accountApp .cc-conversation.is-unread {
  border-color: rgba(109, 40, 217, 0.25);
  background: linear-gradient(110deg, #fbf9fe, #fff);
  box-shadow: 0 9px 24px rgba(109, 40, 217, 0.07);
}

#accountApp .cc-notification-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cc-line-strong);
}

#accountApp .cc-notification.is-unread .cc-notification-dot {
  background: var(--cc-purple);
  box-shadow: 0 0 0 5px rgba(109, 40, 217, 0.1);
}

#accountApp .cc-notification > div:nth-child(2),
#accountApp .cc-search-alert > div:first-child {
  min-width: 0;
}

#accountApp .cc-notification strong,
#accountApp .cc-search-alert strong {
  display: block;
  color: var(--cc-ink);
  font-size: 14px;
}

#accountApp .cc-notification p,
#accountApp .cc-search-alert p {
  margin: 4px 0;
  color: var(--cc-muted);
}

#accountApp .cc-notification time,
#accountApp .cc-search-alert time {
  color: var(--cc-muted-2);
  font-size: 11px;
}

#accountApp .cc-notification-actions {
  justify-content: flex-end;
}

#accountApp .cc-notification-actions a,
#accountApp .cc-search-alert a {
  color: var(--cc-purple-ink);
  font-weight: 850;
  text-decoration: none;
}

#accountApp .cc-notification > .cc-inline-status {
  grid-column: 2 / -1;
  justify-self: end;
}

#accountApp .cc-search-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

#accountApp .cc-search-alert > div:last-of-type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#accountApp .cc-search-alert > .cc-inline-status {
  grid-column: 1 / -1;
  justify-self: end;
}

#accountApp .cc-conversation {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  transition: transform var(--cc-transition), border-color var(--cc-transition), box-shadow var(--cc-transition);
}

#accountApp .cc-conversation:hover {
  transform: translateY(-1px);
  border-color: #d4c4e2;
  box-shadow: 0 10px 24px rgba(42, 25, 48, 0.07);
}

#accountApp .cc-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #e9ddf8, #f7f3fb);
  color: var(--cc-purple-ink);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

#accountApp .cc-conversation > div:nth-child(2) {
  min-width: 0;
}

#accountApp .cc-conversation-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#accountApp .cc-conversation-title strong {
  overflow: hidden;
  color: var(--cc-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#accountApp .cc-conversation-title time {
  flex: 0 0 auto;
  color: var(--cc-muted-2);
  font-size: 11px;
}

#accountApp .cc-conversation a {
  color: var(--cc-purple-ink);
  font-weight: 800;
  text-decoration: none;
}

#accountApp .cc-conversation p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--cc-muted);
}

#accountApp .cc-conversation > div:last-child {
  display: grid;
  justify-items: end;
  gap: 8px;
}

#accountApp .cc-unread-count {
  min-width: 25px;
  height: 25px;
  display: inline-grid;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  background: var(--cc-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(109, 40, 217, 0.2);
}

/* Saved searches, history rows and Open House CRM */

#accountApp .cc-saved-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.65fr);
  gap: 14px;
  align-items: center;
}

#accountApp .cc-saved-search > div:first-child {
  min-width: 0;
}

#accountApp .cc-saved-search > div:first-child > input {
  font-size: 14px;
  font-weight: 800;
}

#accountApp .cc-saved-search p {
  margin: 5px 0 0;
  color: var(--cc-muted);
}

#accountApp .cc-saved-search-settings {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#accountApp .cc-saved-search-settings label:has(input[type="checkbox"]) {
  display: flex;
  min-height: 44px;
  padding: 9px 11px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cc-line);
  border-radius: 11px;
  background: var(--cc-surface-soft);
}

#accountApp .cc-saved-search-settings input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cc-purple);
}

#accountApp .cc-saved-search > .cc-row-actions,
#accountApp .cc-saved-search > .cc-inline-status {
  grid-column: 1 / -1;
}

#accountApp .cc-saved-search > .cc-row-actions {
  padding-top: 11px;
  border-top: 1px solid var(--cc-line);
}

#accountApp .cc-order-row,
#accountApp .cc-import-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

#accountApp .cc-order-row > div,
#accountApp .cc-import-row > div {
  min-width: 0;
}

#accountApp .cc-order-row strong,
#accountApp .cc-import-row strong {
  display: block;
  color: var(--cc-ink);
  font-size: 14px;
}

#accountApp .cc-order-row p,
#accountApp .cc-import-row p {
  margin: 4px 0;
  color: var(--cc-muted);
}

#accountApp .cc-order-row small,
#accountApp .cc-order-row time,
#accountApp .cc-import-row small,
#accountApp .cc-import-row time {
  color: var(--cc-muted-2);
}

#accountApp .cc-order-row > div:last-child,
#accountApp .cc-import-row > div:last-of-type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#accountApp .cc-import-row > .cc-inline-status {
  grid-column: 1 / -1;
  justify-self: end;
}

#accountApp .cc-crm-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

#accountApp .cc-crm-summary > span {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  background: var(--cc-surface-soft);
  color: var(--cc-muted);
  font-size: 12px;
  font-weight: 800;
}

#accountApp .cc-crm-summary strong {
  display: block;
  margin-bottom: 3px;
  color: var(--cc-ink);
  font-size: 22px;
}

#accountApp .cc-crm-list {
  display: grid;
  gap: 12px;
}

#accountApp .cc-crm-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(150px, 0.45fr) minmax(220px, 0.75fr) auto;
  gap: 12px;
  align-items: end;
}

#accountApp .cc-crm-row > div:first-child {
  min-width: 0;
  align-self: center;
}

#accountApp .cc-crm-row strong {
  display: block;
  color: var(--cc-ink);
  font-size: 14px;
}

#accountApp .cc-crm-row p {
  margin: 4px 0;
  color: var(--cc-muted);
}

#accountApp .cc-crm-row .cc-inline-status {
  grid-column: 1 / -1;
  justify-self: end;
}

/* Responsive behavior for final component vocabulary */

@media (max-width: 1180px) {
  #accountApp .cc-listing-grid,
  #accountApp .cc-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp .cc-offer-card {
    grid-template-columns: minmax(0, 1fr) minmax(125px, auto);
  }

  #accountApp .cc-offer-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--cc-line);
  }

  #accountApp .cc-offer-actions .cc-inline-status {
    justify-content: flex-start;
  }

  #accountApp .cc-crm-row {
    grid-template-columns: minmax(200px, 1fr) minmax(150px, 0.6fr);
  }

  #accountApp .cc-crm-row label:nth-of-type(2),
  #accountApp .cc-crm-row > button {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  #accountApp .cc-section-hero {
    min-height: 0;
  }

  #accountApp .cc-two-column,
  #accountApp .cc-store-layout {
    grid-template-columns: 1fr;
  }

  #accountApp .cc-kpi-grid,
  #accountApp .cc-crm-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp .cc-form-actions {
    grid-column: 1;
  }

  #accountApp .cc-media-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accountApp .cc-media-card > .card-head {
    grid-column: 1 / -1;
  }

  #accountApp .cc-media-card > input[type="hidden"] {
    display: none;
  }

  #accountApp .cc-media-preview.square,
  #accountApp .cc-media-preview.cover {
    width: 100%;
    aspect-ratio: 16 / 7;
  }

  #accountApp .cc-notification {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  #accountApp .cc-notification-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  #accountApp .cc-notification > .cc-inline-status {
    grid-column: 2;
    justify-self: start;
  }

  #accountApp .cc-saved-search {
    grid-template-columns: 1fr;
  }

  #accountApp .cc-saved-search > .cc-row-actions,
  #accountApp .cc-saved-search > .cc-inline-status {
    grid-column: 1;
  }
}

@media (max-width: 680px) {
  #accountApp .cc-section-hero {
    padding: 21px;
    align-items: stretch;
    flex-direction: column;
    gap: 17px;
  }

  #accountApp .cc-section-hero > .cc-primary,
  #accountApp .cc-section-hero > .cc-secondary,
  #accountApp .cc-section-hero > .cc-primary-link,
  #accountApp .cc-section-hero > .cc-secondary-link {
    width: 100%;
  }

  #accountApp .cc-grid,
  #accountApp .cc-listing-grid,
  #accountApp .cc-store-grid {
    grid-template-columns: 1fr;
  }

  #accountApp .cc-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #accountApp .cc-toolbar > *,
  #accountApp .cc-toolbar .cc-search,
  #accountApp .cc-toolbar .cc-select {
    width: 100%;
  }

  #accountApp .cc-filter-pills {
    margin-right: -2px;
    margin-left: -2px;
  }

  #accountApp .cc-listing-card > img,
  #accountApp .cc-listing-card > .cc-listing-placeholder {
    height: 210px;
  }

  #accountApp .cc-offer-card,
  #accountApp .cc-order-row,
  #accountApp .cc-import-row,
  #accountApp .cc-search-alert,
  #accountApp .cc-conversation,
  #accountApp .cc-crm-row {
    grid-template-columns: 1fr;
  }

  #accountApp .cc-offer-actions,
  #accountApp .cc-import-row > .cc-inline-status,
  #accountApp .cc-search-alert > .cc-inline-status,
  #accountApp .cc-crm-row .cc-inline-status {
    grid-column: 1;
  }

  #accountApp .cc-offer-actions,
  #accountApp .cc-offer-actions .cc-inline-status,
  #accountApp .cc-order-row > div:last-child,
  #accountApp .cc-import-row > div:last-of-type,
  #accountApp .cc-import-row > .cc-inline-status,
  #accountApp .cc-search-alert > div:last-of-type,
  #accountApp .cc-search-alert > .cc-inline-status,
  #accountApp .cc-crm-row .cc-inline-status {
    justify-content: flex-start;
    justify-self: start;
  }

  #accountApp .cc-conversation {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  #accountApp .cc-conversation > div:last-child {
    grid-column: 2;
    justify-items: start;
  }

  #accountApp .cc-saved-search-settings,
  #accountApp .cc-media-card {
    grid-template-columns: 1fr;
  }

  #accountApp .cc-media-card > .card-head {
    grid-column: 1;
  }

  #accountApp .cc-row-actions > *,
  #accountApp .cc-notification-actions > *,
  #accountApp .cc-offer-actions > * {
    flex: 1 1 auto;
  }
}

@media (max-width: 430px) {
  #accountApp .cc-section-hero {
    padding: 18px;
    border-radius: 18px;
  }

  #accountApp .cc-section-hero h2 {
    font-size: 24px;
  }

  #accountApp .cc-kpi-grid,
  #accountApp .cc-crm-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #accountApp .cc-kpi-grid > *,
  #accountApp .cc-crm-summary > span {
    min-height: 96px;
    padding: 13px;
  }

  #accountApp .cc-notification {
    grid-template-columns: 8px minmax(0, 1fr);
    padding: 14px;
    gap: 10px;
  }

  #accountApp .cc-primary,
  #accountApp .cc-secondary,
  #accountApp .cc-primary-link,
  #accountApp .cc-secondary-link {
    width: 100%;
  }

  #accountApp .cc-form-actions,
  #accountApp .cc-row-actions,
  #accountApp .cc-notification-actions,
  #accountApp .cc-offer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #accountApp .cc-form-actions > *,
  #accountApp .cc-row-actions > *,
  #accountApp .cc-notification-actions > *,
  #accountApp .cc-offer-actions > * {
    width: 100%;
  }

  #accountApp .cc-form-actions .cc-inline-status,
  #accountApp .cc-offer-actions .cc-inline-status {
    width: auto;
    margin-right: 0;
  }

  #accountApp .cc-followed-store label {
    grid-template-columns: 1fr;
  }
}

/* This duplicate is intentionally last: the compatibility animations above
   must still honor the operating-system motion preference. */
@media (prefers-reduced-motion: reduce) {
  #accountApp .cc-loading,
  #accountApp .cc-spinner,
  #accountApp .cc-inline-status[data-kind="loading"] {
    animation: none !important;
  }
}