/* Jolfa panel design system: purple primary actions + semantic accent colors. */
body.panel-nail-context{
  --panel-purple:#5b2a72;
  --panel-purple-strong:#432055;
  --panel-purple-soft:#f2eaf6;
  --panel-teal:#0b8f8c;
  --panel-teal-soft:#e8f7f5;
  --panel-blue:#3475c5;
  --panel-blue-soft:#ebf3fd;
  --panel-green:#16845b;
  --panel-green-soft:#e9f7f0;
  --panel-amber:#a96608;
  --panel-amber-soft:#fff4dc;
  --panel-coral:#b84350;
  --panel-coral-soft:#fff0f1;
  --primary:var(--panel-purple);
  --primary-strong:var(--panel-purple-strong);
  --accent:var(--panel-teal);
  --accent-strong:#08706e;
  --success:var(--panel-green);
  --warning:var(--panel-amber);
  --danger:var(--panel-coral);
  --focus:#724087;
}
html[data-theme="dark"] body.panel-nail-context{
  --panel-purple:#754389;
  --panel-purple-strong:#5c326e;
  --panel-purple-soft:#2b2034;
  --panel-teal:#49c7c1;
  --panel-teal-soft:#142e2d;
  --panel-blue:#72a9e7;
  --panel-blue-soft:#162a3f;
  --panel-green:#61cf9d;
  --panel-green-soft:#173125;
  --panel-amber:#f0ba62;
  --panel-amber-soft:#352a18;
  --panel-coral:#fa8993;
  --panel-coral-soft:#392126;
  --primary:var(--panel-purple);
  --primary-strong:var(--panel-purple-strong);
  --accent:var(--panel-teal);
  --accent-strong:#7bded8;
  --success:var(--panel-green);
  --warning:var(--panel-amber);
  --danger:var(--panel-coral);
  --focus:#bd86cb;
}

/* Calm canvas: color identifies areas; it does not flood every surface. */
body.panel-nail-context.uupm-web3{
  background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--panel-teal) 6%,transparent),transparent 27rem),
    radial-gradient(circle at 92% 18%,color-mix(in srgb,var(--panel-amber) 5%,transparent),transparent 24rem),
    linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 97%,var(--surface-soft)))!important;
}
body.panel-nail-context.uupm-web3::before{
  opacity:.16!important;
  background-image:linear-gradient(color-mix(in srgb,var(--panel-purple) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--panel-purple) 7%,transparent) 1px,transparent 1px)!important;
  background-size:56px 56px!important;
}

/* Primary action identity stays Jolfa purple everywhere. */
body.panel-nail-context .button-primary,
body.panel-nail-context button.button-primary,
body.panel-nail-context .payout-submit-button,
body.panel-nail-context .invoice-save-button{
  background:linear-gradient(135deg,var(--panel-purple),#78458d)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 11px 25px color-mix(in srgb,var(--panel-purple) 22%,transparent)!important;
}
body.panel-nail-context .button-primary:hover,
body.panel-nail-context button.button-primary:hover,
body.panel-nail-context .payout-submit-button:hover{
  background:linear-gradient(135deg,var(--panel-purple-strong),var(--panel-purple))!important;
  box-shadow:0 15px 31px color-mix(in srgb,var(--panel-purple) 28%,transparent)!important;
}
body.panel-nail-context .button-soft,
body.panel-nail-context .button-ghost{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
body.panel-nail-context .button-soft:hover,
body.panel-nail-context .button-ghost:hover{
  background:var(--panel-purple-soft)!important;
  border-color:color-mix(in srgb,var(--panel-purple) 28%,var(--border))!important;
  color:var(--panel-purple)!important;
}
body.panel-nail-context input:not([type="checkbox"]):not([type="radio"]):focus,
body.panel-nail-context textarea:focus,
body.panel-nail-context select:focus,
body.panel-nail-context .custom-select.is-open .custom-select__trigger{
  border-color:var(--panel-purple)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--panel-purple) 12%,transparent)!important;
}

