/*
  Cargo Simulator industrial skin.
  This file is intentionally visual-only: no layout ownership, no pointer
  behavior, no feature gating. It sits after the legacy inline CSS and narrows
  the product tone from soft/rounded to compact industrial tooling.
*/

:root {
  color-scheme: light;

  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface2: #eef4fb;
  --surface3: #e5edf8;
  --surface4: #d9e6f5;
  --line: rgba(42, 63, 95, 0.16);
  --lineStrong: rgba(42, 63, 95, 0.28);
  --text: #172033;
  --text2: #1e293b;
  --muted: #64748b;
  --muted2: #718198;
  --btn: #edf3fb;
  --btnHover: #e0ebf8;
  --btnActive: #cfddf1;
  --inputBg: #ffffff;
  --inputBorder: rgba(42, 63, 95, 0.18);
  --focus: #3157c9;
  --pri: #3157c9;
  --priHover: #2648a8;
  --primary: #3157c9;
  --primaryLine: rgba(49, 87, 201, 0.46);
  --primarySoft: #e7edff;
  --accent: #0f8b8d;
  --accentSoft: #e2f6f7;
  --accent2: #7057d8;
  --accent2Soft: #ece9ff;
  --success: #16835b;
  --successText: #126b49;
  --successSoft: #e2f6ec;
  --warn: #c07a18;
  --warning: #c07a18;
  --warningText: #8d570d;
  --warnSoft: #fff2d8;
  --danger: #c53b4a;
  --dangerText: #a12d3a;
  --dangerSoft: #ffe6ea;
  --txt: var(--text);
  --panel: var(--surface);
  --panel2: var(--surface2);
  --btn2: var(--btnHover);
  --priSurface: var(--primarySoft);
  --priLine: rgba(49, 87, 201, 0.38);
  --dangerSurface: var(--dangerSoft);
  --dangerLine: rgba(197, 59, 74, 0.34);
  --successSurface: var(--successSoft);
  --successLine: rgba(22, 131, 91, 0.34);
  --warnSurface: var(--warnSoft);
  --warnLine: rgba(192, 122, 24, 0.34);
  --radius: 8px;

  --ui-radius-xs: 3px;
  --ui-radius-sm: 5px;
  --ui-radius-md: 7px;
  --ui-radius-lg: 9px;
  --ui-radius-xl: 12px;
  --ui-control-height: 30px;
  --shadow: 0 8px 20px rgba(36, 57, 95, 0.11);
  --ui-shadow-sm: 0 2px 8px rgba(36, 57, 95, 0.1);
  --ui-shadow-panel: 0 8px 20px rgba(36, 57, 95, 0.08);
  --ui-shadow-float: 0 18px 42px rgba(36, 57, 95, 0.14);
  --ui-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --ui-neon-glow-blue: 0 0 0 1px rgba(49, 87, 201, 0.18), 0 8px 20px rgba(49, 87, 201, 0.12);
  --ui-neon-glow-teal: 0 0 0 1px rgba(15, 139, 141, 0.18), 0 8px 20px rgba(15, 139, 141, 0.1);
  --ui-neon-glow-purple: 0 0 0 1px rgba(112, 87, 216, 0.18), 0 8px 20px rgba(112, 87, 216, 0.1);

  --type-size-micro: 9px;
  --type-size-caption: 9.5px;
  --type-size-control: 10px;
  --type-size-body: 11px;
  --type-size-body-lg: 12px;
  --type-size-panel-title: 12px;
  --type-size-modal-title: 14px;
  --type-weight-regular: 450;
  --type-weight-medium: 550;
  --type-weight-semibold: 650;
  --type-weight-bold: 720;
  --type-weight-heavy: 800;
}

