/* Neutral application surfaces; platform colors are scoped to their campaigns. */
.campaign-batches { margin-bottom: 24px; }
.batch-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.batch-history-row small { display: block; color: var(--muted); font-size: 11px; }
.batch-results { margin-top: 20px; }
.batch-results[hidden], .batch-copy[hidden], #new-link-batch[hidden] { display: none; }
.batch-results progress { display: block; width: 100%; height: 10px; accent-color: var(--accent); margin-bottom: 14px; }
.batch-results .batch-short-url { color: var(--accent-text); }
.batch-results .batch-item-error { color: var(--danger); direction: rtl; }
.batch-results .result-status { display: block; font-size: 12px; color: var(--muted); }
.batch-results .btn, .campaign-batches .btn { background: var(--paper-2); color: var(--ink); border-color: var(--border-strong); }
.batch-results .btn:hover, .campaign-batches .btn:hover { background: var(--accent-soft); border-color: var(--accent-border); }
#new-link-batch { margin-top: 12px; }
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(100%, 420px); }
.login-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-heading h1 { font-size: 21px; margin: 0; }
.login-card > p { color: var(--muted); }
.login-card form { display: grid; gap: 16px; margin-top: 24px; }
.sidebar-account { margin-top: auto; padding-top: 20px; flex-shrink: 0; }
.sidebar-account-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--paper-2); }
.sidebar-account-avatar { display: grid; place-items: center; width: 38px; height: 42px; flex: 0 0 38px; border-radius: 11px; background: var(--paper-3); color: var(--ink); }
.sidebar-account-avatar .ico { width: 21px; height: 21px; }
.sidebar-account-info { flex: 1; min-width: 0; }
.sidebar-account-label { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sidebar-account-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 13px; line-height: 1.8; color: var(--ink); }
.sidebar-account-role { display: inline-flex; align-items: center; padding: 1px 7px; margin-top: 3px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.sidebar-logout { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--paper); color: var(--muted); transition: color 160ms, background-color 160ms, border-color 160ms; }
.sidebar-logout:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.auth-unavailable { padding: 30px; color: var(--danger); }
:root {
  color-scheme: light;
  --canvas: #F2F1EE;
  --sidebar: #E8E6E2;
  --paper: #FAF9F7;
  --paper-2: #F4F3F0;
  --paper-3: #E8E6E2;
  --ink: #27282C;
  --text-secondary: #77777B;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2377777B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --muted: #68686D;
  --border: #DEDCD7;
  --border-strong: #B8B6B2;
  --accent: #27282C;
  --accent-text: #27282C;
  --accent-hover: #3A3B40;
  --accent-soft: #E8E6E2;
  --accent-border: #B8B6B2;
  --accent-on: #ffffff;
  --focus-ring: color-mix(in srgb, var(--accent) 22%, transparent);
  --shadow-color: rgb(39 40 44 / 7%);
  --shadow: 0 8px 24px var(--shadow-color);
  --overlay: rgb(34 36 42 / 52%);
  --success: #16744b;
  --success-soft: #ecfdf3;
  --success-border: #b7e8cf;
  --danger: #b42318;
  --danger-soft: #fff1ef;
  --danger-border: #fecdca;
  --toast-bg: #27282C;
  --toast-ink: #ffffff;
  /* Keep exact platform fills; derive readable small-label and hover tones. */
  --platform-tint: 9%;
  --platform-label-mix: #27282C;
  --platform-label-weight: 65%;
  --platform-on: #FFFFFF;
  --instagram: #D85C91;
  --telegram: #3295D5;
  --bale: #329B79;
  --other: #a02ed5;
  --instagram-hover: color-mix(in srgb, var(--instagram) 88%, #FFFFFF);
  --instagram-soft: color-mix(in srgb, var(--instagram) var(--platform-tint), var(--paper));
  --instagram-border: color-mix(in srgb, var(--instagram) 45%, var(--border));
  --instagram-text: color-mix(in srgb, var(--instagram) var(--platform-label-weight), var(--platform-label-mix));
  --instagram-on: var(--platform-on);
  --telegram-hover: color-mix(in srgb, var(--telegram) 88%, #FFFFFF);
  --telegram-soft: color-mix(in srgb, var(--telegram) var(--platform-tint), var(--paper));
  --telegram-border: color-mix(in srgb, var(--telegram) 45%, var(--border));
  --telegram-text: color-mix(in srgb, var(--telegram) var(--platform-label-weight), var(--platform-label-mix));
  --telegram-on: var(--platform-on);
  --bale-hover: color-mix(in srgb, var(--bale) 88%, #FFFFFF);
  --bale-soft: color-mix(in srgb, var(--bale) var(--platform-tint), var(--paper));
  --bale-border: color-mix(in srgb, var(--bale) 45%, var(--border));
  --bale-text: color-mix(in srgb, var(--bale) var(--platform-label-weight), var(--platform-label-mix));
  --bale-on: var(--platform-on);
  --other-hover: color-mix(in srgb, var(--other) 88%, #FFFFFF);
  --other-soft: color-mix(in srgb, var(--other) var(--platform-tint), var(--paper));
  --other-border: color-mix(in srgb, var(--other) 45%, var(--border));
  --other-text: color-mix(in srgb, var(--other) var(--platform-label-weight), var(--platform-label-mix));
  --other-on: var(--platform-on);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1E2026;
  --sidebar: #25282F;
  --paper: #2F323A;
  --paper-2: #292C33;
  --paper-3: #3D414A;
  --ink: #F0EFF2;
  --text-secondary: #A9ABB5;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23A9ABB5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --muted: #A9ABB5;
  --border: #41454E;
  --border-strong: #636873;
  --accent: #F0EFF2;
  --accent-text: #F0EFF2;
  --accent-hover: #FFFFFF;
  --accent-soft: #41454E;
  --accent-border: #636873;
  --accent-on: #22242A;
  --shadow-color: rgb(0 0 0 / 20%);
  --overlay: rgb(0 0 0 / 65%);
  --success: #74dcaa;
  --success-soft: #14352b;
  --success-border: #255c46;
  --danger: #ffa69d;
  --danger-soft: #3b211f;
  --danger-border: #743c34;
  --toast-bg: #F0EFF2;
  --toast-ink: #22242A;
  --platform-tint: 13%;
  --platform-label-mix: #F0EFF2;
  --platform-label-weight: 65%;
  --platform-on: #22242A;
  --instagram: #ED70A6;
  --instagram-soft: color-mix(in srgb, var(--instagram) 22%, var(--paper));
  --instagram-border: color-mix(in srgb, var(--instagram) 60%, var(--border));
  --telegram: #64ACED;
  --bale: #58BA91;
  --other: #B395EF;
}

[data-platform] { --focus-ring: color-mix(in srgb, var(--accent) 22%, transparent); }
[data-platform="instagram"] {
  --accent: var(--instagram);
  --accent-text: var(--instagram-text);
  --accent-hover: var(--instagram-hover);
  --accent-soft: var(--instagram-soft);
  --accent-border: var(--instagram-border);
  --accent-on: var(--instagram-on);
}
[data-platform="telegram"] {
  --accent: var(--telegram);
  --accent-text: var(--telegram-text);
  --accent-hover: var(--telegram-hover);
  --accent-soft: var(--telegram-soft);
  --accent-border: var(--telegram-border);
  --accent-on: var(--telegram-on);
}
[data-platform="bale"] {
  --accent: var(--bale);
  --accent-text: var(--bale-text);
  --accent-hover: var(--bale-hover);
  --accent-soft: var(--bale-soft);
  --accent-border: var(--bale-border);
  --accent-on: var(--bale-on);
}
[data-platform="other"] {
  --accent: var(--other);
  --accent-text: var(--other-text);
  --accent-hover: var(--other-hover);
  --accent-soft: var(--other-soft);
  --accent-border: var(--other-border);
  --accent-on: var(--other-on);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.external-link { color: inherit; text-decoration: none; }
.external-link:hover, .external-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.sidebar { background: var(--sidebar); }
.field input, .field textarea, .field select { color: var(--ink); }
.inline-check { display: flex !important; flex-direction: row; align-items: center; gap: 5px; align-self: flex-start; margin-top: 1px; white-space: nowrap; cursor: pointer; color: var(--text-secondary) !important; font-size: 11px !important; font-weight: 700 !important; }
.inline-check input { width: 16px !important; height: 16px; min-height: 16px !important; margin: 0; accent-color: var(--accent); }
.input-action-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.input-action-row > input { flex: 1; min-width: 0; }
.input-action-row > .btn { flex-shrink: 0; white-space: nowrap; }
.small-select, .field select {
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 14px 14px;
  padding-left: 36px;
}
@media(forced-colors:active) {
  .small-select, .field select { appearance: auto; background-image: none; }
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.brand-mark, .create-side { background: var(--accent); color: var(--accent-on); }
.brand-mark, .create-side, .btn.primary { box-shadow: none; }
.nav-item.active { background: var(--accent-soft); color: var(--ink); }
.campaign-item:hover, .campaign-item.active { background: var(--accent-soft); }
.campaign-item.active { box-shadow: inset -3px 0 var(--accent); }
.campaign-item.active .cname { color: var(--accent-text); }
.platform-icon, .platform-icon.instagram, .platform-icon.telegram,
.platform-icon.bale, .platform-icon.other { background: var(--accent-soft); color: var(--accent); }
.stat-icon, .stat-icon.blue, .stat-icon.green, .stat-icon.gold {
  background: var(--accent-soft); color: var(--accent);
}
.stats-grid {
  --stat-hover-gradient: conic-gradient(var(--instagram), var(--telegram), var(--bale), var(--other), var(--instagram));
}
.stats-grid[data-stat-scope="platform"] {
  --stat-hover-gradient: conic-gradient(transparent, var(--accent), transparent, var(--accent), transparent);
}
.stat-card { position: relative; isolation: isolate; overflow: hidden; padding: 2px; border: 0; background: var(--border); }
.stat-card::before { content: ""; position: absolute; top: 50%; left: 50%; width: 200%; aspect-ratio: 1; background: var(--stat-hover-gradient); opacity: 0; transition: opacity 300ms; animation: stat-card-rotation 8s linear infinite; animation-play-state: paused; pointer-events: none; z-index: 0; }
.stat-card::after { content: ""; position: absolute; inset: 2px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(50px); pointer-events: none; z-index: 1; }
.stat-card-content { position: relative; z-index: 2; height: 100%; min-width: 0; padding: 19px 18px; border-radius: 14px; background: var(--paper); }
.stat-card-content > * { position: relative; z-index: 1; }
.stat-card-content::before { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 50px; background: var(--stat-hover-gradient); filter: blur(50px); opacity: 0; transition: opacity 300ms; pointer-events: none; }
.stat-card:hover::before { opacity: 1; animation-play-state: running; }
.stat-card:hover .stat-card-content::before { opacity: 1; }
@keyframes stat-card-rotation { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media(max-width:1180px) { .stat-card-content { padding: 16px 13px; } }
@media(max-width:660px) { .stat-card-content { padding: 13px; } }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn.primary:hover, .create-side:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.light { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.btn:not(.primary):hover { background: var(--accent-soft); }
.campaign-summary { background: var(--accent-soft); border-color: var(--accent-border); border-inline-start: 4px solid var(--accent); }
.campaign-summary .tag-line, .eyebrow, .short-url { color: var(--accent-text); }
.campaign-operations { position: relative; }
.campaign-operations summary { list-style: none; cursor: pointer; }
.campaign-operations summary::-webkit-details-marker { display: none; }
.campaign-operations-menu { position: absolute; z-index: 10; inset-inline-end: 0; top: calc(100% + 5px); display: grid; gap: 5px; min-width: 170px; padding: 6px; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.campaign-operations-menu .btn { justify-content: flex-start; white-space: nowrap; }
.dashboard-campaign { border-inline-start: 3px solid var(--accent); padding-inline-start: 16px; margin-inline-start: -3px; }
.dashboard-campaign-utm > div {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  transition: border-color 180ms, box-shadow 180ms;
}
.dashboard-campaign-utm > div:hover {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
@media(max-width:660px) {
  .dashboard-campaign-utm > div { direction: ltr; }
  .dashboard-campaign-utm dt { flex-shrink: 0; text-align: left; }
}
.analytics-item { border-inline-start: 3px solid var(--accent); }
.report-period-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 18px; }
.report-period-filter label { font-size: 13px; font-weight: 600; }
.report-period-filter select { color: var(--ink); background-color: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 8px 36px; max-width: 100%; }
.report-period-filter p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 11px; }
@media(max-width:660px) {
  .report-period-filter select { flex: 1; min-width: 0; }
}
.link-click-chart-panel { --chart-text: color-mix(in srgb, var(--ink) 85%, var(--muted)); margin-bottom: 24px; min-width: 0; }
.link-click-chart-panel .panel-heading { flex-wrap: wrap; }
.link-click-chart-panel .panel-heading > small, .link-click-chart-panel .panel-heading p { color: var(--chart-text); }
.link-click-chart-panel .panel-heading > small { font-size: 12px; }
.link-chart-legend { display: flex; flex-wrap: wrap; gap: 9px 20px; color: var(--chart-text); font-size: 12px; }
.link-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.chart-legend-dot.unknown { background: var(--paper); border: 1.5px solid var(--muted); }
.link-chart-y-title { direction: ltr; text-align: left; color: var(--chart-text); font-size: 12px; margin-top: 14px; }
.link-chart-axes { display: flex; min-width: 0; }
.link-chart-y-axis { flex: 0 0 52px; }
.link-chart-scroll { flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.link-chart-plot { display: block; min-width: 100%; }
.link-chart-y-axis text, .link-chart-x-label { fill: var(--chart-text); font: 13px var(--font); }
.link-chart-grid { stroke: var(--border); stroke-dasharray: 3 5; }
.link-chart-baseline { stroke: var(--border-strong); }
.link-chart-point { cursor: pointer; outline: none; }
.chart-bar { fill: var(--accent); stroke: var(--paper); stroke-width: 1; }
.chart-hit { fill: transparent; }
.link-chart-point.unknown .chart-bar { fill: var(--paper); stroke: var(--muted); stroke-width: 1.5; }
.link-chart-point:hover .chart-bar, .link-chart-point:focus-visible .chart-bar, .link-chart-point.selected .chart-bar { stroke: var(--ink); stroke-width: 2; }
.chart-tooltip { opacity: 0; pointer-events: none; }
.chart-tooltip rect { fill: #27282C; stroke: var(--border-strong); }
.chart-tooltip text { fill: #FFFFFF; font: 600 13px var(--font); }
.link-chart-point:hover .chart-tooltip, .link-chart-point:focus-visible .chart-tooltip, .link-chart-point.selected .chart-tooltip { opacity: 1; }
.link-chart-x-title { text-align: center; color: var(--chart-text); font-size: 12px; margin-top: 5px; }
.link-chart-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; border-top: 1px solid var(--border); margin-top: 15px; padding-top: 12px; font-size: 13px; overflow-wrap: anywhere; }
.link-chart-selection strong { max-width: 100%; min-width: 0; }
.chart-selection-hint, .chart-selection-label { color: var(--chart-text); }
@supports selector(::-webkit-scrollbar) {
  .link-chart-scroll { scrollbar-width: auto; scrollbar-color: auto; }
  .link-chart-scroll::-webkit-scrollbar { height: 4px; }
  .link-chart-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
  .link-chart-scroll::-webkit-scrollbar-track { background: transparent; }
}
.links-table { table-layout: fixed; white-space: normal; }
.links-table th, .links-table td { padding: 12px clamp(6px, 1.3vw, 18px); overflow-wrap: anywhere; }
.links-table th:nth-child(1) { width: 7%; }
.links-table th:nth-child(2) { width: 25%; }
.links-table th:nth-child(3) { width: 21%; }
.links-table th:nth-child(4) { width: 14%; }
.links-table th:nth-child(5) { width: 13%; }
.links-table th:nth-child(6), .links-table th:nth-child(7) { width: 10%; }
.links-table .link-row-number { text-align: center; padding-inline: 3px; color: var(--muted); font-size: 10px; }
.link-row-number .num { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.links-table .link-title { min-width: 0; }
.link-title-content { flex: 1; min-width: 0; }
.link-cell-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 3px; }
.link-cell-content { display: grid; justify-items: start; width: max-content; min-width: 100%; white-space: nowrap; }
.link-cell-content > strong, .link-cell-content > small { white-space: nowrap; }
.link-title .link-original-url { max-width: none; text-overflow: clip; }
.links-table .short-url { display: block; white-space: nowrap; }
.links-table .short-url > a { display: inline-block; }
.links-table .link-click-cell { flex-wrap: wrap; gap: 4px; }
.links-table .link-click-value { min-width: 0; max-width: 100%; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
.links-table .table-icon-btn { margin: 3px 0; max-width: 100%; }
.links-table .status-pill { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.links-table .status-pill .ico { margin-inline-end: 3px; }
.links-table .row-sync-status { white-space: normal; }
.links-table .link-error { max-height: 5.5em; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
.links-table * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
@supports selector(::-webkit-scrollbar) {
  .links-table * { scrollbar-width: auto; scrollbar-color: auto; }
  .links-table *::-webkit-scrollbar { width: 4px; height: 4px; }
  .links-table *::-webkit-scrollbar-track { background: transparent; }
  .links-table *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
  .links-table *:hover::-webkit-scrollbar-thumb { background: var(--accent); }
}
@media(max-width:660px) {
  .links-table th:nth-child(1) { width: 7%; }
  .links-table th:nth-child(2) { width: 24%; }
  .links-table th:nth-child(3) { width: 20%; }
  .links-table th:nth-child(4) { width: 13%; }
  .links-table th:nth-child(5), .links-table th:nth-child(6), .links-table th:nth-child(7) { width: 12%; }
  .links-table .link-title { gap: 6px; }
  .links-table .link-thumb { width: 27px; height: 31px; border-radius: 8px; }
  .links-table .status-pill { padding: 4px; }
}
.retry-link-zaya-id { display: block; color: var(--muted); font-size: 10px; direction: rtl; }
.retry-link-zaya-id[hidden], .retry-link-message[hidden] { display: none; }
[id^="campaign-retry-"] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
[id^="campaign-retry-"]:empty { display: none; }
[id^="campaign-retry-"] .form-error { margin: 0; }
[data-action="retry-campaign"][aria-disabled="true"], [data-action="retry-link"][aria-disabled="true"] { opacity: .65; cursor: wait; }
.platform-option { color: var(--accent-text); }
.platform-option .ico { color: var(--accent); }
.platform-option:hover, .platform-option.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.platform-option.active { box-shadow: inset 0 0 0 1px var(--accent); }
.domain-option.active, .product-row.selected { background: var(--accent-soft); border-color: var(--accent-border); }
.selected .prod-check, .domain-option.active .radio-dot:after { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.domain-option.active .radio-dot { border-color: var(--accent); }
.selected-product, .link-summary .summary-total { background: var(--accent-soft); border-color: var(--accent-border); }
.selected-product button, .accordion-count, .accordion-icon, .accordion-chevron, .link-summary strong { color: var(--accent-text); }
.accordion-heading { background: var(--paper-2); }
.accordion-heading:hover { background: var(--accent-soft); }
.accordion-icon, .link-thumb { background: var(--accent-soft); color: var(--accent); }
.status-pill, .result-box { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.status-pill.failed, .form-error { background: var(--danger-soft); color: var(--danger); }
.link-error { color: var(--danger); }
.result-row small { color: var(--text-secondary); }
#toast-container { position: fixed; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(330px, calc(100vw - 28px)); z-index: 130; pointer-events: none; }
.toast.card { --notification-color: var(--success); --notification-soft: var(--success-soft); position: relative; left: auto; bottom: auto; width: 100%; min-height: 80px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 15px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 24px var(--shadow-color); overflow: hidden; display: flex; align-items: center; gap: 12px; pointer-events: auto; text-align: right; }
.toast[data-toast-type="error"] { --notification-color: var(--danger); --notification-soft: var(--danger-soft); }
.toast .wave { position: absolute; transform: rotate(-90deg); right: -31px; top: 32px; width: 80px; fill: var(--notification-color); opacity: .16; pointer-events: none; }
.toast .icon-container { position: relative; width: 35px; height: 35px; flex-shrink: 0; display: grid; place-items: center; background: var(--notification-soft); border-radius: 50%; }
.toast .icon { width: 17px; height: 17px; color: var(--notification-color); }
.toast .message-text-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; min-width: 0; }
.toast .message-text, .toast .sub-text { margin: 0; overflow-wrap: anywhere; cursor: default; }
.toast .message-text { color: var(--notification-color); font-size: 15px; font-weight: 700; }
.toast .sub-text { color: var(--text-secondary); font-size: 12px; line-height: 1.8; }
.toast-close { position: relative; width: 28px; height: 28px; padding: 5px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.toast-close:hover { background: var(--paper-3); color: var(--ink); }
.toast .cross-icon { width: 18px; height: 18px; }
.overlay, .sidebar-scrim.visible { background: var(--overlay); }
.product-image { background: #ffffff; }

/* Sun/moon switch supplied with the design; sized for the panel header. */
.theme-switch {
  --toggle-size: 14px;
  /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  /* radius 0 - minecraft mode :) */
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius)
}

.theme-switch__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.theme-switch__moon {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.theme-switch { position: relative; display: inline-flex; align-items: center; min-height: 44px; direction: ltr; cursor: pointer; }
.theme-switch__stars-container svg { display: block; width: 100%; height: auto; }
.theme-switch__checkbox:focus-visible + .theme-switch__container { outline: 2px solid var(--accent); outline-offset: 4px; }
@media(max-width:660px) { .theme-switch { --toggle-size: 12px; } .dashboard-campaign { padding-inline-start: 11px; } }