/* Sidebar: neutral shell, multicolor navigation cues, purple selection. */
body.panel-nail-context .panel-sidebar-global{
  overflow:hidden!important;
  border:1px solid var(--border)!important;
  background:color-mix(in srgb,var(--surface) 96%,transparent)!important;
  box-shadow:0 16px 42px rgba(28,38,58,.08)!important;
}
body.panel-nail-context .panel-sidebar-global__head{
  position:relative!important;
  background:linear-gradient(135deg,var(--panel-purple-soft),var(--panel-teal-soft))!important;
  border-bottom:1px solid var(--border)!important;
}
body.panel-nail-context .panel-sidebar-global__head::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--panel-purple),var(--panel-teal),var(--panel-amber));
}
body.panel-nail-context .panel-sidebar-global__head>span{
  background:var(--panel-purple)!important;
  color:#fff!important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--panel-purple) 20%,transparent)!important;
}
body.panel-nail-context .panel-sidebar-global__nav a{
  position:relative!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--muted)!important;
}
body.panel-nail-context .panel-sidebar-global__nav a i{
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:var(--nav-soft,var(--panel-purple-soft))!important;
  color:var(--nav-tone,var(--panel-purple))!important;
  transition:transform .18s ease,background .18s ease,color .18s ease!important;
}
body.panel-nail-context .panel-sidebar-global__nav a:nth-child(6n+1){--nav-tone:var(--panel-purple);--nav-soft:var(--panel-purple-soft)}
body.panel-nail-context .panel-sidebar-global__nav a:nth-child(6n+2){--nav-tone:var(--panel-teal);--nav-soft:var(--panel-teal-soft)}
body.panel-nail-context .panel-sidebar-global__nav a:nth-child(6n+3){--nav-tone:var(--panel-amber);--nav-soft:var(--panel-amber-soft)}
body.panel-nail-context .panel-sidebar-global__nav a:nth-child(6n+4){--nav-tone:var(--panel-green);--nav-soft:var(--panel-green-soft)}
body.panel-nail-context .panel-sidebar-global__nav a:nth-child(6n+5){--nav-tone:var(--panel-blue);--nav-soft:var(--panel-blue-soft)}
body.panel-nail-context .panel-sidebar-global__nav a:nth-child(6n){--nav-tone:var(--panel-coral);--nav-soft:var(--panel-coral-soft)}
body.panel-nail-context .panel-sidebar-global__nav a:hover{
  background:color-mix(in srgb,var(--nav-soft) 62%,var(--surface))!important;
  color:var(--text)!important;
  border-color:color-mix(in srgb,var(--nav-tone) 16%,var(--border))!important;
}
body.panel-nail-context .panel-sidebar-global__nav a:hover i{transform:translateY(-1px)!important}
body.panel-nail-context .panel-sidebar-global__nav a.active{
  background:var(--panel-purple-soft)!important;
  color:var(--panel-purple)!important;
  border-color:color-mix(in srgb,var(--panel-purple) 20%,var(--border))!important;
  box-shadow:inset 3px 0 0 var(--panel-purple)!important;
}
html[dir="rtl"] body.panel-nail-context .panel-sidebar-global__nav a.active{box-shadow:inset -3px 0 0 var(--panel-purple)!important}
body.panel-nail-context .panel-sidebar-global__nav a.active i{
  background:var(--panel-purple)!important;
  color:#fff!important;
}
body.panel-nail-context .panel-logout-button{
  background:var(--panel-coral-soft)!important;
  border-color:color-mix(in srgb,var(--panel-coral) 20%,var(--border))!important;
  color:var(--panel-coral)!important;
}