body.theme-dark {
  color-scheme: dark;

  --bg: #070b14;
  --surface: #0d1422;
  --surface2: #121c2d;
  --surface3: #19263a;
  --surface4: #22334d;
  --line: rgba(135, 160, 190, 0.18);
  --lineStrong: rgba(135, 160, 190, 0.32);
  --text: #eaf2ff;
  --text2: #c6d3e4;
  --muted: #8292aa;
  --muted2: #93a5bd;
  --btn: #132033;
  --btnHover: #1a2b45;
  --btnActive: #223755;
  --inputBg: #0a111e;
  --inputBorder: rgba(135, 160, 190, 0.24);
  --focus: #4cc9f0;
  --pri: #4cc9f0;
  --priHover: #7ddfff;
  --primary: #4cc9f0;
  --primaryLine: rgba(76, 201, 240, 0.48);
  --primarySoft: rgba(76, 201, 240, 0.14);
  --accent: #00f5d4;
  --accentSoft: rgba(0, 245, 212, 0.12);
  --accent2: #a855f7;
  --accent2Soft: rgba(168, 85, 247, 0.16);
  --success: #24f0a4;
  --successText: #79ffd0;
  --successSoft: rgba(36, 240, 164, 0.12);
  --warn: #ffd166;
  --warning: #ffd166;
  --warningText: #ffe3a1;
  --warnSoft: rgba(255, 209, 102, 0.13);
  --danger: #ff4d6d;
  --dangerText: #ff9bad;
  --dangerSoft: rgba(255, 77, 109, 0.14);
  --txt: var(--text);
  --panel: var(--surface);
  --panel2: var(--surface2);
  --btn2: var(--btnHover);
  --priSurface: rgba(76, 201, 240, 0.16);
  --priLine: rgba(76, 201, 240, 0.42);
  --dangerSurface: var(--dangerSoft);
  --dangerLine: rgba(255, 77, 109, 0.42);
  --successSurface: var(--successSoft);
  --successLine: rgba(36, 240, 164, 0.38);
  --warnSurface: var(--warnSoft);
  --warnLine: rgba(255, 209, 102, 0.38);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
  --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --ui-shadow-panel: 0 12px 30px rgba(0, 0, 0, 0.32);
  --ui-shadow-float: 0 18px 46px rgba(0, 0, 0, 0.42);
  --ui-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ui-neon-glow-blue: 0 0 0 1px rgba(76, 201, 240, 0.25), 0 0 18px rgba(76, 201, 240, 0.18);
  --ui-neon-glow-teal: 0 0 0 1px rgba(0, 245, 212, 0.25), 0 0 18px rgba(0, 245, 212, 0.14);
  --ui-neon-glow-purple: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 0 18px rgba(168, 85, 247, 0.16);
}

html,
body,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-medium);
}

#app,
#workspace,
#startScreen,
#mainScreen {
  background: var(--bg);
}

#startScreen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.96) 56%, rgba(226, 246, 247, 0.72) 100%),
    var(--bg);
}

body.theme-dark #startScreen {
  background:
    radial-gradient(circle at 64% 18%, rgba(76, 201, 240, 0.13), transparent 28%),
    radial-gradient(circle at 32% 74%, rgba(168, 85, 247, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.98) 0%, rgba(13, 20, 34, 0.98) 100%),
    var(--bg);
}

.btn,
button,
input,
select,
textarea,
pre,
.selectLike,
.pill,
.badge,
.tag,
.presetBtn,
.catTab,
.pageTab,
.countNameBtn,
.mobileChromeBtn,
.mobileTopBarBtn,
.resetViewBtn {
  border-radius: var(--ui-radius-sm) !important;
}

.btn,
button,
.presetBtn,
.catTab,
.pageTab,
.countNameBtn,
.mobileChromeBtn,
.mobileTopBarBtn {
  min-height: var(--ui-control-height);
  background: var(--btn);
  border-color: var(--line);
  color: var(--text2);
  box-shadow: var(--ui-shadow-inset);
  font-size: var(--type-size-control);
  font-weight: var(--type-weight-semibold);
}

