/* Local overrides for the embedded OvoneAI 1.0.7 frontend. */
#app-sidebar .sidebar-nav a[href="/playground"] {
  display: none !important;
}

/* Keep input text clear of leading icons and trailing controls. */
#app .input.pl-6 { padding-left: 24px; }
#app .input.pl-7 { padding-left: 28px; }
#app .input.pl-8 { padding-left: 32px; }
#app .input.pl-9 { padding-left: 36px; }
#app .input.pl-10 { padding-left: 40px; }
#app .input.pl-11 { padding-left: 44px; }
#app .input.pl-12 { padding-left: 48px; }

#app .input.pr-4 { padding-right: 16px; }
#app .input.pr-8 { padding-right: 32px; }
#app .input.pr-10 { padding-right: 40px; }
#app .input.pr-11 { padding-right: 44px; }
#app .input.pr-12 { padding-right: 48px; }
#app .input.pr-16 { padding-right: 64px; }

html.dark {
  --ovo-background: #111214;
  --ovo-sidebar: #16171a;
  --ovo-surface: #1b1c20;
  --ovo-surface-muted: #27292e;
  --ovo-glass: rgba(27, 28, 32, 0.96);
  --ovo-border: #34363d;
  --ovo-input-border: #454850;
  --ovo-text: #f4f4f5;
  --ovo-muted: #b6b8bf;
  --ovo-accent: #e4e5e9;
  --ovo-on-accent: #17181c;
  --ovo-accent-hover: #ffffff;
  --ovo-accent-soft: #30323a;
  --ovo-focus: #c1d4fd;
  --ovo-ring: rgba(193, 212, 253, 0.35);
  --ovo-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  --ovone-code-background: #121317;
  --ovone-radius-surface: 8px;
  color-scheme: dark;
  background: var(--ovo-background);
}

html.dark body,
html.dark .ovo-app-main {
  background: var(--ovo-background);
  color: var(--ovo-text);
}

html.dark #app-sidebar {
  background: var(--ovo-sidebar);
  border-color: var(--ovo-border);
}

html.dark #app-sidebar .sidebar-link {
  color: var(--ovo-muted);
  transition: none;
}

html.dark #app-sidebar .sidebar-link-active,
html.dark #app-sidebar .sidebar-link-active:hover {
  background: var(--ovo-surface-muted);
  color: var(--ovo-text);
  box-shadow: inset 0 0 0 1px var(--ovo-input-border);
}

html.dark #app-sidebar .sidebar-link:not(.sidebar-link-active):hover {
  background: #23252a;
  color: var(--ovo-text);
}

html.dark #app-sidebar .ovone-sidebar-cta {
  background: var(--ovo-accent);
  color: var(--ovo-on-accent);
}

html.dark #app-sidebar .ovone-sidebar-cta:hover {
  background: var(--ovo-accent-hover);
}

html.dark :is(.ovo-header, .card, .stat-card, .glass-card, .card-glass,
  .table-container, .modal-content, .dialog-container, .dropdown,
  .select-dropdown-portal, .date-picker-dropdown, .date-picker-popup,
  .ovone-locale-panel, .toast, .driver-popover) {
  background: var(--ovo-surface);
  border-color: var(--ovo-border);
  color: var(--ovo-text);
}

html.dark #app :is(.input, .select-trigger, .date-picker-trigger) {
  background: var(--ovo-surface-muted);
  color: var(--ovo-text);
  border-color: var(--ovo-input-border);
}

html.dark #app .input:disabled,
html.dark #app .select-trigger-disabled {
  background: var(--ovo-surface);
  color: var(--ovo-muted);
}

html.dark :is(.input, textarea, .select-search-input)::placeholder {
  color: var(--ovo-muted);
  opacity: 1;
}

html.dark #app .input-error,
html.dark #app .select-trigger-error {
  border-color: #f87171;
}

html.dark :is(.input-error-text, .playground-error, .playground-message-failure) {
  color: #fca5a5;
}

html.dark .btn-primary {
  background: var(--ovo-accent);
  color: var(--ovo-on-accent);
}

html.dark .btn-primary:hover:not(:disabled) {
  background: var(--ovo-accent-hover);
}

html.dark .btn-secondary {
  background: var(--ovo-surface-muted);
  border-color: var(--ovo-input-border);
  color: var(--ovo-text);
}

html.dark .btn-secondary:hover:not(:disabled) {
  background: #32343b;
}

html.dark :is(.table th, .select-option-group) {
  background: var(--ovo-surface-muted);
  color: var(--ovo-muted);
}

html.dark .table td {
  border-color: var(--ovo-border);
  color: var(--ovo-text);
}

html.dark :is(.table tbody tr:hover, .select-option:hover,
  .select-option-selected, .select-option-focused) {
  background: var(--ovo-surface-muted);
  color: var(--ovo-text);
}

