/* =====================================================================
   Yebrax Stores R4 — Product UI System
   Site-wide final UI layer for Panel/Admin/Auth/Billing/ERP surfaces.
   Loaded after all legacy GC styles. Do not move earlier in the cascade.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Canonical product tokens + legacy-token bridge
   --------------------------------------------------------------------- */
html:root{
  --ys4-navy:#061b31;
  --ys4-navy-2:#082743;
  --ys4-blue:#116ee8;
  --ys4-blue-hover:#0d5fc9;
  --ys4-orange:#ff9700;
  --ys4-cyan:#22aee8;
  --ys4-green:#1d9c62;
  --ys4-red:#dc3f48;
  --ys4-amber:#c77a06;
  --ys4-page:#f5f8fc;
  --ys4-surface:#ffffff;
  --ys4-surface-soft:#f8fafc;
  --ys4-surface-blue:#f3f8ff;
  --ys4-border:#dbe5ef;
  --ys4-border-strong:#c8d7e7;
  --ys4-text:#10233e;
  --ys4-text-2:#334a65;
  --ys4-muted:#667b93;
  --ys4-muted-2:#8494a6;
  --ys4-shadow:0 8px 26px rgba(28,54,86,.07);
  --ys4-shadow-lg:0 18px 46px rgba(24,53,88,.12);
  --ys4-radius:14px;
}

html:root[data-theme="light"] body.ui2-panel,
html:root[data-theme="light"] body.ui2-admin,
html:root:not([data-theme="dark"]) body.ui2-panel,
html:root:not([data-theme="dark"]) body.ui2-admin{
  /* Bridge every old GC token so old component CSS cannot create white-on-white. */
  --gc-ink:var(--ys4-text)!important;
  --gc-muted:var(--ys4-muted)!important;
  --gc-bg:var(--ys4-page)!important;
  --gc-surface:var(--ys4-surface)!important;
  --gc-surface-2:var(--ys4-surface-soft)!important;
  --gc-line:var(--ys4-border)!important;
  --gc-shadow:var(--ys4-shadow)!important;
  --bg:var(--ys4-page)!important;
  --bg2:var(--ys4-page)!important;
  --card:var(--ys4-surface)!important;
  --card2:var(--ys4-surface-soft)!important;
  --text:var(--ys4-text)!important;
  --muted:var(--ys4-muted)!important;
  --border:var(--ys4-border)!important;
  --primary:var(--ys4-blue)!important;
  --primary2:var(--ys4-cyan)!important;
}

html:root[data-theme="dark"] body.ui2-panel,
html:root[data-theme="dark"] body.ui2-admin{
  --ys4-page:#071524;
  --ys4-surface:#0d2034;
  --ys4-surface-soft:#10263d;
  --ys4-surface-blue:#102c49;
  --ys4-border:#284158;
  --ys4-border-strong:#35536e;
  --ys4-text:#eef5fb;
  --ys4-text-2:#d4e0eb;
  --ys4-muted:#a4b6c8;
  --ys4-muted-2:#8297ab;
  --ys4-shadow:0 10px 30px rgba(0,0,0,.22);
  --ys4-shadow-lg:0 20px 50px rgba(0,0,0,.32);
  --gc-ink:var(--ys4-text)!important;
  --gc-muted:var(--ys4-muted)!important;
  --gc-bg:var(--ys4-page)!important;
  --gc-surface:var(--ys4-surface)!important;
  --gc-surface-2:var(--ys4-surface-soft)!important;
  --gc-line:var(--ys4-border)!important;
  --gc-shadow:var(--ys4-shadow)!important;
  --bg:var(--ys4-page)!important;
  --bg2:var(--ys4-page)!important;
  --card:var(--ys4-surface)!important;
  --card2:var(--ys4-surface-soft)!important;
  --text:var(--ys4-text)!important;
  --muted:var(--ys4-muted)!important;
  --border:var(--ys4-border)!important;
}

/* ---------------------------------------------------------------------
   2) Site-wide typography, contrast and spacing
   --------------------------------------------------------------------- */