.btn.primary,
button.primary,
.mobileChromeBtn.primary,
.lockedFeatureNoticeButton.primary {
  background: linear-gradient(180deg, var(--primary), var(--priHover));
  border-color: color-mix(in srgb, var(--primary) 74%, var(--line));
  color: #ffffff;
  box-shadow:
    var(--ui-shadow-inset),
    0 8px 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

.btn.primary:hover,
button.primary:hover,
.mobileChromeBtn.primary:hover,
.lockedFeatureNoticeButton.primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--priHover) 88%, white 12%), var(--priHover));
  border-color: color-mix(in srgb, var(--primary) 82%, var(--line));
}

body.theme-dark .btn.primary,
body.theme-dark button.primary,
body.theme-dark .mobileChromeBtn.primary,
body.theme-dark .lockedFeatureNoticeButton.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, white 8%), color-mix(in srgb, var(--accent) 68%, var(--primary) 32%));
  border-color: rgba(76, 201, 240, 0.62);
  color: #04111e;
  box-shadow:
    var(--ui-shadow-inset),
    var(--ui-neon-glow-blue);
}

input,
select,
textarea {
  font-size: var(--type-size-control);
}

.btn:hover,
button:hover,
.presetBtn:hover,
.catTab:hover,
.pageTab:hover,
.countNameBtn:hover,
.mobileChromeBtn:hover,
.mobileTopBarBtn:hover {
  background: var(--btnHover);
  border-color: var(--lineStrong);
}

.btn:active,
button:active,
.presetBtn:active,
.catTab:active,
.pageTab:active,
.countNameBtn:active {
  background: var(--btnActive);
}

input,
select,
textarea {
  background: var(--inputBg);
  border-color: var(--inputBorder);
  color: var(--text);
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
.btn:focus-visible,
button:focus-visible {
  border-color: var(--focus) !important;
  outline: 2px solid color-mix(in srgb, var(--focus) 26%, transparent);
  outline-offset: 1px;
}

.modal,
.modalCard,
.overlayCard,
.authWindow,
.phoneAuthPopup,
.lockedFeatureNoticeCard,
.tutorialHubCard,
.tutorialCard,
.taskTutorialPanel,
.onboardingCard,
.onboardingWelcomeDialog,
.onboardingShortcutAssistCard,
.saveSlotCard,
.saveSlotsModal,
.containerEntryModal,
.dockCard,
.selCard,
.accHead,
.statusMetric,
#leftPanel,
#workspaceTopBar,
#rightDock,
#bottomDock,
#settingsMenu,
#previewCard,
#capacityCard,
#sequenceCard,
#palletManifestCard,
#statusPanel,
#licenseAdminPanel,
#tutorialFinishOverlay .tutorialFinishCard {
  border-radius: var(--ui-radius-lg) !important;
  border-color: var(--line);
  background-color: var(--surface);
  box-shadow: var(--ui-shadow-panel);
}

body.theme-dark .modal,
body.theme-dark .modalCard,
body.theme-dark .overlayCard,
body.theme-dark .authWindow,
body.theme-dark .phoneAuthPopup,
body.theme-dark .lockedFeatureNoticeCard,
body.theme-dark .tutorialHubCard,
body.theme-dark .tutorialCard,
body.theme-dark .taskTutorialPanel,
body.theme-dark .onboardingCard,
body.theme-dark .onboardingWelcomeDialog,
body.theme-dark .onboardingShortcutAssistCard,
body.theme-dark .saveSlotCard,
body.theme-dark .saveSlotsModal,
body.theme-dark .containerEntryModal,
body.theme-dark .dockCard,
body.theme-dark .selCard,
body.theme-dark .accHead,
body.theme-dark .statusMetric,
body.theme-dark #leftPanel,
body.theme-dark #workspaceTopBar,
body.theme-dark #rightDock,
body.theme-dark #bottomDock,
body.theme-dark #settingsMenu,
body.theme-dark #previewCard,
body.theme-dark #capacityCard,
body.theme-dark #sequenceCard,
body.theme-dark #palletManifestCard,
body.theme-dark #statusPanel,
body.theme-dark #licenseAdminPanel,
body.theme-dark #tutorialFinishOverlay .tutorialFinishCard {
  border-color: var(--line);
}

