/* Shared readability, responsive navigation and API reference surfaces. */
body,
button,
input,
textarea,
select {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-optical-sizing: auto;
}

body { font-size: 15px; line-height: 1.85; }
button, input, textarea, select { font-size: 14px; }
small { font-size: max(11px, .82em); line-height: 1.8; }
.eyebrow, .panel-footnote, .form-hint, .page-footer,
.channel-port, .channel-sub, .message-id, .message-date,
.status-badge, .device-online-badge, .count-pill,
.device-mini span:not(.device-icon), .device-mini small,
.device-web-status, .registration-mode, .line-state,
.api-overview-card small, .api-overview-card span,
.api-reference-title small, .api-admin-warning {
  font-size: max(11px, .82em);
}
.nav-item { font-size: 14px; }
.page-wrap { padding-block: 30px 34px; }
.panel, .stat-card { border-radius: 16px; }
.panel { padding: clamp(17px, 2vw, 24px); }
.page-heading { gap: 16px; }
.page-heading h1 { font-size: clamp(25px, 2.2vw, 32px); }
.page-heading .muted, .muted { font-size: 14px; }
.panel-heading h2, .api-section-heading h2 { font-size: 17px; }
.panel-heading p { font-size: 12px; }
.button { font-size: 13px; }
input, textarea, select { font-size: 14px; }
table { min-width: 760px; }
thead th, tbody td { font-size: 12px; }
.status-badge, .count-pill { padding: 5px 10px; }

