.mock-data-menu {
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid rgba(91, 82, 241, .22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(91, 82, 241, .1), rgba(80, 201, 178, .08));
}

.mock-data-menu > header { display: flex; align-items: center; gap: 10px; }
.mock-data-menu-mark { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #655cf3, #3a83da); box-shadow: 0 8px 20px rgba(70, 79, 210, .22); font-size: 20px; }
.mock-data-menu-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mock-data-menu > header > span:nth-child(2) { min-width: 0; flex: 1; display: grid; gap: 2px; }
.mock-data-menu > header strong { font-size: 13px; color: var(--ink, #191a23); }
.mock-data-menu > header small { overflow: hidden; color: var(--muted, #747582); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mock-data-menu > header > b { padding: 5px 8px; border-radius: 999px; color: #335c57; background: rgba(63, 198, 164, .15); font-size: 9px; white-space: nowrap; }
.mock-data-menu button { font: inherit; }
.scenario-control .mock-data-menu-action { display: flex; width: 100%; min-height: 54px; margin-top: 10px; padding: 10px 11px; align-items: center; justify-content: space-between; border: 0; border-radius: 12px; color: #fff; background: #20212b; cursor: pointer; }
.scenario-control .mock-data-menu-action:hover { color: #fff; background: #2d2f3c; }
.scenario-control .mock-data-menu-action span { display: grid; gap: 2px; text-align: right; }
.scenario-control .mock-data-menu-action strong { color: #fff; font-size: 11px; }
.scenario-control .mock-data-menu-action small { color: rgba(255,255,255,.68); font-size: 9px; }
.scenario-control .mock-data-menu-action > b { color: #fff; font-size: 18px; }

.mock-data-modal[hidden] { display: none; }
.mock-data-modal { position: fixed; inset: 0; z-index: 10020; display: grid; padding: 24px; place-items: center; background: rgba(13, 15, 25, .62); backdrop-filter: blur(12px); }
.mock-data-dialog { width: min(760px, 100%); max-height: min(760px, calc(100dvh - 48px)); overflow: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 28px; color: #20212b; background: #f8f8fb; box-shadow: 0 32px 90px rgba(0,0,0,.28); }
.mock-data-dialog > header { position: sticky; top: 0; z-index: 2; display: flex; padding: 20px 22px 16px; align-items: center; gap: 12px; border-bottom: 1px solid #e8e8ef; background: rgba(248,248,251,.94); backdrop-filter: blur(16px); }
.mock-data-dialog > header > span:first-child { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #655cf3, #3b8fdd); font-size: 22px; }
.mock-data-dialog > header > span:first-child svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mock-data-dialog > header > div { flex: 1; }
.mock-data-dialog > header small { color: #7c7d89; font-size: 11px; }
.mock-data-dialog > header h2 { margin: 3px 0 0; font-size: 19px; }
.mock-data-dialog > header button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #656671; background: #ececf2; font-size: 22px; cursor: pointer; }
.mock-data-dialog-body { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr); gap: 18px; padding: 20px 22px 24px; }
.mock-data-builder, .mock-data-library { min-width: 0; }
.mock-data-builder { padding: 18px; border: 1px solid #e5e5ed; border-radius: 20px; background: #fff; }
.mock-data-builder > header span, .mock-data-library > header span { color: #655cf3; font-size: 10px; font-weight: 800; }
.mock-data-builder > header h3, .mock-data-library > header h3 { margin: 4px 0; font-size: 15px; }
.mock-data-builder > header p, .mock-data-library > header p { margin: 0; color: #7b7c87; font-size: 10px; line-height: 1.8; }
.mock-profile-form { display: grid; gap: 11px; margin-top: 16px; }
.mock-profile-form label { display: grid; gap: 6px; }
.mock-profile-form label span { color: #666773; font-size: 10px; font-weight: 700; }
.mock-profile-form input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #dcdce5; border-radius: 12px; outline: 0; color: #20212b; background: #fbfbfd; font-size: 12px; font-family: "Vazirmatn Regular", Tahoma, sans-serif; }
.mock-profile-form input:focus { border-color: #655cf3; box-shadow: 0 0 0 3px rgba(101,92,243,.1); }
.mock-gender-field { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; padding: 0; border: 0; }
.mock-gender-field legend { margin-bottom: 6px; color: #666773; font-size: 10px; font-weight: 700; }
.mock-gender-field label { position: relative; display: block; }
.mock-gender-field input { position: absolute; opacity: 0; pointer-events: none; }
.mock-gender-field label span { min-height: 39px; display: grid; place-items: center; border: 1px solid #dcdce5; border-radius: 11px; color: #666773; background: #fbfbfd; cursor: pointer; }
.mock-gender-field input:checked + span { border-color: #655cf3; color: #5750cf; background: #efefff; box-shadow: inset 0 0 0 1px rgba(101,92,243,.12); }
.mock-gender-field input:focus-visible + span { box-shadow: 0 0 0 3px rgba(101,92,243,.14); }
.mock-profile-form > button { height: 45px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #655cf3, #3e83de); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px rgba(73,80,218,.18); }
.mock-profile-form > button:disabled { opacity: .65; cursor: wait; }
.mock-profile-error { margin: 0; color: #bc4051; font-size: 10px; }
.mock-generation-status[hidden] { display: none; }
.mock-generation-status { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 13px; color: #4f4f60; background: #f2f1ff; font-size: 10px; }
.mock-generation-status i { display: block; width: 38%; height: 4px; border-radius: 99px; background: #655cf3; animation: mock-thinking 1.05s ease-in-out infinite alternate; }
.mock-generation-status.complete { color: #276b5d; background: #eaf8f4; }
.mock-generation-status.complete i { width: 100%; background: #34a789; animation: none; }
@keyframes mock-thinking { to { width: 88%; transform: translateX(-5px); } }
.mock-data-explainer { display: grid; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #ededf2; }
.mock-data-explainer span { display: flex; align-items: center; gap: 7px; color: #6d6e79; font-size: 9px; }
.mock-data-explainer i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; color: #655cf3; background: #f0efff; font-style: normal; font-weight: 800; }
.mock-data-library > header { padding: 2px 2px 12px; }
.active-mock-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; padding: 13px; align-items: center; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #20212b, #34364a); }
.active-mock-card > span:first-child { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #746df8, #56b4d3); font-size: 15px; font-weight: 900; }
.active-mock-card > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.active-mock-card strong { font-size: 12px; }
.active-mock-card small { overflow: hidden; color: rgba(255,255,255,.62); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.active-mock-card > b { padding: 5px 8px; border-radius: 999px; color: #9cf2d8; background: rgba(83,214,177,.14); font-size: 9px; }
.mock-credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0 12px; }
.mock-credentials > span { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid #e2e2e9; border-radius: 11px; background: #fff; }
.mock-credentials small { color: #8a8b95; font-size: 8px; }
.mock-credentials strong { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mock-credentials button { grid-column: 1 / -1; height: 33px; border: 1px solid #dadae4; border-radius: 10px; color: #525360; background: #fff; font: inherit; font-size: 9px; cursor: pointer; }
.mock-credentials .disable-mock-session { border-color: rgba(187, 88, 101, .24); color: #9b4d59; background: #fff7f8; }
.mock-credentials .disable-mock-session:disabled { opacity: .65; cursor: wait; }
.mock-profile-list { display: grid; gap: 7px; }
.mock-profile-row { display: grid; grid-template-columns: 1fr 32px; gap: 6px; }
.mock-profile-select { display: grid; grid-template-columns: 39px 1fr auto; min-width: 0; padding: 9px; align-items: center; gap: 9px; border: 1px solid #e3e3ea; border-radius: 13px; color: #282934; background: #fff; text-align: right; cursor: pointer; }
.mock-profile-row.active .mock-profile-select { border-color: rgba(101,92,243,.45); box-shadow: inset 0 0 0 1px rgba(101,92,243,.1); }
.mock-profile-avatar { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #5750cf; background: #efefff; font-size: 11px; font-weight: 900; }
.mock-profile-select > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
.mock-profile-select strong { font-size: 11px; }
.mock-profile-select small { overflow: hidden; color: #777883; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mock-profile-select i { color: #9a9ba5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-style: normal; }
.mock-profile-select > b { color: #655cf3; font-size: 8px; }
.mock-profile-delete { width: 32px; height: 32px; padding: 0; align-self: center; justify-self: center; border: 1px solid #e5e5eb; border-radius: 10px; color: #a06870; background: #fff; font-size: 18px; cursor: pointer; }
.mock-profile-delete:disabled { opacity: .32; cursor: not-allowed; }
body.mock-data-open { overflow: hidden; }
.mock-data-launcher { display: none; }

@media (max-width: 1199px) {
  .mock-data-launcher,
  body.demo-mode .demo-control-launcher { width: 54px; height: 54px; padding: 0; right: max(16px, env(safe-area-inset-right)); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; color: #fff; background: #25588f; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
  .mock-data-launcher { position: fixed; bottom: max(82px, calc(env(safe-area-inset-bottom) + 66px)); z-index: 989; font: 900 20px/1 inherit; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease, opacity 180ms ease; }
  .mock-data-launcher:hover { background: #1f4c7d; transform: translateY(-2px); }
  .mock-data-launcher svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  body.mock-data-open .mock-data-launcher { opacity: 0; pointer-events: none; }
  .mock-data-launcher { display: none !important; }
}

@media (max-width: 720px) {
  .mock-data-modal { padding: 0; align-items: end; }
  .mock-data-dialog { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; }
  .mock-data-dialog-body { grid-template-columns: 1fr; padding: 16px; }
  .mock-data-dialog > header { padding: 16px; }
}