.modal,
.modalCard,
.overlayCard,
.authWindow,
.phoneAuthPopup,
.lockedFeatureNoticeCard,
.tutorialHubCard,
.taskTutorialPanel,
.onboardingWelcomeDialog,
.onboardingShortcutAssistCard,
.saveSlotsModal,
.containerEntryModal,
#licenseAdminPanel,
#tutorialFinishOverlay .tutorialFinishCard {
  font-size: var(--type-size-body);
  box-shadow: var(--ui-shadow-float);
}

/* The first-run welcome is intentionally content-only over the blurred stage. */
.onboardingWelcomeDialog,
body.theme-dark .onboardingWelcomeDialog {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.accHead,
.selCard,
.statusMetric,
.dockCard,
.saveSlotCard,
.tutorialStep,
.taskTutorialStep,
.onboardingQuestStep {
  background: var(--surface);
  border-color: var(--line);
}

.accHead:hover,
.selCard:hover,
.dockCard:hover,
.saveSlotCard:hover,
.tutorialHubCard:hover {
  border-color: var(--lineStrong);
  box-shadow: var(--ui-shadow-panel);
}

.accHead h3,
.panelTitle,
.dockTitle,
.modal h2,
.modal h3,
.optionsHeader h3,
.tutorialFinishMessage,
.onboardingTitle,
.taskTutorialTitle,
.tutorialHubTitle,
.introHubTitle {
  color: var(--text);
  font-weight: var(--type-weight-heavy);
  letter-spacing: 0;
}

.introHubTitle {
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.introHubActionTitle {
  font-size: clamp(21px, 2.4vw, 30px) !important;
  letter-spacing: 0 !important;
}

.modal h2,
.modal h3,
.optionsHeader h3,
.tutorialHubTitle,
.taskTutorialTitle,
.onboardingTitle {
  font-size: var(--type-size-modal-title) !important;
  line-height: 1.18 !important;
}

.accHead h3,
.panelTitle,
.dockTitle,
.statusMetricValue,
.loadTypeName,
.autofillEntryTitle {
  font-size: var(--type-size-panel-title) !important;
  line-height: 1.2 !important;
}

label,
.tiny,
.sub,
.hint,
.muted,
.dockSub,
.statusMetricLabel,
.statusMetricCurrent,
.loadTypeSub,
.authHint,
.taskTutorialSubtitle,
.tutorialStepBody,
.onboardingBody {
  color: var(--muted);
  font-size: max(var(--type-size-micro), 1em);
  font-weight: var(--type-weight-medium);
}

.licenseLockedUi,
.lockedFeatureNoticeCard,
.featureTooltip,
.guideBubble,
.quickHintBubble,
.toast {
  border-radius: var(--ui-radius-md) !important;
  border-color: var(--line);
  box-shadow: var(--ui-shadow-panel);
}

.primary,
.pageTab.active,
.catTab.active,
.selCard.active,
.presetBtn.active,
.taskTutorialTab.is-active,
.tutorialTargetAccepted {
  border-color: var(--primaryLine) !important;
  background: color-mix(in srgb, var(--primarySoft) 72%, var(--surface));
  color: var(--text);
}

.pageTab.active,
.catTab.active,
.selCard.active,
.presetBtn.active,
.taskTutorialTab.is-active,
.tutorialTargetAccepted {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line)) !important;
  background: color-mix(in srgb, var(--primarySoft) 72%, var(--surface));
}

