.aline-flow-crm {
  --af-bg: #eaf6ff;
  --af-surface: rgba(255, 255, 255, 0.84);
  --af-surface-strong: #f8fbff;
  --af-text: #2b2f48;
  --af-muted: #6f7697;
  --af-line: rgba(79, 95, 150, 0.14);
  --af-accent: #8b5cf6;
  --af-accent-2: #a78bfa;
  --af-accent-3: #6d57d8;
  --af-deep: #51408f;
  --af-shadow: 0 24px 60px rgba(86, 96, 148, 0.14);
  font-family: "Space Grotesk", sans-serif;
  color: var(--af-text);
}

.aline-flow-crm *,
.aline-flow-crm *::before,
.aline-flow-crm *::after {
  box-sizing: border-box;
}

.aline-flow-crm .af-app-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(130, 196, 255, 0.38), transparent 26%),
    radial-gradient(circle at top right, rgba(167, 139, 250, 0.2), transparent 30%),
    linear-gradient(135deg, #f2fbff 0%, #dff1ff 48%, #edf5ff 100%);
  border-radius: 32px;
  overflow: hidden;
}

.aline-flow-crm button,
.aline-flow-crm input,
.aline-flow-crm select,
.aline-flow-crm textarea {
  font: inherit;
}

.aline-flow-crm button {
  border: 0;
  cursor: pointer;
}

.aline-flow-crm .af-sidebar {
  position: relative;
  padding: 28px;
  background: linear-gradient(180deg, #51408f 0%, #6d57d8 100%);
  color: #f7f4ff;
  overflow: hidden;
}

.aline-flow-crm .af-sidebar::before,
.aline-flow-crm .af-sidebar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}

.aline-flow-crm .af-sidebar::before {
  width: 240px;
  height: 240px;
  top: -80px;
  right: -60px;
  background: rgba(194, 172, 255, 0.24);
}

.aline-flow-crm .af-sidebar::after {
  width: 180px;
  height: 180px;
  bottom: 60px;
  left: -70px;
  background: rgba(147, 197, 253, 0.18);
}

.aline-flow-crm .af-brand,
.aline-flow-crm .af-sidebar-nav,
.aline-flow-crm .af-sidebar-panel {
  position: relative;
  z-index: 1;
}

.aline-flow-crm .af-brand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}

.aline-flow-crm .af-brand-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #43377f;
  background: linear-gradient(135deg, #ffd6bf, #c4b5fd);
}

.aline-flow-crm h1,
.aline-flow-crm h2,
.aline-flow-crm h3,
.aline-flow-crm h4 {
  margin: 0;
  font-family: "Sora", sans-serif;
}

.aline-flow-crm .af-eyebrow {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.74;
}

.aline-flow-crm .af-sidebar-nav {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.aline-flow-crm .af-nav-chip {
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 180ms ease, background 180ms ease;
}

.aline-flow-crm .af-nav-chip-primary {
  color: #f9f7ff;
  background: linear-gradient(135deg, var(--af-accent), var(--af-accent-3));
  box-shadow: 0 14px 28px rgba(109, 87, 216, 0.22);
}

.aline-flow-crm .af-nav-chip.active,
.aline-flow-crm .af-nav-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateX(4px);
}

.aline-flow-crm .af-nav-chip-primary:hover,
.aline-flow-crm .af-nav-chip-primary.active {
  background: linear-gradient(135deg, var(--af-accent-3), var(--af-accent));
}

.aline-flow-crm .af-sidebar-panel {
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
}

.aline-flow-crm .af-sidebar-panel.glow {
  background: linear-gradient(180deg, rgba(196, 181, 253, 0.24), rgba(147, 197, 253, 0.1));
}

.aline-flow-crm .af-sidebar-actions {
  display: grid;
  gap: 10px;
}

.aline-flow-crm .af-sidebar-link {
  width: 100%;
  text-align: center;
  justify-content: center;
  text-decoration: none;
}

.aline-flow-crm .af-panel-title {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: rgba(255, 247, 239, 0.72);
}

.aline-flow-crm .af-mini-meter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.aline-flow-crm .af-mini-meter.accent {
  background: rgba(167, 139, 250, 0.22);
}

.aline-flow-crm .af-main-content {
  padding: 32px;
}

.aline-flow-crm .af-hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}

.aline-flow-crm .af-hero h2 {
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1;
  max-width: 12ch;
}

.aline-flow-crm .af-hero-copy {
  max-width: 64ch;
  color: var(--af-muted);
  line-height: 1.65;
}

