/* YTV UI: local adjustments on top of ytv_ui.css (keep the current white logo on a dark field) */
.y-sidebar .y-brand.y-brand-dark { background: #0B1120; border-bottom: 0; }
.y-logo-img img { display: block; max-height: 24px; width: auto; }
.y-mlogo-btn { display: none; }
@media (max-width: 900px) {
  .y-topbar { background: #0B1120; border-bottom: 0; backdrop-filter: none; }
  .y-mlogo-btn { display: grid; color: #fff; }
  .y-mlogo-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
  .y-topbar .y-balance-pill { border-color: rgba(255,255,255,.25); }
}
/* old Bootstrap content inside the new shell: no double gutters */
body.ytv-ui .y-content > .row { margin-left: 0; margin-right: 0; }
body.ytv-ui .y-content .container { max-width: 100%; padding: 0; }
body.ytv-ui .y-menu { right: 16px; }

/* old theme link colours must not win inside the new shell */
body.ytv-ui .y-balance-pill a, body.ytv-ui .y-balance-pill a:hover { color: #fff; }
body.ytv-ui .y-nav a { color: var(--n-700); }
body.ytv-ui .y-nav a.y-active { color: var(--brand-700); }
body.ytv-ui .y-nav a.y-cta, body.ytv-ui .y-nav a.y-cta:hover { color: #fff; }

/* ===================== Dark theme (html[data-theme="dark"]) ===================== */
html[data-theme="dark"] {
  --n-0:#161B27; --n-25:#1A2030; --n-50:#1E2535; --n-100:#252D3F; --n-200:#2C3547; --n-300:#3A4459;
  --n-400:#6E7786; --n-500:#959DAA; --n-600:#B4BAC4; --n-700:#CDD2D9; --n-800:#E1E4E8; --n-900:#F1F3F5;
  --brand-50:#0F2A27; --brand-100:#123A35; --brand-200:#1A5048;
  --success-50:#0E2A1D; --success-600:#47CD89; --warning-50:#2E2410; --warning-600:#F5B547;
  --danger-50:#2F1513; --danger-600:#F97066; --info-50:#142036; --info-600:#7CA9F9;
  --bg:#0B1120; --surface:#161B27; --surface-2:#1A2030; --border:#2C3547; --border-strong:#3A4459;
  --text:#F1F3F5; --text-2:#B4BAC4; --text-3:#959DAA;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 3px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.3); --sh-3:0 8px 28px rgba(0,0,0,.55);
  color-scheme: dark;
}
html[data-theme="dark"] body.ytv-ui { background: var(--bg) !important; color: var(--text); }
html[data-theme="dark"] body.ytv-ui a { color: #5EEAD4; }
html[data-theme="dark"] body.ytv-ui .y-nav a { color: var(--n-700); }
html[data-theme="dark"] body.ytv-ui .y-nav a.y-active { color: #99F6E4; background: var(--brand-50); }
html[data-theme="dark"] .y-topbar { background: rgba(22,27,39,.92); }
html[data-theme="dark"] .y-sidebar .y-brand.y-brand-dark { background: #070B16; }
/* old Bootstrap/Tabler content inside the shell */
html[data-theme="dark"] body.ytv-ui .card, html[data-theme="dark"] body.ytv-ui .card-header, html[data-theme="dark"] body.ytv-ui .card-footer,
html[data-theme="dark"] body.ytv-ui .modal-content, html[data-theme="dark"] body.ytv-ui .dropdown-menu, html[data-theme="dark"] body.ytv-ui .list-group-item,
html[data-theme="dark"] body.ytv-ui .bg-white, html[data-theme="dark"] body.ytv-ui .bg-light, html[data-theme="dark"] body.ytv-ui .page-header { background-color: var(--surface) !important; color: var(--text); border-color: var(--border) !important; }
html[data-theme="dark"] body.ytv-ui .table, html[data-theme="dark"] body.ytv-ui .table td, html[data-theme="dark"] body.ytv-ui .table th { color: var(--text); border-color: var(--border) !important; background-color: transparent; }
html[data-theme="dark"] body.ytv-ui .table-hover tbody tr:hover { background-color: var(--n-50); }
html[data-theme="dark"] body.ytv-ui .form-control, html[data-theme="dark"] body.ytv-ui .custom-select, html[data-theme="dark"] body.ytv-ui select, html[data-theme="dark"] body.ytv-ui textarea, html[data-theme="dark"] body.ytv-ui input {
  background-color: var(--n-25); color: var(--text); border-color: var(--border-strong); }
html[data-theme="dark"] body.ytv-ui .form-control:disabled, html[data-theme="dark"] body.ytv-ui .form-control[readonly] { background-color: var(--n-50); color: var(--text-2); }
html[data-theme="dark"] body.ytv-ui .text-muted, html[data-theme="dark"] body.ytv-ui .small.text-muted { color: var(--text-3) !important; }
html[data-theme="dark"] body.ytv-ui h1, html[data-theme="dark"] body.ytv-ui h2, html[data-theme="dark"] body.ytv-ui h3, html[data-theme="dark"] body.ytv-ui h4, html[data-theme="dark"] body.ytv-ui .page-title, html[data-theme="dark"] body.ytv-ui .card-title { color: var(--text); }
html[data-theme="dark"] body.ytv-ui .btn-outline-secondary { color: var(--text-2); border-color: var(--border-strong); }
html[data-theme="dark"] body.ytv-ui .alert-info { background: var(--info-50); color: var(--info-600); border-color: transparent; }
html[data-theme="dark"] body.ytv-ui .alert-success { background: var(--success-50); color: var(--success-600); border-color: transparent; }
html[data-theme="dark"] body.ytv-ui .alert-danger { background: var(--danger-50); color: var(--danger-600); border-color: transparent; }
html[data-theme="dark"] body.ytv-ui .alert-warning { background: var(--warning-50); color: var(--warning-600); border-color: transparent; }
html[data-theme="dark"] body.ytv-ui .progress { background-color: var(--n-100); }
html[data-theme="dark"] body.ytv-ui hr { border-color: var(--border); }
/* theme toggle */
.y-theme-toggle .y-ic-sun { display: none; }
html[data-theme="dark"] .y-theme-toggle .y-ic-sun { display: block; }
html[data-theme="dark"] .y-theme-toggle .y-ic-moon { display: none; }
@media (max-width: 900px) { .y-theme-toggle { color: #fff; } }

/* ===================== More modern accents ===================== */
:root { --grad-brand: linear-gradient(135deg, #0D9488 0%, #0F766E 55%, #115E59 100%);
  --violet-50:#F4F0FF; --violet-600:#6D3FE0; --teal-50:#EAFBF7; --teal-600:#0E9384; --amber-50:#FFF7E6; --amber-600:#C2410C; --sky-50:#EAF5FF; --sky-600:#0369A1; }
html[data-theme="dark"] { --violet-50:#221A3A; --violet-600:#B39BFF; --teal-50:#0F2A27; --teal-600:#4FD1C0; --amber-50:#2E2410; --amber-600:#F7B26A; --sky-50:#122638; --sky-600:#7CC4F7; }
body.ytv-ui .y-btn-primary, body.ytv-ui .y-nav a.y-cta, body.ytv-ui .y-balance-pill a { background: var(--grad-brand); }
body.ytv-ui .y-btn-primary:hover, body.ytv-ui .y-nav a.y-cta:hover, body.ytv-ui .y-balance-pill a:hover { filter: brightness(1.08); }
body.ytv-ui .y-nav a.y-cta { box-shadow: 0 6px 16px rgba(15,118,110,.28); }
body.ytv-ui .y-nav a { position: relative; }
body.ytv-ui .y-nav a.y-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand-700); }
html[data-theme="dark"] body.ytv-ui .y-nav a.y-active::before { background: #5EEAD4; }
body.ytv-ui .y-avatar { background: linear-gradient(135deg, #CCFBF1, #99F6E4); }
/* colourful icon tiles for stats and feature cards (used by redesigned pages) */
.y-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.y-tile.y-violet { background: var(--violet-50); color: var(--violet-600); }
.y-tile.y-teal { background: var(--teal-50); color: var(--teal-600); }
.y-tile.y-amber { background: var(--amber-50); color: var(--amber-600); }
.y-tile.y-sky { background: var(--sky-50); color: var(--sky-600); }
.y-tile.y-brand { background: var(--brand-50); color: var(--brand-700); }
.y-hero { background: radial-gradient(1200px 300px at 0% 0%, rgba(154,36,49,.10), transparent 60%), radial-gradient(800px 260px at 100% 0%, rgba(109,63,224,.10), transparent 60%), var(--surface); }

body.ytv-ui { background: var(--bg) !important; }
@media (max-width: 900px) {
  body.ytv-ui .y-topbar .y-theme-toggle { display: none; }
  body.ytv-ui .y-topbar .y-mlogo-btn { color: #fff; }
  body.ytv-ui .y-topbar { gap: 8px; }
  body.ytv-ui .y-topbar .y-mlogo img { max-height: 20px; }
}
@media (max-width: 900px) { body.ytv-ui .y-balance-pill { flex: none; } body.ytv-ui .y-balance-pill a { flex: none; padding: 0 10px; height: 36px; } body.ytv-ui .y-balance-pill .y-amt { padding: 4px 10px; } body.ytv-ui .y-mlogo { min-width: 0; overflow: hidden; } }

/* buttons: old theme colours must never win */
body.ytv-ui .y-btn-primary, body.ytv-ui a.y-btn-primary, body.ytv-ui .y-btn-primary:hover, body.ytv-ui a.y-btn-primary:hover { color: #fff !important; }
body.ytv-ui .y-btn-primary[disabled] { opacity: .45; color: #fff !important; }
body.ytv-ui a.y-btn-secondary, body.ytv-ui .y-btn-secondary { color: var(--n-800) !important; }
body.ytv-ui a.y-btn-ghost, body.ytv-ui .y-btn-ghost { color: var(--n-700) !important; }
/* New Order on medium screens (sidebar + 2 columns) */
@media (min-width: 901px) and (max-width: 1240px) { .y-order-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; } }
.y-link-detect { flex-wrap: wrap; }
.y-link-detect .y-btn { margin-left: auto; }
.y-svc .y-name { word-break: break-word; }

/* Dark: contrast fixes found in phone click-through (2026-11-08) */
html[data-theme="dark"] body.ytv-ui .y-chip[aria-pressed="true"], html[data-theme="dark"] body.ytv-ui .y-chip.y-on { background: var(--n-900); border-color: var(--n-900); color: #111418 !important; }
html[data-theme="dark"] body.ytv-ui .y-avatar { background: #134E4A !important; color: #CCFBF1 !important; }
body.ytv-ui .y-bottomnav button { font-size: 11px !important; font-weight: 600 !important; color: var(--n-500) !important; font-family: inherit; }
html[data-theme="dark"] body.ytv-ui .y-topbar { background: #161B27 !important; }
html[data-theme="dark"] body.ytv-ui .y-step .y-n, html[data-theme="dark"] body.ytv-ui .y-qty-presets button.y-on { color: #111418 !important; }
html[data-theme="dark"] body.ytv-ui .y-toast, html[data-theme="dark"] body.ytv-ui .y-code { background: #232832; color: #F1F3F5; }

/* ===================== My orders (stage 3) ===================== */
/* Fixed progress + actions columns: every progress bar starts at the same x (singles and bundle rows alike). */
body.ytv-ui .y-order-card { grid-template-columns: 40px minmax(0, 1fr) 260px 290px; }
body.ytv-ui .y-bundle .y-order-card { padding-left: 20px; }
body.ytv-ui .y-bundle .y-order-card .y-oc-ic { margin-left: 8px; }
body.ytv-ui .y-oc-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--n-50); color: var(--text-2); }
body.ytv-ui .y-oc-meta { margin-top: 2px; }
body.ytv-ui .y-order-card a.y-lnk { color: var(--text-2); text-decoration: none; }
body.ytv-ui .y-order-card a.y-lnk:hover span { text-decoration: underline; }
body.ytv-ui .y-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ytv-ui .y-progress.y-muted > span { background: var(--n-300); }
body.ytv-ui .y-orders .y-chip, body.ytv-ui a.y-chip { text-decoration: none; }
body.ytv-ui .y-bundle-head { border-left: 3px solid var(--brand-600); }
body.ytv-ui .y-bundle .y-order-card { border-left: 3px solid var(--brand-100); }
@media (min-width: 901px) and (max-width: 1240px) { body.ytv-ui .y-order-card { grid-template-columns: 40px minmax(0, 1fr) 200px 270px; } }
@media (max-width: 900px) {
  body.ytv-ui .y-order-card { grid-template-columns: 40px minmax(0, 1fr); }
  body.ytv-ui .y-bundle .y-order-card { padding-left: 16px; }
  body.ytv-ui .y-bundle .y-order-card .y-oc-ic { margin-left: 4px; }
}
html[data-theme="dark"] body.ytv-ui .y-oc-ic { background: #232832; }
html[data-theme="dark"] body.ytv-ui .y-bundle .y-order-card { border-left-color: #3A1C22; }
body.ytv-ui a.y-chip, html[data-theme="dark"] body.ytv-ui a.y-chip { color: var(--n-700); }
body.ytv-ui a.y-chip.y-on, html[data-theme="dark"] body.ytv-ui a.y-chip.y-on { color: #fff; }
html[data-theme="dark"] body.ytv-ui a.y-chip.y-on { color: #111418 !important; }
body.ytv-ui .y-btn-danger { color: var(--danger-600) !important; }
body.ytv-ui .y-modal .y-btn-danger { background: var(--danger-600); border-color: var(--danger-600); color: #fff !important; }
html[data-theme="dark"] body.ytv-ui .y-btn-danger { color: #F49A90 !important; border-color: #6B2A24; }
html[data-theme="dark"] body.ytv-ui .y-modal .y-btn-danger { color: #fff !important; }
body.ytv-ui .y-orders > .y-order-card { border-left: 3px solid transparent; }
html[data-theme="dark"] body.ytv-ui .y-btn-secondary { background: #1C2232; border-color: #333C50; }
html[data-theme="dark"] body.ytv-ui .y-btn-secondary:hover { background: #252D3F; }
html[data-theme="dark"] body.ytv-ui .y-btn-secondary[disabled] { opacity: .55; }
@media (max-width: 900px) { body.ytv-ui .y-hide-m { display: none !important; } }

/* ===================== Dashboard (stage 3b) ===================== */
body.ytv-ui .y-tile.y-tile-sm { width: 26px; height: 26px; border-radius: 8px; }
body.ytv-ui .y-stat .y-k { gap: 8px; }
body.ytv-ui .y-dash-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); margin-top: 16px; align-items: start; }
body.ytv-ui .y-order-card.y-compact { grid-template-columns: 40px minmax(0, 1fr) 200px 110px; }
body.ytv-ui .y-again a.y-row { color: inherit; text-decoration: none; padding: 8px 0; gap: 10px; }
body.ytv-ui .y-again a.y-row + a.y-row { border-top: 1px solid var(--border); }
body.ytv-ui a.y-pop { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
body.ytv-ui a.y-pop:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
body.ytv-ui .y-step-card.y-done { opacity: .7; }
body.ytv-ui .y-dash-stats .y-card { border-top: 3px solid transparent; }
body.ytv-ui .y-dash-stats .y-card:nth-child(1) { border-top-color: var(--brand-600); }
body.ytv-ui .y-dash-stats .y-card:nth-child(2) { border-top-color: var(--sky-600); }
body.ytv-ui .y-dash-stats .y-card:nth-child(3) { border-top-color: var(--success-500); }
body.ytv-ui .y-dash-stats .y-card:nth-child(4) { border-top-color: var(--violet-600); }
@media (max-width: 1240px) { body.ytv-ui .y-dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) and (max-width: 1240px) { body.ytv-ui .y-order-card.y-compact { grid-template-columns: 40px minmax(0, 1fr) 220px 110px; } }
@media (max-width: 900px) { body.ytv-ui .y-order-card.y-compact { grid-template-columns: 40px minmax(0, 1fr); } }
body.ytv-ui .y-bottomnav a { color: var(--n-500) !important; }
body.ytv-ui .y-bottomnav a.y-on { color: var(--brand-700) !important; }
html[data-theme="dark"] body.ytv-ui .y-bottomnav a.y-on { color: #5EEAD4 !important; }
body.ytv-ui .y-bottomnav a .y-plus { color: #fff; }

/* ===================== Services & prices (stage 4) ===================== */
body.ytv-ui .y-svc-search { flex: 1 1 280px; min-width: 220px; }
body.ytv-ui .y-svc-filters .y-scroll-x { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
body.ytv-ui .y-chip.y-chk { gap: 8px; }
body.ytv-ui .y-chip.y-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-700); }
body.ytv-ui .y-chip.y-chk.y-on input { accent-color: #fff; }
body.ytv-ui .y-chip .y-pf { width: 16px; height: 16px; }
body.ytv-ui .y-svc-card { overflow-x: auto; }
body.ytv-ui .y-svc-table td { vertical-align: top; }
body.ytv-ui .y-svc-table td.y-svc-name { width: 46%; }
body.ytv-ui .y-svc-table td.y-svc-act { text-align: right; width: 1%; white-space: nowrap; }
body.ytv-ui .y-svc-table .y-pf { flex: none; margin-top: 2px; }
body.ytv-ui .y-svc-table tr[hidden] { display: none; }
body.ytv-ui .y-svc-desc summary { cursor: pointer; color: var(--text-3); margin-top: 4px; }
body.ytv-ui .y-svc-desc p { margin: 6px 0 0; max-width: 560px; white-space: normal; }
html[data-theme="dark"] body.ytv-ui .y-table tr:hover td { background: #1C2232; }
html[data-theme="dark"] body.ytv-ui .y-table th { background: #161B27; }
@media (max-width: 900px) {
  body.ytv-ui .y-svc-table thead { display: none; }
  body.ytv-ui .y-svc-table, body.ytv-ui .y-svc-table tbody { display: block; }
  body.ytv-ui .y-svc-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  body.ytv-ui .y-svc-table tr[hidden] { display: none; }
  body.ytv-ui .y-svc-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 0; grid-column: 1 / -1; font-size: 14px; }
  body.ytv-ui .y-svc-table td::before { content: attr(data-l); color: var(--text-3); font-size: 13px; }
  body.ytv-ui .y-svc-table td.y-svc-name { width: auto; grid-column: 1; display: block; margin-bottom: 6px; }
  body.ytv-ui .y-svc-table td.y-svc-act { grid-column: 2; grid-row: 1; width: auto; }
  body.ytv-ui .y-svc-table td.y-svc-name::before, body.ytv-ui .y-svc-table td.y-svc-act::before { content: none; }
  body.ytv-ui .y-svc-filters .y-scroll-x { flex-basis: 100%; }
}
@media (min-width: 901px) { body.ytv-ui .y-svc-table td.y-num { white-space: nowrap; } body.ytv-ui .y-svc-table td:nth-child(4) { min-width: 110px; } }

/* ===================== Add funds (stage 4) — frame + skin for the unchanged payment form ===================== */
body.ytv-ui .y-funds-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { body.ytv-ui .y-funds-grid { grid-template-columns: minmax(0, 1fr); } }
body.ytv-ui .y-funds-form .add-funds-form-content .text-center img[alt="Stripe icon"] { width: 110px !important; opacity: .85; }
body.ytv-ui .y-funds-form .add-funds-form-content small { color: var(--text-3); font-size: 13px; }
body.ytv-ui .y-funds-form .form-group { margin: 16px 0 0; }
body.ytv-ui .y-funds-form label { font-weight: 600; font-size: 13px; color: var(--n-800); margin-bottom: 6px; }
body.ytv-ui .y-funds-form .form-control { height: 48px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: 18px; font-weight: 600; padding: 0 14px; box-shadow: none; }
body.ytv-ui .y-funds-form .form-control:focus { border-color: var(--brand-600); box-shadow: var(--focus); outline: none; }
body.ytv-ui .y-funds-form #credit_cards img { height: 22px; width: auto; border-radius: 4px; margin: 0 2px; }
body.ytv-ui .y-funds-form ul { padding-left: 18px; margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
body.ytv-ui .y-funds-form .custom-control-label { text-transform: none !important; font-size: 13px; color: var(--text-2); }
body.ytv-ui .y-funds-form .custom-control-label strong { font-weight: 500; }
body.ytv-ui .y-funds-form button[type=submit] { width: 100%; height: 52px; margin: 8px 0 0 !important; border: 0; border-radius: var(--r-md); background: var(--brand-700) !important; color: #fff !important; font-size: 16px; font-weight: 600; box-shadow: none; }
body.ytv-ui .y-funds-form button[type=submit]:hover { background: var(--brand-800) !important; }
body.ytv-ui .y-funds-bonus { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
body.ytv-ui .y-funds-bonus li { display: flex; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; }
body.ytv-ui .y-funds-bonus li.y-on { border-color: var(--success-600, #16A34A); background: rgba(22,163,74,.06); }
body.ytv-ui .y-funds-trust { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; font-size: 14px; color: var(--text-2); }
body.ytv-ui .y-funds-trust li { display: flex; gap: 10px; align-items: flex-start; }
body.ytv-ui .y-funds-trust .y-icon { flex: none; margin-top: 2px; color: var(--brand-700); }
html[data-theme="dark"] body.ytv-ui .y-funds-form .add-funds-form-content img[alt="Stripe icon"] { filter: invert(1) hue-rotate(180deg); }

/* ===================== Site look (youtubeviews.co.uk): Nunito headings, teal brand, navy dark ===================== */
body.ytv-ui h1, body.ytv-ui h2, body.ytv-ui h3, body.ytv-ui .y-page-head h1 { font-family: "Nunito", var(--font); font-weight: 800; letter-spacing: -.01em; }
body.ytv-ui h4 { font-family: "Nunito", var(--font); font-weight: 700; }
body.ytv-ui .y-stat .y-v { font-family: "Nunito", var(--font); font-weight: 800; }

/* ===================== Support (stage 4) ===================== */
body.ytv-ui .y-support { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: start; }
body.ytv-ui .y-tk-tabs { padding: 0 12px; margin: 8px 0 0; overflow-x: auto; }
body.ytv-ui .y-tk-tabs a { white-space: nowrap; font-size: 14px; }
body.ytv-ui .y-tk-items { list-style: none; margin: 0; padding: 6px; max-height: 640px; overflow-y: auto; }
body.ytv-ui .y-tk-items a { display: block; padding: 12px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
body.ytv-ui .y-tk-items a:hover { background: var(--n-50); }
body.ytv-ui .y-tk-items a.y-on { background: var(--brand-50); }
body.ytv-ui .y-tk-items li + li { border-top: 1px solid var(--border); }
body.ytv-ui .y-tk-items .y-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600); margin-right: 6px; vertical-align: middle; }
body.ytv-ui .y-tk-head { gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--border); }
body.ytv-ui .y-tk-back { display: none; }
body.ytv-ui .y-tk-msgs { padding: 20px; max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; }
body.ytv-ui .y-msg { word-wrap: break-word; overflow-wrap: anywhere; }
body.ytv-ui .y-msg.y-me { background: var(--brand-700); }
html[data-theme="dark"] body.ytv-ui .y-msg:not(.y-me) { background: var(--n-100); }
body.ytv-ui .y-tk-reply, body.ytv-ui .y-tk-closed { padding: 16px 20px 20px; border-top: 1px solid var(--border); }
body.ytv-ui .y-link { background: none; border: 0; padding: 0; color: var(--brand-700); font: inherit; cursor: pointer; text-decoration: underline; }
html[data-theme="dark"] body.ytv-ui .y-link { color: #5EEAD4; }
body.ytv-ui .y-modal.y-modal-lg { max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; }
body.ytv-ui .y-chk input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-700); }
body.ytv-ui .y-chip.y-chk.y-on input[type=radio] { accent-color: #fff; }
@media (max-width: 900px) {
  body.ytv-ui .y-support { grid-template-columns: minmax(0, 1fr); }
  body.ytv-ui .y-support:not(.y-has-ticket) .y-tk-thread { display: none; }
  body.ytv-ui .y-support.y-has-ticket .y-tk-list { display: none; }
  body.ytv-ui .y-tk-back { display: inline-flex; margin: -4px 0 0 -8px; }
  body.ytv-ui .y-tk-head { flex-wrap: wrap; }
  body.ytv-ui .y-tk-head .y-tk-back { flex-basis: 100%; justify-content: flex-start; }
  body.ytv-ui .y-tk-msgs { max-height: none; }
  body.ytv-ui .y-tk-items { max-height: none; }
}
body.ytv-ui .y-tk-subj { font-size: 17px; overflow-wrap: anywhere; }
body.ytv-ui .y-tk-tabs { scrollbar-width: none; }
body.ytv-ui .y-tk-tabs::-webkit-scrollbar { display: none; }
body.ytv-ui .y-tk-back .y-icon { transform: rotate(180deg); }

/* ===================== API (stage 4) ===================== */
body.ytv-ui .y-api-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
body.ytv-ui code { font-family: var(--mono); font-size: 13px; background: var(--n-100); padding: 1px 6px; border-radius: 6px; color: var(--text); }
body.ytv-ui .y-api-key { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
body.ytv-ui .y-api-key code { flex: 1 1 240px; min-width: 0; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); background: var(--surface-2); overflow-wrap: anywhere; letter-spacing: .02em; }
body.ytv-ui .y-api-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 12px; margin: 14px 0 0; font-size: 14px; }
body.ytv-ui .y-api-dl dt { color: var(--text-3); font-weight: 500; }
body.ytv-ui .y-api-dl dd { margin: 0; overflow-wrap: anywhere; }
body.ytv-ui .y-api-table td { vertical-align: top; }
body.ytv-ui .y-api-table td:first-child { white-space: nowrap; }
body.ytv-ui .y-api-resp { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-width: 360px; }
body.ytv-ui .y-api-code { position: relative; }
body.ytv-ui .y-api-code pre { margin: 0; background: #0B1120; color: #E2E8F0; border-radius: var(--r-md); padding: 16px; font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; }
body.ytv-ui .y-api-copycode { position: absolute; top: 10px; right: 10px; }
body.ytv-ui .y-tabs button[aria-selected] { font: inherit; font-weight: 600; }
@media (max-width: 900px) {
  body.ytv-ui .y-api-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  body.ytv-ui .y-api-dl { grid-template-columns: 1fr; gap: 2px; }
  body.ytv-ui .y-api-dl dd { margin-bottom: 10px; }
  body.ytv-ui .y-api-table thead { display: none; }
  body.ytv-ui .y-api-table, body.ytv-ui .y-api-table tbody, body.ytv-ui .y-api-table tr, body.ytv-ui .y-api-table td { display: block; }
  body.ytv-ui .y-api-table tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  body.ytv-ui .y-api-table td { border: 0; padding: 3px 0; }
  body.ytv-ui .y-api-table td::before { content: attr(data-l); display: block; color: var(--text-3); font-size: 12px; }
  body.ytv-ui .y-api-table td:first-child::before { content: none; }
  body.ytv-ui .y-api-resp { max-width: none; }
}

/* ===================== Dark navy sidebar in both themes (white logo like the site header) ===================== */
body.ytv-ui .y-sidebar { background: #0B1120; border-right: 1px solid #1A2133; }
body.ytv-ui .y-sidebar .y-brand, body.ytv-ui .y-sidebar .y-brand.y-brand-dark { background: transparent; border-bottom: 1px solid rgba(255,255,255,.07); }
body.ytv-ui .y-logo-img img { max-height: 20px; height: 20px; width: auto; }
body.ytv-ui .y-sidebar .y-nav-label { color: #64748B; }
body.ytv-ui .y-sidebar .y-nav a, html[data-theme="dark"] body.ytv-ui .y-sidebar .y-nav a { color: #CBD5E1; }
body.ytv-ui .y-sidebar .y-nav a .y-icon { color: #94A3B8; }
body.ytv-ui .y-sidebar .y-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
body.ytv-ui .y-sidebar .y-nav a.y-active, html[data-theme="dark"] body.ytv-ui .y-sidebar .y-nav a.y-active { background: rgba(20,184,166,.14); color: #5EEAD4; }
body.ytv-ui .y-sidebar .y-nav a.y-active .y-icon { color: #5EEAD4; }
body.ytv-ui .y-sidebar .y-nav a.y-active::before { background: #14B8A6; }
body.ytv-ui .y-sidebar .y-nav a .y-count { background: rgba(255,255,255,.1); color: #E2E8F0; }
body.ytv-ui .y-sidebar .y-nav a.y-cta, body.ytv-ui .y-sidebar .y-nav a.y-cta .y-icon { color: #fff; }
body.ytv-ui .y-sidebar .y-nav a.y-cta { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
body.ytv-ui .y-sidebar-foot { border-top: 1px solid rgba(255,255,255,.07); }
body.ytv-ui .y-sidebar-foot .y-muted { color: #94A3B8; }
body.ytv-ui .y-sidebar-foot a { color: #5EEAD4; }
html[data-theme="dark"] body.ytv-ui .y-sidebar { background: #080D19; }

/* ===================== Sign in / Sign up (stage 4) ===================== */
body.ytv-auth-page { background: var(--surface) !important; }
body.ytv-auth-page .y-auth { min-height: 100vh; }
body.ytv-auth-page .y-auth-side { padding: 40px 48px; }
body.ytv-auth-page .y-auth-logo img { height: 20px; width: auto; display: block; }
body.ytv-auth-page .y-auth-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; padding: 6px 14px; border: 1px solid rgba(94,234,212,.35); border-radius: 999px; background: rgba(20,184,166,.12); color: #CCFBF1; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body.ytv-auth-page .y-auth-pill span { width: 7px; height: 7px; border-radius: 50%; background: #5EEAD4; }
body.ytv-auth-page .y-auth-side h1 { margin-top: 18px; font-size: 40px; color: #fff; }
body.ytv-auth-page .y-auth-side li .y-icon { color: #5EEAD4; flex: none; margin-top: 3px; }
body.ytv-auth-page .y-auth-side .y-stats { margin-top: 40px; }
body.ytv-auth-page .y-auth-side .y-stats b { font-family: "Nunito", var(--font); font-weight: 800; color: #fff; }
body.ytv-auth-page .y-auth-form h2 { font-size: 28px; }
body.ytv-auth-page .y-auth-form a { color: var(--brand-700); }
html[data-theme="dark"] body.ytv-auth-page .y-auth-form a { color: #5EEAD4; }
body.ytv-auth-page .form-group { margin: 0 0 14px; }
body.ytv-auth-page .form-control { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: 16px; }
body.ytv-auth-page label[for="ytv-otp"] { font-weight: 600; font-size: 13px; display: block; margin-bottom: 6px; }
body.ytv-ui .y-pass { position: relative; }
body.ytv-ui .y-pass .y-input { padding-right: 48px; }
body.ytv-ui .y-pass-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; border: 0; background: none; color: var(--text-3); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
body.ytv-ui .y-pass-toggle:hover, body.ytv-ui .y-pass-toggle[aria-pressed="true"] { color: var(--brand-700); background: var(--n-50); }
body.ytv-ui .y-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
body.ytv-ui .y-strength i { height: 4px; border-radius: 4px; background: var(--n-200); }
body.ytv-ui .y-strength i.y-weak { background: var(--danger-500); }
body.ytv-ui .y-strength i.y-ok { background: var(--warning-500); }
body.ytv-ui .y-strength i.y-good, body.ytv-ui .y-strength i.y-strong { background: var(--success-500); }
body.ytv-ui .y-btn-block { width: 100%; justify-content: center; }
@media (max-width: 900px) {
  body.ytv-auth-page .y-auth-side { padding: 20px 16px 24px; }
  body.ytv-auth-page .y-auth-pill { display: none; }
  body.ytv-auth-page .y-auth-side h1 { font-size: 24px; margin-top: 20px; }
}
body.ytv-ui .y-check span { color: var(--text); }
@media (max-width: 900px) { body.ytv-auth-page .y-auth { grid-template-rows: auto 1fr; } }
body.ytv-ui .y-prog-start { font-size: 12px; color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ===================== Refunds ===================== */
body.ytv-ui .y-refund-stats .y-card:nth-child(1) { border-top-color: var(--teal-600); }
body.ytv-ui .y-refund-stats .y-card:nth-child(2) { border-top-color: var(--sky-600); }
body.ytv-ui .y-refund-stats .y-card:nth-child(3) { border-top-color: var(--violet-600); }
body.ytv-ui .y-refund-table td { vertical-align: top; }
body.ytv-ui .y-refund-order { max-width: 420px; }
body.ytv-ui .y-refund-order a { color: var(--text); }
body.ytv-ui .y-refund-amt { text-align: right; font-weight: 700; color: var(--success-600); white-space: nowrap; }
@media (max-width: 900px) {
  body.ytv-ui .y-refund-stats { grid-template-columns: minmax(0, 1fr); }
  body.ytv-ui .y-refund-table thead { display: none; }
  body.ytv-ui .y-refund-table, body.ytv-ui .y-refund-table tbody { display: block; }
  body.ytv-ui .y-refund-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  body.ytv-ui .y-refund-table td { border: 0; padding: 0; }
  body.ytv-ui .y-refund-table td.y-refund-order { grid-column: 1; grid-row: 1; max-width: none; min-width: 0; }
  body.ytv-ui .y-refund-table td.y-refund-amt { grid-column: 2; grid-row: 1; }
  body.ytv-ui .y-refund-table td[data-l="Why"] { grid-column: 1 / -1; }
  body.ytv-ui .y-refund-table td[data-l="Date"] { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); }
  body.ytv-ui .y-refund-table td[data-l="Date"] div { display: inline; margin-left: 4px; }
}
@media (max-width: 900px) {
  body.ytv-ui .y-refund-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.ytv-ui .y-refund-stats .y-stat { padding: 12px; }
  body.ytv-ui .y-refund-stats .y-tile, body.ytv-ui .y-refund-stats .y-d { display: none; }
  body.ytv-ui .y-refund-stats .y-k { font-size: 12px; line-height: 1.3; }
  body.ytv-ui .y-refund-stats .y-v { font-size: 20px; margin-top: 4px; }
}

/* ===================== Stat bar (one compact card instead of 4 tall boxes) ===================== */
body.ytv-ui .y-statbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; overflow: hidden; }
body.ytv-ui .y-statbar.y-sb-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ytv-ui .y-sb-item { display: flex; gap: 10px; align-items: flex-start; padding: 14px 20px; min-width: 0; }
body.ytv-ui .y-sb-item + .y-sb-item { border-left: 1px solid var(--border); }
body.ytv-ui .y-sb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; }
body.ytv-ui .y-sb-k { font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ytv-ui .y-sb-v { font-family: "Nunito", var(--font); font-weight: 800; font-size: 22px; line-height: 1.2; margin-top: 2px; color: var(--text); }
body.ytv-ui .y-sb-d { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ytv-ui a.y-sb-d { color: var(--brand-700); }
html[data-theme="dark"] body.ytv-ui a.y-sb-d { color: #5EEAD4; }
@media (max-width: 900px) {
  body.ytv-ui .y-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ytv-ui .y-statbar.y-sb-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ytv-ui .y-sb-item { padding: 12px 14px; gap: 8px; }
  body.ytv-ui .y-statbar:not(.y-sb-3) .y-sb-item:nth-child(3) { border-left: 0; }
  body.ytv-ui .y-statbar:not(.y-sb-3) .y-sb-item:nth-child(n+3) { border-top: 1px solid var(--border); }
  body.ytv-ui .y-sb-3 .y-sb-item { padding: 12px 10px; }
  body.ytv-ui .y-sb-3 .y-sb-dot { display: none; }
  body.ytv-ui .y-sb-k { white-space: normal; font-size: 11px; }
  body.ytv-ui .y-sb-v { font-size: 19px; }
}

/* ===================== Report a problem dialog ===================== */
body.ytv-ui .y-radio-list { display: grid; gap: 6px; margin-top: 14px; }
body.ytv-ui .y-radio-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-weight: 500; }
body.ytv-ui .y-radio-row:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
body.ytv-ui .y-radio-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-700); }
body.ytv-ui .y-modal .y-label { display: flex; }

/* ===================== Order status + actions (UX spec: 2 lines, 1 highlighted action + ⋯ menu) ===================== */
body.ytv-ui .y-order-card .y-acts { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: nowrap; }
body.ytv-ui .y-st { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
body.ytv-ui .y-st-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.3; color: var(--text-3); }
body.ytv-ui .y-st-sub .y-icon { width: 14px; height: 14px; flex: none; }
body.ytv-ui .y-t-amber { color: var(--warning-600); }
body.ytv-ui .y-t-red { color: var(--danger-600); }
body.ytv-ui .y-t-teal { color: var(--brand-700); }
html[data-theme="dark"] body.ytv-ui .y-t-teal { color: #5EEAD4; }
body.ytv-ui .y-abar { display: flex; align-items: center; gap: 8px; }
body.ytv-ui .y-abar .y-btn-sm { height: 32px; }
body.ytv-ui .y-more { position: relative; }
body.ytv-ui .y-more-btn { width: 32px; padding: 0 !important; justify-content: center; }
body.ytv-ui .y-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 6px; }
body.ytv-ui .y-more.y-up .y-more-menu { top: auto; bottom: calc(100% + 6px); }
body.ytv-ui .y-more-menu [role=menuitem] { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
body.ytv-ui .y-more-menu [role=menuitem] .y-icon { flex: none; margin-top: 2px; color: var(--text-3); }
body.ytv-ui .y-more-menu [role=menuitem]:hover, body.ytv-ui .y-more-menu [role=menuitem]:focus-visible { background: var(--n-50); outline: none; text-decoration: none; }
body.ytv-ui .y-more-menu [role=menuitem]:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-600); }
body.ytv-ui .y-more-menu [aria-disabled="true"] { color: var(--text-3); cursor: not-allowed; }
body.ytv-ui .y-more-menu small { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); margin-top: 2px; }
body.ytv-ui .y-more-menu .y-mi-danger, body.ytv-ui .y-more-menu .y-mi-danger .y-icon { color: var(--danger-600); }
body.ytv-ui .y-more-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
html[data-theme="dark"] body.ytv-ui .y-more-menu [role=menuitem]:hover { background: #252D3F; }
@media (max-width: 900px) {
  body.ytv-ui .y-order-card .y-acts { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  body.ytv-ui .y-abar .y-btn-sm { height: 40px; }
  body.ytv-ui .y-more-btn { width: 40px; }
  body.ytv-ui .y-more-menu { min-width: 240px; }
}

/* ===================== New order: compact service card (2 lines) ===================== */
body.ytv-ui .y-svc.y-svc-c { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; align-items: start; }
body.ytv-ui .y-svc-c .y-name { font-size: 15px; line-height: 1.35; }
body.ytv-ui .y-svc-c .y-meta { gap: 2px 8px; margin-top: 3px; font-size: 12.5px; color: var(--text-3); align-items: center; }
body.ytv-ui .y-svc-c .y-meta > i { font-style: normal; color: var(--n-300); }
body.ytv-ui .y-svc-c .y-meta .y-icon { width: 13px; height: 13px; }
body.ytv-ui .y-svc-c .y-meta .y-ok { color: var(--success-600); font-weight: 600; }
body.ytv-ui .y-svc-c .y-meta .y-warn-t { color: var(--warning-600); font-weight: 600; }
body.ytv-ui .y-svc-c .y-radio { margin-top: 1px; }
body.ytv-ui .y-svc-c .y-fav { margin-top: -1px; }
body.ytv-ui .y-svc-c .y-price { display: flex; align-items: baseline; gap: 2px; }
body.ytv-ui .y-svc-c .y-price b { display: inline; font-size: 16px; }
@media (max-width: 900px) {
  body.ytv-ui .y-svc.y-svc-c { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px; }
  body.ytv-ui .y-svc-c .y-price { grid-column: auto; text-align: right; }
}
body.ytv-ui .y-svc-c .y-meta > span { white-space: nowrap; }
body.ytv-ui .y-svc-c .y-meta > span:first-child { white-space: normal; }
@media (max-width: 900px) {
  body.ytv-ui .y-svc.y-svc-c { row-gap: 4px; }
  body.ytv-ui .y-svc-c .y-svc-body { display: contents; }
  body.ytv-ui .y-svc-c .y-svc-body > .y-row { grid-column: 2; grid-row: 1; min-width: 0; }
  body.ytv-ui .y-svc-c .y-price { grid-column: 3; grid-row: 1; }
  body.ytv-ui .y-svc-c .y-meta { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }
}
body.ytv-ui .y-svc-c .y-meta > span:first-child { white-space: nowrap; }
body.ytv-ui .y-svc-c .y-meta > .y-cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
@media (max-width: 900px) { body.ytv-ui .y-svc-c .y-meta > .y-cat { max-width: 170px; } }

/* ===================== Empty state text centred (body.ytv-ui p resets margins) ===================== */
body.ytv-ui .y-empty p { margin: 0 auto 20px; max-width: 380px; }
body.ytv-ui .y-empty p:last-child { margin-bottom: 0; }

/* ===================== Classic order form in the new look (same form, same fields) ===================== */
body.ytv-ui .ytv-classic { margin: 0 !important; }
body.ytv-ui .ytv-classic > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; }
body.ytv-ui .ytv-classic .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
body.ytv-ui .ytv-classic > div > .card > .card-header { background: transparent; border: 0; padding: 16px 20px 0; }
body.ytv-ui .ytv-classic .card-body { padding: 20px; }
body.ytv-ui .ytv-classic .nav-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0; border: 0; border-radius: 12px; background: var(--n-100); list-style: none; }
body.ytv-ui .ytv-classic .nav-tabs li { margin: 0; }
body.ytv-ui .ytv-classic .nav-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0 !important; border-radius: 9px; background: transparent; color: var(--text-2) !important; font-weight: 600; font-size: 14px; text-decoration: none; }
body.ytv-ui .ytv-classic .nav-tabs a.active { background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--sh-1); }
body.ytv-ui .ytv-classic label, body.ytv-ui .ytv-classic .form-label { font-weight: 600; font-size: 13px; color: var(--n-800); margin-bottom: 6px; text-transform: none; }
body.ytv-ui .ytv-classic .form-group { margin-bottom: 16px; }
body.ytv-ui .ytv-classic .form-control, body.ytv-ui .ytv-classic .custom-select { height: 44px; padding: 0 14px; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important; background-color: var(--surface); color: var(--text); font-size: 15px; box-shadow: none; }
body.ytv-ui .ytv-classic textarea.form-control { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; }
body.ytv-ui .ytv-classic .form-control:focus { border-color: var(--brand-600) !important; box-shadow: var(--focus); outline: none; }
body.ytv-ui .ytv-classic .form-control[readonly] { background-color: var(--surface-2); color: var(--text-2); }
body.ytv-ui .ytv-classic h4, body.ytv-ui .ytv-classic .h4 { font-family: "Nunito", var(--font); font-weight: 800; font-size: 17px; color: var(--text); }
body.ytv-ui .ytv-classic h4 .fa, body.ytv-ui .ytv-classic label .fa { color: var(--text-3); }
body.ytv-ui .ytv-classic .ytv-finder-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.ytv-ui .ytv-classic .ytv-finder-chips .btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0 !important; padding: 0 12px; border: 1px solid var(--border-strong) !important; border-radius: 999px !important; background: var(--surface) !important; color: var(--n-700) !important; font-size: 13px; font-weight: 500; box-shadow: none; }
body.ytv-ui .ytv-classic .ytv-finder-chips .btn:hover { border-color: var(--n-400) !important; }
body.ytv-ui .ytv-classic .ytv-finder-chips .btn.active { background: var(--n-900) !important; border-color: var(--n-900) !important; color: #fff !important; }
html[data-theme="dark"] body.ytv-ui .ytv-classic .ytv-finder-chips .btn.active { color: #111418 !important; }
body.ytv-ui .ytv-classic .ytv-finder-results .list-group-item { border-color: var(--border); background: var(--surface); color: var(--text); padding: 10px 14px; }
body.ytv-ui .ytv-classic .ytv-finder-results { border-radius: var(--r-md); }
body.ytv-ui .ytv-classic .ytv-summary { border-radius: var(--r-lg); background: var(--surface-2); }
body.ytv-ui .ytv-classic .btn-primary, body.ytv-ui .ytv-classic .ytv-summary .btn { min-height: 48px; border: 0 !important; border-radius: var(--r-md) !important; background: var(--grad-brand) !important; color: #fff !important; font-weight: 600; font-size: 15px; box-shadow: none; text-transform: none; }
body.ytv-ui .ytv-classic .btn-primary:disabled, body.ytv-ui .ytv-classic .ytv-summary .btn:disabled { opacity: .5; }
body.ytv-ui .ytv-classic .custom-control-label { text-transform: none !important; font-size: 13px; color: var(--text-2); }
body.ytv-ui .ytv-classic .alert { border-radius: var(--r-md); }
body.ytv-ui .ytv-classic .small.text-muted, body.ytv-ui .ytv-classic .text-muted { color: var(--text-3) !important; }
body.ytv-ui .ytv-summary { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text); }
body.ytv-ui .ytv-summary .btn, body.ytv-ui .ytv-summary .ytv-sum-submit { min-height: 48px; border: 0 !important; border-radius: var(--r-md) !important; background: var(--grad-brand) !important; color: #fff !important; font-weight: 600; font-size: 15px; box-shadow: none !important; text-transform: none; }
body.ytv-ui .ytv-summary .btn:disabled { opacity: .5; }
@media (max-width: 767px) {
  body.ytv-ui .ytv-summary { bottom: var(--bottomnav-h) !important; border-radius: 0; border-left: 0; border-right: 0; background: var(--surface); }
  body.ytv-ui .ytv-classic .ytv-finder-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  body.ytv-ui .ytv-classic .ytv-finder-chips::-webkit-scrollbar { display: none; }
  body.ytv-ui .ytv-classic .ytv-finder-chips .btn { flex: 0 0 auto; }
  body.ytv-ui .ytv-classic { padding-bottom: 90px; }
}
body.ytv-ui .y-facts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12.5px; color: var(--text-3); }
body.ytv-ui .y-facts > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
body.ytv-ui .y-facts > i { font-style: normal; color: var(--n-300); }
body.ytv-ui .y-facts .y-icon { width: 13px; height: 13px; }
body.ytv-ui .y-facts .y-ok { color: var(--success-600); font-weight: 600; }

/* ===================== Balance pill + button icon alignment ===================== */
body.ytv-ui .y-balance-pill { align-items: stretch; }
body.ytv-ui .y-balance-pill a { height: auto; min-height: 40px; align-self: stretch; }
body.ytv-ui .y-balance-pill .y-amt { display: flex; flex-direction: column; justify-content: center; }
body.ytv-ui .y-balance-pill.y-low { border-color: var(--border); }
body.ytv-ui .y-balance-pill.y-low .y-amt { color: var(--warning-600); }
html[data-theme="dark"] body.ytv-ui .y-balance-pill.y-low .y-amt { color: #F5B547; }
@media (max-width: 900px) { body.ytv-ui .y-balance-pill a { height: auto; min-height: 36px; } body.ytv-ui .y-topbar .y-balance-pill.y-low { border-color: rgba(255,255,255,.25); } }
/* Nunito sits optically low in its line box: nudge icons next to text so they look centred */
body.ytv-ui .y-btn > .y-icon, body.ytv-ui .y-nav a.y-cta > .y-icon, body.ytv-ui .y-balance-pill a > .y-icon, body.ytv-ui .y-chip > .y-icon { position: relative; top: 1px; }

/* ===================== Order actions in one row: Status | Refill / Cancel | ⋯ ===================== */
body.ytv-ui .y-order-card .y-acts { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
body.ytv-ui .y-order-card .y-acts .y-st { flex: 1 1 auto; min-width: 0; }
body.ytv-ui .y-order-card .y-acts .y-st-sub { white-space: normal; }
body.ytv-ui .y-order-card .y-acts .y-abar { flex: none; margin-left: auto; }
body.ytv-ui .y-order-card.y-compact .y-acts { justify-content: flex-end; }

/* ===================== Add funds: fixed amounts grid, tidy gateway form ===================== */
body.ytv-ui .y-funds-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body.ytv-ui .y-amt-btn { height: 52px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; font-family: "Nunito", var(--font); font-size: 18px; font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s; }
body.ytv-ui .y-amt-btn:hover { border-color: var(--brand-600); }
body.ytv-ui .y-amt-btn.y-on { border: 2px solid var(--brand-700); background: var(--brand-50); color: var(--brand-800); }
html[data-theme="dark"] body.ytv-ui .y-amt-btn.y-on { color: #99F6E4; border-color: #14B8A6; }
body.ytv-ui .y-amt-btn:focus-visible { box-shadow: var(--focus); outline: none; }
body.ytv-ui .y-funds-via { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font-size: 13px; }
body.ytv-ui .y-funds-via .y-icon { color: var(--brand-700); flex: none; }
body.ytv-ui .y-gw-hide, body.ytv-ui .y-amt-hidden { display: none !important; }
body.ytv-ui .y-funds-form .form-group { margin: 12px 0 0; }
body.ytv-ui .y-funds-form #credit_cards { text-align: left !important; margin-top: 8px; }
body.ytv-ui .y-funds-form .custom-control { padding-left: 28px; }
@media (max-width: 600px) { body.ytv-ui .y-funds-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } body.ytv-ui .y-amt-btn { height: 46px; font-size: 15px; } }

/* ===================== Transactions, Profile, FAQ (customer) ===================== */
body.ytv-ui .y-tx-table td { vertical-align: middle; }
body.ytv-ui .y-tx-amt { text-align: right; font-weight: 700; color: var(--success-600); white-space: nowrap; }
body.ytv-ui .y-tx-ref { font-family: var(--mono); }
@media (max-width: 900px) {
  body.ytv-ui .y-tx-table thead { display: none; }
  body.ytv-ui .y-tx-table, body.ytv-ui .y-tx-table tbody { display: block; }
  body.ytv-ui .y-tx-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  body.ytv-ui .y-tx-table td { border: 0; padding: 0; }
  body.ytv-ui .y-tx-table td[data-l="Method"] { grid-column: 1; grid-row: 1; }
  body.ytv-ui .y-tx-table td[data-l="Amount"] { grid-column: 2; grid-row: 1; }
  body.ytv-ui .y-tx-table td[data-l="Date"] { grid-column: 1; font-size: 12px; color: var(--text-3); }
  body.ytv-ui .y-tx-table td[data-l="Status"] { grid-column: 2; text-align: right; }
  body.ytv-ui .y-tx-table td[data-l="Reference"] { grid-column: 1 / -1; }
}
body.ytv-ui .y-profile-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { body.ytv-ui .y-profile-grid { grid-template-columns: minmax(0, 1fr); } }
body.ytv-ui .y-seg.y-theme-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; box-sizing: border-box; gap: 4px; padding: 4px; border-radius: 12px; background: var(--n-100); }
body.ytv-ui .y-seg.y-theme-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 8px; min-width: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
body.ytv-ui .y-seg.y-theme-seg button.y-on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
body.ytv-ui .y-pf-more summary { cursor: pointer; list-style: none; }
body.ytv-ui .y-pf-more summary::-webkit-details-marker { display: none; }
body.ytv-ui .y-faq { overflow: hidden; }
body.ytv-ui .y-faq-item + .y-faq-item { border-top: 1px solid var(--border); }
body.ytv-ui .y-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; }
body.ytv-ui .y-faq-item summary::-webkit-details-marker { display: none; }
body.ytv-ui .y-faq-item summary .y-icon { flex: none; color: var(--text-3); transition: transform .15s; }
body.ytv-ui .y-faq-item[open] summary .y-icon { transform: rotate(180deg); }
body.ytv-ui .y-faq-item summary:hover { background: var(--n-25); }
body.ytv-ui .y-faq-a { padding: 0 20px 18px; color: var(--text-2); font-size: 14px; line-height: 1.6; max-width: 760px; }
@media (max-width: 900px) { body.ytv-ui .y-tx-table td.y-tx-noref { display: none; } }
/* admin "view as customer" banner (customer shell) */
body.ytv-ui .y-viewas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--warning-50); color: var(--warning-600); font-size: 14px; }
body.ytv-ui .y-viewas .y-btn { margin-left: auto; }

/* readable radio rows (Report a problem) and alerts in the dark theme */
body.ytv-ui .y-radio-row { color: var(--text); }
html[data-theme="dark"] .y-alert.y-info { color: var(--text); border-color: #2B4A80; }
html[data-theme="dark"] .y-alert.y-warning { color: var(--text); border-color: #6B4A12; }
html[data-theme="dark"] .y-alert.y-success { color: var(--text); border-color: #1D5C3A; }
html[data-theme="dark"] .y-alert.y-danger { color: var(--text); border-color: #6E2A24; }
html[data-theme="dark"] .y-alert a { color: var(--brand-300); }

/* no colour transitions while the page loads (avoids light buttons fading to dark on every page in the dark theme) */
html.y-preload *, html.y-preload *::before, html.y-preload *::after { transition: none !important; }

/* "What's new" side panel (news/ajax_notification) in the panel look, both themes */
.news_announcement.y-news .modal-content { background: var(--surface); color: var(--text); border: 0; border-radius: 0; }
.news_announcement.y-news .modal-header { background: var(--surface) !important; color: var(--text); border-bottom: 1px solid var(--border); padding: 16px 20px; align-items: center; }
.news_announcement.y-news .modal-title { font-family: "Nunito", var(--font); font-weight: 800; font-size: 18px; color: var(--text); }
.news_announcement.y-news .modal-header .close { color: var(--text-2); opacity: 1; text-shadow: none; }
.news_announcement.y-news .modal-content .modal-body { background: var(--surface-2); padding: 12px; }
.y-news-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; }
.y-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-3); }
.y-news-body { font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.y-news-body p:last-child { margin-bottom: 0; }
.y-news-body a { color: var(--brand-700); }
html[data-theme="dark"] .y-news-body a { color: var(--brand-300); }
.y-news-empty { text-align: center; padding: 48px 16px; color: var(--text-2); }
.y-news-empty b { color: var(--text); font-size: 15px; }

/* clearly visible keyboard focus (2px outline) in both themes */
body.ytv-ui :focus-visible { outline: 2px solid var(--brand-700) !important; outline-offset: 2px; box-shadow: none; }
html[data-theme="dark"] body.ytv-ui :focus-visible { outline-color: #5EEAD4 !important; }
body.ytv-ui .y-input:focus-visible, body.ytv-ui .y-select:focus-visible, body.ytv-ui .y-textarea:focus-visible { outline-offset: 0; }
.y-input.y-invalid { border-color: var(--danger-600) !important; }

/* muted status sub-line on order cards (Refill requested, Refill available in …) */
body.ytv-ui .y-t-muted { color: var(--text-3); }

/* payment result pages (add_funds/success, add_funds/unsuccess) */
body.ytv-ui .y-pay-result { max-width: 520px; margin: 24px auto; }
body.ytv-ui .y-pay-rows { margin: 18px 0 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
body.ytv-ui .y-pay-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
body.ytv-ui .y-pay-rows > div:last-child { border-bottom: 0; }
body.ytv-ui .y-pay-rows dt { font-weight: 400; color: var(--text-3); margin: 0; }
body.ytv-ui .y-pay-rows dd { margin: 0; color: var(--text); text-align: right; }
body.ytv-ui .y-pay-ref { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; word-break: break-all; }