html.dark .empty-state-icon {
  color: #9da0a9;
}

html.dark .driver-popover :is(.driver-popover-title, .driver-popover-description) {
  color: var(--ovo-text);
  text-shadow: none;
}

html.dark .driver-popover :is(.driver-popover-progress-text, .driver-popover-close-btn) {
  color: var(--ovo-muted);
}

html.dark .driver-popover :is(.driver-popover-next-btn, .driver-popover-prev-btn) {
  background: var(--ovo-surface-muted);
  border-color: var(--ovo-input-border);
  color: var(--ovo-text);
  text-shadow: none;
}

html.dark .playground-composer {
  background: var(--ovo-surface-muted);
  border-color: var(--ovo-input-border);
}

html.dark .playground-history {
  background: var(--ovo-sidebar);
}

html.dark .playground-composer:focus-within {
  border-color: var(--ovo-focus);
  box-shadow: 0 0 0 2px var(--ovo-ring);
}

html.dark #app :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ovo-focus);
  outline-offset: 3px;
}

#app-sidebar .ovone-sidebar-cta:focus-visible {
  outline: 2px solid var(--ovo-focus) !important;
  outline-offset: 3px !important;
}

#app .ovo-redeem-purchase {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

#app .ovo-redeem-purchase-link {
  color: var(--ovo-text, #27272a);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#app .ovo-redeem-purchase-link:hover {
  text-decoration-thickness: 2px;
}

#app .ovo-native-recharge-layout {
  height: auto !important;
  min-height: 0;
}

#app .ovo-native-recharge-layout > .card {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app .ovo-native-recharge-layout > .card > div:has(> .markdown-page-content) {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}

#app .ovo-native-recharge-layout :is(.toc-sidebar, .toc-toggle-btn) {
  display: none !important;
}

#app .ovo-native-recharge-layout .markdown-page-content {
  height: auto !important;
  min-height: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow: visible !important;
}

#app .ovo-recharge-shell {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
}

#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-heading,
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-toolbar,
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-title,
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-price,
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-error-actions,
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-footer {
  display: flex;
  align-items: center;
}

#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-heading {
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0 24px;
  border-bottom: 1px solid var(--ovo-border, #e4e4e7);
}

#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-heading h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-heading p { margin: 8px 0 0; color: var(--ovo-muted, #71717a); font-size: 13px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-toolbar { justify-content: space-between; gap: 16px; margin: 22px 0 14px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-tabs { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; padding: 3px; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 9px; background: var(--ovo-surface-muted, #f5f5f5); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-tab { min-height: 34px; padding: 6px 13px; border: 0; border-radius: 6px; background: transparent; color: var(--ovo-muted, #71717a); white-space: nowrap; cursor: pointer; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-tab[aria-selected="true"] { background: var(--ovo-surface, #fff); color: var(--ovo-text, #27272a); box-shadow: 0 1px 3px rgba(0,0,0,.09); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 13px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; line-height: 20px; text-decoration: none; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-button:focus-visible, #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-tab:focus-visible, #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-text-link:focus-visible, #app .ovo-redeem-purchase-link:focus-visible { outline: 2px solid var(--ovo-focus, #2563eb); outline-offset: 3px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-button:disabled { opacity: .5; cursor: not-allowed; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-primary { background: var(--ovo-text, #27272a); color: var(--ovo-surface, #fff); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-primary:hover:not(:disabled) { background: #444; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-secondary { border-color: var(--ovo-border, #e4e4e7); background: var(--ovo-surface, #fff); color: var(--ovo-text, #27272a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-secondary:hover { background: var(--ovo-surface-muted, #f5f5f5); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-status { min-height: 20px; margin: 0 0 12px; color: var(--ovo-muted, #71717a); font-size: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-status[data-tone="warning"] { color: #94640a; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-status[data-tone="error"] { color: #b33b42; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 8px; background: var(--ovo-surface, #fff); cursor: pointer; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product:hover { border-color: var(--ovo-muted, #a1a1aa); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-preview { display: block; width: 100%; padding: 9px 9px 0; border: 0; background: transparent; cursor: pointer; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-preview:focus-visible { outline: 2px solid var(--ovo-focus, #2563eb); outline-offset: -3px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-media { position: relative; aspect-ratio: 1.9; max-height: 110px; overflow: hidden; border-radius: 6px; background: var(--ovo-surface-muted, #f5f5f5); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-image-fallback { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ovo-muted, #71717a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-image-fallback strong { max-width: 88%; text-align: center; color: var(--ovo-text, #27272a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 12px; min-width: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-title { justify-content: space-between; align-items: flex-start; gap: 8px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-width: 0; min-height: 40px; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-stock { flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: color-mix(in srgb, #238255 12%, transparent); color: #217650; font-size: 11px; white-space: nowrap; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-stock[data-available="false"] { background: color-mix(in srgb, #b33b42 10%, transparent); color: #b33b42; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-type { margin: 0; color: var(--ovo-muted, #71717a); font-size: 12px; line-height: 1.55; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-price { gap: 9px; min-height: 32px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-price { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-price del { color: var(--ovo-muted, #71717a); font-size: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-card-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-top: auto; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-body > .orc-button { width: 100%; min-height: 34px; border-radius: 6px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-details { margin-top: -2px; border-top: 1px solid var(--ovo-border, #e4e4e7); padding-top: 10px; color: var(--ovo-muted, #71717a); font-size: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-details summary { cursor: pointer; color: var(--ovo-text, #27272a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-description { white-space: pre-line; margin-top: 7px; line-height: 1.55; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-footer { gap: 14px; flex-wrap: wrap; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ovo-border, #e4e4e7); color: var(--ovo-muted, #71717a); font-size: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-footer p { flex: 1 1 360px; margin: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-text-link { color: var(--ovo-text, #27272a); text-decoration: underline; text-underline-offset: 3px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-empty { grid-column: 1 / -1; padding: 50px 20px; border: 1px dashed var(--ovo-border, #d4d4d8); border-radius: 10px; text-align: center; color: var(--ovo-muted, #71717a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-empty h2 { margin: 0 0 6px; color: var(--ovo-text, #27272a); font-size: 16px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-empty p { margin: 0 0 16px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-error-actions { justify-content: center; gap: 8px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-skeleton { min-height: 248px; padding: 12px; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 12px; background: var(--ovo-surface, #fff); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-skeleton div { height: 52%; border-radius: 7px; background: var(--ovo-surface-muted, #f5f5f5); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-skeleton span { display: block; width: 72%; height: 13px; margin-top: 18px; border-radius: 4px; background: var(--ovo-surface-muted, #f5f5f5); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-skeleton span + span { width: 48%; margin-top: 10px; }