.aline-flow-crm .af-hero-actions,
.aline-flow-crm .af-form-actions,
.aline-flow-crm .af-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.aline-flow-crm .af-primary-btn,
.aline-flow-crm .af-ghost-btn,
.aline-flow-crm .af-mini-btn {
  border-radius: 16px;
  padding: 14px 18px;
  transition: transform 180ms ease;
}

.aline-flow-crm .af-primary-btn {
  color: #f9f7ff;
  background: linear-gradient(135deg, var(--af-accent), var(--af-accent-3));
  box-shadow: 0 18px 30px rgba(109, 87, 216, 0.28);
}

.aline-flow-crm .af-ghost-btn {
  color: var(--af-text);
  background: rgba(248, 251, 255, 0.82);
  border: 1px solid rgba(79, 95, 150, 0.12);
}

.aline-flow-crm .af-mini-btn {
  padding: 10px 14px;
  color: var(--af-text);
  background: #eef4ff;
}

.aline-flow-crm .af-mini-btn.danger {
  color: #8a2747;
  background: #ffe8ef;
}

.aline-flow-crm .af-primary-btn:hover,
.aline-flow-crm .af-ghost-btn:hover,
.aline-flow-crm .af-mini-btn:hover {
  transform: translateY(-2px);
}

.aline-flow-crm .af-primary-btn:disabled,
.aline-flow-crm .af-ghost-btn:disabled,
.aline-flow-crm .af-mini-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.aline-flow-crm .af-stats-grid,
.aline-flow-crm .af-workspace-grid,
.aline-flow-crm .af-sales-grid,
.aline-flow-crm .af-recommendations-grid {
  display: grid;
  gap: 18px;
}

.aline-flow-crm .af-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.aline-flow-crm .af-sales-section {
  margin-bottom: 18px;
}

.aline-flow-crm .af-sales-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.aline-flow-crm .af-sales-card,
.aline-flow-crm .af-recommendation-card {
  padding: 20px;
  border-radius: 26px;
  background: var(--af-surface);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--af-shadow);
}

.aline-flow-crm .af-sales-card p,
.aline-flow-crm .af-sales-card span,
.aline-flow-crm .af-recommendation-list {
  margin: 0;
}

.aline-flow-crm .af-sales-card strong {
  display: block;
  margin: 10px 0 8px;
  font-family: "Sora", sans-serif;
  font-size: 1.5rem;
}

.aline-flow-crm .af-sales-card {
  min-width: 220px;
  flex: 0 0 220px;
}

.aline-flow-crm .af-recommendations-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aline-flow-crm .af-recommendation-card h4 {
  margin: 0 0 12px;
}

.aline-flow-crm .af-recommendation-list {
  padding-left: 18px;
  color: var(--af-muted);
  line-height: 1.6;
}

.aline-flow-crm .af-recommendation-card.wedding {
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.95), rgba(242, 210, 201, 0.38));
}

.aline-flow-crm .af-recommendation-card.baptism {
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.95), rgba(243, 229, 216, 0.52));
}

.aline-flow-crm .af-recommendation-card.birthday {
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.95), rgba(246, 231, 196, 0.44));
}

.aline-flow-crm .af-stat-card,
.aline-flow-crm .af-composer-card,
.aline-flow-crm .af-pipeline-card,
.aline-flow-crm .af-orders-section,
.aline-flow-crm .af-order-card {
  background: var(--af-surface);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--af-shadow);
  backdrop-filter: blur(18px);
}

.aline-flow-crm .af-stat-card {
  min-height: 156px;
  padding: 22px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}

.aline-flow-crm .af-stat-card::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -30px;
  bottom: -45px;
  border-radius: 36px;
  opacity: 0.6;
  transform: rotate(18deg);
}

.aline-flow-crm .af-stat-card strong {
  display: block;
  margin: 12px 0 8px;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
}

.aline-flow-crm .sunrise::after {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.54), rgba(196, 181, 253, 0.24));
}

.aline-flow-crm .aurora::after {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(191, 219, 254, 0.22));
}

.aline-flow-crm .velvet::after {
  background: linear-gradient(135deg, rgba(109, 87, 216, 0.42), rgba(216, 180, 254, 0.18));
}

.aline-flow-crm .citrus::after {
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.46), rgba(196, 181, 253, 0.22));
}

.aline-flow-crm .af-workspace-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  margin-bottom: 18px;
}

.aline-flow-crm .af-composer-card,
.aline-flow-crm .af-pipeline-card,
.aline-flow-crm .af-orders-section {
  padding: 24px;
  border-radius: 30px;
}

