:root {
  color-scheme: dark;
  --bg: #090d11;
  --surface: #10161c;
  --surface-2: #151d24;
  --line: rgba(255, 255, 255, 0.08);
  --muted: #969eaf;
  --brand: #669caf;
  --accent: #efa867;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 85% -10%, rgba(95, 150, 169, .13), transparent 28rem),
    radial-gradient(circle at -10% 40%, rgba(120, 143, 153, .06), transparent 28rem),
    var(--bg);
  color: #f8fafc;
  font-family: Vazirmatn, ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
}
[x-cloak] { display: none !important; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.ui-tooltip-anchor { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 140;
  left: 50%;
  bottom: calc(100% + .55rem);
  width: max-content;
  max-width: 15rem;
  transform: translate(-50%, .2rem);
  border: 1px solid rgba(142,193,207,.24);
  border-radius: .65rem;
  background: #071015;
  padding: .48rem .65rem;
  color: #e3eef0;
  box-shadow: 0 12px 32px rgba(0,0,0,.48);
  font-size: .58rem;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tooltip]::after { display: none !important; }
.ui-tooltip-popover {
  position: fixed;
  z-index: 200;
  width: max-content;
  max-width: min(15rem, calc(100vw - 1.5rem));
  border: 1px solid rgba(142,193,207,.24);
  border-radius: .65rem;
  background: #071015;
  padding: .48rem .65rem;
  color: #e3eef0;
  box-shadow: 0 12px 32px rgba(0,0,0,.52);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.ui-tooltip-popover-visible { opacity: 1; }

.glass {
  background: linear-gradient(145deg, rgba(20, 24, 35, .92), rgba(13, 16, 24, .82));
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .2);
  backdrop-filter: blur(20px);
}
.soft-card {
  background: rgba(16, 19, 27, .82);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
}
.interactive-card { transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.interactive-card:hover { transform: translateY(-3px); border-color: rgba(102, 156, 175, .34); }
.text-gradient {
  background: linear-gradient(120deg, #fff 15%, #b9d4dc 58%, #82b8c7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ambient-grid {
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.form-control, .auth-card input:not([type="checkbox"]) {
  width: 100%;
  min-height: 48px;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.09);
  background: #0d1017;
  color: #f8fafc;
  padding: .75rem 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control::placeholder, .auth-card input::placeholder { color: #596174; }
.form-control:hover, .auth-card input:hover { background: #10141d; border-color: rgba(255,255,255,.15); }
.form-control:focus, .auth-card input:focus { border-color: #669caf; box-shadow: 0 0 0 4px rgba(102,156,175,.12); }
textarea.form-control { resize: vertical; }
input[type="file"].form-control { padding: .6rem; color: #9ca3af; }
input[type="file"]::file-selector-button { border: 0; border-radius: .65rem; padding: .45rem .8rem; margin-inline-end: .75rem; background: #242033; color: #ddd6fe; cursor: pointer; }
input[type="color"] { appearance: none; border: none; padding: 0; background: transparent; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 999px; }
input[type="range"] { accent-color: var(--brand); }

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transition: transform .55s ease; }
.btn-shine:hover::after { transform: translateX(120%); }
.nav-active { color: #fff !important; background: linear-gradient(90deg, rgba(102,156,175,.16), rgba(102,156,175,.04)); border-color: rgba(102,156,175,.18) !important; }
.nav-active svg { color: #a78bfa; }
.sidebar-edge-link {
  direction: rtl;
  justify-content: flex-start;
  margin-right: -.875rem;
  margin-left: 0;
  padding-right: 1.625rem !important;
  padding-left: .75rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.sidebar-edge-link.nav-active { border-right-color: transparent !important; }
.sidebar-nav-icon { flex: 0 0 auto; }
.sidebar-nav-label { white-space: nowrap; }
.sidebar-nav-counter,
.sidebar-wallet-balance { margin-right: 0; margin-left: 0; flex: 0 0 auto; }
.sidebar-nav-counter { border-radius: 9999px; background: rgba(255,255,255,.05); padding: .125rem .5rem; font-size: 9px; color: #64748b; }
.sidebar-wallet-balance { display: inline-flex; align-items: baseline; gap: .25rem; border-radius: 9999px; background: rgba(34,211,238,.10); padding: .18rem .5rem; line-height: 1.1; color: #bae6fd; }
.sidebar-wallet-balance span { font-size: 8px; color: #67e8f9; }
.sidebar-wallet-balance b { font-size: 9px; font-weight: 800; white-space: nowrap; }

.preview-shell { box-shadow: 0 35px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.profile-avatar { box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 16px 35px rgba(0,0,0,.26); }
.safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.htmx-indicator { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
body.htmx-request #global-loader { opacity: 1; }
#global-loader { opacity: 0; transition: opacity .2s ease; }

@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes float-alt { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(10px) rotate(2deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.float-card { animation: float 6s ease-in-out infinite; }
.float-card-alt { animation: float-alt 7s ease-in-out infinite; }
.toast-enter { animation: toast-in .28s ease both; }
.app-toast-stack { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 150; display: grid; width: min(390px, calc(100vw - 2rem)); gap: .75rem; pointer-events: none; }
.app-toast { display: flex; align-items: flex-start; gap: .75rem; border: 1px solid; border-radius: 1rem; padding: .85rem; box-shadow: 0 18px 55px rgba(0,0,0,.42); backdrop-filter: blur(18px); pointer-events: auto; animation: toast-in .28s ease both; }
.app-toast-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; }
.app-toast-icon svg,.app-toast button svg { width: 1rem; height: 1rem; }
.app-toast p { flex: 1; padding-top: .28rem; font-size: .78rem; font-weight: 750; line-height: 1.7; }
.app-toast button { display: grid; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; color: inherit; opacity: .6; transition: .16s; }
.app-toast button:hover { background: rgba(255,255,255,.08); opacity: 1; }
.app-toast-success { border-color: rgba(52,211,153,.28); background: rgba(9,30,24,.96); color: #bbf7d0; }
.app-toast-success .app-toast-icon { background: rgba(52,211,153,.12); color: #6ee7b7; }
.app-toast-error { border-color: rgba(251,113,133,.32); background: rgba(38,13,21,.96); color: #fecdd3; }
.app-toast-error .app-toast-icon { background: rgba(251,113,133,.13); color: #fda4af; }
.app-toast-warning { border-color: rgba(251,191,36,.3); background: rgba(39,29,11,.96); color: #fde68a; }
.app-toast-warning .app-toast-icon { background: rgba(251,191,36,.13); color: #fcd34d; }
@media (max-width: 640px) { .app-toast-stack { right: 1rem; bottom: 5.5rem; width: calc(100vw - 2rem); } }

@keyframes card-reveal { 0% { opacity: .55; transform: scale(.965) rotateX(2deg); filter: blur(5px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes subtle-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes glow-breathe { 0%,100% { opacity: .13; transform: scale(.94); } 50% { opacity: .28; transform: scale(1.08); } }
@keyframes soft-pulse { 0%,100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes living-gradient { 0% { transform: translate3d(-10%,-8%,0) rotate(0deg); } 50% { transform: translate3d(12%,8%,0) rotate(12deg); } 100% { transform: translate3d(-10%,-8%,0) rotate(0deg); } }
@keyframes typing-dot { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.card-ai-reveal { animation: card-reveal .65s cubic-bezier(.2,.8,.2,1) both; }
.motion-float .motion-avatar { animation: subtle-float var(--motion-float-duration, 4s) ease-in-out infinite; }
.motion-glow .motion-ambient { animation: glow-breathe var(--motion-glow-duration, 3.5s) ease-in-out infinite; }
.motion-pulse .motion-primary { animation: soft-pulse var(--motion-pulse-duration, 2.5s) ease-in-out infinite; }
.motion-gradient .motion-ambient { animation: living-gradient var(--motion-gradient-duration, 8s) ease-in-out infinite; }
.card-layout-compact .profile-name-row,
.card-layout-compact .profile-actions-grid,
.card-layout-compact > .mt-7 { margin-top: 1rem !important; }
.card-layout-compact .profile-bio,
.card-layout-compact > p.max-w-sm { margin-top: .65rem !important; line-height: 1.7 !important; }
.card-layout-editorial .profile-avatar { margin-inline: 0 !important; }
.card-layout-editorial .profile-name-row,
.card-layout-editorial > div:has(> h1) { justify-content: flex-start !important; }
.card-layout-editorial .profile-job-title,
.card-layout-editorial .profile-bio,
.card-layout-editorial > p.max-w-sm { margin-inline: 0 !important; text-align: start !important; }
.card-layout-editorial .profile-bio,
.card-layout-editorial > p.max-w-sm { max-width: 34rem; border-inline-start: 2px solid currentColor !important; padding-inline-start: 1rem; }
.typing-dot { animation: typing-dot 1.15s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: .14s; }
.typing-dot:nth-child(3) { animation-delay: .28s; }
.ai-chat-scroll { scrollbar-width: thin; scrollbar-color: rgba(125,176,192,.18) transparent; }
.ai-chat-scroll-light,
.inspector-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 150, 169, .28) transparent;
}
.studio-light-canvas {
  background-color: #e9eef0;
  background-image:
    linear-gradient(rgba(91, 116, 125, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 116, 125, .045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.studio-dark-canvas {
  background-color: #0e151b;
  background-image:
    linear-gradient(rgba(148, 172, 183, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 172, 183, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.studio-dark-canvas::after {
  content: "";
  position: absolute;
  inset: 6% 8%;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.025);
  border-radius: 2rem;
  background: radial-gradient(circle at 50% 42%, rgba(95,150,169,.08), transparent 42%);
}
.stage-tool {
  position: relative;
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border-radius: .8rem;
  color: #66767d;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.stage-tool:hover { transform: translateY(-1px); background: rgba(255,255,255,.055); color: #dce7ea; }
.stage-tooltip {
  position: absolute;
  left: calc(100% + .75rem);
  right: auto;
  top: 50%;
  z-index: 30;
  width: max-content;
  max-width: 12rem;
  transform: translateY(-50%) translateX(.3rem);
  border: 1px solid #2b4751;
  border-radius: .65rem;
  background: #0a1217;
  box-shadow: 0 12px 30px rgba(0,0,0,.48);
  color: #dce9ec;
  font-size: .62rem;
  font-weight: 800;
  opacity: 0;
  padding: .48rem .65rem;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  white-space: nowrap;
}
.stage-tooltip::after { content: ""; position: absolute; right: 100%; top: 50%; width: .45rem; height: .45rem; transform: translateY(-50%) rotate(45deg); border-bottom: 1px solid #2b4751; border-left: 1px solid #2b4751; background: #0a1217; }
.stage-tool:hover .stage-tooltip, .stage-tool:focus-visible .stage-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }
.preview-card-clean { transform: translateZ(0); }
.preview-card-clean.preview-pure-white {
  background: #fff !important;
  background-color: #fff !important;
}
.ai-prompt-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  border: 1px solid #dde4e6;
  border-radius: 1rem;
  background: #fff;
  padding: .75rem;
  box-shadow: 0 4px 15px rgba(34, 54, 62, .025);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ai-prompt-card:hover {
  transform: translateY(-2px);
  border-color: #b7cbd2;
  box-shadow: 0 10px 28px rgba(34, 54, 62, .07);
}
.design-ai-panel .ai-prompt-card {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  box-shadow: none;
}
.design-ai-panel .ai-prompt-card:hover {
  border-color: rgba(125,176,192,.26);
  background: rgba(255,255,255,.045);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.design-ai-panel .ai-prompt-card b { color: #dbe4e8 !important; }
.design-ai-panel .ai-prompt-card small { color: #68767c !important; }
.chat-followup-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  padding: .4rem .65rem;
  color: #78878e;
  font-size: .58rem;
  font-weight: 700;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.chat-followup-chip:hover { border-color: rgba(125,176,192,.24); background: rgba(125,176,192,.08); color: #a6cad5; }
.ai-next-action {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .8rem;
  background: rgba(255,255,255,.025);
  padding: .65rem .7rem;
  color: #84949a;
  font-size: .62rem;
  font-weight: 800;
  text-align: right;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.ai-next-action svg { color: #669caf; }
.ai-next-action:hover { transform: translateY(-1px); border-color: rgba(125,176,192,.2); background: rgba(125,176,192,.06); color: #d8e4e7; }
.design-preset-card {
  display: flex;
  width: 100%;
  min-height: 5.5rem;
  align-items: center;
  gap: .85rem;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.025);
  padding: .85rem;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.design-preset-card:hover { transform: translateY(-2px); border-color: rgba(142,193,207,.3); background: rgba(142,193,207,.065); }
.compare-preview-readonly { pointer-events: none; }
.design-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: .8rem;
}
.design-preview-panel { container-type: inline-size; container-name: design-preview; }
.design-header-card { grid-column: 1; min-width: 0; }
.design-header-devices { grid-column: 2; justify-self: center; }
.design-header-actions {
  grid-column: 3;
  justify-self: end;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  direction: rtl;
}
.design-header-actions::-webkit-scrollbar { display: none; }
.design-background-popover { min-width: 0; overscroll-behavior: contain; }
.design-background-popover * { min-width: 0; }
@container design-preview (max-width: 1450px) {
  .design-header-actions > .hidden.xl\:inline-flex,
  .design-header-actions > .hidden.\32xl\:inline-flex { display: none !important; }
  .design-header-actions > button:nth-of-type(4) { display: none !important; }
  .design-header-actions > button:not(.hidden) { padding-inline: .65rem; }
}
@container design-preview (max-width: 760px) {
  .design-preview-header { grid-template-columns: minmax(0, 1fr) auto; column-gap: .45rem; }
  .design-header-devices { display: none !important; }
  .design-header-actions { grid-column: 2; gap: .35rem; }
  .design-header-card p { display: none; }
  .design-header-card > a { display: none !important; }
}

/* In medium editor widths, all controls move below the title instead of
   escaping over the AI pane or disappearing behind horizontal clipping. */
@container design-preview (max-width: 1240px) {
  .design-preview-header {
    height: 82px !important;
    min-height: 82px;
    grid-template-columns: minmax(120px, auto) auto minmax(0, 1fr);
    align-items: start;
    align-items: center;
    column-gap: .45rem;
    padding-block: .5rem .55rem !important;
  }
  .design-header-card { grid-column: 1; min-width: 0; }
  .design-header-devices { grid-column: 2; justify-self: end; }
  .design-header-actions {
    grid-column: 3;
    max-width: 100% !important;
    overflow-x: visible !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    justify-self: end;
    gap: .4rem !important;
  }
  .design-header-card p { display: none; }
  .design-header-actions button:not(.hidden),
  .design-header-actions a:not(.hidden) {
    padding-inline: .6rem !important;
  }
}
.builder-element {
  position: relative;
  border-radius: .85rem;
  outline: 1px solid transparent;
  outline-offset: 5px;
  transition: outline-color .18s ease, background .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease;
}
.builder-focus-mode .builder-element:not(.builder-selected):not(:has(.builder-selected)) { opacity: .72; filter: none; }
.builder-focus-mode .builder-element:hover { opacity: 1; filter: none; }
.builder-inspector {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 140 !important;
  /* Match the dashboard sidebar: the canvas never loses working room. */
  width: 260px !important;
  border-color: rgba(125,176,192,.18) !important;
  background: linear-gradient(160deg,rgba(18,29,35,.985),rgba(10,17,22,.985)) !important;
}
.builder-context-rail {
  position: fixed;
  top: 50%;
  right: auto;
  z-index: 139;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  translate: 0 -50%;
  padding: .55rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 1.35rem;
  background: rgba(8,14,18,.94);
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}
.builder-context-tool {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border-radius: .9rem;
  color: #71858d;
  transition: .18s ease;
}
.builder-context-tool:hover { background: rgba(255,255,255,.06); color: #d9e8eb; transform: translateY(-1px); }
.builder-context-tool-active { background: rgba(102,156,175,.17); color: #9dced9; box-shadow: inset 0 0 0 1px rgba(125,176,192,.16); }
.builder-inline-text {
  min-width: 1.25rem;
  border-radius: .35rem;
  caret-color: #7db0c0;
  cursor: text;
}
.builder-inline-text:focus { background: rgba(125,176,192,.11); box-shadow: 0 0 0 3px rgba(125,176,192,.32); }
.inline-element-toolbar { direction: rtl; white-space: nowrap; }
.inline-element-toolbar { display: none !important; }
.inline-tool-button {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .65rem;
  color: #89999f;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.inline-tool-button:hover { background: rgba(255,255,255,.065); color: #fff; transform: translateY(-1px); }
.inline-animation-select {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: .35rem;
  border-radius: .65rem;
  background: rgba(255,255,255,.045);
  padding-inline: .55rem;
}
.inline-animation-select select { max-width: 5.5rem; border: 0; background: transparent; color: #aab7bc; font-size: .55rem; font-weight: 800; outline: none; }
.inline-animation-select option { background: #11191f; color: #e5edf0; }
.inline-toolbar-select {
  display: flex;
  height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(142,193,207,.22);
  border-radius: .65rem;
  background: #172329;
  padding: .25rem .42rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.inline-toolbar-select > span { color: #8aa1a8; font-size: .5rem; font-weight: 900; }
.inline-toolbar-select select {
  min-width: 4.65rem;
  max-width: 6.2rem;
  border: 0;
  border-radius: .42rem;
  background: #091116;
  color: #f1f7f8;
  font-size: .57rem;
  font-weight: 900;
  line-height: 1;
  outline: none;
  padding: .42rem 1.25rem .42rem .42rem;
}
.inline-toolbar-select select:focus { box-shadow: 0 0 0 2px rgba(125,176,192,.3); }
.inline-toolbar-select option { background: #091116; color: #f7fbfc; }
.inline-box-size-range {
  display: grid;
  width: 7.4rem;
  height: 2.25rem;
  flex: 0 0 auto;
  align-content: center;
  gap: .2rem;
  border: 1px solid rgba(56,189,248,.28);
  border-radius: .65rem;
  background: #111e25;
  padding: .28rem .55rem;
}
.inline-box-size-range > span { display: flex; justify-content: space-between; color: #8aa1a8; font-size: .48rem; font-weight: 900; }
.inline-box-size-range b { color: #7dd3fc; }
.inline-box-size-range input { width: 100%; height: .22rem; accent-color: #38bdf8; cursor: ew-resize; }
.appearance-popover {
  border: 1px solid rgba(142,193,207,.18);
  border-radius: 1rem;
  background: #10191f;
  box-shadow: 0 24px 65px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.035);
}
.appearance-right,
.appearance-left {
  box-shadow: 0 24px 65px rgba(0,0,0,.6), 0 0 0 1px rgba(125,211,252,.05), inset 0 1px 0 rgba(255,255,255,.035);
}
.appearance-field {
  display: grid;
  min-height: 4.6rem;
  align-content: center;
  gap: .42rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .75rem;
  background: #151f25;
  padding: .55rem .65rem;
}
.appearance-field > span { color: #84979e; font-size: .52rem; font-weight: 900; }
.appearance-field select {
  width: 100%;
  border: 0;
  border-radius: .42rem;
  background: #091116;
  color: #eef5f6;
  font-size: .6rem;
  font-weight: 800;
  outline: none;
  padding: .38rem;
}
.appearance-field option { background: #091116; color: #fff; }
.appearance-field input[type="color"] { width: 100%; height: 1.5rem; border: 0; border-radius: .4rem; background: transparent; cursor: pointer; }
.appearance-field input[type="range"] { width: 100%; accent-color: #38bdf8; cursor: ew-resize; }
.layout-options-popover {
  border: 1px solid #2c4954;
  border-radius: 1.15rem;
  background: #0b1318;
  color: #eaf1f3;
  box-shadow: 0 26px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.35);
  backdrop-filter: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(125,176,192,.25) transparent;
}
.layout-options-below { border-start-start-radius: .45rem; border-start-end-radius: .45rem; }
.layout-options-above { border-end-start-radius: .45rem; border-end-end-radius: .45rem; }
.layout-options-left { border-start-end-radius: .45rem; border-end-end-radius: .45rem; }
.layout-mode-button {
  display: flex;
  min-height: 4.15rem;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .85rem;
  background: #131e24;
  padding: .65rem;
  color: #7f9299;
  text-align: start;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.layout-mode-button:hover { transform: translateY(-1px); border-color: rgba(142,193,207,.28); background: #17242b; color: #d8e5e8; }
.layout-mode-button > span { min-width: 0; }
.layout-mode-button b { display: block; font-size: .62rem; font-weight: 900; }
.layout-mode-button small { display: block; margin-top: .22rem; color: #5f7279; font-size: .48rem; font-weight: 700; }
.layout-mode-active { border-color: #4f8392; background: #162b34; color: #a8d4df; box-shadow: inset 0 0 0 1px rgba(142,193,207,.08); }
.layout-mode-active small { color: #7697a1; }
.layout-control-card { border: 1px solid rgba(255,255,255,.075); border-radius: .85rem; background: #111b20; padding: .75rem; }
.layout-control-card input[type="range"] { width: 100%; accent-color: #669caf; cursor: ew-resize; }
.inline-detail-popover {
  border: 1px solid #2c4954;
  border-radius: 1rem;
  background: #0b1318 !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.66), 0 0 0 1px rgba(0,0,0,.25);
  backdrop-filter: none !important;
}
.inline-detail-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  inset-inline-start: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  border-inline-start: 1px solid #2c4954;
  border-top: 1px solid #2c4954;
  background: #0b1318;
}
.inline-detail-above::before {
  top: auto;
  bottom: -6px;
  border-top: 0;
  border-inline-start: 0;
  border-inline-end: 1px solid #2c4954;
  border-bottom: 1px solid #2c4954;
}
.builder-mini-add { display: grid; min-height: 5.5rem; justify-items: start; gap: .3rem; border: 1px solid rgba(255,255,255,.07); border-radius: .85rem; background: rgba(255,255,255,.025); padding: .7rem; text-align: right; }
.builder-mini-add:hover { border-color: rgba(125,176,192,.22); background: rgba(255,255,255,.045); }
.builder-mini-add b { color: #dbe4e8; font-size: .62rem; }
.builder-mini-add small { color: #68777d; font-size: .48rem; }

@keyframes element-fade { 0%,100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes element-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes element-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes element-glow { 0%,100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 12px currentColor); } }
@keyframes element-swing { 0%,100% { transform: rotate(0); } 25% { transform: rotate(.8deg); } 75% { transform: rotate(-.8deg); } }
@keyframes element-shimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
@keyframes element-bounce { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-8px); } 60% { transform: translateY(-3px); } }
.element-motion-fade { animation: element-fade 2.8s ease-in-out infinite; }
.element-motion-rise { animation: element-rise 3s ease-in-out infinite; }
.element-motion-float { animation: subtle-float 4s ease-in-out infinite; }
.element-motion-pulse { animation: element-pulse 2.4s ease-in-out infinite; }
.element-motion-glow { animation: element-glow 2.8s ease-in-out infinite; }
.element-motion-swing { animation: element-swing 3s ease-in-out infinite; transform-origin: center top; }
.element-motion-shimmer { animation: element-shimmer 2.6s ease-in-out infinite; }
.element-motion-bounce { animation: element-bounce 2.2s ease-in-out infinite; }
.builder-element:hover { outline-color: rgba(125,176,192,.28); }
.builder-element:hover::after {
  content: "ویرایش";
  position: absolute;
  z-index: 15;
  top: -.85rem;
  inset-inline-end: .4rem;
  border-radius: 999px;
  background: #669caf;
  padding: .18rem .45rem;
  color: white;
  font-size: .42rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 5px 15px rgba(0,0,0,.25);
}
.builder-selected { outline: 2px solid #7db0c0 !important; background-color: rgba(125,176,192,.045); }
.builder-parent-of-selected { outline: 1px dashed rgba(125,211,252,.54); outline-offset: 6px; }
.builder-group-context-label {
  position: absolute;
  z-index: 26;
  inset-inline-start: .5rem;
  top: -1.45rem;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 1.25rem;
  max-width: calc(100% - 1rem);
  padding: .16rem .42rem;
  border: 1px solid rgba(125,211,252,.38);
  border-radius: .48rem;
  background: #132833;
  color: #b9e1e9;
  font-size: .48rem;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0,0,0,.26);
}
.builder-group-context-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-group-context-label small { color: #74b8c8; font-size: .43rem; }
.builder-group-context-label:hover,
.builder-group-context-label-selected { border-color: #7dd3fc; background: #193846; color: #e4faff; }
.builder-size-1 { width: 86%; margin-inline: auto; }
.builder-size-2 { width: 94%; margin-inline: auto; }
.builder-size-3 { width: 100%; margin-inline: auto; margin-block: .35rem; }
.builder-custom-block { min-width: 0; border: 1px solid rgba(255,255,255,.045); }
.builder-block-dragging,
.builder-box-dragging,
.builder-section-dragging { opacity: .55 !important; filter: saturate(.8); }
.builder-section-sortable { transition: opacity .18s ease, outline-color .18s ease, transform .18s ease; }
.builder-section-sortable:hover { outline: 1px dashed rgba(125,176,192,.22); outline-offset: 5px; }
.builder-section-grip {
  position: absolute;
  z-index: 25;
  inset-inline-start: -10px;
  top: 50%;
  display: grid;
  width: 22px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: #172126;
  color: #8ec1cf;
  opacity: 0;
  transform: translateY(-50%) translateX(3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  transition: opacity .18s ease, transform .18s ease;
  cursor: grab;
}
.builder-section-sortable:hover > .builder-section-grip,
.builder-section-dragging > .builder-section-grip { opacity: 1; transform: translateY(-50%) translateX(0); }
.builder-section-grip:active { cursor: grabbing; }
.builder-insertion-line {
  position: absolute;
  z-index: 70;
  inset-inline: -.4rem;
  height: 3px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56,189,248,.12), 0 0 22px rgba(56,189,248,.48);
  pointer-events: none;
}
.builder-insertion-before { top: -.55rem; }
.builder-insertion-after { bottom: -.55rem; }
.builder-insertion-line::before,
.builder-insertion-line::after { content: ""; position: absolute; top: 50%; width: .55rem; height: .55rem; transform: translateY(-50%); border: 2px solid #7dd3fc; border-radius: 999px; background: #082f49; }
.builder-insertion-line::before { right: -.2rem; }
.builder-insertion-line::after { left: -.2rem; }
.builder-insertion-line > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  left: 50%;
  transform: translate(-50%, -48%);
  border-radius: 999px;
  background: #075985;
  padding: .28rem .65rem;
  color: #e0f2fe;
  font-size: .52rem;
  font-weight: 900;
  white-space: nowrap;
}
.preview-card-clean.builder-drag-mode::after {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0;
  background: rgba(6, 18, 25, .12);
  backdrop-filter: brightness(.88) saturate(.82);
  pointer-events: none;
}
.builder-drag-mode .profile-actions-grid:has(.builder-box-dragging),
.builder-drag-mode .builder-section-sortable:has(.builder-block-dragging) {
  z-index: 42;
}
.builder-drag-mode .profile-actions-grid:has(.builder-box-dragging) > .builder-element:not(.builder-box-dragging),
.builder-drag-mode .builder-section-sortable:has(.builder-block-dragging) > .builder-element:not(.builder-block-dragging) {
  opacity: .74 !important;
  filter: brightness(.88) saturate(.78);
}
.builder-drag-mode .builder-drop-marker {
  z-index: 45;
  opacity: 1 !important;
  filter: none !important;
}
.builder-drag-mode .builder-block-dragging,
.builder-drag-mode .builder-box-dragging,
.builder-drag-mode .builder-section-dragging {
  position: relative;
  z-index: 46;
  opacity: 1 !important;
  filter: none !important;
  outline: 1px solid rgba(125,211,252,.72) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(56,189,248,.08), 0 0 18px rgba(56,189,248,.24), 0 14px 32px rgba(0,0,0,.38) !important;
}
.builder-drag-mode .builder-element:hover::after { display: none; }
.builder-drop-block-before::before,
.builder-drop-block-after::after,
.builder-drop-inline-before::before,
.builder-drop-inline-after::after {
  content: "" !important;
  position: absolute !important;
  z-index: 75 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #38bdf8 !important;
  transform: none !important;
  box-shadow: 0 0 0 2px rgba(56,189,248,.1), 0 0 10px rgba(56,189,248,.34) !important;
  opacity: 1 !important;
  pointer-events: none;
}
.builder-drop-block-before::before,
.builder-drop-block-after::after { inset-inline: 4px !important; width: auto !important; height: 3px !important; }
.builder-drop-block-before::before { top: -6px !important; bottom: auto !important; }
.builder-drop-block-after::after { top: auto !important; bottom: -6px !important; }
.builder-section-drop-marker.builder-drop-block-before::before { top: calc(var(--section-drop-offset, 7px) * -1) !important; }
.builder-section-drop-marker.builder-drop-block-after::after { bottom: calc(var(--section-drop-offset, 7px) * -1) !important; }
.builder-drop-inline-before::before,
.builder-drop-inline-after::after { top: 5px !important; bottom: 5px !important; width: 3px !important; height: auto !important; }
.builder-drop-inline-before::before { inset-inline-start: -6px !important; inset-inline-end: auto !important; }
.builder-drop-inline-after::after { inset-inline-start: auto !important; inset-inline-end: -6px !important; }
.builder-gap-insertion-line {
  position: absolute;
  z-index: 90;
  inset-inline: 5px;
  height: 3px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56,189,248,.1), 0 0 12px rgba(56,189,248,.42);
  transform: translateY(-50%);
  pointer-events: none;
}
.builder-gap-insertion-line::before,
.builder-gap-insertion-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid #7dd3fc;
  border-radius: 999px;
  background: #0c2532;
  transform: translateY(-50%);
}
.builder-gap-insertion-line::before { inset-inline-start: -2px; }
.builder-gap-insertion-line::after { inset-inline-end: -2px; }
.builder-text-block {
  overflow: hidden;
  border-color: color-mix(in srgb, currentColor 18%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 13%, transparent), rgba(255,255,255,.02)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, currentColor 60%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
.builder-text-block > div:first-of-type { position: relative; padding-bottom: .65rem; border-bottom: 1px solid color-mix(in srgb, currentColor 13%, transparent); }
.builder-text-block > div:first-of-type:has(h3:empty) { display: none; }
.builder-text-block > div:first-of-type:has(h3:empty) + div { margin-top: 0 !important; }
.builder-text-block > div:first-of-type > i[data-lucide="type"] { display: none !important; }
.builder-text-block-body { position: relative; max-width: 44rem; color: currentColor; opacity: .72; }
.public-text-block {
  overflow: hidden;
  border-color: color-mix(in srgb, currentColor 18%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 12%, transparent), rgba(255,255,255,.025)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, currentColor 55%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
.public-text-block > h2:empty { display: none; }
.public-text-block:has(> h2:empty) > p { margin-top: 0 !important; }
.social-edit-button {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.social-edit-button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.social-edit-active { outline: 2px solid rgba(142,193,207,.75); outline-offset: 3px; }
.background-color-control {
  display: grid;
  min-height: 4.3rem;
  place-items: center;
  gap: .35rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .85rem;
  background: rgba(255,255,255,.025);
  color: #7e9097;
  font-size: .5rem;
  font-weight: 900;
}
.background-color-control input { width: 2rem; height: 2rem; }
.background-pattern-button {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .7rem;
  background: rgba(255,255,255,.025);
  color: #718189;
  font-size: .52rem;
  font-weight: 900;
}
.background-pattern-button:hover { border-color: rgba(142,193,207,.25); color: #dce9ec; }
.background-pattern-active { border-color: rgba(142,193,207,.4); background: rgba(142,193,207,.12); color: #a9d1dc; }
.inline-element-toolbar { min-height: 3.25rem; max-width: calc(100vw - 1.5rem); overflow-x: auto; scrollbar-width: none; }
.inline-element-toolbar::-webkit-scrollbar { display: none; }
.font-picker-popover {
  border: 1px solid #2b4650;
  border-radius: 1rem;
  background: #0b1318;
  box-shadow: 0 24px 66px rgba(0,0,0,.68);
}
.font-picker-search {
  display: flex;
  min-height: 2.45rem;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(142,193,207,.17);
  border-radius: .72rem;
  background: #071015;
  color: #71909a;
  padding-inline: .7rem;
}
.font-picker-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #eef5f6; font-size: .62rem; font-weight: 800; }
.font-picker-search input::placeholder { color: #596b72; }
.font-picker-list { scrollbar-width: thin; scrollbar-color: rgba(142,193,207,.22) transparent; }
.font-picker-option {
  display: flex;
  min-height: 2.55rem;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .8rem;
  background: #111b20;
  padding: .5rem .65rem;
  color: #87969c;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.font-picker-option:hover { border-color: rgba(142,193,207,.2); background: #15242a; color: #d9e5e8; }
.font-picker-active { border-color: rgba(142,193,207,.42); background: #183039; color: #fff; }
.card-background-pattern { overflow: hidden; }
.card-pattern-none { display: none; }
.card-pattern-grid {
  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: .06 !important;
  mask-image: linear-gradient(145deg, black, transparent 72%);
}
.card-pattern-dots {
  background-image: radial-gradient(currentColor 1.3px, transparent 1.3px);
  background-size: 19px 19px;
  opacity: .1 !important;
  mask-image: radial-gradient(circle at 25% 20%, black, transparent 62%);
}
.card-pattern-code { opacity: .5 !important; background: linear-gradient(145deg, currentColor 0 1px, transparent 1px) 0 0/38px 38px; mask-image: linear-gradient(135deg, black, transparent 68%); }
.card-pattern-orbs::before,
.card-pattern-orbs::after { content: ""; position: absolute; width: 14rem; height: 14rem; border: 1px solid currentColor; border-radius: 999px; opacity: .16; }
.card-pattern-orbs::before { inset: -6rem auto auto -5rem; box-shadow: 0 0 0 28px color-mix(in srgb, currentColor 8%, transparent), 0 0 0 58px color-mix(in srgb, currentColor 5%, transparent); }
.card-pattern-orbs::after { inset: auto -7rem -6rem auto; }
.card-pattern-geometry { background: linear-gradient(135deg, transparent 65%, currentColor 65% 66%, transparent 66%), linear-gradient(45deg, transparent 78%, currentColor 78% 79%, transparent 79%); opacity: .09 !important; }
.card-pattern-stars {
  background-image: radial-gradient(circle at 12% 18%, currentColor 0 1px, transparent 1.6px), radial-gradient(circle at 72% 12%, currentColor 0 1.4px, transparent 2px), radial-gradient(circle at 84% 54%, currentColor 0 .8px, transparent 1.4px), radial-gradient(circle at 34% 68%, currentColor 0 1.1px, transparent 1.7px), radial-gradient(circle at 58% 86%, currentColor 0 .7px, transparent 1.3px);
  background-size: 92px 92px, 136px 136px, 74px 74px, 118px 118px, 62px 62px;
  opacity: .46 !important;
  animation: card-stars-twinkle 4.8s ease-in-out infinite alternate;
}
.card-pattern-brushmetal {
  display: block;
  opacity: 1 !important;
  background:
    radial-gradient(110% 38% at 50% -8%, rgba(255,255,255,.18), transparent 46%),
    radial-gradient(80% 32% at 12% 18%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(170deg, rgba(198,214,229,.10) 0%, rgba(143,162,181,.05) 24%, rgba(58,72,86,.07) 51%, rgba(167,188,208,.07) 72%, rgba(31,41,51,.11) 100%);
  mask-image: none;
}
.card-pattern-brushmetal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
  opacity: .55;
}
.card-pattern-brushmetal::after {
  content: "";
  position: absolute;
  inset-inline-start: 14%;
  inset-inline-end: 14%;
  inset-block-start: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 55%, transparent), transparent);
  opacity: .18;
}
.card-visual-brushmetal {
  isolation: isolate;
  background-image:
    radial-gradient(130% 55% at 50% -10%, rgba(255,255,255,.12), transparent 52%),
    linear-gradient(168deg, #33404f 0%, #222a35 26%, #1a222c 54%, #27323f 76%, #10161d 100%) !important;
  box-shadow: 0 38px 115px rgba(0,0,0,.74), inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(211,227,241,.18), inset 0 0 58px rgba(10,16,22,.46) !important;
}
article:has(> .card-pattern-brushmetal) .card-pattern-brushmetal,
.card-visual-brushmetal .card-pattern-brushmetal {
  z-index: 1;
}
.card-pattern-brushmetal { opacity: .88 !important; }
.profile-actions-grid[data-item-layout="contact"],
.profile-socials[data-item-layout="cards"] {
  isolation: isolate;
}
article:has(> .card-pattern-brushmetal) .profile-actions-grid[data-item-layout="contact"],
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] {
  border: 1px solid rgba(179,196,212,.24) !important;
  background: linear-gradient(160deg, rgba(232,243,254,.13), rgba(87,102,118,.12) 44%, rgba(196,214,231,.08) 71%, rgba(28,37,46,.2)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -18px 34px rgba(0,0,0,.19), 0 18px 42px rgba(0,0,0,.24);
}
article:has(> .card-pattern-brushmetal) .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action,
article:has(> .card-pattern-brushmetal) .profile-actions-grid[data-item-layout="contact"] > .public-contact-action,
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action,
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .public-contact-action {
  background: linear-gradient(90deg, rgba(226,240,252,.11), rgba(112,128,146,.06) 52%, rgba(213,230,245,.09)) !important;
  border-bottom: 1px solid rgba(178,196,213,.17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
article:has(> .card-pattern-brushmetal) .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
article:has(> .card-pattern-brushmetal) .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child,
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child {
  border: 1px solid rgba(241,250,255,.62) !important;
  background: linear-gradient(145deg, #f7fbff 0%, #bdd0e0 34%, #5f707f 68%, #ddecf7 100%) !important;
  color: #132029 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -2px 5px rgba(10,19,28,.22), 0 5px 14px rgba(0,0,0,.25);
}
article:has(> .card-pattern-brushmetal) .profile-socials[data-item-layout="cards"],
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] {
  border: 1px solid rgba(178,196,213,.24) !important;
  background: linear-gradient(160deg, rgba(224,238,250,.12), rgba(78,93,109,.11) 42%, rgba(203,222,239,.08) 72%, rgba(23,32,41,.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 42px rgba(0,0,0,.22);
}
article:has(> .card-pattern-brushmetal) .profile-socials[data-item-layout="cards"] > .social-edit-button,
article:has(> .card-pattern-brushmetal) .profile-socials[data-item-layout="cards"] > .public-social-item,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .social-edit-button,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .public-social-item {
  border: 1px solid rgba(203,219,234,.34) !important;
  border-radius: .8rem !important;
  clip-path: none !important;
  background: linear-gradient(160deg, rgba(235,247,255,.17), rgba(104,121,140,.08) 46%, rgba(215,232,247,.11)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -10px 24px rgba(7,12,18,.2), 0 12px 26px rgba(0,0,0,.18);
}
article:has(> .card-pattern-brushmetal) .profile-socials[data-item-layout="cards"] > :nth-child(n) > i:first-child,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > :nth-child(n) > i:first-child {
  color: #182835 !important;
  filter: drop-shadow(0 3px 7px rgba(8,15,23,.25));
}
article:has(> .card-pattern-brushmetal) .profile-socials[data-item-layout="cards"] .social-card-copy b,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] .social-card-copy b {
  color: #f4f9ff;
  text-shadow: 0 1px 3px rgba(8,14,20,.38);
}
article:has(> .card-pattern-brushmetal) .profile-socials[data-item-layout="cards"] .social-card-copy small,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] .social-card-copy small {
  color: #c6d5e1;
}
.card-pattern-techframe {
  display: block;
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, currentColor 18%, transparent), transparent 25%),
    linear-gradient(115deg, transparent 0 9%, color-mix(in srgb, currentColor 34%, transparent) 9.15% 9.35%, transparent 9.5% 90.5%, color-mix(in srgb, currentColor 34%, transparent) 90.65% 90.85%, transparent 91%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.18));
}
.card-pattern-techframe::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, currentColor 0 2px, transparent 2px) 18px 18px/70px 70px no-repeat,
    linear-gradient(225deg, currentColor 0 2px, transparent 2px) calc(100% - 18px) 18px/70px 70px no-repeat,
    linear-gradient(45deg, currentColor 0 2px, transparent 2px) 18px calc(100% - 18px)/70px 70px no-repeat,
    linear-gradient(315deg, currentColor 0 2px, transparent 2px) calc(100% - 18px) calc(100% - 18px)/70px 70px no-repeat;
  opacity: .72;
  filter: drop-shadow(0 0 7px currentColor);
}
.card-pattern-techframe::after {
  content: "";
  position: absolute;
  inset: auto -8% 0;
  height: 23%;
  background:
    linear-gradient(153deg, transparent 0 16%, rgba(4,8,13,.86) 16.2% 47%, transparent 47.2%),
    linear-gradient(207deg, transparent 0 13%, rgba(10,16,24,.94) 13.2% 53%, transparent 53.2%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  clip-path: polygon(0 100%, 0 66%, 12% 40%, 22% 72%, 38% 22%, 51% 64%, 65% 29%, 79% 70%, 92% 35%, 100% 58%, 100% 100%);
  opacity: .72;
}
article:has(> .card-pattern-techframe),
.card-visual-techframe {
  isolation: isolate;
  box-shadow: 0 38px 110px rgba(0,0,0,.72), inset 0 0 0 1px rgba(142,168,194,.16), inset 0 0 70px rgba(0,0,0,.36) !important;
}
article:has(> .card-pattern-techframe)::before,
.card-visual-techframe::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(109,138,166,.23);
  clip-path: polygon(0 26px,26px 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 26px),calc(100% - 26px) 100%,26px 100%,0 calc(100% - 26px));
}
@keyframes card-stars-twinkle { from { filter: brightness(.75); } to { filter: brightness(1.55) drop-shadow(0 0 5px currentColor); } }
.custom-html-preview a { color: inherit; text-decoration: underline; text-underline-offset: .22em; }
.custom-html-preview ul { list-style: disc; padding-inline-start: 1.25rem; }
.custom-html-preview ol { list-style: decimal; padding-inline-start: 1.25rem; }
.ai-compact-preview {
  min-height: 420px;
  padding: 14px;
  background: radial-gradient(circle at 50% 0, rgba(102,156,175,.09), transparent 45%), #091016;
}
.ai-compare-version {
  position: relative;
  opacity: 1;
  filter: none;
}
.ai-compact-preview .preview-card-clean {
  width: 100% !important;
  max-width: 410px !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  pointer-events: none;
}
.ai-compact-preview .preview-card-clean *,
.ai-compact-preview .profile-actions-grid > *,
.ai-compact-preview .profile-socials > * {
  min-width: 0;
  box-sizing: border-box;
}
.ai-compact-preview .builder-inline-text,
.ai-compact-preview .custom-html-preview,
.ai-compact-preview .profile-actions-grid span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-compact-preview .profile-actions-grid {
  max-width: 100%;
  overflow: hidden;
}
.ai-compact-preview .profile-actions-grid > .builder-contact-action {
  overflow: hidden;
}
.ai-compact-preview .builder-selected,
.ai-compact-preview .builder-parent-of-selected,
.ai-compact-preview .builder-inner-selected {
  outline: none !important;
  box-shadow: none !important;
}
@media (max-width: 1023px) {
  .ai-compact-preview { min-height: 0; padding: 10px; }
  .ai-compact-preview .preview-card-clean { max-width: 410px !important; }
}
.builder-drag-handle,
.builder-resize-handle {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid rgba(142,193,207,.28);
  border-radius: .65rem;
  background: #172329;
  color: #9dced9;
  box-shadow: 0 7px 22px rgba(0,0,0,.42);
  z-index: 25;
}
.builder-drag-handle { cursor: grab; }
.builder-drag-handle:active { cursor: grabbing; transform: scale(.94); }
.builder-top-drag-handle {
  position: absolute;
  z-index: 32;
  inset-inline-start: -2.25rem;
  top: 50%;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid rgba(125,211,252,.52);
  border-radius: .65rem;
  background: #17313a;
  color: #b9edf5;
  box-shadow: 0 7px 22px rgba(0,0,0,.42);
  cursor: grab;
  transform: translateY(-50%);
}
.builder-top-drag-handle:active { cursor: grabbing; }
.builder-top-drag-handle:hover { background: #20424d; color: #effdff; }
.builder-resize-handle { cursor: ew-resize; touch-action: none; }
.builder-media-resize-handle {
  z-index: 28;
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border: 2px solid #7dd3fc;
  border-radius: .55rem;
  background: #082f49;
  color: #e0f2fe;
  box-shadow: 0 0 18px rgba(56,189,248,.55);
  cursor: ew-resize;
  touch-action: none;
}
.builder-direct-image {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.builder-direct-image:active,
body.builder-image-adjusting .builder-direct-image { cursor: grabbing; }
body.builder-image-adjusting,
body.builder-image-resizing,
body.builder-element-dragging { user-select: none; }
body.builder-element-dragging,
body.builder-element-dragging * { cursor: grabbing !important; }
body.builder-image-adjusting .builder-direct-image,
body.builder-image-resizing .builder-direct-image { transition: none !important; }
.builder-photo-resize-handle {
  z-index: 35;
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 2px solid rgba(125,211,252,.82);
  border-radius: .65rem;
  background: #082f49;
  color: #e0f2fe;
  box-shadow: 0 0 0 3px rgba(3,7,10,.72), 0 0 18px rgba(56,189,248,.42);
  cursor: nwse-resize;
  touch-action: none;
}
.builder-photo-resize-handle:active { transform: scale(.93); }
.group\/gallery-image:has(.builder-photo-resize-handle) { overflow: visible; }
.group\/gallery-image > .builder-direct-image { border-radius: inherit; }
.gallery-image-selected { outline: 2px solid #7dd3fc; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(56,189,248,.12); }
.builder-block-part { min-width: 0; border-radius: .6rem; transition: opacity .16s ease, background .16s ease, box-shadow .16s ease; }
.builder-inner-selected {
  outline: 2px solid rgba(125,211,252,.78);
  outline-offset: 3px;
  background-color: rgba(56,189,248,.055);
}
.builder-inner-drag-handle {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  place-items: center;
  margin-inline-end: .35rem;
  border: 1px solid rgba(125,211,252,.32);
  border-radius: .42rem;
  background: #0c3548;
  color: #7dd3fc;
  cursor: grab;
}
.builder-inner-drag-handle:active { cursor: grabbing; }
.builder-inner-drop-target { background: rgba(56,189,248,.12); box-shadow: 0 -3px 0 #38bdf8, 0 0 20px rgba(56,189,248,.3); }
.builder-block-part-dragging { opacity: 1 !important; outline: 2px solid #7dd3fc; outline-offset: 2px; background: rgba(56,189,248,.14); }
.builder-drag-mode .builder-custom-block:has(.builder-block-part-dragging) { z-index: 44; }
.builder-drag-mode .builder-custom-block:has(.builder-block-part-dragging) .builder-block-part:not(.builder-block-part-dragging):not(.builder-inner-drop-target) { opacity: .22; }
.gallery-image-tool {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .55rem;
  background: rgba(5,9,12,.82);
  color: #dce8eb;
  box-shadow: 0 5px 16px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.gallery-shape-select { height: 1.65rem; max-width: 3.6rem; border: 1px solid rgba(255,255,255,.13); border-radius: .55rem; background: #081116; color: #dce8eb; font-size: .48rem; font-weight: 900; outline: 0; padding-inline: .28rem; }
.gallery-shape-select option { background: #081116; color: #fff; }
.image-aspect-square { aspect-ratio: 1 / 1; }
.image-aspect-landscape { aspect-ratio: 4 / 3; }
.image-aspect-portrait { aspect-ratio: 3 / 4; }
.image-aspect-auto { height: auto; max-height: 18rem; }
.image-shape-square { border-radius: 0; }
.image-shape-rounded { border-radius: .8rem; }
.image-shape-soft { border-radius: 2rem; }
.image-shape-circle { aspect-ratio: 1 / 1 !important; border-radius: 999px; }
.image-shape-techframe {
  border-radius: 0;
  clip-path: polygon(7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%,0 7%);
  filter: drop-shadow(0 15px 24px rgba(0,0,0,.48)) drop-shadow(0 0 8px rgba(22,140,255,.28));
}
.avatar-frame-line {
  outline: max(1px, var(--avatar-frame-depth, 3px)) solid var(--avatar-frame-color, currentColor);
  outline-offset: 3px;
  box-shadow: 0 18px 38px color-mix(in srgb, #000 var(--avatar-frame-shadow, 45%), transparent), 0 0 24px color-mix(in srgb, var(--avatar-frame-color, currentColor) var(--avatar-frame-glow, 0%), transparent) !important;
}
.avatar-frame-double {
  outline: max(1px, calc(var(--avatar-frame-depth, 4px) / 2)) solid var(--avatar-frame-color, currentColor);
  outline-offset: 4px;
  box-shadow: 0 0 0 var(--avatar-frame-depth, 4px) color-mix(in srgb, var(--avatar-frame-color, currentColor) 28%, #08111b), 0 0 0 calc(var(--avatar-frame-depth, 4px) + 2px) color-mix(in srgb, var(--avatar-frame-color, currentColor) 78%, #dce7f2), 0 20px 44px color-mix(in srgb, #000 var(--avatar-frame-shadow, 45%), transparent), 0 0 28px color-mix(in srgb, var(--avatar-frame-color, currentColor) var(--avatar-frame-glow, 0%), transparent) !important;
}
.avatar-frame-metal {
  outline: max(1px, calc(var(--avatar-frame-depth, 5px) / 2)) solid color-mix(in srgb, var(--avatar-frame-color, #849a90) 72%, white);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 0 0 var(--avatar-frame-depth, 5px) color-mix(in srgb, var(--avatar-frame-color, #7c91a7) 35%, #05090d), 0 0 0 calc(var(--avatar-frame-depth, 5px) + 3px) color-mix(in srgb, var(--avatar-frame-color, #7c91a7) 62%, #101820), 0 22px 50px color-mix(in srgb, #000 var(--avatar-frame-shadow, 60%), transparent), 0 0 34px color-mix(in srgb, var(--avatar-frame-color, #168cff) var(--avatar-frame-glow, 25%), transparent) !important;
}
.profile-verified-badge { box-shadow: 0 0 0 2px color-mix(in srgb, white 22%, transparent), 0 5px 15px rgba(0,0,0,.22); }
.profile-job-title { position: relative; }
.profile-job-title-accent { padding-bottom: .85rem; }
.profile-job-title-accent::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  bottom: .2rem;
  width: var(--job-accent-width, 54px);
  height: 2px;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--job-accent-color, currentColor);
  box-shadow: 0 0 14px color-mix(in srgb, var(--job-accent-color, currentColor) var(--job-accent-glow, 35%), transparent);
}
@media (max-width: 520px) {
  .card-pattern-techframe::after { height: 17%; opacity: .56; }
  article:has(> .card-pattern-techframe)::before,
  .card-visual-techframe::before { inset: 7px; }
}
.gallery-upload-tile {
  display: flex;
  min-height: 5.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px dashed rgba(142,193,207,.28);
  border-radius: .8rem;
  background: rgba(142,193,207,.045);
  color: #7eabb8;
  font-size: .52rem;
  font-weight: 900;
  transition: border-color .2s ease, background .2s ease;
}
.gallery-upload-tile:hover { border-color: rgba(142,193,207,.58); background: rgba(142,193,207,.09); }
.gallery-slider { scrollbar-width: none; }
.gallery-slider::-webkit-scrollbar { display: none; }
.builder-section-select-chip {
  position: absolute;
  z-index: 28;
  inset-inline-start: .65rem;
  top: -2.45rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .35rem .65rem;
  border: 1px solid rgba(125,211,252,.44);
  border-radius: .72rem;
  background: linear-gradient(135deg, #173542, #102129);
  color: #d5eff4;
  font-size: .56rem;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.builder-contact-action { min-height: 7.4rem; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.builder-contact-action > i { flex: 0 0 auto; }
.profile-actions-grid[data-item-layout="column"] .builder-contact-action,
.profile-actions-column .builder-contact-action {
  min-height: 3.75rem;
  flex-direction: row;
  justify-content: flex-start;
  gap: .8rem;
  padding-inline: 1rem;
  text-align: start;
}
.profile-actions-grid[data-item-layout="column"] .builder-contact-action > i,
.profile-actions-column .builder-contact-action > i {
  margin: 0 !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.profile-actions-grid[data-item-layout="column"] .builder-contact-action .builder-drag-handle,
.profile-actions-column .builder-contact-action .builder-drag-handle {
  inset-inline-start: .65rem !important;
  top: .65rem !important;
  width: auto;
  height: 1.7rem;
  gap: .25rem;
  padding-inline: .45rem;
  border-radius: .55rem;
}
.profile-actions-grid[data-item-layout="column"] .builder-contact-action .builder-drag-handle::after,
.profile-actions-column .builder-contact-action .builder-drag-handle::after {
  content: "جابه‌جایی";
  font-size: .52rem;
  font-weight: 900;
  white-space: nowrap;
}
.builder-section-sortable:not(.builder-selected) > .builder-section-select-chip { display: none !important; }
.studio-dark-canvas { scrollbar-width: thin; scrollbar-color: rgba(125,211,252,.5) rgba(255,255,255,.04); }
.studio-dark-canvas::-webkit-scrollbar { width: 9px; }
.studio-dark-canvas::-webkit-scrollbar-track { background: rgba(255,255,255,.035); }
.studio-dark-canvas::-webkit-scrollbar-thumb { border: 2px solid #0e151b; border-radius: 999px; background: rgba(125,211,252,.55); }
.design-scroll-cue { color: #8eb5c0; }
.profile-actions-grid > .builder-contact-action {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .8rem !important;
  min-height: 3.75rem;
  padding-inline: 1rem;
}
.profile-actions-grid > .builder-contact-action > i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.profile-actions-grid > .builder-contact-action > .builder-inline-text { text-align: start; }
.preview-card-clean [data-builder-field="footer_note"] { display: none !important; }
.builder-section-sortable { justify-content: var(--builder-element-justify, initial); }
.preview-card-clean .profile-actions-grid,
.preview-card-clean .profile-socials { gap: var(--builder-item-gap, 10px) !important; }
.preview-card-clean .profile-actions-grid[data-item-layout="grid"],
.preview-card-clean .profile-socials[data-item-layout="grid"] {
  display: grid !important;
  grid-template-columns: repeat(var(--builder-item-columns, 2), minmax(0, 1fr)) !important;
  align-items: stretch;
}
.preview-card-clean .profile-socials[data-item-layout="grid"] { justify-items: var(--builder-item-align, center); }
.preview-card-clean .profile-actions-grid[data-item-layout="column"],
.preview-card-clean .profile-socials[data-item-layout="column"] {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: var(--builder-item-align, center);
}
.preview-card-clean .profile-actions-grid[data-item-layout="row"],
.preview-card-clean .profile-socials[data-item-layout="row"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
}
.preview-card-clean .profile-socials[data-item-layout="row"] { justify-content: var(--builder-item-justify, center); }
.preview-card-clean .profile-actions-grid[data-item-layout="wrap"],
.preview-card-clean .profile-socials[data-item-layout="wrap"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
.preview-card-clean .profile-socials[data-item-layout="wrap"] { justify-content: var(--builder-item-justify, center); }
.profile-actions-grid[data-section-title]:not([data-section-title=""])::before,
.profile-socials[data-section-title]:not([data-section-title=""])::before {
  content: attr(data-section-title);
  display: flex;
  width: 100%;
  min-height: 2.2rem;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  margin: 0 0 .45rem;
  color: inherit;
  font-size: .86rem;
  font-weight: 900;
  white-space: nowrap;
  background: linear-gradient(90deg, transparent 0 7%, currentColor 7% 34%, transparent 34% 66%, currentColor 66% 93%, transparent 93%);
  background-position: center;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  text-shadow: none;
}

/* Simple light cards stay clean, crisp and shadow-free for readable text. */
.card-simple-light,
.card-simple-light :where(h1,h2,h3,p,span,a,button,small,b,strong) {
  text-shadow: none !important;
}
.card-simple-light .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action,
.card-simple-light .profile-actions-grid[data-item-layout="contact"] > .public-contact-action {
  background: color-mix(in srgb, var(--simple-light-accent, #2f6878) 7%, #ffffff) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--simple-light-accent, #2f6878) 16%, #e4eaef) !important;
  box-shadow: none !important;
}
.card-simple-light .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-simple-light .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child {
  border-color: color-mix(in srgb, var(--simple-light-accent, #2f6878) 28%, #dfe6ec) !important;
  background: color-mix(in srgb, var(--simple-light-accent, #2f6878) 9%, #ffffff) !important;
  color: var(--simple-light-accent, #2f6878) !important;
  filter: none !important;
  box-shadow: none !important;
}
.card-simple-light .profile-socials[data-item-layout="cards"] > .social-edit-button,
.card-simple-light .profile-socials[data-item-layout="cards"] > .public-social-item {
  border-color: color-mix(in srgb, var(--simple-light-accent, #2f6878) 20%, #e5eaef) !important;
  background: color-mix(in srgb, var(--simple-light-accent, #2f6878) 5%, #ffffff) !important;
  box-shadow: none !important;
}
.card-simple-light .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-simple-light .profile-socials[data-item-layout="cards"] > .public-social-item > i {
  color: var(--simple-light-accent, #2f6878) !important;
}
.profile-actions-grid[data-item-layout="contact"] {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow: hidden;
  gap: 0 !important;
  padding: .75rem;
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.2));
}
.profile-actions-grid[data-item-layout="contact"] > .builder-contact-action,
.profile-actions-grid[data-item-layout="contact"] > .public-contact-action {
  width: 100% !important;
  max-width: none !important;
  min-height: 4.15rem !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(132,154,178,.16) !important;
  background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.018)) !important;
  padding-inline: .85rem !important;
}
.profile-actions-grid[data-item-layout="contact"] > :last-child { border-bottom: 0 !important; }
.profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child {
  display: grid;
  width: 2.25rem !important;
  height: 2.25rem !important;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: .55rem;
  background: color-mix(in srgb, currentColor 11%, transparent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, currentColor 35%, transparent));
}
.public-contact-label { min-width: 0; flex: 1; text-align: start; }
.public-contact-arrow { display: none; }
.profile-actions-grid[data-item-layout="contact"] .public-contact-arrow {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-inline-start: auto;
  opacity: .42;
}
.profile-actions-grid[data-item-layout="contact"] > .builder-contact-action::after {
  content: "‹";
  margin-inline-start: auto;
  font-size: 1.35rem;
  opacity: .42;
}
.social-card-copy { display: none; }
.profile-socials[data-item-layout="cards"] {
  display: grid !important;
  grid-template-columns: repeat(var(--builder-item-columns, 3), minmax(0, 1fr));
  align-items: stretch !important;
  padding: .75rem;
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.22));
}
.profile-socials[data-item-layout="cards"] > .social-edit-button,
.profile-socials[data-item-layout="cards"] > .public-social-item {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  min-height: 7.2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .8rem .5rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, currentColor 10%, #0a0f15), rgba(8,12,18,.82)) !important;
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
.profile-socials[data-item-layout="cards"] .social-card-copy {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: .2rem;
  text-align: center;
}
.profile-socials[data-item-layout="cards"] .social-card-copy b { color: #eef5ff; font-size: .68rem; }
.profile-socials[data-item-layout="cards"] .social-card-copy small { overflow: hidden; color: #86a0bb; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-socials {
  padding: .75rem;
  border-radius: 1.2rem;
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.builder-section-select-chip small { color: #94d2de; font-size: .48rem; }
.builder-section-select-chip:hover,
.builder-section-select-chip-active { border-color: rgba(125,211,252,.88); background: linear-gradient(135deg, #1c4554, #12313b); color: #f2fdff; transform: translateY(-1px); }
.gallery-slider-shell { min-width: 0; }
.gallery-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: .55rem;
  color: #8ea8b5;
  font-size: .62rem;
  font-weight: 800;
}
.gallery-slider-control {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(125,211,252,.26);
  border-radius: 999px;
  background: rgba(14,29,38,.72);
  color: #c8e8ef;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.gallery-slider-control:hover { transform: translateY(-1px); border-color: rgba(125,211,252,.58); background: rgba(46,112,137,.38); }
.gallery-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  margin-top: .55rem;
  padding: .45rem .7rem;
  border: 1px dashed rgba(125,211,252,.28);
  border-radius: .7rem;
  background: rgba(70,141,165,.07);
  color: #8bb8c6;
  font-size: .6rem;
  font-weight: 800;
}
.gallery-editor-strip {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  gap: .45rem;
  margin-bottom: .55rem;
  border: 1px dashed rgba(125,211,252,.3);
  border-radius: .7rem;
  background: rgba(56,189,248,.055);
  padding: .35rem .45rem;
  color: #a9cbd5;
  font-size: .56rem;
  font-weight: 900;
}
.gallery-editor-strip > span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.gallery-editor-strip small { color: #70858c; font-size: .5rem; }
.gallery-editor-strip small b { color: #8ec1cf; }
.gallery-editor-strip button {
  display: inline-flex;
  min-height: 1.6rem;
  align-items: center;
  gap: .28rem;
  margin-inline-start: auto;
  border: 1px solid rgba(125,211,252,.34);
  border-radius: .48rem;
  background: #123141;
  padding: .18rem .45rem;
  color: #bce9f3;
  font-size: .5rem;
  font-weight: 900;
}
.gallery-editor-strip button:hover { background: #164356; border-color: rgba(125,211,252,.6); }
.gallery-option-button {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .8rem;
  background: rgba(255,255,255,.025);
  color: #788990;
  font-size: .58rem;
  font-weight: 900;
}
.gallery-option-active { border-color: rgba(142,193,207,.35); background: rgba(142,193,207,.1); color: #a6cad5; }
.builder-inspector-scroll { scrollbar-width: thin; scrollbar-color: rgba(125,176,192,.2) transparent; }
.builder-add-card {
  display: flex;
  min-height: 9rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  background: rgba(255,255,255,.025);
  padding: .8rem;
  text-align: right;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.builder-add-card:hover { transform: translateY(-2px); border-color: rgba(125,176,192,.22); background: rgba(255,255,255,.045); }
.builder-add-card b { margin-top: .25rem; color: #dbe4e8; font-size: .68rem; }
.builder-add-card small { color: #65757c; font-size: .52rem; line-height: 1.5; }
.quick-add-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
  color: #71838a;
  font-size: .6rem;
  font-weight: 900;
}
.quick-add-heading svg { color: #55747f; }
.quick-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.quick-add-card {
  display: flex;
  min-width: 0;
  min-height: 5.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .9rem;
  background: rgba(255,255,255,.025);
  padding: .55rem .4rem;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.quick-add-card:hover { transform: translateY(-1px); border-color: rgba(142,193,207,.28); background: rgba(142,193,207,.065); }
.quick-add-card b { color: #dce6e9; font-size: .6rem; font-weight: 900; }
.quick-add-card small { max-width: 100%; overflow: hidden; color: #61747b; font-size: .47rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.quick-add-icon { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .65rem; background: rgba(255,255,255,.045); }
.quick-add-icon svg { width: .9rem; height: .9rem; }
.quick-social-grid { display: grid; gap: .45rem; }
.quick-social-button {
  display: flex;
  min-height: 3.15rem;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .85rem;
  background: rgba(255,255,255,.025);
  padding: .55rem .7rem;
  color: #86aebe;
  text-align: start;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.quick-social-button:hover { transform: translateX(-2px); border-color: rgba(142,193,207,.28); background: rgba(142,193,207,.065); }
.quick-social-button > svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.quick-social-button span { min-width: 0; flex: 1; }
.quick-social-button b { display: block; color: #dce6e9; font-size: .6rem; font-weight: 900; }
.quick-social-button small { display: block; margin-top: .18rem; color: #61747b; font-size: .47rem; font-weight: 700; }
.quick-social-group { border-color: rgba(239,168,103,.18); background: rgba(239,168,103,.055); color: #efb27c; }
.quick-social-group:hover { border-color: rgba(239,168,103,.34); background: rgba(239,168,103,.09); }
.quick-social-arrow { width: .75rem !important; color: #6c7d83; }
.builder-restore-chip { border: 1px solid rgba(125,176,192,.16); border-radius: 999px; background: rgba(125,176,192,.07); padding: .4rem .7rem; color: #8fb8c4; font-size: .58rem; font-weight: 800; }
.builder-contact-add {
  display: flex;
  min-height: 3.35rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border: 1px solid rgba(102,183,255,.13);
  border-radius: .75rem;
  background: rgba(102,183,255,.045);
  color: #8ec1cf;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.builder-contact-add:hover { transform: translateY(-1px); border-color: rgba(102,183,255,.3); background: rgba(102,183,255,.09); }
.builder-contact-add b { color: #bed6dc; font-size: .52rem; font-weight: 900; }
.builder-contact-add small { color: #60757d; font-size: .45rem; }
.builder-field-label { display: grid; gap: .55rem; color: #788990; font-size: .6rem; font-weight: 800; }
.builder-input,
.builder-textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .85rem;
  background: #0b1116;
  color: #eef4f6;
  padding: .75rem .85rem;
  font-size: .7rem;
  line-height: 1.8;
  outline: none;
  resize: vertical;
}
.builder-input:focus,
.builder-textarea:focus { border-color: rgba(125,176,192,.5); box-shadow: 0 0 0 3px rgba(95,150,169,.08); }
.inline-link-editor {
  display: block;
  border: 1px solid rgba(125,176,192,.28);
  border-radius: .85rem;
  background: #0b151a;
  color: #9dced9;
  font-size: .58rem;
  font-weight: 900;
  padding: .65rem;
  text-align: start;
}
.inline-link-editor small { display: block; margin-top: .42rem; color: #60757d; font-size: .5rem; font-weight: 700; }
.builder-color-control { display: flex; min-height: 3rem; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.07); border-radius: .85rem; background: rgba(255,255,255,.025); padding: .5rem .65rem; }
.builder-color-control input { width: 2rem; height: 2rem; }
.builder-color-control span { direction: ltr; margin-inline-end: auto; color: #8b999f; font-size: .55rem; }
.builder-color-control button { color: #6f8087; font-size: .52rem; }
.builder-segment { min-height: 2.35rem; border: 1px solid rgba(255,255,255,.07); border-radius: .7rem; background: rgba(255,255,255,.025); color: #697980; font-size: .55rem; font-weight: 800; }
.builder-segment-active { border-color: rgba(125,176,192,.28); background: rgba(125,176,192,.11); color: #a6cad5; }
.builder-action-icon-option { display: flex; justify-content: center; align-items: center; }
.builder-action-icon-option > svg { display: block; }

@media (max-width: 1023px) {
  .design-studio-grid { display: block !important; height: 100dvh; min-height: 620px; }
  .design-studio-grid .design-pane-ai,
  .design-studio-grid .design-pane-preview { display: none !important; height: 100dvh; padding-top: 4rem; }
  .design-studio-grid[data-mobile-mode="ai"] .design-pane-ai,
  .design-studio-grid[data-mobile-mode="preview"] .design-pane-preview { display: flex !important; }
  .builder-context-rail { position: fixed; top: auto; right: .65rem; bottom: .65rem; left: auto !important; flex-direction: row; translate: 0; }
  .builder-inspector { position: fixed !important; inset: 5rem .65rem 5.25rem .65rem !important; width: auto !important; }
  .inline-element-toolbar {
    position: fixed !important;
    inset: auto .65rem calc(.65rem + env(safe-area-inset-bottom)) .65rem !important;
    transform: none !important;
    max-width: none;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .inline-detail-popover {
    position: fixed !important;
    inset: auto .65rem calc(5.25rem + env(safe-area-inset-bottom)) .65rem !important;
    width: auto !important;
    max-height: min(65dvh, 32rem);
    overflow-y: auto;
  }
  .inline-detail-popover::before { display: none; }
  .layout-options-popover {
    position: fixed !important;
    inset: auto .65rem calc(5.25rem + env(safe-area-inset-bottom)) .65rem !important;
    width: auto !important;
    max-height: min(68dvh, 36rem) !important;
    border-radius: 1.15rem !important;
  }
  .appearance-popover {
    position: fixed !important;
    inset: auto .65rem calc(5.25rem + env(safe-area-inset-bottom)) .65rem !important;
    width: auto !important;
    max-height: min(68dvh, 36rem) !important;
    border-radius: 1.15rem !important;
  }
}
.inspector-control {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  gap: .75rem;
  border: 1px solid #dde4e6;
  border-radius: .9rem;
  background: #fff;
  padding: .55rem .7rem;
}
.light-select {
  min-height: 2.75rem;
  width: 100%;
  border: 1px solid #d7e0e3;
  border-radius: .75rem;
  background: #fff;
  color: #27363c;
  padding: .55rem .75rem;
  outline: none;
}
.light-select:focus { border-color: #75a6b5; box-shadow: 0 0 0 3px rgba(95,150,169,.1); }
.inspector-check {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .65rem;
  border: 1px solid #e0e6e8;
  border-radius: .8rem;
  background: #fff;
  padding: .65rem .8rem;
  font-size: .72rem;
  font-weight: 700;
  color: #42545b;
}
.dark-inspector .inspector-control,
.dark-inspector .inspector-check {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: #cbd5da;
}
.dark-inspector .light-select {
  border-color: rgba(255,255,255,.08);
  background: #0d1419;
  color: #dbe4e8;
}
.dark-inspector .light-select:focus { border-color: rgba(125,176,192,.5); box-shadow: 0 0 0 3px rgba(95,150,169,.1); }

/* Shared wallet amount fields: Persian and Arabic numerals work alongside Latin digits. */
.wallet-money-input,
.wallet-adjust-amount { position: relative; display: block; }
.wallet-money-input .wallet-amount-input,
.wallet-adjust-amount input {
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 3.5rem !important;
}
.wallet-money-input em,
.wallet-adjust-amount > span {
  position: absolute;
  top: 50%;
  left: .8rem;
  transform: translateY(-50%);
  color: #718096;
  font-size: .66rem;
  font-style: normal;
  font-weight: 800;
  pointer-events: none;
}
.wallet-adjust-form {
  display: grid;
  min-width: 430px;
  grid-template-columns: 108px 145px minmax(175px, 1fr) auto;
  align-items: center;
  gap: .45rem;
}
.wallet-adjust-amount input { width: 100%; }

/* Auth experience */
.auth-shell { position: relative; min-height: 100dvh; overflow: hidden; background: #06090d; color: #eef5f6; }
.auth-noise { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.12) .5px, transparent .7px); background-size: 5px 5px; mask-image: linear-gradient(to bottom, black, transparent 78%); pointer-events: none; }
.auth-orb { position: absolute; border-radius: 999px; filter: blur(1px); pointer-events: none; }
.auth-orb-one { top: -18rem; right: 32%; width: 44rem; height: 44rem; background: radial-gradient(circle, rgba(75,143,160,.24), rgba(18,48,64,.08) 46%, transparent 70%); animation: auth-drift 14s ease-in-out infinite alternate; }
.auth-orb-two { bottom: -23rem; right: -12rem; width: 46rem; height: 46rem; background: radial-gradient(circle, rgba(239,168,103,.14), transparent 65%); animation: auth-drift 17s ease-in-out infinite alternate-reverse; }
.auth-orb-three { top: 38%; left: 5%; width: 26rem; height: 26rem; background: radial-gradient(circle, rgba(76,122,138,.14), transparent 68%); }
.auth-layout { position: relative; z-index: 1; display: grid; min-height: 100dvh; grid-template-columns: minmax(0,1.14fr) minmax(28rem,.86fr); }
.auth-showcase { position: relative; display: flex; min-height: 100%; flex-direction: column; overflow: hidden; padding: clamp(2rem,5vw,4.7rem) clamp(2rem,7vw,7.5rem); border-left: 1px solid rgba(255,255,255,.065); background: linear-gradient(135deg, rgba(10,21,27,.72), rgba(5,11,16,.2)); }
.auth-showcase::before { content:""; position: absolute; inset: 0; background-image: linear-gradient(rgba(132,186,197,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(132,186,197,.055) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(135deg, black, transparent 76%); opacity: .6; }
.auth-showcase-top,.auth-showcase-main,.auth-showcase-preview,.auth-showcase-footer { position: relative; z-index: 1; }
.auth-showcase-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-live-dot { display: inline-flex; align-items: center; gap: .42rem; border: 1px solid rgba(113,211,178,.17); border-radius: 999px; background: rgba(35,117,89,.11); padding: .46rem .7rem; color: #a6dac5; font-size: .63rem; font-weight: 800; }
.auth-live-dot i { width: .42rem; height: .42rem; border-radius: 50%; background: #52d5a2; box-shadow: 0 0 0 4px rgba(82,213,162,.1),0 0 13px #52d5a2; }
.auth-showcase-main { margin-top: clamp(3.2rem,10vh,8.5rem); max-width: 38rem; animation: auth-reveal .8s .05s both; }
.auth-kicker,.auth-step { display: inline-flex; align-items: center; gap: .5rem; color: #8bc6d2; font-size: .62rem; font-weight: 900; letter-spacing: .15em; }
.auth-kicker::before { width: 1.6rem; height: 1px; background: currentColor; content:""; }
.auth-showcase-main h2 { margin-top: 1.25rem; color: #f3f8f8; font-size: clamp(2.55rem,4.7vw,4.7rem); font-weight: 950; line-height: 1.18; letter-spacing: -.052em; }
.auth-showcase-main h2 em { color: #f3f8f8; font-style: normal; }
.auth-showcase-main p { max-width: 27rem; margin-top: 1.25rem; color: #98a9b0; font-size: .95rem; line-height: 2.05; }
.auth-showcase-preview { width: min(31rem,90%); margin: auto 7% 2rem auto; perspective: 1000px; animation: auth-reveal 1s .22s both; }
.auth-preview-glow { position: absolute; inset: 22% -8% -12%; border-radius: 50%; background: rgba(69,160,176,.26); filter: blur(54px); }
.auth-preview-card { position: relative; transform: rotate(-5deg) rotateY(-7deg); overflow: hidden; border: 1px solid rgba(153,214,224,.23); border-radius: 1.65rem; background: linear-gradient(135deg, rgba(27,60,70,.94), rgba(10,18,25,.96) 68%); padding: 1.45rem; box-shadow: -1.8rem 2.1rem 6rem rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.08); animation: auth-card-float 7s ease-in-out infinite; }
.auth-preview-card::before { position: absolute; top: -7rem; left: -5rem; width: 17rem; height: 17rem; border-radius: 50%; background: rgba(127,210,224,.14); content:""; filter: blur(18px); }
.auth-preview-top,.auth-preview-actions { position: relative; display: flex; align-items: center; }
.auth-preview-top { gap: .75rem; }.auth-preview-top > i { margin-right: auto; color: #f3c48d; }.auth-preview-avatar { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: linear-gradient(135deg,#a5d6df,#4d8998); color: #0c1e24; font-weight: 950; }.auth-preview-top b,.auth-preview-top small { display: block; }.auth-preview-top b { font-size: .82rem; }.auth-preview-top small { margin-top: .23rem; color: #83a7af; font-size: .58rem; direction: ltr; }
.auth-preview-lines { position: relative; display: grid; gap: .5rem; margin-top: 2.2rem; }.auth-preview-lines i { display: block; width: 100%; height: .5rem; border-radius: 99px; background: rgba(255,255,255,.11); }.auth-preview-lines i:nth-child(2) { width: 72%; }.auth-preview-lines i:nth-child(3) { width: 48%; background: rgba(239,168,103,.45); }
.auth-preview-actions { gap: .55rem; margin-top: 2rem; }.auth-preview-actions span { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: .72rem; background: rgba(255,255,255,.06); color: #b8dce1; }.auth-preview-actions svg { width: .9rem; }
.auth-floating-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .42rem; border: 1px solid rgba(255,255,255,.11); border-radius: .8rem; background: rgba(13,26,32,.8); padding: .55rem .7rem; box-shadow: 0 14px 28px rgba(0,0,0,.3); backdrop-filter: blur(12px); color: #d1e7e9; font-size: .58rem; font-weight: 850; }.auth-floating-chip svg { width: .78rem; color: #f0b575; }.chip-one { top: 4%; left: -2rem; animation: auth-chip 6s ease-in-out infinite; }.chip-two { bottom: 4%; right: -2rem; animation: auth-chip 6s 1.2s ease-in-out infinite reverse; }
.auth-showcase-footer { display: flex; gap: clamp(1.5rem,4vw,4rem); }.auth-showcase-footer span { display: grid; gap: .25rem; }.auth-showcase-footer b { color: #d8edf0; font-size: .94rem; }.auth-showcase-footer small { color: #718890; font-size: .61rem; }
.auth-portal { display: grid; place-items: center; padding: 2rem; }.auth-portal-inner { width: min(100%,30rem); animation: auth-reveal .7s .16s both; }.auth-mobile-logo { display: none; margin-bottom: 2.5rem; text-align: center; }
.auth-card { border: 1px solid rgba(255,255,255,.09); border-radius: 1.6rem; background: linear-gradient(145deg,rgba(21,29,35,.84),rgba(10,15,20,.88)); padding: clamp(1.45rem,4vw,2.45rem); box-shadow: 0 2rem 6rem rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.045); backdrop-filter: blur(22px); }
.auth-card-head { display: flex; align-items: flex-start; gap: .9rem; }.auth-card-icon { display: grid; width: 3.1rem; height: 3.1rem; flex: 0 0 auto; place-items: center; border-radius: 1rem; }.auth-card-icon svg { width: 1.35rem; }.auth-card-icon-login { background: rgba(105,189,205,.12); color: #9edbe5; }.auth-card-icon-register { background: rgba(239,168,103,.13); color: #f5c18b; }.auth-card-head h1 { margin-top: .35rem; color: #f5f9f9; font-size: 1.35rem; font-weight: 950; letter-spacing: -.035em; }.auth-card-head p { margin-top: .38rem; color: #83939a; font-size: .72rem; line-height: 1.75; }
.auth-error { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1.3rem; border: 1px solid rgba(251,113,133,.2); border-radius: .9rem; background: rgba(136,37,52,.13); padding: .72rem .8rem; color: #fecdd3; font-size: .7rem; font-weight: 700; line-height: 1.75; }.auth-error svg { width: 1rem; flex: 0 0 auto; margin-top: .1rem; }
.auth-form { display: grid; gap: 1rem; margin-top: 1.65rem; }.auth-register-form { gap: .85rem; margin-top: 1.35rem; }.auth-field { display: grid; gap: .48rem; color: #c8d4d8; font-size: .72rem; font-weight: 800; }.auth-field-row { display: flex; justify-content: space-between; gap: .5rem; }.auth-field-row a { color: #93d1da; font-size: .62rem; font-weight: 750; }.auth-input-wrap { position: relative; display: flex; align-items: center; }.auth-input-wrap > svg:first-child { position: absolute; right: .88rem; z-index: 1; width: 1rem; color: #6f8f98; pointer-events: none; }.auth-input-wrap input { width: 100%; min-height: 3.15rem !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: .9rem !important; background: rgba(4,9,13,.58) !important; padding: .75rem 2.55rem .75rem 2.65rem !important; color: #f4f8f8 !important; font-size: .82rem !important; transition: .2s ease !important; }.auth-input-wrap input:focus { border-color: rgba(125,202,216,.7) !important; box-shadow: 0 0 0 4px rgba(104,184,199,.11) !important; }.auth-input-wrap:focus-within > svg:first-child { color: #a6e1e8; }.auth-password-toggle { position: absolute; left: .68rem; z-index: 2; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .62rem; color: #70858d; transition: .18s; }.auth-password-toggle:hover { background: rgba(255,255,255,.07); color: #cde8eb; }.auth-password-toggle svg { width: .95rem; }.auth-field-error { display: flex; align-items: center; gap: .28rem; color: #fba1ad; font-size: .62rem; font-weight: 700; }.auth-field-error svg { width: .8rem; }
.auth-submit { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .65rem; margin-top: .35rem; border-radius: .95rem; background: linear-gradient(110deg,#88cbd6,#f0b270); box-shadow: 0 1rem 2rem rgba(97,170,184,.13); color: #092127; font-size: .78rem; font-weight: 950; transition: transform .2s ease,box-shadow .2s ease,filter .2s ease; }.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 1.25rem 2.5rem rgba(97,170,184,.24); filter: saturate(1.1) brightness(1.04); }.auth-submit svg { width: 1rem; }.auth-submit-register { background: linear-gradient(110deg,#f0b270,#9bd8df); }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; margin: 1.3rem 0; color: #5f7077; font-size: .6rem; }.auth-divider::before,.auth-divider::after { height: 1px; background: rgba(255,255,255,.07); content:""; }.auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid rgba(255,255,255,.065); padding-top: 1.15rem; color: #839198; font-size: .68rem; }.auth-switch a { display: inline-flex; align-items: center; gap: .35rem; color: #9bd9e2; font-weight: 900; transition: color .18s; }.auth-switch a:hover { color: #f2c18c; }.auth-switch svg { width: .86rem; }.auth-legal { margin: 1.25rem auto 0; max-width: 23rem; color: #59686f; font-size: .6rem; line-height: 1.8; text-align: center; }.auth-legal a { color: #7fa8af; }
@keyframes auth-reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @keyframes auth-drift { to { transform:translate(2rem,2.5rem) scale(1.07); } } @keyframes auth-card-float { 50% { transform:rotate(-3deg) rotateY(-4deg) translateY(-.75rem); } } @keyframes auth-chip { 50% { transform:translateY(-.55rem) rotate(1deg); } }
@media (max-width: 1120px) and (min-width: 901px) { .auth-layout { grid-template-columns: minmax(0,1fr) minmax(25rem,.9fr); }.auth-showcase { padding-right:clamp(2rem,5vw,4rem); padding-left:clamp(2rem,5vw,4rem); }.auth-showcase-main { margin-top:clamp(3rem,7vh,5.5rem); }.auth-showcase-preview { width:min(27rem,94%); margin-right:2%; }.auth-showcase-footer { gap:1.5rem; }.auth-portal { padding:1.5rem; } }
@media (max-width: 900px) { .auth-shell { min-height:100dvh; }.auth-layout { grid-template-columns: 1fr; }.auth-showcase { display:none; }.auth-portal { min-height:100dvh; align-items:start; padding:clamp(1.15rem,5vw,2.5rem); }.auth-portal-inner { width:min(100%,32rem); margin:auto; }.auth-mobile-logo { display:block; margin-bottom:clamp(1.6rem,6vh,3rem); }.auth-card { padding:clamp(1.35rem,5vw,2rem); }.auth-legal { margin-top:1rem; } }
@media (max-width: 560px) { .auth-portal { padding:1rem; }.auth-mobile-logo { margin-bottom:1.5rem; }.auth-card { border-radius:1.35rem; }.auth-card-head { gap:.72rem; }.auth-card-icon { width:2.7rem; height:2.7rem; border-radius:.85rem; }.auth-card-head h1 { font-size:1.18rem; }.auth-card-head p { font-size:.67rem; }.auth-input-wrap input { min-height:3.05rem !important; }.auth-submit { min-height:3.12rem; }.auth-switch { justify-content:center; text-align:center; }.auth-register-card .auth-switch { margin-top:.15rem; }.auth-legal { padding:0 .4rem; font-size:.57rem; } }
@media (max-width: 390px) { .auth-portal { padding:.75rem; }.auth-card { border-radius:1.18rem; padding:1.05rem; }.auth-card-head h1 { font-size:1.08rem; }.auth-step { font-size:.53rem; }.auth-form { margin-top:1.2rem; gap:.78rem; }.auth-register-form { gap:.65rem; }.auth-field { gap:.36rem; }.auth-field-row a { font-size:.56rem; }.auth-divider { margin:1rem 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-width: 1024px) {
  .design-studio-grid { grid-template-columns: clamp(340px, 23vw, 400px) minmax(0, 1fr); }
  .design-studio-grid.ai-panel-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .design-ai-panel { min-width: 0; }
  .inline-detail-popover { top: 6rem !important; right: 1.1rem !important; left: auto !important; max-height: calc(100vh - 7.2rem); overflow-y: auto; }
  .inline-detail-popover::before { display: none; }
  .dashboard-sidebar { background: #0b1015; opacity: 1; backdrop-filter: none; }
  .dashboard-main { margin-right: 260px !important; margin-left: 0 !important; }
  .design-dashboard-main {
    position: fixed;
    inset: 0 260px 0 0 !important;
    width: auto;
    margin: 0 !important;
    overflow: hidden;
  }
  .design-dashboard-main > .mx-auto { width: 100%; height: 100%; max-width: none; margin: 0; }
}


/* Brushed Titanium / Chrome Skin */
.card-visual-brushmetal {
  isolation: isolate;
  box-shadow: 0 32px 88px rgba(9,17,26,.52), inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(220,235,248,.18), inset 0 0 58px rgba(12,18,25,.34) !important;
}
.card-visual-brushmetal .card-pattern-brushmetal {
  z-index: 1;
  background:
    radial-gradient(95% 35% at 50% -8%, rgba(255,255,255,.17), transparent 49%),
    radial-gradient(60% 25% at 22% 16%, rgba(255,255,255,.05), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 6px),
    linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 34%, rgba(5,10,15,.07) 68%, rgba(255,255,255,.035)) !important;
  opacity: .72 !important;
}
.card-visual-brushmetal .card-pattern-brushmetal::before {
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 22%) !important;
  opacity: .5 !important;
}
.card-visual-brushmetal .card-pattern-brushmetal::after {
  background: linear-gradient(90deg, transparent, rgba(232,244,255,.18), transparent) !important;
  opacity: .35 !important;
}
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] {
  border: 1px solid rgba(223,238,251,.48) !important;
  border-radius: 1rem !important;
  background: linear-gradient(160deg, rgba(243,253,255,.26), rgba(136,154,172,.13) 44%, rgba(221,237,251,.15) 70%, rgba(28,36,45,.26)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -18px 34px rgba(0,0,0,.24), 0 22px 46px rgba(0,0,0,.28) !important;
}
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action,
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .public-contact-action {
  background: linear-gradient(90deg, rgba(238,250,255,.16), rgba(116,134,153,.09) 52%, rgba(219,236,250,.11)) !important;
  border-bottom: 1px solid rgba(181,199,217,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11) !important;
}
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-visual-brushmetal .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child {
  border: 1px solid rgba(248,255,255,.78) !important;
  background: linear-gradient(148deg, #ffffff 0%, #d7e6f3 24%, #a7b8c7 47%, #41525f 68%, #cadeeb 88%, #fdffff 100%) !important;
  color: #0e1a23 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -4px 8px rgba(8,16,24,.25), 0 8px 18px rgba(0,0,0,.27) !important;
}
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] {
  border: 1px solid rgba(211,230,246,.46) !important;
  border-radius: 1rem !important;
  background: linear-gradient(167deg, rgba(236,249,255,.21), rgba(118,136,155,.12) 45%, rgba(215,233,250,.15) 68%, rgba(18,25,32,.26)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 22px 46px rgba(0,0,0,.28) !important;
}
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .social-edit-button,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .public-social-item {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(222,239,254,.52) !important;
  border-radius: .9rem !important;
  clip-path: none !important;
  background: linear-gradient(166deg, rgba(245,255,255,.28), rgba(137,154,173,.13) 42%, rgba(224,243,255,.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -14px 28px rgba(8,14,20,.2), 0 15px 30px rgba(0,0,0,.2) !important;
}
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .social-edit-button::before,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .public-social-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(178deg, rgba(255,255,255,.22), transparent 28%, rgba(255,255,255,.06) 66%, rgba(255,255,255,.12)) !important;
  pointer-events: none !important;
}
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .public-social-item > i,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .social-edit-button > svg,
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] > .public-social-item > svg {
  display: grid !important;
  place-items: center !important;
  min-width: 3.15rem !important;
  min-height: 3.15rem !important;
  padding: .55rem !important;
  border: 1px solid rgba(252,255,255,.82) !important;
  border-radius: .78rem !important;
  background: linear-gradient(146deg, #ffffff 0%, #ddebf7 22%, #adc0d0 47%, #3d4e5e 69%, #d9e8f5 100%) !important;
  color: #0d1922 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -4px 9px rgba(9,18,27,.26), inset 0 0 0 1px rgba(255,255,255,.3), 0 9px 19px rgba(0,0,0,.28) !important;
}
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] .social-card-copy b { color: #f7fbff !important; }
.card-visual-brushmetal .profile-socials[data-item-layout="cards"] .social-card-copy small { color: #d1e2f1 !important; }

/* Precision engineering overlay for Titanium */
.card-visual-brushmetal .card-pattern-brushmetal::after {
  inset: 0 !important;
  height: auto !important;
  background:
    radial-gradient(circle at 17% 10%, transparent 26px, rgba(240,250,255,.24) 27px, rgba(240,250,255,.05) 29px, transparent 31px),
    radial-gradient(circle at 17% 10%, transparent 44px, rgba(240,250,255,.15) 45px, transparent 47px),
    radial-gradient(circle at 17% 10%, transparent 62px, rgba(240,250,255,.09) 63px, transparent 65px),
    radial-gradient(circle at 86% 92%, transparent 26px, rgba(224,239,252,.20) 27px, rgba(224,239,252,.04) 29px, transparent 31px),
    radial-gradient(circle at 86% 92%, transparent 44px, rgba(224,239,252,.13) 45px, transparent 47px),
    radial-gradient(circle at 86% 92%, transparent 60px, rgba(224,239,252,.10) 61px, transparent 63px),
    linear-gradient(90deg, transparent 0 5%, rgba(238,249,255,.11) 5%, transparent 5.15%, transparent 95%, rgba(238,249,255,.09) 95%, transparent 95.15%),
    linear-gradient(0deg, transparent 0 4%, rgba(238,249,255,.08) 4%, transparent 4.12%, transparent 96%, rgba(238,249,255,.07) 96%, transparent 96.12%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 72px) !important;
  opacity: .74 !important;
  mix-blend-mode: screen;
}
.card-visual-brushmetal::after {
  content: "";
  position: absolute;
  inset: 6% 10% auto;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: .2;
  pointer-events: none;
}

/* Titanium background variants */
.card-pattern-titanium_carbon {
  display: block;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, transparent 2px 24px, rgba(7,12,17,.20) 24px 26px, transparent 26px),
    linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 24px, rgba(7,12,17,.16) 24px 26px, transparent 26px),
    radial-gradient(90% 38% at 50% -5%, rgba(255,255,255,.16), transparent 52%);
  opacity: .34 !important;
  mix-blend-mode: screen;
}
.card-pattern-titanium_hex {
  display: block;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 2l24 13.5v23L30 52 6 38.5v-23z' fill='none' stroke='%23f2f9ff' stroke-opacity='.36' stroke-width='1'/%3E%3C/svg%3E") 0 0/60px 52px,
    radial-gradient(90% 40% at 50% -5%, rgba(255,255,255,.14), transparent 50%);
  opacity: .26 !important;
  mix-blend-mode: screen;
}
.card-pattern-titanium_circuit {
  display: block;
  background:
    radial-gradient(circle at 50% 50%, rgba(242,250,255,.72) 0 1.5px, transparent 2.5px) 8px 8px/72px 72px,
    linear-gradient(90deg, transparent 0 34px, rgba(235,246,255,.22) 34px 35px, transparent 35px 72px),
    linear-gradient(0deg, transparent 0 18px, rgba(235,246,255,.14) 18px 19px, transparent 19px 72px),
    linear-gradient(135deg, transparent 0 23%, rgba(235,246,255,.10) 23.2% 24%, transparent 24.2%);
  background-repeat: repeat;
  opacity: .20 !important;
  mix-blend-mode: screen;
}
.card-pattern-titanium_chrome_ray {
  display: block;
  background:
    conic-gradient(from 235deg at 16% 6%, transparent 0deg, rgba(255,255,255,.20) 7deg, transparent 15deg, rgba(255,255,255,.12) 27deg, transparent 37deg, rgba(255,255,255,.07) 50deg, transparent 62deg),
    conic-gradient(from 55deg at 88% 94%, transparent 0deg, rgba(235,247,255,.18) 7deg, transparent 16deg, rgba(235,247,255,.10) 29deg, transparent 40deg),
    linear-gradient(168deg, rgba(255,255,255,.11), rgba(255,255,255,.01) 46%, rgba(8,14,20,.12));
  opacity: .38 !important;
  mix-blend-mode: screen;
}
.card-visual-titanium_carbon,
.card-visual-titanium_hex,
.card-visual-titanium_circuit,
.card-visual-titanium_chrome_ray,
article:has(> .card-pattern-titanium_carbon),
article:has(> .card-pattern-titanium_hex),
article:has(> .card-pattern-titanium_circuit),
article:has(> .card-pattern-titanium_chrome_ray) {
  isolation: isolate;
  background:
    radial-gradient(130% 50% at 50% -8%, rgba(255,255,255,.12), transparent 50%),
    linear-gradient(168deg, #333f4d 0%, #222a34 27%, #1a222b 54%, #273038 77%, #10161d 100%) !important;
  box-shadow: 0 38px 115px rgba(0,0,0,.76), inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(217,232,246,.18), inset 0 0 62px rgba(10,16,22,.46) !important;
}

/* Metal variant accents */
.card-visual-obsidian_noir,
.card-visual-rose_titanium,
.card-visual-copper_forge,
.card-visual-arctic_platinum,
article:has(> .card-pattern-obsidian_noir),
article:has(> .card-pattern-rose_titanium),
article:has(> .card-pattern-copper_forge),
article:has(> .card-pattern-arctic_platinum) {
  isolation: isolate;
  box-shadow: 0 40px 120px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 58px rgba(5,10,16,.44) !important;
}
.card-visual-obsidian_noir .card-pattern-titanium_carbon,
.card-visual-rose_titanium .card-pattern-titanium_chrome_ray,
.card-visual-copper_forge .card-pattern-titanium_hex,
.card-visual-arctic_platinum .card-pattern-titanium_hex {
  opacity: .58 !important;
  mix-blend-mode: soft-light !important;
}
.card-visual-obsidian_noir .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-visual-obsidian_noir .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child,
.card-visual-rose_titanium .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-visual-rose_titanium .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child,
.card-visual-copper_forge .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-visual-copper_forge .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child {
  background: linear-gradient(148deg, #ffffff, currentColor 44%, #3d3128 72%, currentColor 92%) !important;
  color: currentColor;
}
.card-visual-obsidian_noir .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-visual-obsidian_noir .profile-socials[data-item-layout="cards"] > .public-social-item > i,
.card-visual-rose_titanium .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-visual-rose_titanium .profile-socials[data-item-layout="cards"] > .public-social-item > i,
.card-visual-copper_forge .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-visual-copper_forge .profile-socials[data-item-layout="cards"] > .public-social-item > i {
  background: linear-gradient(146deg, #ffffff, currentColor 42%, #33271f 70%, currentColor 94%) !important;
  color: currentColor !important;
}
.card-visual-arctic_platinum .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-visual-arctic_platinum .profile-socials[data-item-layout="cards"] > .public-social-item > i,
.card-visual-arctic_platinum .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-visual-arctic_platinum .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child {
  background: linear-gradient(145deg, #ffffff, #dce8f4 26%, #b2c4d4 52%, #e9f2fa 78%) !important;
  color: #182430 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -3px 8px rgba(83,102,119,.17), 0 8px 18px rgba(38,54,68,.16) !important;
}

/* Arctic Platinum shares the titanium template with a light finish. */
.card-metal-light.card-visual-brushmetal,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] {
  box-shadow: 0 24px 62px rgba(41,58,76,.20), inset 0 1px 0 rgba(255,255,255,.92), inset 0 0 0 1px rgba(151,169,186,.26), inset 0 0 48px rgba(200,213,226,.30) !important;
}
.card-metal-light .card-pattern-brushmetal::after,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .card-pattern-brushmetal::after {
  opacity: .48 !important;
}
.card-metal-light .profile-actions-grid[data-item-layout="contact"],
.card-metal-light .profile-socials[data-item-layout="cards"],
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"],
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -10px 24px rgba(74,94,112,.08), 0 12px 26px rgba(42,58,74,.11) !important;
}
.card-metal-light .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-metal-light .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child,
.card-metal-light .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-metal-light .profile-socials[data-item-layout="cards"] > .public-social-item > i,
.card-metal-light .profile-socials[data-item-layout="cards"] > .social-edit-button > svg,
.card-metal-light .profile-socials[data-item-layout="cards"] > .public-social-item > svg,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .public-social-item > i,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .social-edit-button > svg,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .public-social-item > svg {
  background: linear-gradient(146deg, #ffffff 0%, #e5eef6 22%, #bccbd9 47%, #647a8c 68%, #e8f1f9 100%) !important;
  color: #17222d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -3px 8px rgba(83,102,119,.14), inset 0 0 0 1px rgba(255,255,255,.34), 0 7px 15px rgba(45,62,80,.14) !important;
}
.card-metal-light .profile-socials[data-item-layout="cards"] .social-card-copy b,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] .social-card-copy b {
  color: #17222d !important;
}
.card-metal-light .profile-socials[data-item-layout="cards"] .social-card-copy small,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] .social-card-copy small {
  color: #4d6375 !important;
}

/* High-contrast Arctic Platinum texture */
.card-metal-light.card-visual-brushmetal {
  background:
    radial-gradient(68% 38% at 18% 2%, rgba(255,255,255,.94), transparent 62%),
    radial-gradient(84% 56% at 86% 100%, rgba(255,255,255,.82), transparent 58%),
    linear-gradient(158deg, #f2f6fa 0%, #d3dde6 20%, #fafcfe 39%, #c4d0da 61%, #eff3f8 80%, #ccd8e1 100%) !important;
  box-shadow: 0 20px 46px rgba(41,58,76,.17), inset 0 1px 0 rgba(255,255,255,.94), inset 0 0 0 1px rgba(138,157,174,.30), inset 0 0 36px rgba(210,222,233,.34) !important;
}
.card-metal-light .card-pattern-brushmetal {
  z-index: 1;
  background:
    linear-gradient(98deg, rgba(255,255,255,.72) 0 11%, transparent 25% 45%, rgba(177,192,205,.30) 62% 74%, transparent 88%),
    linear-gradient(172deg, rgba(198,209,220,.28), rgba(255,255,255,.02) 34%, rgba(147,163,178,.18) 66%, rgba(232,239,245,.42)),
    linear-gradient(74deg, rgba(94,110,125,.05), transparent 38%, rgba(73,88,101,.07) 74%, transparent) !important;
  opacity: .54 !important;
  mix-blend-mode: normal !important;
}
.card-metal-light .card-pattern-brushmetal::before {
  background: linear-gradient(180deg, rgba(255,255,255,.76), transparent 18%, rgba(113,128,121,0) 52%, rgba(255,255,255,.46) 86%) !important;
  opacity: .45 !important;
}
.card-metal-light .card-pattern-brushmetal::after {
  background:
    linear-gradient(111deg, transparent 0 17%, rgba(255,255,255,.44) 20%, transparent 33%),
    linear-gradient(111deg, transparent 48%, rgba(157,174,188,.26) 56%, transparent 67%),
    linear-gradient(181deg, rgba(255,255,255,.38), transparent 26%, rgba(96,113,128,.08) 63%, transparent) !important;
  opacity: .44 !important;
  mix-blend-mode: screen !important;
}
.card-metal-light,
.card-metal-light :where(h1,h2,h3,p,span,a,button,small,b,strong) {
  text-shadow: none !important;
}
.card-metal-light .profile-name-row h1,
.card-metal-light .profile-actions-grid[data-section-title]::before,
.card-metal-light .profile-socials[data-section-title]::before {
  color: #101d29 !important;
}
.card-metal-light .profile-job-title {
  color: #243748 !important;
}
.card-metal-light .profile-bio,
.card-metal-light .element-motion-none.opacity-70,
.card-metal-light [data-builder-flow-key="bio"] p {
  color: #31465a !important;
  opacity: .88 !important;
}
.card-metal-light [data-builder-flow-key="eyebrow"] span,
.card-metal-light [data-builder-flow-key="footer_note"] p,
.card-metal-light .profile-footer-note {
  color: #304454 !important;
}
.card-metal-light .profile-actions-grid[data-item-layout="contact"],
.card-metal-light .profile-socials[data-item-layout="cards"],
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"],
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] {
  border: 1px solid rgba(73,93,111,.30) !important;
  background: linear-gradient(165deg, rgba(255,255,255,.82), rgba(226,236,244,.68) 47%, rgba(255,255,255,.78)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -8px 22px rgba(89,109,128,.07), 0 12px 26px rgba(44,61,78,.11) !important;
}
.card-metal-light .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action,
.card-metal-light .profile-actions-grid[data-item-layout="contact"] > .public-contact-action,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"] > .public-contact-action {
  color: #10202d !important;
  border-bottom: 1px solid rgba(76,95,113,.19) !important;
  background: linear-gradient(90deg, rgba(255,255,255,.76), rgba(228,238,246,.56) 55%, rgba(255,255,255,.68)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
}
.card-metal-light .profile-socials[data-item-layout="cards"] > .social-edit-button,
.card-metal-light .profile-socials[data-item-layout="cards"] > .public-social-item {
  border: 1px solid rgba(84,104,123,.25) !important;
  background: linear-gradient(166deg, rgba(255,255,255,.84), rgba(224,235,244,.66) 48%, rgba(255,255,255,.80)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 8px 18px rgba(52,70,88,.10) !important;
}
.card-metal-light .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
.card-metal-light .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child,
.card-metal-light .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
.card-metal-light .profile-socials[data-item-layout="cards"] > .public-social-item > i,
.card-metal-light .profile-socials[data-item-layout="cards"] > .social-edit-button > svg,
.card-metal-light .profile-socials[data-item-layout="cards"] > .public-social-item > svg,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"] > .builder-contact-action > [data-builder-action-icon],
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-actions-grid[data-item-layout="contact"] > .public-contact-action > :first-child,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .social-edit-button > i,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .public-social-item > i,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .social-edit-button > svg,
article:has(> .card-pattern-brushmetal)[style*="#c3d0dc"] .profile-socials[data-item-layout="cards"] > .public-social-item > svg {
  border: 1px solid rgba(255,255,255,.88) !important;
  background: linear-gradient(146deg, #ffffff 0%, #e9f0f7 24%, #c3d1dd 49%, #8d9fac 69%, #f2f7fb 100%) !important;
  color: #17222d !important;
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -3px 8px rgba(76,95,113,.12), inset 0 0 0 1px rgba(255,255,255,.30), 0 5px 12px rgba(48,66,84,.12) !important;
}
.card-metal-light .profile-job-title-accent::after {
  box-shadow: none !important;
}
.card-metal-light .profile-verified-badge {
  box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 4px 10px rgba(43,61,78,.14) !important;
}
.card-metal-light .profile-socials[data-item-layout="cards"] .social-card-copy b {
  color: #101d29 !important;
}
.card-metal-light .profile-socials[data-item-layout="cards"] .social-card-copy small {
  color: #45596a !important;
}