html:root body.ui2-panel,
html:root body.ui2-admin{
  background:var(--ys4-page)!important;
  color:var(--ys4-text)!important;
  font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-size:15px!important;
  line-height:1.58!important;
  text-rendering:optimizeLegibility;
}
html:root body.ui2-panel .panel-main,
html:root body.ui2-admin .panel-main,
html:root body.ui2-panel .panel-content,
html:root body.ui2-admin .panel-content{background:var(--ys4-page)!important;color:var(--ys4-text)!important}
html:root body.ui2-panel .panel-content,
html:root body.ui2-admin .panel-content{padding:20px 22px 38px!important}
html:root body.ui2-panel .panel-content>.container,
html:root body.ui2-admin .panel-content>.container{width:100%!important;max-width:none!important;padding:0!important}

html:root body.ui2-panel h1,html:root body.ui2-panel h2,html:root body.ui2-panel h3,html:root body.ui2-panel h4,html:root body.ui2-panel h5,
html:root body.ui2-admin h1,html:root body.ui2-admin h2,html:root body.ui2-admin h3,html:root body.ui2-admin h4,html:root body.ui2-admin h5{
  color:var(--ys4-text)!important;opacity:1!important;letter-spacing:-.2px!important
}
html:root body.ui2-panel h2,html:root body.ui2-admin h2{font-size:21px!important;font-weight:900!important}
html:root body.ui2-panel h3,html:root body.ui2-admin h3{font-size:16px!important;font-weight:900!important}
html:root body.ui2-panel p,html:root body.ui2-admin p{color:var(--ys4-text-2)!important}
html:root body.ui2-panel .small,html:root body.ui2-panel .muted,
html:root body.ui2-admin .small,html:root body.ui2-admin .muted{
  color:var(--ys4-muted)!important;opacity:1!important;font-weight:550!important
}
html:root body.ui2-panel .small,html:root body.ui2-admin .small{font-size:12.5px!important}
html:root body.ui2-panel label,html:root body.ui2-admin label{color:var(--ys4-text-2)!important;opacity:1!important;font-weight:750!important}
html:root body.ui2-panel a:not(.btn):not(.panel-nav__item),html:root body.ui2-admin a:not(.btn):not(.panel-nav__item){color:#0b63ce;font-weight:700}
html:root body.ui2-panel code,html:root body.ui2-admin code{background:var(--ys4-surface-blue)!important;color:#155a9f!important;border:1px solid var(--ys4-border)!important;border-radius:7px;padding:2px 6px}
html:root[data-theme="dark"] body.ui2-panel code,html:root[data-theme="dark"] body.ui2-admin code{color:#82c4ff!important}

/* ---------------------------------------------------------------------
   3) Surfaces/cards: one visual language across all modules
   --------------------------------------------------------------------- */
html:root body.ui2-panel .card,html:root body.ui2-admin .card,
html:root body.ui2-panel .store-card,html:root body.ui2-admin .store-card,
html:root body.ui2-panel .pos-panel,html:root body.ui2-admin .pos-panel,
html:root body.ui2-panel .gc-e-kpi,html:root body.ui2-admin .gc-e-kpi{
  background:var(--ys4-surface)!important;
  color:var(--ys4-text)!important;
  border:1px solid var(--ys4-border)!important;
  border-radius:var(--ys4-radius)!important;
  box-shadow:var(--ys4-shadow)!important;
  backdrop-filter:none!important;
}
html:root body.ui2-panel .card .card,html:root body.ui2-admin .card .card,
html:root body.ui2-panel .card.subcard,html:root body.ui2-admin .card.subcard{
  background:var(--ys4-surface-soft)!important;
  color:var(--ys4-text)!important;
  border-color:var(--ys4-border)!important;
  box-shadow:none!important;
}
html:root body.ui2-panel .card:hover[data-clickable="1"],html:root body.ui2-admin .card:hover[data-clickable="1"]{border-color:#a8c5e5!important;box-shadow:var(--ys4-shadow-lg)!important}

/* ---------------------------------------------------------------------
   4) Forms, controls, buttons, badges, notices
   --------------------------------------------------------------------- */
html:root body.ui2-panel input:not([type=checkbox]):not([type=radio]),
html:root body.ui2-panel select,html:root body.ui2-panel textarea,html:root body.ui2-panel .input,
html:root body.ui2-admin input:not([type=checkbox]):not([type=radio]),
html:root body.ui2-admin select,html:root body.ui2-admin textarea,html:root body.ui2-admin .input{
  min-height:43px!important;padding:9px 12px!important;
  background:var(--ys4-surface)!important;color:var(--ys4-text)!important;
  border:1px solid var(--ys4-border-strong)!important;border-radius:10px!important;
  box-shadow:0 1px 1px rgba(16,35,62,.02)!important;font-size:14px!important;opacity:1!important
}
html:root body.ui2-panel input::placeholder,html:root body.ui2-panel textarea::placeholder,
html:root body.ui2-admin input::placeholder,html:root body.ui2-admin textarea::placeholder{color:var(--ys4-muted-2)!important;opacity:1!important}
html:root body.ui2-panel input:focus,html:root body.ui2-panel select:focus,html:root body.ui2-panel textarea:focus,
html:root body.ui2-admin input:focus,html:root body.ui2-admin select:focus,html:root body.ui2-admin textarea:focus{
  outline:none!important;border-color:#6ca9ee!important;box-shadow:0 0 0 3px rgba(17,110,232,.10)!important
}
html:root body.ui2-panel input[type=checkbox],html:root body.ui2-panel input[type=radio],
html:root body.ui2-admin input[type=checkbox],html:root body.ui2-admin input[type=radio]{accent-color:var(--ys4-blue)}
html:root body.ui2-panel select option,html:root body.ui2-admin select option{background:var(--ys4-surface)!important;color:var(--ys4-text)!important}

html:root body.ui2-panel .btn,html:root body.ui2-admin .btn{
  min-height:40px!important;padding:8px 13px!important;border-radius:9px!important;
  background:var(--ys4-surface)!important;color:var(--ys4-text-2)!important;
  border:1px solid var(--ys4-border-strong)!important;box-shadow:none!important;
  font-size:13px!important;font-weight:850!important;opacity:1!important
}
html:root body.ui2-panel .btn:hover,html:root body.ui2-admin .btn:hover{background:var(--ys4-surface-blue)!important;border-color:#9ebde0!important;color:#154f91!important;transform:none!important}
html:root body.ui2-panel .btn.primary,html:root body.ui2-admin .btn.primary{
  background:linear-gradient(135deg,#116ee8,#0d63d3)!important;color:#fff!important;border-color:#116ee8!important;
  box-shadow:0 7px 16px rgba(17,110,232,.18)!important
}
html:root body.ui2-panel .btn.primary:hover,html:root body.ui2-admin .btn.primary:hover{background:linear-gradient(135deg,#0e64d4,#0b59bd)!important;color:#fff!important}
html:root body.ui2-panel .btn.danger,html:root body.ui2-admin .btn.danger{background:#fff4f5!important;color:#bb333b!important;border-color:#efc7ca!important}
html:root[data-theme="dark"] body.ui2-panel .btn.danger,html:root[data-theme="dark"] body.ui2-admin .btn.danger{background:#351b24!important;color:#ffabb1!important;border-color:#69313a!important}

html:root body.ui2-panel .badge,html:root body.ui2-admin .badge{
  color:#506982!important;background:#f2f6fa!important;border:1px solid #d7e2ec!important;opacity:1!important;font-weight:850!important
}
html:root body.ui2-panel .badge.ok,html:root body.ui2-admin .badge.ok{background:#eaf8f1!important;color:#167f50!important;border-color:#bde4cf!important}
html:root body.ui2-panel .badge.warn,html:root body.ui2-admin .badge.warn{background:#fff7e8!important;color:#a96800!important;border-color:#efd39e!important}
html:root body.ui2-panel .badge.danger,html:root body.ui2-admin .badge.danger{background:#fff0f1!important;color:#c0353c!important;border-color:#efc2c6!important}

html:root body.ui2-panel .notice,html:root body.ui2-admin .notice,
html:root body.ui2-panel .alert,html:root body.ui2-admin .alert{
  background:var(--ys4-surface-blue)!important;color:var(--ys4-text-2)!important;border:1px solid #d6e5f5!important;border-radius:11px!important;opacity:1!important
}
html:root body.ui2-panel .notice.ok,html:root body.ui2-admin .notice.ok,
html:root body.ui2-panel .alert.ok,html:root body.ui2-admin .alert.ok{background:#eefaf4!important;color:#176f49!important;border-color:#c3e6d3!important}
html:root body.ui2-panel .notice.warn,html:root body.ui2-admin .notice.warn,
html:root body.ui2-panel .alert.warn,html:root body.ui2-admin .alert.warn{background:#fff8e9!important;color:#8e5e0b!important;border-color:#ecd6a8!important}
html:root body.ui2-panel .notice.danger,html:root body.ui2-admin .notice.danger,
html:root body.ui2-panel .alert.err,html:root body.ui2-admin .alert.err{background:#fff2f3!important;color:#b9343b!important;border-color:#efc7ca!important}

/* ---------------------------------------------------------------------
   5) Tables and data-heavy screens
   --------------------------------------------------------------------- */
html:root body.ui2-panel .table-wrap,html:root body.ui2-admin .table-wrap{overflow:auto!important;border:1px solid var(--ys4-border)!important;border-radius:12px!important;background:var(--ys4-surface)!important;box-shadow:none!important}
html:root body.ui2-panel table,html:root body.ui2-panel .table,
html:root body.ui2-admin table,html:root body.ui2-admin .table{width:100%;background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-collapse:separate!important;border-spacing:0!important}
html:root body.ui2-panel table th,html:root body.ui2-admin table th{
  padding:11px 12px!important;background:var(--ys4-surface-soft)!important;color:#5b718a!important;
  border-bottom:1px solid var(--ys4-border)!important;font-size:12px!important;font-weight:900!important;white-space:nowrap
}
html:root body.ui2-panel table td,html:root body.ui2-admin table td{
  padding:11px 12px!important;color:var(--ys4-text-2)!important;border-bottom:1px solid #edf1f5!important;font-size:13px!important;vertical-align:middle!important
}
html:root[data-theme="dark"] body.ui2-panel table td,html:root[data-theme="dark"] body.ui2-admin table td{border-bottom-color:#20364c!important}
html:root body.ui2-panel table tbody tr:last-child td,html:root body.ui2-admin table tbody tr:last-child td{border-bottom:0!important}
html:root body.ui2-panel table tbody tr:hover td,html:root body.ui2-admin table tbody tr:hover td{background:var(--ys4-surface-blue)!important}
html:root body.ui2-panel table a,html:root body.ui2-admin table a{color:#0b63ce!important;font-weight:800!important}

/* ---------------------------------------------------------------------
   6) Details/dropdowns/modals/popup surfaces
   --------------------------------------------------------------------- */
html:root body.ui2-panel details,html:root body.ui2-admin details,
html:root body.ui2-panel .yr-dd-menu,html:root body.ui2-admin .yr-dd-menu,
html:root body.ui2-panel .gc-topbar-tools__menu,html:root body.ui2-admin .gc-topbar-tools__menu{
  background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-color:var(--ys4-border)!important;box-shadow:var(--ys4-shadow-lg)!important
}
html:root body.ui2-panel .modal,html:root body.ui2-admin .modal,
html:root body.ui2-panel [role=dialog],html:root body.ui2-admin [role=dialog]{color:var(--ys4-text)!important}

/* ---------------------------------------------------------------------
   7) Topbar and workspace controls
   --------------------------------------------------------------------- */
html:root body.ui2-panel .panel-topbar,html:root body.ui2-admin .panel-topbar{
  min-height:60px!important;padding:8px 22px!important;background:var(--ys4-surface)!important;color:var(--ys4-text)!important;
  border-bottom:1px solid var(--ys4-border)!important;box-shadow:0 2px 12px rgba(20,46,77,.04)!important
}
html:root body.ui2-panel .panel-page-title,html:root body.ui2-admin .panel-page-title{font-size:18px!important;color:var(--ys4-text)!important;font-weight:900!important}
html:root body.ui2-panel .gc-workspace-switch,html:root body.ui2-admin .gc-workspace-switch{background:var(--ys4-surface-soft)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .gc-workspace-switch button,html:root body.ui2-admin .gc-workspace-switch button{color:var(--ys4-muted)!important}
html:root body.ui2-panel .gc-workspace-switch button.active,html:root body.ui2-admin .gc-workspace-switch button.active{background:var(--ys4-surface)!important;color:var(--ys4-text)!important}

/* ---------------------------------------------------------------------
   8) Billing — rebuilt product-level layout
   --------------------------------------------------------------------- */
html:root body.ui2-panel .ys-billing-page{max-width:1540px!important;margin:0 auto!important}
html:root body.ui2-panel .ys-billing-shell{padding:18px!important;background:transparent!important;border:0!important;box-shadow:none!important}
html:root body.ui2-panel .ys-billing-hero{
  display:flex!important;justify-content:space-between!important;align-items:center!important;gap:18px!important;flex-wrap:wrap!important;
  padding:17px 18px!important;margin-bottom:14px!important;background:var(--ys4-surface)!important;border:1px solid var(--ys4-border)!important;border-radius:13px!important;box-shadow:var(--ys4-shadow)!important
}
html:root body.ui2-panel .ys-billing-hero h2{margin:0 0 4px!important;font-size:20px!important}
html:root body.ui2-panel .ys-billing-status{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important}
html:root body.ui2-panel .ys-billing-grid{
  display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr)!important;gap:16px!important;align-items:start!important;margin-top:16px!important
}
html:root body.ui2-panel .ys-billing-grid>.col-7,html:root body.ui2-panel .ys-billing-grid>.col-5{width:auto!important;max-width:none!important;flex:none!important;min-width:0!important}
html:root body.ui2-panel .ys-billing-plans>h3,html:root body.ui2-panel .ys-billing-checkout>h3{margin:0 0 10px!important}
html:root body.ui2-panel .ys-billing-plans .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
html:root body.ui2-panel .plan-card{
  min-height:196px!important;padding:15px!important;background:var(--ys4-surface)!important;color:var(--ys4-text)!important;
  border:1px solid var(--ys4-border)!important;border-radius:12px!important;box-shadow:none!important;transform:none!important
}
html:root body.ui2-panel .plan-card:hover{border-color:#9fc1e8!important;box-shadow:0 10px 24px rgba(19,70,125,.08)!important;transform:none!important}
html:root body.ui2-panel .plan-card.selected{
  background:linear-gradient(180deg,#f7fbff,#fff)!important;border-color:#4f95e7!important;
  box-shadow:0 0 0 3px rgba(17,110,232,.08),0 10px 24px rgba(17,110,232,.08)!important
}
html:root body.ui2-panel .plan-card.is-featured{background:linear-gradient(180deg,#f8fbff,#fff)!important}
html:root body.ui2-panel .plan-card__title b{color:var(--ys4-text)!important;font-size:14.5px!important;font-weight:900!important}
html:root body.ui2-panel .plan-card .small{color:var(--ys4-muted)!important;opacity:1!important;font-size:12px!important}
html:root body.ui2-panel .plan-card__price-block{margin:11px 0!important;padding:12px 0!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .plan-card__monthly strong{color:#0d3768!important;font-size:28px!important;font-weight:950!important;opacity:1!important}
html:root body.ui2-panel .plan-card__monthly span{color:var(--ys4-muted)!important;opacity:1!important}
html:root[data-theme="dark"] body.ui2-panel .plan-card__monthly strong{color:#f4f8fc!important}
html:root body.ui2-panel .plan-card__amount{color:#123c70!important;font-size:18px!important;font-weight:950!important;opacity:1!important}
html:root[data-theme="dark"] body.ui2-panel .plan-card__amount{color:#dbeeff!important}
html:root body.ui2-panel .plan-card__radio{width:21px!important;height:21px!important;min-height:21px!important;margin:0!important;accent-color:var(--ys4-blue)!important}
html:root body.ui2-panel .ys-billing-checkout .card{padding:16px!important}
html:root body.ui2-panel .ys-checkout-summary{position:sticky!important;top:78px!important;background:var(--ys4-surface)!important;box-shadow:var(--ys4-shadow)!important}
html:root body.ui2-panel .ys-checkout-summary b{color:var(--ys4-text)!important;opacity:1!important}
html:root body.ui2-panel #grandTotal{color:#0d3768!important;font-size:23px!important}
html:root[data-theme="dark"] body.ui2-panel #grandTotal{color:#e8f3ff!important}
html:root body.ui2-panel .rc10-manual-payment-card{padding:16px!important;background:var(--ys4-surface)!important;border-color:#bad3ef!important;box-shadow:none!important}
html:root body.ui2-panel .rc10-manual-selection span{background:var(--ys4-surface-blue)!important;color:var(--ys4-text-2)!important;border:1px solid var(--ys4-border)!important;opacity:1!important}
html:root body.ui2-panel .rc10-payment-method{background:var(--ys4-surface-soft)!important;color:var(--ys4-text)!important;border:1px solid var(--ys4-border)!important;border-radius:12px!important}
html:root body.ui2-panel .rc10-method-copy b{color:var(--ys4-text)!important;opacity:1!important}
html:root body.ui2-panel .rc10-method-copy span{color:var(--ys4-muted)!important;opacity:1!important}
html:root body.ui2-panel .rc7-transfer-proof-form{background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-color:var(--ys4-border-strong)!important}
html:root body.ui2-panel .ys-billing-page [style*="opacity:."],html:root body.ui2-panel .ys-billing-page [style*="opacity: ."]{opacity:1!important}

/* ---------------------------------------------------------------------
   9) POS / inventory / finance / reports refinements
   --------------------------------------------------------------------- */
html:root body.ui2-panel .pos-product{background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .pos-product b{color:var(--ys4-text)!important}
html:root body.ui2-panel .pos-stock{color:var(--ys4-muted)!important;opacity:1!important}
html:root body.ui2-panel .pos-line{background:var(--ys4-surface)!important;color:var(--ys4-text-2)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .pos-total{color:var(--ys4-text)!important}
html:root body.ui2-panel .gc-e-score{color:var(--ys4-text)!important}
html:root body.ui2-panel .gc-e-progress{background:var(--ys4-border)!important}

/* dashboard polish */
html:root body.ui2-panel .ys-kpi,html:root body.ui2-panel .ys-panel,html:root body.ui2-panel .ys-alert-card,html:root body.ui2-panel .ys-shortcut{background:var(--ys4-surface)!important;border-color:var(--ys4-border)!important;color:var(--ys4-text)!important}
html:root body.ui2-panel .ys-kpi__label,html:root body.ui2-panel .ys-kpi__meta{color:var(--ys4-muted)!important}
html:root body.ui2-panel .ys-kpi__value,html:root body.ui2-panel .ys-panel__head h3,html:root body.ui2-panel .ys-alert-card b,html:root body.ui2-panel .ys-alert-card strong{color:var(--ys4-text)!important}
html:root body.ui2-panel .ys-shortcut{min-height:86px!important;font-size:12px!important}

/* ---------------------------------------------------------------------
   10) Admin consistency
   --------------------------------------------------------------------- */
html:root body.ui2-admin .admin-grid,html:root body.ui2-admin .pricing-admin-grid{gap:14px!important}
html:root body.ui2-admin .gc-admin-hero{background:linear-gradient(135deg,#f4f9ff,#fff)!important;border:1px solid var(--ys4-border)!important;color:var(--ys4-text)!important}
html:root[data-theme="dark"] body.ui2-admin .gc-admin-hero{background:linear-gradient(135deg,#0f2943,#0d2034)!important}

/* ---------------------------------------------------------------------
   11) Responsive product pass
   --------------------------------------------------------------------- */
@media(max-width:1180px){
  html:root body.ui2-panel .ys-billing-grid{grid-template-columns:1fr!important}
  html:root body.ui2-panel .ys-checkout-summary{position:static!important}
}
@media(max-width:900px){
  html:root body.ui2-panel .panel-content,html:root body.ui2-admin .panel-content{padding:15px 12px 28px!important}
  html:root body.ui2-panel .panel-topbar,html:root body.ui2-admin .panel-topbar{padding:8px 12px!important}
  html:root body.ui2-panel .ys-billing-shell{padding:0!important}
}
@media(max-width:680px){
  html:root body.ui2-panel .ys-billing-plans .plan-grid{grid-template-columns:1fr!important}
  html:root body.ui2-panel .plan-card{min-height:auto!important}
  html:root body.ui2-panel .rc10-manual-methods{grid-template-columns:1fr!important}
  html:root body.ui2-panel .ys-billing-hero{padding:14px!important;align-items:flex-start!important}
  html:root body.ui2-panel table th,html:root body.ui2-panel table td,html:root body.ui2-admin table th,html:root body.ui2-admin table td{padding:9px 10px!important}
}

/* ---------------------------------------------------------------------
   12) High-use legacy screens audited during R4
   --------------------------------------------------------------------- */
/* Help center */
html:root body.ui2-panel .gc-help-hero{background:linear-gradient(135deg,#0b2948,#0c4f83)!important;border-color:#174f79!important;color:#fff!important}
html:root body.ui2-panel .gc-help-hero h1,html:root body.ui2-panel .gc-help-hero h2,html:root body.ui2-panel .gc-help-hero h3,html:root body.ui2-panel .gc-help-hero p,html:root body.ui2-panel .gc-help-hero .small{color:#fff!important}
html:root body.ui2-panel .gc-manual-card,html:root body.ui2-panel .gc-help-video{background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .gc-manual-body p{color:var(--ys4-muted)!important;opacity:1!important}

/* Onboarding */
html:root body.ui2-panel .ob-item{background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .ob-item:hover{background:var(--ys4-surface-blue)!important;border-color:#aac7e7!important}
html:root body.ui2-panel .ob-dot{background:var(--ys4-surface-soft)!important;border-color:var(--ys4-border)!important;color:var(--ys4-text)!important}
html:root body.ui2-panel .ob-progress{background:var(--ys4-border)!important}

/* ZATCA connection and compliance */
html:root body.ui2-panel .rc10-zatca-connect p,html:root body.ui2-panel .rc10-section-head p,html:root body.ui2-panel .rc10-step-grid p,html:root body.ui2-panel .rc10-status-strip span{color:var(--ys4-muted)!important;opacity:1!important}
html:root body.ui2-panel .rc10-progress-ring:before{background:var(--ys4-surface)!important}
html:root body.ui2-panel .rc10-status-strip>div,html:root body.ui2-panel .rc10-toggle{background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .rc10-step-no{color:#8ea3b7!important;opacity:.35!important}

/* Enterprise KPI/status families */
html:root body.ui2-panel .rc6-kpi,html:root body.ui2-panel .rc6-currency-summary>div{background:var(--ys4-surface)!important;color:var(--ys4-text)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .rc6-kpi .small,html:root body.ui2-panel .rc6-currency-summary small{color:var(--ys4-muted)!important;opacity:1!important}

/* Inline code/readouts in maintenance and settings */
html:root body.ui2-admin pre,html:root body.ui2-panel pre{border-radius:11px!important;border:1px solid #263c54!important;box-shadow:none!important;line-height:1.6!important}

/* Empty states */
html:root body.ui2-panel .empty,html:root body.ui2-admin .empty{color:var(--ys4-muted)!important;background:var(--ys4-surface-soft)!important;border:1px dashed var(--ys4-border-strong)!important;border-radius:12px!important;padding:22px!important}
html:root body.ui2-panel .empty b,html:root body.ui2-admin .empty b{color:var(--ys4-text)!important}

/* ---------------------------------------------------------------------
   13) View-local CSS guardrails
   Many legacy views print <style> after the shared head. Important rules
   here intentionally preserve readable contrast across those pages.
   --------------------------------------------------------------------- */
html:root body.ui2-panel .panel-content p,
html:root body.ui2-panel .panel-content .small,
html:root body.ui2-panel .panel-content .muted,
html:root body.ui2-panel .panel-content label,
html:root body.ui2-admin .panel-content p,
html:root body.ui2-admin .panel-content .small,
html:root body.ui2-admin .panel-content .muted,
html:root body.ui2-admin .panel-content label{opacity:1!important}

/* Authentication pages deliberately keep a dark brand panel. */
html:root body.ui2-panel .auth-left,html:root body.ui2-admin .auth-left{
  background:linear-gradient(145deg,#061b31,#0a4778)!important;color:#fff!important
}
html:root body.ui2-panel .auth-left h1,html:root body.ui2-panel .auth-left h2,html:root body.ui2-panel .auth-left h3,
html:root body.ui2-admin .auth-left h1,html:root body.ui2-admin .auth-left h2,html:root body.ui2-admin .auth-left h3{color:#fff!important}
html:root body.ui2-panel .auth-left p,html:root body.ui2-panel .auth-left .small,html:root body.ui2-panel .auth-left .muted,
html:root body.ui2-admin .auth-left p,html:root body.ui2-admin .auth-left .small,html:root body.ui2-admin .auth-left .muted{color:#d4e4f2!important;opacity:1!important}
html:root body.ui2-panel .auth-right,html:root body.ui2-admin .auth-right{background:var(--ys4-surface)!important;color:var(--ys4-text)!important}
html:root body.ui2-panel .auth-form label,html:root body.ui2-admin .auth-form label{color:var(--ys4-text-2)!important}

/* Profiles/users: keep informative text readable instead of opacity-faded. */
html:root body.ui2-panel .gc-profile-head p,
html:root body.ui2-panel .gc-workspace-choice small,
html:root body.ui2-panel .gc-profile-access p,
html:root body.ui2-panel .gc-users-hero p,
html:root body.ui2-panel .gc-users-summary span,
html:root body.ui2-panel .gc-section-title p,
html:root body.ui2-panel .gc-team-toolbar p,
html:root body.ui2-panel .gc-branch-checks small,
html:root body.ui2-panel .gc-user-meta,
html:root body.ui2-panel .gc-user-contact,
html:root body.ui2-panel .gc-user-scope small{color:var(--ys4-muted)!important;opacity:1!important}
html:root body.ui2-panel .gc-workspace-choice label,html:root body.ui2-panel .gc-branch-checks label{background:var(--ys4-surface)!important;border-color:var(--ys4-border)!important}
html:root body.ui2-panel .gc-users-summary div{background:var(--ys4-surface-soft)!important;border-color:var(--ys4-border)!important}

/* Dark mode gets matching component colors rather than light islands. */
html:root[data-theme="dark"] body.ui2-panel .plan-card.selected{background:linear-gradient(180deg,#112b46,#0d2034)!important;border-color:#438ad9!important}
html:root[data-theme="dark"] body.ui2-panel .badge,
html:root[data-theme="dark"] body.ui2-admin .badge{background:#142a40!important;color:#bed0df!important;border-color:#324a61!important}
html:root[data-theme="dark"] body.ui2-panel .badge.ok,
html:root[data-theme="dark"] body.ui2-admin .badge.ok{background:#103326!important;color:#85e0b0!important;border-color:#26563f!important}
html:root[data-theme="dark"] body.ui2-panel .badge.warn,
html:root[data-theme="dark"] body.ui2-admin .badge.warn{background:#352b15!important;color:#f0cb78!important;border-color:#5d4a24!important}
html:root[data-theme="dark"] body.ui2-panel .badge.danger,
html:root[data-theme="dark"] body.ui2-admin .badge.danger{background:#381e27!important;color:#ffabb1!important;border-color:#65323a!important}
html:root[data-theme="dark"] body.ui2-panel .notice,
html:root[data-theme="dark"] body.ui2-admin .notice{background:#102943!important;color:#cfdeeb!important;border-color:#2b4660!important}
html:root[data-theme="dark"] body.ui2-panel .notice.ok,
html:root[data-theme="dark"] body.ui2-admin .notice.ok{background:#103326!important;color:#9be6bd!important;border-color:#27563f!important}
html:root[data-theme="dark"] body.ui2-panel .notice.warn,
html:root[data-theme="dark"] body.ui2-admin .notice.warn{background:#362c17!important;color:#efd088!important;border-color:#604d27!important}
html:root[data-theme="dark"] body.ui2-panel .notice.danger,
html:root[data-theme="dark"] body.ui2-admin .notice.danger{background:#381e27!important;color:#ffb2b8!important;border-color:#65323a!important}