.aline-flow-crm .af-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}

.aline-flow-crm .af-inline-subheading {
  margin: 26px 0 14px;
}

.aline-flow-crm .af-inline-subheading h4 {
  margin: 6px 0 0;
  font-size: 1.2rem;
}

.aline-flow-crm .af-product-catalog-card {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--af-line);
}

.aline-flow-crm .af-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff7ef;
  background: linear-gradient(135deg, #5a3424, #8b6a58);
}

.aline-flow-crm .af-badge.soft {
  color: var(--af-text);
  background: #f3e5d8;
}

.aline-flow-crm .af-order-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.aline-flow-crm .af-order-form label,
.aline-flow-crm .af-toolbar label,
.aline-flow-crm .af-search-field {
  display: grid;
  gap: 8px;
  color: var(--af-muted);
  font-size: 0.95rem;
}

.aline-flow-crm .af-order-form input,
.aline-flow-crm .af-order-form select,
.aline-flow-crm .af-order-form textarea,
.aline-flow-crm .af-toolbar input,
.aline-flow-crm .af-toolbar select {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--af-line);
  border-radius: 18px;
  color: var(--af-text);
  background: var(--af-surface-strong);
  outline: none;
}

.aline-flow-crm .full-span {
  grid-column: 1 / -1;
}

.aline-flow-crm .af-field-label {
  display: block;
  margin-bottom: 10px;
  color: var(--af-muted);
  font-size: 0.95rem;
}

.aline-flow-crm .af-product-picker {
  padding: 16px;
  border: 1px solid var(--af-line);
  border-radius: 22px;
  background: rgba(255, 250, 243, 0.72);
}

.aline-flow-crm .af-product-picker select {
  margin-top: 8px;
  background: linear-gradient(180deg, #fffaf4 0%, #f7ede3 100%);
  border: 1px solid rgba(92, 57, 39, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.aline-flow-crm .af-pipeline-list {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.aline-flow-crm .af-pipeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 247, 238, 0.92), rgba(249, 237, 224, 0.86));
}

.aline-flow-crm .af-pipeline-item strong {
  display: block;
  font-size: 1.45rem;
  font-family: "Sora", sans-serif;
}

.aline-flow-crm .af-pipeline-bar {
  width: 100px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(73, 42, 20, 0.08);
}

.aline-flow-crm .af-pipeline-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--af-accent), var(--af-accent-2));
}

.aline-flow-crm .af-next-up-card {
  padding: 18px;
  border-radius: 24px;
  color: #fff7ef;
  background: linear-gradient(135deg, #5a3424, #8b6a58);
}

.aline-flow-crm .af-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(180px, 0.8fr));
  gap: 14px;
  margin-bottom: 18px;
}

.aline-flow-crm .af-orders-list {
  display: grid;
  gap: 16px;
}

.aline-flow-crm .is-hidden {
  display: none;
}

.aline-flow-crm .af-secondary-view {
  margin-top: 0;
}

.aline-flow-crm .af-summary-copy {
  margin: 0 0 18px;
  color: var(--af-muted);
  line-height: 1.6;
}

.aline-flow-crm .af-calendar-list,
.aline-flow-crm .af-client-list,
.aline-flow-crm .af-category-insights,
.aline-flow-crm .af-product-admin-list {
  display: grid;
  gap: 16px;
}

.aline-flow-crm .af-product-manager-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.aline-flow-crm .af-product-admin-items {
  display: grid;
  gap: 10px;
}

.aline-flow-crm .af-product-admin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff8f0;
}

.aline-flow-crm .af-calendar-shell {
  margin-bottom: 18px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(248, 251, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--af-shadow);
}

.aline-flow-crm .af-calendar-toolbar,
.aline-flow-crm .af-calendar-weekdays {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: center;
  gap: 12px;
}

.aline-flow-crm .af-calendar-toolbar {
  margin-bottom: 14px;
}

.aline-flow-crm .af-calendar-toolbar h4 {
  text-align: center;
  margin: 0;
}