body.theme-dark .pageTab.active,
body.theme-dark .catTab.active,
body.theme-dark .selCard.active,
body.theme-dark .presetBtn.active,
body.theme-dark .taskTutorialTab.is-active,
body.theme-dark .tutorialTargetAccepted {
  border-color: var(--primaryLine) !important;
  background: color-mix(in srgb, var(--primarySoft) 72%, var(--surface2));
  box-shadow: var(--ui-neon-glow-blue);
}

.btn.primary,
button.primary,
.mobileChromeBtn.primary,
.lockedFeatureNoticeButton.primary {
  background: linear-gradient(180deg, var(--primary), var(--priHover)) !important;
  border-color: color-mix(in srgb, var(--primary) 74%, var(--line)) !important;
  color: #ffffff !important;
  box-shadow:
    var(--ui-shadow-inset),
    0 8px 18px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

body.theme-dark .btn.primary,
body.theme-dark button.primary,
body.theme-dark .mobileChromeBtn.primary,
body.theme-dark .lockedFeatureNoticeButton.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, white 8%), color-mix(in srgb, var(--accent) 68%, var(--primary) 32%)) !important;
  border-color: rgba(76, 201, 240, 0.62) !important;
  color: #04111e !important;
  box-shadow:
    var(--ui-shadow-inset),
    var(--ui-neon-glow-blue) !important;
}

.success,
.ok,
[data-state="success"] {
  color: var(--successText);
}

.warning,
.warn,
[data-state="warning"] {
  color: var(--warningText);
}

.danger,
.error,
[data-state="danger"],
[data-state="error"] {
  color: var(--dangerText);
}

.accIcon,
.introHubActionIcon,
.mobileChromeIcon,
.featureTooltipIcon,
.loadTypeIcon,
.selectedBlockMiniPreviewIcon {
  color: #42526b;
  filter: saturate(0.88) contrast(1.04);
  opacity: 0.94;
}

body.theme-dark .accIcon,
body.theme-dark .introHubActionIcon,
body.theme-dark .mobileChromeIcon,
body.theme-dark .featureTooltipIcon,
body.theme-dark .loadTypeIcon,
body.theme-dark .selectedBlockMiniPreviewIcon {
  color: #9fb2ca;
  filter: saturate(1.08) brightness(1.08);
  opacity: 0.96;
}

#bottomDock .statusMetric,
#rightDock .dockCard,
#leftPanel .acc,
#leftPanel .accHead {
  backdrop-filter: none;
}

#leftPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--primarySoft) 8%), color-mix(in srgb, var(--surface2) 88%, var(--accentSoft) 12%));
}

body.theme-dark #leftPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, rgba(76, 201, 240, 0.08)), color-mix(in srgb, var(--surface2) 86%, rgba(168, 85, 247, 0.1)));
}

#tutorialBackdrop,
#tutorialHubBackdrop,
#onboardingBackdrop,
.backdrop {
  background-color: color-mix(in srgb, var(--bg) 68%, rgba(17, 24, 39, 0.2));
}

body.theme-dark #tutorialBackdrop,
body.theme-dark #tutorialHubBackdrop,
body.theme-dark #onboardingBackdrop,
body.theme-dark .backdrop {
  background-color: rgba(3, 7, 12, 0.58);
}

#onboardingBackdrop[data-guidance-mode="quest"] {
  backdrop-filter: none;
}

.tutorialTargetHighlight,
.guidedHighlight,
.onboardingSpotlightTarget {
  border-radius: var(--ui-radius-md) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--warn) 82%, white),
    0 0 0 7px color-mix(in srgb, var(--warn) 18%, transparent) !important;
}

body.theme-dark .tutorialTargetHighlight,
body.theme-dark .guidedHighlight,
body.theme-dark .onboardingSpotlightTarget {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--warn) 88%, white),
    0 0 0 7px color-mix(in srgb, var(--warn) 24%, transparent) !important;
}