.api-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 15px;
}
.api-overview-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f8fbfc);
  box-shadow: var(--shadow-soft, 0 5px 16px rgba(26,47,70,.045));
}
.api-overview-icon, .api-section-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: #168b7f;
  background: #e8f6f2;
}
.api-overview-icon .ui-icon, .api-section-icon .ui-icon { width: 20px; height: 20px; }
.api-overview-card div { display: grid; min-width: 0; gap: 2px; }
.api-overview-card small { color: #718398; }
.api-overview-card code, .api-overview-card strong { color: #253c53; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.api-overview-card span:not(.api-overview-icon) { color: #8593a2; }
.api-docs-panel { max-width: none; }
.api-section-heading, .api-reference-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.api-section-heading { margin-bottom: 15px; }
.api-section-heading h2, .api-reference-title h3 { margin: 0; color: #20364c; }
.api-section-heading p { margin-top: 2px; color: #718397; font-size: 12px; }
.api-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.api-step { display: flex; gap: 10px; padding: 13px; border: 1px solid #e7edf0; border-radius: 12px; background: #fbfdfd; }
.api-step > b { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #197f75; background: #e8f6f2; }
.api-step strong { color: #314a60; font-size: 13px; }
.api-step p { margin-top: 3px; color: #758699; font-size: 11px; line-height: 1.85; }
.api-contract-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 11px; }
.api-contract-head h2 { margin: 0; color: #20364c; font-size: 16px; }
.api-contract-head p { margin-top: 2px; color: #7d8c9b; font-size: 11px; }
.api-table-scroll { margin-bottom: 12px; }
.api-table { min-width: 720px; }
.api-table td code, .api-table th code { direction: ltr; color: #42617d; font-family: Consolas, "Vazirmatn", monospace; font-size: 11px; }
.api-method { display: inline-grid; min-width: 48px; place-items: center; padding: 3px 7px; border-radius: 7px; direction: ltr; font: 800 10px/1.5 Consolas, monospace; }
.api-method.get { color: #32689f; background: #eaf2fc; }
.api-method.post { color: #1c8067; background: #e8f6ee; }
.api-reference-grid, .api-samples-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 14px 0 20px; }
.api-reference-card { min-width: 0; padding: 16px; border: 1px solid #e5ebef; border-radius: 14px; background: #fcfdfd; }
.api-reference-title { margin-bottom: 10px; }
.api-reference-title > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #1c887e; background: #e9f6f3; }
.api-reference-title .ui-icon { width: 17px; height: 17px; }
.api-reference-title h3, .api-samples-grid h3 { font-size: 14px; }
.api-reference-card > p { margin-bottom: 12px; color: #687c90; font-size: 12px; line-height: 1.9; }
.api-reference-card > p code, .api-admin-reference > p code { direction: ltr; color: #466581; font-family: Consolas, "Vazirmatn", monospace; }
.api-response-block { color: #d7ecdf; background: #132b2a; }
.api-code-samples, .api-admin-reference { margin: 18px 0; border: 1px solid #e4eaef; border-radius: 14px; background: #fff; overflow: hidden; }
.api-code-samples > summary, .api-admin-reference > summary { padding: 14px 16px; color: #2e485e; background: #f7fafb; cursor: pointer; font-size: 13px; font-weight: 800; }
.api-samples-grid { padding: 14px; }
.api-samples-grid > section { min-width: 0; }
.api-samples-grid h3 { margin: 0 0 8px; color: #344f66; }
.api-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.api-status-grid > div { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid #e7edf0; border-radius: 11px; background: #fbfcfd; }
.api-status-grid code { width: fit-content; color: #197d72; font: 800 11px/1.5 Consolas, monospace; }
.api-status-grid span { color: #6f8295; font-size: 11px; line-height: 1.8; }
.api-security-callout { margin: 20px 0 10px; padding: 15px; line-height: 1.9; }
.api-security-callout p { font-size: 12px; }
.api-admin-reference { padding-bottom: 14px; }
.api-admin-reference > h3 { margin: 18px 16px 8px; color: #334e64; font-size: 13px; }
.api-admin-reference > p { margin: 13px 16px; color: #75869a; line-height: 1.9; }
.api-admin-warning { padding: 10px 12px; border: 1px solid #f0e0bb; border-radius: 10px; background: #fff9eb; }
.api-admin-reference .table-scroll { margin-inline: 14px; width: calc(100% - 28px); }
.api-admin-reference .api-table { min-width: 660px; }
.code-block { font: 12px/1.9 Consolas, "Vazirmatn", monospace; }

.campaign-consent-note { margin-bottom: 16px; line-height: 1.9; }
.side-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 681px) {
  .sidebar { overflow: hidden; }
  .side-nav {
    flex: 1 1 0;
    align-content: start;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #e4485a rgba(255, 255, 255, .08);
    scrollbar-gutter: stable;
  }
  .side-nav::-webkit-scrollbar { width: 4px; }
  .side-nav::-webkit-scrollbar-track { background: rgba(255, 255, 255, .07); border-radius: 8px; }
  .side-nav::-webkit-scrollbar-thumb { background: #e4485a; border: 1px solid rgba(16, 29, 50, .8); border-radius: 8px; }
  .side-nav::-webkit-scrollbar-thumb:hover { background: #ff6675; }
}
.campaign-workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: 16px; align-items: start; }
.campaign-builder, .lottery-builder, .campaign-list-panel { min-width: 0; padding: 20px; }
.campaign-card-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: #177e73; background: #e7f5f1; }
.campaign-card-icon .ui-icon { width: 21px; height: 21px; }
.campaign-card-icon.lottery { color: #9b6a11; background: #fff4df; }
.campaign-form, .lottery-form { display: grid; gap: 13px; }
.campaign-form label, .lottery-form label { display: grid; gap: 6px; color: #3c5268; font-size: 12px; font-weight: 750; }
.campaign-form label small, .lottery-form label small, .campaign-appointment-fields > small { color: #8392a1; font-size: 10.5px; font-weight: 450; line-height: 1.75; }
.campaign-form input, .campaign-form select, .campaign-form textarea, .lottery-form input, .lottery-form select { width: 100%; min-height: 41px; padding: 9px 11px; border: 1px solid #dfe7eb; border-radius: 10px; color: #263d52; background: #fff; font: inherit; font-size: 12px; outline: none; }
.campaign-form textarea { resize: vertical; line-height: 1.9; }
.campaign-form input:focus, .campaign-form select:focus, .campaign-form textarea:focus, .lottery-form input:focus, .lottery-form select:focus { border-color: #58aa9d; box-shadow: 0 0 0 3px #58aa9d1e; }
.campaign-appointment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border: 1px solid #e5ebef; border-radius: 12px; background: #f9fbfc; }
.campaign-appointment-fields > small { grid-column: 1 / -1; }
.campaign-poll-preview { padding: 12px 14px; border: 1px dashed #cbded9; border-radius: 11px; color: #55746f; background: #f4faf8; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.9; }
.campaign-form > .button, .lottery-form > .button { justify-self: start; min-height: 43px; }
.lottery-result { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid #e9d6a9; border-radius: 12px; background: #fff9e9; color: #604a1c; font-size: 12px; }
.lottery-result > div { display: flex; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px solid #f0e5c9; }
.lottery-history { display: grid; gap: 9px; margin-top: 18px; }
.lottery-history-row { display: grid; gap: 8px; padding: 12px; border: 1px solid #e8edf0; border-radius: 11px; background: #fcfdfd; }
.lottery-history-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.lottery-history-row strong { color: #314b60; font-size: 12px; }
.lottery-history-row small { color: #8391a0; font-size: 10px; }
.lottery-winner-list { display: grid; gap: 5px; color: #62788d; font-size: 11px; }
.lottery-winner-list span { display: flex; align-items: center; gap: 7px; }
.lottery-winner-list bdi { margin-inline-start: auto; font-family: Consolas, monospace; }
.campaign-list-panel { margin-top: 16px; }
.appointment-manager { margin-top: 16px; padding: 20px; }
.appointment-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; padding: 14px; border: 1px solid #e6edf0; border-radius: 13px; background: #f9fbfc; }
.appointment-form label { display: grid; gap: 5px; color: #3c5268; font-size: 11px; font-weight: 750; }
.appointment-form input, .appointment-form select, .appointment-form textarea { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #dfe7eb; border-radius: 9px; color: #263d52; background: #fff; font: inherit; font-size: 11px; }
.appointment-form textarea { resize: vertical; line-height: 1.85; }
.appointment-form label:focus-within input, .appointment-form label:focus-within select, .appointment-form label:focus-within textarea { border-color: #58aa9d; outline: 2px solid #58aa9d20; }
.appointment-form label small { color: #8392a1; font-size: 10px; font-weight: 450; line-height: 1.7; }
.appointment-message-field { grid-column: 1 / 4; }
.appointment-form-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.appointment-form-actions .button { min-height: 39px; font-size: 10px; }
.appointment-list { display: grid; gap: 8px; margin-top: 13px; }
.appointment-row { display: grid; grid-template-columns: minmax(155px,.8fr) minmax(0,1.5fr) auto; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid #e8edf0; border-radius: 11px; background: #fff; }
.appointment-date, .appointment-info { display: grid; gap: 3px; min-width: 0; }
.appointment-date strong, .appointment-info strong { color: #334c61; font-size: 11px; }
.appointment-date small, .appointment-info small { color: #7f8e9c; font-size: 10px; }
.appointment-status { width: fit-content; padding: 2px 7px; border-radius: 20px; color: #597083; background: #eff3f6; font-size: 9px; }
.appointment-status.scheduled { color: #976c18; background: #fff5df; }
.appointment-status.accepted { color: #287f68; background: #eaf7f0; }
.appointment-status.failed, .appointment-status.uncertain, .appointment-status.skipped { color: #a14f51; background: #fff0ef; }
.appointment-status.cancelled { color: #788591; background: #f1f3f5; }
.appointment-actions { display: flex; gap: 6px; }
.appointment-actions .button { min-height: 31px; padding: 5px 9px; font-size: 9px; }
.campaign-list { display: grid; gap: 9px; }
.campaign-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid #e6ecef; border-inline-start: 3px solid #d6e1e5; border-radius: 12px; background: #fff; }
.campaign-row.scheduled { border-inline-start-color: #d7a846; }
.campaign-row.sending { border-inline-start-color: #5387c0; }
.campaign-row.completed { border-inline-start-color: #51a38d; }
.campaign-row.cancelled { opacity: .74; }
.campaign-row-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #388579; background: #eaf6f3; }
.campaign-row-icon .ui-icon { width: 18px; height: 18px; }
.campaign-row-main { min-width: 0; display: grid; gap: 4px; }
.campaign-row-main > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.campaign-row-main strong { color: #30475d; font-size: 12px; overflow-wrap: anywhere; }
.campaign-row-main small { color: #77899a; font-size: 10.5px; line-height: 1.7; }
.campaign-row-main .campaign-row-error { color: #a24547; }
.campaign-kind-chip { padding: 2px 7px; border-radius: 20px; color: #4b7181; background: #eef5f6; font-size: 9px; }
.campaign-row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.campaign-row-actions .button { min-height: 34px; padding: 6px 10px; font-size: 10px; }
.poll-results-panel { margin-top: 16px; padding: 18px; }
.poll-result-row { display: grid; gap: 7px; margin: 12px 0; }
.poll-result-row > div:first-child { display: flex; justify-content: space-between; gap: 14px; color: #465d72; font-size: 11px; }
.poll-result-row strong { flex: 0 0 auto; color: #217b70; }
.poll-result-track { height: 9px; overflow: hidden; border-radius: 20px; background: #edf2f3; }
.poll-result-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4fa48f,#237f75); }
body.font-scale-large .campaign-form label, body.font-scale-large .lottery-form label { font-size: 13px; }

@media (min-width: 681px) and (max-width: 1100px) {
  .sidebar { width: 76px; padding: 20px 10px; }
  .main-area { margin-right: 76px; }
  .brand { justify-content: center; padding: 3px 0 25px; }
  .brand > div:last-child, .side-label, .device-mini strong,
  .device-mini span:not(.device-icon), .device-mini small,
  .sidebar-bottom .logout, .sidebar-bottom .version { display: none; }
  .side-nav { gap: 8px; }
  .nav-item { justify-content: center; width: 54px; min-height: 48px; padding-inline: 4px; overflow: hidden; color: transparent; font-size: 0; }
  .nav-icon { width: 22px; flex: 0 0 22px; font-size: 19px; }
  .device-mini { display: flex; justify-content: center; margin-bottom: 0; padding: 9px 4px; }
  .device-mini-top { margin: 0; }
  .tiny-status { position: absolute; margin: -20px -22px 0 0; }
  .page-wrap { padding-inline: clamp(18px, 3vw, 30px); }
  .api-reference-grid, .api-samples-grid { grid-template-columns: 1fr; }
  .campaign-workspace { grid-template-columns: 1fr; }
  .appointment-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .appointment-message-field { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .sidebar { scrollbar-width: thin; scrollbar-color: #e4485a rgba(255, 255, 255, .08); }
  .sidebar::-webkit-scrollbar { height: 3px; }
  .sidebar::-webkit-scrollbar-track { background: rgba(255, 255, 255, .07); }
  .sidebar::-webkit-scrollbar-thumb { background: #e4485a; border-radius: 8px; }
  .sidebar { inset: auto 0 0; display: block; width: auto; height: 66px; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); overflow-x: auto; overscroll-behavior-x: contain; }
  .brand, .side-label, .sidebar-bottom { display: none; }
  .side-nav { display: flex; width: max-content; min-width: 100%; height: 100%; align-items: center; gap: 4px; }
  .nav-item, .nav-item.active { display: grid; width: 48px; min-width: 48px; height: 48px; min-height: 48px; flex: 0 0 48px; place-items: center; justify-content: center; padding: 0; color: transparent; font-size: 0; }
  .nav-icon { width: 22px; font-size: 19px; }
  .main-area { margin-right: 0; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .page-wrap { padding: 20px 13px 28px; }
  .api-overview-grid, .api-steps-grid, .api-status-grid { grid-template-columns: 1fr; }
  .api-reference-grid, .api-samples-grid { grid-template-columns: 1fr; }
  .api-overview-card { padding: 13px; }
  .api-docs-panel { padding: 15px 12px; }
  .api-code-samples > summary, .api-admin-reference > summary { padding: 12px; }
  .api-samples-grid { padding: 12px; }
  .api-reference-card { padding: 13px; }
  .api-contract-head { align-items: flex-start; }
  .api-security-callout { padding: 12px; }
  .code-block { font-size: 11px; line-height: 1.8; }
  .campaign-builder, .lottery-builder, .campaign-list-panel { padding: 14px; }
  .campaign-row { grid-template-columns: 34px minmax(0,1fr); gap: 9px; }
  .campaign-row-icon { width: 34px; height: 34px; }
  .campaign-row-actions { grid-column: 2; }
  .campaign-appointment-fields { grid-template-columns: 1fr; }
  .campaign-appointment-fields > small { grid-column: auto; }
  .appointment-manager { padding: 14px; }
  .appointment-form { grid-template-columns: 1fr; padding: 11px; }
  .appointment-message-field { grid-column: auto; }
  .appointment-row { grid-template-columns: 1fr; gap: 7px; }
  .appointment-actions { justify-content: flex-start; }
  .lottery-history-row > div:first-child, .poll-result-row > div:first-child { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}