/* Page heroes keep a premium brand identity while introducing secondary color. */
body.panel-nail-context .panel-welcome-hero,
body.panel-nail-context .panel-page-hero,
body.panel-nail-context .panel-header,
body.panel-nail-context .account-profile-hero,
body.panel-nail-context .account-support-hero{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--panel-purple) 12%,var(--border))!important;
  background:
    radial-gradient(circle at 8% 5%,color-mix(in srgb,var(--panel-teal) 10%,transparent),transparent 18rem),
    radial-gradient(circle at 94% 15%,color-mix(in srgb,var(--panel-amber) 9%,transparent),transparent 17rem),
    linear-gradient(135deg,color-mix(in srgb,var(--panel-purple-soft) 72%,var(--surface)),var(--surface))!important;
  box-shadow:0 10px 28px rgba(28,38,58,.055)!important;
}
body.panel-nail-context .panel-welcome-hero::before,
body.panel-nail-context .panel-page-hero::before,
body.panel-nail-context .panel-header::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--panel-purple),var(--panel-teal),var(--panel-amber));
}
body.panel-nail-context .panel-welcome-hero__eyebrow,
body.panel-nail-context .panel-header__eyebrow{
  color:var(--panel-teal)!important;
}

/* Core panel surfaces: white/neutral first, accents only where they help scanning. */
body.panel-nail-context .panel-surface,
body.panel-nail-context .dashboard-card,
body.panel-nail-context .account-section,
body.panel-nail-context .account-profile-card,
body.panel-nail-context .ticket-support-workspace,
body.panel-nail-context .ticket-chat-card,
body.panel-nail-context .commerce-wizard-panel,
body.panel-nail-context .invoice-editor-card,
body.panel-nail-context .jolfa-letter-form-card,
body.panel-nail-context .jolfa-letter-list-card,
body.panel-nail-context .jolfa-letter-filter-card{
  border-color:var(--border)!important;
  background:var(--surface)!important;
  box-shadow:0 10px 28px rgba(28,38,58,.055)!important;
}
body.panel-nail-context .panel-table thead th{
  background:color-mix(in srgb,var(--surface-soft) 84%,var(--surface))!important;
  color:var(--muted)!important;
  border-bottom-color:var(--border)!important;
}
body.panel-nail-context .panel-table tbody tr:hover{
  background:color-mix(in srgb,var(--panel-purple-soft) 42%,var(--surface))!important;
}
body.panel-nail-context .table-action-button{
  border-color:var(--border)!important;
  background:var(--surface)!important;
  color:var(--text)!important;
}
body.panel-nail-context .table-action-button:hover{
  background:var(--panel-purple-soft)!important;
  border-color:color-mix(in srgb,var(--panel-purple) 25%,var(--border))!important;
  color:var(--panel-purple)!important;
}
body.panel-nail-context .table-action-button.button-danger{background:var(--panel-coral-soft)!important;color:var(--panel-coral)!important;border-color:color-mix(in srgb,var(--panel-coral) 24%,var(--border))!important}