#optionsBackdrop .optionsModal {
  background: color-mix(in srgb, var(--surface) 97%, transparent) !important;
  border-color: var(--lineStrong) !important;
}

#optionsBackdrop .optionsHeaderActions .btn,
#optionsBackdrop .optionsFooter .btn,
#optionsBackdrop .optionsPage .btn {
  min-height: 28px;
  padding: 4px 9px;
  line-height: 1.15;
}

#optionsBackdrop .optionsHeaderActions {
  gap: 6px;
}

#optionsBackdrop .optionsFooter {
  gap: 6px;
}

#optionsBackdrop .optionsCloseX {
  width: 30px;
  min-width: 30px;
  height: 30px;
  font-size: 16px;
}

#optionsBackdrop .optionsTabs {
  gap: 4px;
}

#optionsBackdrop .optionsTab {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0 !important;
  font-size: var(--type-size-control);
  line-height: 1.15;
}

#optionsBackdrop .optionGroup {
  background: color-mix(in srgb, var(--surface) 94%, var(--surface2));
  border-color: var(--line);
}

#optionsBackdrop .optionsResizeGrip {
  background: linear-gradient(180deg, #ffffff, var(--surface2)) !important;
  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

body.theme-dark #optionsBackdrop .optionsModal {
  border-color: rgba(76, 201, 240, 0.22) !important;
  box-shadow:
    var(--ui-shadow-float),
    0 0 0 1px rgba(76, 201, 240, 0.08) !important;
}

body.theme-dark #optionsBackdrop .optionsTab.active {
  border-color: var(--primaryLine) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--ui-neon-glow-blue);
}

.afModeTriggerBtn,
.afPreviewPanel,
.afPreviewCard,
.afPreviewStage,
.afPreviewCanvasWrap,
#ratioAfBackdrop .modal,
#autofillEntryBackdrop .modal,
.ratioAfModePanel,
.ratioAfModeOption,
.autofillEntryCard {
  border-radius: var(--ui-radius-lg) !important;
}

.afPreviewPanel {
  width: min(720px, calc(95vw - 72px)) !important;
  padding: 12px !important;
  border-color: var(--lineStrong) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface2) 100%) !important;
  box-shadow: var(--ui-shadow-float) !important;
}

.afPreviewPanelHeader {
  margin-bottom: 10px !important;
}

.afPreviewPanelEyebrow {
  font-size: var(--type-size-micro) !important;
  letter-spacing: 0.08em !important;
  color: var(--muted2) !important;
}

.afPreviewPanelTitle {
  font-size: var(--type-size-modal-title) !important;
  line-height: 1.18 !important;
}

.afPreviewPanelTips {
  gap: 8px !important;
  font-size: var(--type-size-caption) !important;
  line-height: 1.45 !important;
}

.afPreviewPanelBody {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  gap: 10px !important;
}

.afPreviewModeList {
  gap: 7px !important;
}

.afPreviewCard {
  min-height: 62px !important;
  padding: 9px 10px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 9px !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.afPreviewCard:hover,
.afPreviewCard:focus-visible,
.afPreviewCard.hovered {
  border-color: var(--primaryLine) !important;
  box-shadow: var(--ui-neon-glow-blue) !important;
}

.afPreviewCard.selected {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line)) !important;
  background: color-mix(in srgb, var(--primarySoft) 34%, var(--surface)) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent),
    0 8px 18px rgba(47, 95, 147, 0.08) !important;
}

.afPreviewCardIcon {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--ui-radius-md) !important;
  background: color-mix(in srgb, var(--primarySoft) 78%, var(--surface2)) !important;
  font-size: var(--type-size-caption) !important;
  letter-spacing: 0.05em !important;
}

.afPreviewCardBody {
  gap: 2px !important;
}

.afPreviewCardTitle,
.afPreviewModeName {
  font-size: var(--type-size-panel-title) !important;
  line-height: 1.2 !important;
}