.aline-flow-crm .af-calendar-weekdays {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 10px;
  color: var(--af-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.aline-flow-crm .af-calendar-weekdays span {
  text-align: center;
}

.aline-flow-crm .af-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.aline-flow-crm .af-calendar-cell {
  min-height: 92px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(79, 95, 150, 0.1);
  background: #f8fbff;
  text-align: left;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.aline-flow-crm .af-calendar-cell:hover {
  transform: translateY(-1px);
}

.aline-flow-crm .af-calendar-cell.is-empty {
  visibility: hidden;
}

.aline-flow-crm .af-calendar-cell.is-active {
  border-color: rgba(139, 92, 246, 0.44);
  background: linear-gradient(180deg, #f8fbff 0%, #eee8ff 100%);
}

.aline-flow-crm .af-calendar-cell.has-orders {
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.18);
}

.aline-flow-crm .af-calendar-cell strong {
  display: block;
  margin-bottom: 8px;
}

.aline-flow-crm .af-calendar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 0.82rem;
  color: #f9f7ff;
  background: linear-gradient(135deg, var(--af-accent), var(--af-accent-3));
}

.aline-flow-crm .af-calendar-day,
.aline-flow-crm .af-client-card,
.aline-flow-crm .af-category-card {
  padding: 20px;
  border-radius: 24px;
  background: rgba(248, 251, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--af-shadow);
}

.aline-flow-crm .af-calendar-day h4,
.aline-flow-crm .af-client-card h4,
.aline-flow-crm .af-category-card h4 {
  margin: 0 0 12px;
}

.aline-flow-crm .af-client-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.aline-flow-crm .af-client-rank {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff7ef;
  background: linear-gradient(135deg, var(--af-accent), #c8897f);
  font-size: 0.84rem;
}

.aline-flow-crm .af-calendar-items,
.aline-flow-crm .af-client-metrics,
.aline-flow-crm .af-category-metrics {
  display: grid;
  gap: 10px;
}

.aline-flow-crm .af-calendar-item,
.aline-flow-crm .af-client-metrics div,
.aline-flow-crm .af-category-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff8f0;
}

.aline-flow-crm .af-empty-state {
  padding: 34px;
  border: 1px dashed rgba(73, 42, 20, 0.18);
  border-radius: 24px;
  text-align: center;
  color: var(--af-muted);
  background: rgba(255, 255, 255, 0.46);
}

.aline-flow-crm .af-order-card {
  padding: 20px;
  border-radius: 26px;
}

.aline-flow-crm .af-order-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.aline-flow-crm .af-order-type {
  margin: 0;
  color: var(--af-accent-3);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aline-flow-crm .af-client-name {
  margin: 4px 0 0;
  font-size: 1.3rem;
}

.aline-flow-crm .af-status-pill,
.aline-flow-crm .af-payment-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.aline-flow-crm .af-order-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.aline-flow-crm .af-order-grid div {
  padding: 14px;
  border-radius: 18px;
  background: #fff8f0;
}

.aline-flow-crm .af-order-grid span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.84rem;
  color: var(--af-muted);
}

.aline-flow-crm .af-order-product {
  font-weight: 600;
  margin: 0 0 8px;
}

.aline-flow-crm .af-order-notes {
  margin: 0 0 18px;
  color: var(--af-muted);
  line-height: 1.55;
}

.aline-flow-crm .status-noua { background: #f7e8e1; color: #8f5a49; }
.aline-flow-crm .status-confirmata { background: #f6ebd6; color: #8a6a2d; }
.aline-flow-crm .status-in-productie { background: #efe3db; color: #8f5f55; }
.aline-flow-crm .status-pregatita { background: #efe7d9; color: #866647; }
.aline-flow-crm .status-livrata { background: #e9dfd6; color: #6f5444; }
.aline-flow-crm .payment-avans-lipsa { background: #f7e2dd; color: #9a6456; }
.aline-flow-crm .payment-avans-platit { background: #f3ead9; color: #8b6d41; }
.aline-flow-crm .payment-achitata-integral { background: #eee4dc; color: #71574a; }

@media (max-width: 1180px) {
  .aline-flow-crm .af-app-shell,
  .aline-flow-crm .af-workspace-grid,
  .aline-flow-crm .af-stats-grid,
  .aline-flow-crm .af-sales-grid,
  .aline-flow-crm .af-recommendations-grid,
  .aline-flow-crm .af-toolbar,
  .aline-flow-crm .af-order-grid,
  .aline-flow-crm .af-product-manager-form {
    grid-template-columns: 1fr;
  }

  .aline-flow-crm .af-hero {
    flex-direction: column;
    align-items: start;
  }

  .aline-flow-crm .af-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aline-flow-crm .af-calendar-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .aline-flow-crm .af-app-shell {
    grid-template-columns: 1fr;
  }

  .aline-flow-crm .af-order-form {
    grid-template-columns: 1fr;
  }

  .aline-flow-crm .af-main-content {
    padding: 20px;
  }
}