/* Admin dashboard: semantic KPI cards and quick actions. */
body.admin-panel-theme .dashboard-kpi{
  border-color:color-mix(in srgb,var(--kpi-tone) 18%,var(--border))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--kpi-tone) 7%,var(--surface)),var(--surface))!important;
  box-shadow:0 9px 24px rgba(28,38,58,.05)!important;
}
body.admin-panel-theme .dashboard-kpi__icon{
  background:color-mix(in srgb,var(--kpi-tone) 13%,var(--surface))!important;
  color:var(--kpi-tone)!important;
  border:1px solid color-mix(in srgb,var(--kpi-tone) 16%,var(--border))!important;
}
body.admin-panel-theme .dashboard-card{box-shadow:inset 0 3px 0 var(--card-accent,var(--panel-purple)),0 10px 28px rgba(28,38,58,.05)!important}
body.admin-panel-theme .dashboard-primary>.dashboard-card:nth-child(3n+1),body.admin-panel-theme .dashboard-layout>.dashboard-card:nth-child(3n+1){--card-accent:var(--panel-teal)}
body.admin-panel-theme .dashboard-primary>.dashboard-card:nth-child(3n+2),body.admin-panel-theme .dashboard-layout>.dashboard-card:nth-child(3n+2){--card-accent:var(--panel-blue)}
body.admin-panel-theme .dashboard-primary>.dashboard-card:nth-child(3n),body.admin-panel-theme .dashboard-layout>.dashboard-card:nth-child(3n){--card-accent:var(--panel-amber)}
body.admin-panel-theme .dashboard-aside>.dashboard-card:nth-child(odd){--card-accent:var(--panel-green)}
body.admin-panel-theme .dashboard-aside>.dashboard-card:nth-child(even){--card-accent:var(--panel-coral)}
body.admin-panel-theme .quick-action{
  border-color:var(--border)!important;
  background:var(--surface)!important;
}
body.admin-panel-theme .quick-action i{
  background:var(--qa-soft,var(--panel-purple-soft))!important;
  color:var(--qa,var(--panel-purple))!important;
}
body.admin-panel-theme .quick-action:nth-child(6n+1){--qa:var(--panel-purple);--qa-soft:var(--panel-purple-soft)}
body.admin-panel-theme .quick-action:nth-child(6n+2){--qa:var(--panel-teal);--qa-soft:var(--panel-teal-soft)}
body.admin-panel-theme .quick-action:nth-child(6n+3){--qa:var(--panel-amber);--qa-soft:var(--panel-amber-soft)}
body.admin-panel-theme .quick-action:nth-child(6n+4){--qa:var(--panel-green);--qa-soft:var(--panel-green-soft)}
body.admin-panel-theme .quick-action:nth-child(6n+5){--qa:var(--panel-blue);--qa-soft:var(--panel-blue-soft)}
body.admin-panel-theme .quick-action:nth-child(6n){--qa:var(--panel-coral);--qa-soft:var(--panel-coral-soft)}
body.admin-panel-theme .quick-action:hover{border-color:color-mix(in srgb,var(--qa) 25%,var(--border))!important;background:var(--qa-soft)!important;color:var(--text)!important}
body.admin-panel-theme .period-switch button.active{background:var(--panel-purple)!important;color:#fff!important;border-color:var(--panel-purple)!important}
body.admin-panel-theme .admin-work-person>span{background:var(--panel-blue-soft)!important;color:var(--panel-blue)!important}

/* Account dashboard and account pages: each task family gets a distinct accent. */
body.account-panel-theme .account-dashboard-section{
  --account-tone:var(--panel-purple);
  box-shadow:inset 0 3px 0 var(--account-tone),0 10px 28px rgba(28,38,58,.05)!important;
}
body.account-panel-theme .account-dashboard-section.account-download-preview{--account-tone:var(--panel-green)}
body.account-panel-theme .account-dashboard-section.account-support-section{--account-tone:var(--panel-teal)}
body.account-panel-theme .account-dashboard-section:not(.account-download-preview):not(.account-support-section){--account-tone:var(--panel-amber)}
body.account-panel-theme .account-section-heading h2 i{
  width:32px!important;height:32px!important;display:inline-grid!important;place-items:center!important;border-radius:10px!important;
  background:color-mix(in srgb,var(--account-tone) 12%,var(--surface))!important;color:var(--account-tone)!important;
}
body.account-panel-theme .account-mobile-card{
  border-color:var(--border)!important;background:var(--surface)!important;box-shadow:0 7px 20px rgba(28,38,58,.045)!important;
}
body.account-panel-theme .account-mobile-card__icon{background:var(--panel-blue-soft)!important;color:var(--panel-blue)!important}
body.account-panel-theme .account-download-mobile-card .account-mobile-card__icon{background:var(--panel-green-soft)!important;color:var(--panel-green)!important}
body.account-panel-theme .account-order-mobile-card .account-mobile-card__icon{background:var(--panel-amber-soft)!important;color:var(--panel-amber)!important}
body.account-panel-theme .account-profile-card:nth-child(odd){box-shadow:inset 0 3px 0 var(--panel-purple),0 10px 28px rgba(28,38,58,.05)!important}
body.account-panel-theme .account-profile-card:nth-child(even){box-shadow:inset 0 3px 0 var(--panel-teal),0 10px 28px rgba(28,38,58,.05)!important}
body.account-panel-theme .ticket-conversation-card__avatar,
body.account-panel-theme .ticket-chat-sidebar__icon{background:var(--panel-teal-soft)!important;color:var(--panel-teal)!important}
body.account-panel-theme .ticket-chat-message.is-user .ticket-chat-bubble{background:var(--panel-purple-soft)!important;border-color:color-mix(in srgb,var(--panel-purple) 18%,var(--border))!important}

/* Admin lists/forms get lightweight color cues without recoloring the data itself. */
body.admin-panel-theme .panel-main>.panel-surface:nth-of-type(4n+1),
body.admin-panel-theme .panel-main>.dashboard-card:nth-of-type(4n+1){box-shadow:inset 0 3px 0 var(--panel-purple),0 10px 28px rgba(28,38,58,.05)!important}
body.admin-panel-theme .panel-main>.panel-surface:nth-of-type(4n+2),
body.admin-panel-theme .panel-main>.dashboard-card:nth-of-type(4n+2){box-shadow:inset 0 3px 0 var(--panel-teal),0 10px 28px rgba(28,38,58,.05)!important}
body.admin-panel-theme .panel-main>.panel-surface:nth-of-type(4n+3),
body.admin-panel-theme .panel-main>.dashboard-card:nth-of-type(4n+3){box-shadow:inset 0 3px 0 var(--panel-amber),0 10px 28px rgba(28,38,58,.05)!important}
body.admin-panel-theme .panel-main>.panel-surface:nth-of-type(4n),
body.admin-panel-theme .panel-main>.dashboard-card:nth-of-type(4n){box-shadow:inset 0 3px 0 var(--panel-blue),0 10px 28px rgba(28,38,58,.05)!important}
body.admin-panel-theme .modal-entity-card__icon{background:var(--panel-blue-soft)!important;color:var(--panel-blue)!important}
body.admin-panel-theme .notice-banner:not(.notice-banner--danger){background:var(--panel-teal-soft)!important;border-color:color-mix(in srgb,var(--panel-teal) 22%,var(--border))!important}

/* Status colors stay semantic. */
body.panel-nail-context .status-paid,
body.panel-nail-context .status-active,
body.panel-nail-context .status-available,
body.panel-nail-context .status-success{background:var(--panel-green-soft)!important;color:var(--panel-green)!important;border-color:color-mix(in srgb,var(--panel-green) 20%,var(--border))!important}
body.panel-nail-context .status-pending,
body.panel-nail-context .status-processing,
body.panel-nail-context .status-warning{background:var(--panel-amber-soft)!important;color:var(--panel-amber)!important;border-color:color-mix(in srgb,var(--panel-amber) 22%,var(--border))!important}
body.panel-nail-context .status-refunded,
body.panel-nail-context .status-cancelled,
body.panel-nail-context .status-failed,
body.panel-nail-context .status-danger{background:var(--panel-coral-soft)!important;color:var(--panel-coral)!important;border-color:color-mix(in srgb,var(--panel-coral) 20%,var(--border))!important}

/* Mobile panel surfaces remain clean and compact. */
@media(max-width:980px){
  body.panel-nail-context .panel-sidebar-global{box-shadow:none!important}
  body.account-panel-theme .mobile-bottom-nav{background:color-mix(in srgb,var(--surface) 96%,transparent)!important;border-color:var(--border)!important}
  body.account-panel-theme .mobile-bottom-nav>a.is-active,
  body.account-panel-theme .mobile-bottom-panel-switcher.is-active>summary{color:var(--panel-purple)!important}
  body.account-panel-theme .mobile-bottom-nav>a.is-active i,
  body.account-panel-theme .mobile-bottom-panel-switcher.is-active>summary i{background:var(--panel-purple-soft)!important;color:var(--panel-purple)!important}
}
@media(max-width:640px){
  body.panel-nail-context .panel-welcome-hero,
  body.panel-nail-context .panel-page-hero,
  body.panel-nail-context .panel-header{box-shadow:none!important}
  body.panel-nail-context .panel-surface,
  body.panel-nail-context .dashboard-card,
  body.panel-nail-context .account-section{box-shadow:inset 0 3px 0 var(--card-accent,var(--account-tone,var(--panel-purple)))!important}
}

/* Empty states are part of the design system too: the icon, copy and shell share a semantic tone. */
body.panel-nail-context .empty-state{
  --empty-tone:var(--panel-purple);
  --empty-soft:var(--panel-purple-soft);
  width:100%;
  min-height:150px;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:11px!important;
  padding:28px 20px!important;
  border:1px dashed color-mix(in srgb,var(--empty-tone) 30%,var(--border))!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--empty-soft) 72%,var(--surface)),var(--surface))!important;
  color:var(--text)!important;
  text-align:center!important;
}
body.panel-nail-context .empty-state.compact-empty{min-height:126px;padding:22px 16px!important}
body.panel-nail-context .empty-state>i{
  width:50px!important;
  height:50px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:1px solid color-mix(in srgb,var(--empty-tone) 24%,var(--border))!important;
  border-radius:15px!important;
  background:color-mix(in srgb,var(--empty-tone) 12%,var(--surface))!important;
  color:var(--empty-tone)!important;
  font-size:1.08rem!important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--empty-tone) 10%,transparent)!important;
}
body.panel-nail-context .empty-state>strong,
body.panel-nail-context .empty-state>h2{
  margin:0!important;
  color:var(--text)!important;
  font-size:.82rem!important;
  font-weight:900!important;
  line-height:1.8!important;
}
body.panel-nail-context .empty-state>p,
body.panel-nail-context .empty-state>small{color:var(--muted)!important}
body.account-panel-theme .account-dashboard-section:not(.account-download-preview):not(.account-support-section) .empty-state,
body.account-panel-theme .account-orders-page .account-shared-empty{--empty-tone:var(--panel-amber);--empty-soft:var(--panel-amber-soft)}
body.account-panel-theme .account-download-preview .empty-state,
body.account-panel-theme .account-downloads-page .account-shared-empty{--empty-tone:var(--panel-green);--empty-soft:var(--panel-green-soft)}
body.account-panel-theme .account-support-section .empty-state,
body.account-panel-theme .account-support-page .empty-state{--empty-tone:var(--panel-teal);--empty-soft:var(--panel-teal-soft)}
body.admin-panel-theme .empty-state{--empty-tone:var(--panel-blue);--empty-soft:var(--panel-blue-soft)}
body.partner-panel-theme .empty-state{--empty-tone:var(--panel-teal);--empty-soft:var(--panel-teal-soft)}

/* Human-facing identifiers use Vazirmatn as well; monospaced type is reserved for real code/technical values. */
body.panel-nail-context .ticket-code,
body.panel-nail-context .account-order-code,
body.panel-nail-context .localized-number,
body.panel-nail-context .modal-entity-card__code bdi,
body.panel-nail-context .payment-order-link bdi,
body.panel-nail-context .admin-ticket-card__code bdi,
body.panel-nail-context .ticket-detail-hero__eyebrow .ticket-code{
  font-family:Vazirmatn,Arial,sans-serif!important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:850!important;
  letter-spacing:0!important;
}
body.panel-nail-context .ticket-code{color:var(--primary)}

@media(max-width:760px){
  body.panel-nail-context .empty-state{min-height:122px;padding:20px 13px!important;border-radius:15px!important}
  body.panel-nail-context .empty-state.compact-empty{min-height:110px;padding:18px 12px!important}
  body.panel-nail-context .empty-state>i{width:44px!important;height:44px!important;border-radius:13px!important;font-size:.96rem!important}
  body.panel-nail-context .empty-state>strong,
  body.panel-nail-context .empty-state>h2{font-size:.76rem!important}
}