.afPreviewCardDesc,
.afPreviewModeDesc {
  font-size: var(--type-size-control) !important;
  line-height: 1.42 !important;
}

.afPreviewStage {
  gap: 8px !important;
  padding: 10px !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.afPreviewStageHeader {
  min-height: 42px !important;
}

.afPreviewCanvasWrap {
  min-height: 204px !important;
  border-color: var(--line) !important;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f2f7fc 100%) !important;
}

.afPreviewCanvas {
  height: 204px !important;
}

#ratioAfBackdrop .modal,
#autofillEntryBackdrop .modal {
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
}

.autofillEntryCard {
  padding: 14px !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.autofillEntryCard:hover,
.autofillEntryCard:focus-visible {
  border-color: var(--primaryLine) !important;
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.08) !important;
}

.autofillEntryDesc {
  font-size: var(--type-size-control) !important;
  line-height: 1.45 !important;
}

body.theme-dark .afPreviewPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, #050a14 2%), color-mix(in srgb, var(--surface2) 94%, #050a14 6%)) !important;
}

body.theme-dark .afPreviewCard,
body.theme-dark .afPreviewStage,
body.theme-dark .autofillEntryCard {
  background: color-mix(in srgb, var(--surface2) 92%, #050a14 8%) !important;
}

body.theme-dark .afPreviewCard:hover,
body.theme-dark .afPreviewCard:focus-visible,
body.theme-dark .afPreviewCard.hovered,
body.theme-dark .afPreviewCard.selected,
body.theme-dark .autofillEntryCard:hover,
body.theme-dark .autofillEntryCard:focus-visible {
  box-shadow: var(--ui-neon-glow-blue) !important;
}

body.theme-dark .afPreviewCanvasWrap {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.1), rgba(148,163,184,.08) 48%, rgba(15,23,42,.82)) !important;
}

body.layout-mobile .btn,
body.layout-mobile button,
body.layout-mobile input,
body.layout-mobile select,
body.layout-mobile textarea,
body.layout-tablet .btn,
body.layout-tablet button {
  min-height: max(var(--touch-target-size, 36px), 34px);
}

@media (max-width: 860px) {
  :root {
    --ui-control-height: 34px;
    --ui-radius-lg: 8px;
  }

  .introHubTitle {
    font-size: clamp(32px, 10vw, 48px) !important;
  }

  .afPreviewPanel {
    width: min(94vw, 720px) !important;
  }

  .afPreviewPanelBody {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .afPreviewCanvasWrap {
    min-height: 200px !important;
  }

  .afPreviewCanvas {
    height: 200px !important;
  }

  #optionsBackdrop .optionsTab {
    min-height: var(--touch-target-size, 44px);
  }
}

.btn.primary:not(:disabled):hover,
button.primary:not(:disabled):hover,
.mobileChromeBtn.primary:not(:disabled):hover,
.lockedFeatureNoticeButton.primary:not(:disabled):hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 72%, white 28%), color-mix(in srgb, var(--priHover) 82%, #0f172a 18%)) !important;
  border-color: color-mix(in srgb, white 58%, var(--primary)) !important;
  box-shadow:
    var(--ui-shadow-inset),
    0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent),
    0 10px 24px color-mix(in srgb, var(--primary) 34%, transparent) !important;
  filter: brightness(1.08);
}

.tutorialActiveSurface,
.tutorialActiveSurface.tutorialTargetHighlight,
.tutorialActiveSurface .tutorialTargetHighlight {
  opacity: 1 !important;
  filter: brightness(1.08) saturate(1.04) !important;
}

.tutorialActiveSurface.tutorialTargetHighlight,
.tutorialActiveSurface .tutorialTargetHighlight {
  background-color: color-mix(in srgb, var(--tutorialTargetFill) 94%, white 6%) !important;
}