html.dark #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product,
html.dark #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-secondary,
html.dark #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-tab[aria-selected="true"],
html.dark #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-skeleton { box-shadow: none; }

#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-dialog { width: min(760px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 16px; background: var(--ovo-surface, #fff); color: var(--ovo-text, #27272a); box-shadow: 0 20px 70px rgba(0,0,0,.2); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-dialog[open] { animation: orc-dialog-enter .18s ease-out; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-dialog::backdrop { background: rgba(14, 15, 18, .48); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ovo-border, #e4e4e7); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-header h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-close { min-width: 58px; flex: 0 0 auto; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 24px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.6; align-self: start; min-width: 0; max-height: 240px; overflow: hidden; border-radius: 10px; background: var(--ovo-surface-muted, #f5f5f5); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-summary h3 { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-summary .orc-price { font-size: 28px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-checkout { width: 100%; margin-top: auto; padding-top: 4px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-checkout > .orc-button { width: 100%; min-height: 40px; font-size: 13px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-checkout-note { margin: 9px 0 0; color: var(--ovo-muted, #71717a); font-size: 12px; line-height: 1.55; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-description { grid-column: 1 / -1; min-width: 0; padding-top: 20px; border-top: 1px solid var(--ovo-border, #e4e4e7); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-description h3 { margin: 0; font-size: 14px; font-weight: 600; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-description .orc-description { margin-top: 10px; white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; line-height: 1.8; color: var(--ovo-muted, #71717a); }
html:has(.orc-product-dialog[open]) { overflow: hidden; }
@keyframes orc-dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1200px) {
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-heading .orc-button { width: 100%; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-toolbar { align-items: stretch; flex-direction: column; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-toolbar .orc-button { align-self: flex-end; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-grid { gap: 10px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-body { gap: 8px; padding: 10px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-type { font-size: 11px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-price { font-size: 18px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-stock { padding: 2px 5px; font-size: 10px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-product-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-header { padding: 12px 16px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-content { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-media { width: 100%; max-height: 180px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-summary h3 { font-size: 18px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-dialog-description { padding-top: 18px; }
}

@media (max-width: 350px) {
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-button { transition: none; }
}

#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell :is(.orc-button, .orc-tab, .orc-text-link, .ovo-redeem-purchase-link):focus-visible {
  outline: 2px solid var(--ovo-focus, #2563eb);
  outline-offset: 3px;
}

#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-toolbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-checkout-form { display: flex; flex-direction: column; gap: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-field label { color: var(--ovo-text, #27272a); font-size: 12px; font-weight: 500; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-field :is(input,select) { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ovo-border, #d4d4d8); border-radius: 7px; background: var(--ovo-surface, #fff); color: var(--ovo-text, #27272a); font: inherit; font-size: 13px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-field input::placeholder { color: var(--ovo-muted, #71717a); opacity: 1; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-field :is(input,select):disabled { opacity: .6; cursor: not-allowed; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-input-hint { margin: -7px 0 0; color: var(--ovo-muted, #71717a); font-size: 11px; line-height: 1.5; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-details { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; font-size: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-details:empty { display: none; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-details dt { color: var(--ovo-muted, #71717a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-details dd { margin: 0; font-variant-numeric: tabular-nums; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-total { padding-top: 9px; border-top: 1px solid var(--ovo-border, #e4e4e7); font-size: 14px; font-weight: 600; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-total dt { color: var(--ovo-text, #27272a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-quote-status { margin: 0; color: var(--ovo-muted, #71717a); font-size: 12px; line-height: 1.6; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-error { margin: 0; color: #b33b42; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-checkout-form > .orc-button { width: 100%; min-height: 42px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-checkout-help { display: flex; justify-content: flex-end; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-text-button { padding: 4px 0; border: 0; background: transparent; color: var(--ovo-text, #27272a); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-panel { display: flex; flex-direction: column; gap: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-panel p { margin: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-status { margin: 0; width: fit-content; padding: 4px 8px; border-radius: 5px; color: var(--ovo-text, #27272a); background: var(--ovo-surface-muted, #f5f5f5); font-size: 12px; line-height: 18px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-status[data-status="paid"] { color: #217650; background: color-mix(in srgb, #238255 12%, transparent); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-status[data-status="failed"], #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-status[data-status="uncertain"] { color: #b33b42; background: color-mix(in srgb, #b33b42 10%, transparent); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-id { color: var(--ovo-muted, #71717a); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-summary { font-size: 13px; line-height: 1.6; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-amount { font-size: 24px; font-variant-numeric: tabular-nums; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-code { align-self: center; width: 204px; max-width: 100%; min-height: 204px; padding: 6px; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 8px; background: #fff; color: #71717a; font-size: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-code img { display: block; width: 100%; height: auto; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-dialog { width: min(680px, calc(100vw - 24px)); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-dialog-content { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-dialog-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-dialog-summary p { margin: 0; font-size: 12px; color: var(--ovo-muted, #71717a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-frame { width: 100%; height: min(540px, calc(100dvh - 250px)); min-height: 240px; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 6px; background: #fff; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-fallback { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-payment-fallback p { margin: 0; font-size: 12px; color: var(--ovo-muted, #71717a); }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-redemption-status { margin: 0; font-size: 12px; line-height: 1.65; color: #217650; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-redemption-status[data-tone="error"] { color: #b33b42; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-warning { margin: 0 0 12px; padding: 12px; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 8px; background: var(--ovo-surface-muted, #f5f5f5); color: var(--ovo-text, #27272a); font-size: 12px; line-height: 1.7; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-cards { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--ovo-border, #d4d4d8); border-radius: 7px; background: var(--ovo-surface-muted, #f5f5f5); color: var(--ovo-text, #27272a); font-family: ui-monospace,monospace; font-size: 12px; line-height: 1.6; resize: vertical; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-order-instructions { white-space: pre-line; overflow-wrap: anywhere; font-size: 12px; line-height: 1.7; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-orders-content { padding: 20px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-orders-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-orders-list { display: flex; flex-direction: column; gap: 12px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-order { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px; border: 1px solid var(--ovo-border, #e4e4e7); border-radius: 10px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-main { min-width: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-main h3 { margin: 0 0 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-main p { margin: 0 0 5px; color: var(--ovo-muted, #71717a); font-size: 11px; line-height: 1.5; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-side { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 7px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-side strong { font-variant-numeric: tabular-nums; }
html.dark #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell :is(.orc-form-error,.orc-stock[data-available="false"]) { color: #f28b91; }
html.dark #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell :is(.orc-order-status[data-status="paid"],.orc-stock[data-available="true"]) { color: #86c9a6; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell :is(input,select,textarea,.orc-text-button):focus-visible { outline: 2px solid var(--ovo-focus, #2563eb); outline-offset: 3px; }

@media (max-width: 600px) {
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-toolbar-actions { align-self: stretch; justify-content: space-between; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-form-field :is(input,select) { font-size: 16px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-orders-content { padding: 14px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-order { gap: 10px; padding: 12px; }
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-history-side { max-width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within,
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-dialog { width: min(420px, calc(100vw - 24px)); border-radius: 8px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-image-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-image { display: block; width: 180px; max-width: 100%; height: 64px; object-fit: contain; object-position: left center; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-form .orc-form-field { min-width: 0; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-form :is(.orc-quote-status, .orc-form-error) { margin: 0; overflow-wrap: anywhere; }
#app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-form [hidden] { display: none !important; }
@media (max-width: 600px) {
  #app :is(main, main[data-ovo-wallet="/custom/online-recharge"]) .ovo-recharge-shell .orc-verification-form { padding: 16px; }
}