/*
 * The storefront of the October 2026 design: header, search banner, benefits
 * strip and category cards. Every class is prefixed sf- so that nothing in
 * styles.css, which the console shares, can reach in. Measurements are the
 * Figma frame's at 1440px.
 */

:root {
  --sf-ink: #06172E;
  --sf-navy: #0F4C81;
  --sf-blue: #1A4D82;
  --sf-slate: #4A5F78;
  --sf-muted: #6B7F99;
  --sf-page: #F5F6F8;
  --sf-field: #F0F3F8;
  --sf-line: #E5E7EB;
  --sf-gray: #6B7280;
  --sf-gray-100: #F3F4F6;
  --sf-gray-900: #111827;
  --sf-font: "Vazirmatn Local", Tahoma, Arial, sans-serif;
  /* The design is set in IRANSansX, a commercial face this shop holds no licence
     for. Vazirmatn (OFL) stands in; site-header.php switches both tokens to
     IRANSansX the moment a licensed file is placed in assets/fonts/IRANSansX/. */
  --sf-display: "Vazirmatn Local", Tahoma, Arial, sans-serif;
  --sf-latin: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

.sf-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Flag emoji for the country and calling-code boxes. Windows draws none of
   its own; this face carries only the flags (Twemoji, CC BY 4.0). */
@font-face { font-family: "Twemoji Country Flags"; src: url("../fonts/TwemojiCountryFlags/TwemojiCountryFlags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; font-display: swap; }

/* ---------------------------------------------------------------- top strip */

.sf-topbar { height: 35px; background: #032747; }
.sf-topbar__inner { width: min(1226px, calc(100% - 32px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 15px; direction: ltr; }
.sf-topbar a { display: block; color: #fff; }
.sf-topbar svg { display: block; fill: currentColor; }
.sf-topbar__email svg { width: 26px; height: 26px; }
.sf-topbar__telegram svg { width: 21px; height: 21px; }
.sf-topbar__instagram svg { width: 20px; height: 20px; }
.sf-topbar a:hover { opacity: .8; }

/* ------------------------------------------------------------------- header */

.sf-header {
  position: sticky;
  top: 0;
  z-index: 60;
  font-family: var(--sf-font);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid rgba(6, 23, 46, .08);
  box-shadow: 0 1px 12px rgba(6, 23, 46, .06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.sf-header.is-signed-in {
  background: #fff;
  border-bottom-color: var(--sf-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sf-header__bar { width: min(1224px, calc(100% - 32px)); height: 68px; margin: 0 auto; display: flex; align-items: center; }
.sf-header.is-signed-in .sf-header__bar { width: min(1226px, calc(100% - 32px)); height: 63px; }

.sf-brand { flex: none; display: block; width: 130px; height: 29.95px; }
.sf-brand img { display: block; width: 130px; height: 29.95px; object-fit: contain; object-position: center; }

.sf-search { flex: none; width: 346px; height: 38px; margin-inline-start: 50px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 12px; background: var(--sf-field); }
.sf-search .sf-ico { width: 17px; height: 17px; color: var(--sf-ink); }
.sf-search input { flex: 1; min-width: 0; height: 20px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--sf-ink); font: 400 13px/20px var(--sf-font); }
.sf-search input::placeholder { color: rgba(6, 23, 46, .5); opacity: 1; }
.sf-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-search:focus-within { box-shadow: 0 0 0 2px rgba(15, 76, 129, .22); }
.sf-header.is-signed-in .sf-header__bar > .sf-search { display: none; }

.sf-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 33px; }
.sf-header.is-signed-in .sf-nav { margin-inline-start: 181px; }
.sf-nav__group { position: relative; }
.sf-header .sf-nav__link { display: block; width: auto; height: auto; min-height: 0; padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--sf-slate); font: 500 14px/21px var(--sf-font); white-space: nowrap; cursor: pointer; }
.sf-header .sf-nav__link:hover,
.sf-header .sf-nav__link.active { background: rgba(6, 23, 46, .05); color: var(--sf-ink); }

.sf-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.sf-header.is-signed-in .sf-actions { gap: 8px; }

.sf-header .sf-icon-button { width: 36px; height: 36px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--sf-slate); cursor: pointer; }
.sf-header .sf-icon-button:hover { background: rgba(6, 23, 46, .05); color: var(--sf-ink); }
.sf-ico--globe { stroke-width: 2.4; }

.sf-header .sf-theme-button { border-radius: 12px; color: var(--sf-gray); }
.sf-header .sf-theme-button .sf-ico { width: 18px; height: 18px; }
.sf-header.is-signed-in .sf-theme-button { margin-inline-end: -8px; }

.sf-header .sf-pill { height: 36px; min-height: 0; width: auto; display: flex; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: transparent; color: var(--sf-gray); font: 500 14px/20px var(--sf-font); white-space: nowrap; direction: ltr; cursor: pointer; }
.sf-header .sf-pill:hover { border-color: #D1D5DB; color: var(--sf-gray-900); }
.sf-header .sf-pill .sf-ico { width: 15px; height: 15px; }
.sf-header #sfLanguagePill { gap: 6px; }
.sf-header #sfLanguagePill .sf-ico { width: 16px; height: 16px; }

.sf-header .sf-account__button { height: 36px; min-height: 0; width: auto; display: flex; align-items: center; gap: 8px; padding-block: 0; padding-inline: 6px 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); color: var(--sf-gray-900); cursor: pointer; }
.sf-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--sf-ink); color: #fff; font: normal 600 12px/16px var(--sf-font); }
.sf-account__text { display: flex; flex-direction: column; align-items: flex-start; }
[dir="rtl"] .sf-account__text { align-items: flex-end; }
.sf-account__text b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray-900); font: 600 12px/16px var(--sf-font); }
.sf-account__text small { color: var(--sf-gray); font: 400 10px/13px var(--sf-font); white-space: nowrap; }
/* A Latin name or "107.60 USD" keeps its own order on a Persian page. */
.sf-account__text b,
.sf-account__text small { unicode-bidi: plaintext; }
.sf-account__chevron.sf-ico { width: 14px; height: 14px; color: var(--sf-gray); }

/* Which half of the header a state shows. */
.sf-header:not(.is-signed-in) .sf-account-only,
.sf-header.is-signed-in .sf-guest-only { display: none !important; }

/* Panels hanging off the header, in the design's colours rather than the
   orange of the old one. */
.sf-header .dropdown-panel { top: calc(100% + 8px); padding: 8px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(6, 23, 46, .12); font-family: var(--sf-font); }
[dir="rtl"] .sf-header .sf-actions .dropdown-panel { left: 0; right: auto; }
[dir="ltr"] .sf-header .sf-actions .dropdown-panel { right: 0; left: auto; }
[dir="rtl"] .sf-header .sf-nav .dropdown-panel { right: 0; left: auto; }
[dir="ltr"] .sf-header .sf-nav .dropdown-panel { left: 0; right: auto; }
.sf-header .dropdown-panel > p { color: var(--sf-muted); }
.sf-header .services-menu a,
.sf-header .services-menu button,
.sf-header .telegram-menu a,
.sf-header .currency-menu button { border-radius: 8px; color: var(--sf-ink); }
.sf-header .services-menu a:hover,
.sf-header .telegram-menu a:hover,
.sf-header .currency-menu button:hover { background: var(--sf-field); }
.sf-header .services-menu i { background: var(--sf-field); color: var(--sf-navy); }
.sf-header .services-menu b,
.sf-header .telegram-menu b,
.sf-header .currency-menu b { color: var(--sf-navy); }
.sf-panel__all { display: block; margin-top: 4px; padding: 9px; border-top: 1px solid var(--sf-line); color: var(--sf-blue); font: 600 13px/20px var(--sf-font); text-align: center; }
.sf-header .account-menu { width: 220px; }
.sf-header .account-menu a,
.sf-header .account-menu button { width: 100%; height: 40px; min-height: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sf-ink); font: 500 13px/20px var(--sf-font); text-align: start; cursor: pointer; }
.sf-header .account-menu a:hover,
.sf-header .account-menu button:hover { background: var(--sf-field); }
.sf-header .account-menu .icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--sf-blue); }

.sf-header .sf-menu-toggle { display: none; font-size: 22px; line-height: 1; }

.sf-header .sf-mobile-menu.open { padding: 12px 16px 16px; border-bottom: 1px solid var(--sf-line); box-shadow: 0 18px 35px rgba(6, 23, 46, .1); font-family: var(--sf-font); }
.sf-header .sf-mobile-menu a,
.sf-header .sf-mobile-menu button { color: var(--sf-slate); font: 500 14px/21px var(--sf-font); border-bottom-color: var(--sf-gray-100); }
.sf-search--mobile { width: 100%; margin: 0 0 6px; }

@media (max-width: 1180px) {
  .sf-header .sf-nav,
  .sf-header .sf-header__bar > .sf-search { display: none; }
  .sf-header .sf-menu-toggle { display: grid; }
}

@media (max-width: 640px) {
  .sf-brand,
  .sf-brand img { width: 108px; height: 25px; }
  .sf-header .sf-account__text,
  .sf-header .sf-account__chevron,
  .sf-header .sf-theme-button { display: none; }
  .sf-header .sf-account__button { padding: 0 3px; }
  .sf-header .sf-pill { padding: 0 8px; }
  .sf-header.is-signed-in .sf-actions { gap: 6px; }
}

/* The bar that runs across the top while a request is out. */
#appProgress span { background: linear-gradient(90deg, var(--sf-navy), #4F9BD9) !important; box-shadow: 0 0 10px rgba(15, 76, 129, .45) !important; }

/* ------------------------------------------------------------ search banner */

.sf-hero { position: relative; overflow: hidden; background: var(--sf-page); font-family: var(--sf-font); }
.sf-hero__inner { position: relative; width: min(1224px, calc(100% - 32px)); height: 788px; margin: 0 auto; display: flex; align-items: center; direction: ltr; }
.sf-hero__copy { position: relative; z-index: 1; width: 600px; height: 456px; display: flex; flex-direction: column; justify-content: space-between; text-align: start; }
[dir="rtl"] .sf-hero__copy,
[dir="rtl"] .sf-hero__art { direction: rtl; }
.sf-hero__copy h1 { margin: 0; color: var(--sf-ink); font: 900 48px/72px var(--sf-display); }
.sf-hero__copy h1 em { font-style: normal; color: var(--sf-navy); }
.sf-hero__lead { margin: 0; color: #A0AEC0; font: 400 20px/30px var(--sf-display); }

.sf-hero__search { height: 64px; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .149); }
.sf-hero__search .sf-ico { width: 20px; height: 20px; color: #C2975C; stroke-width: 2.4; }
.sf-hero__search input { flex: 1; min-width: 0; height: 24px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--sf-ink); font: 400 16px/24px var(--sf-display); text-align: start; }
.sf-hero__search input::placeholder { color: #999; opacity: 1; }
.sf-hero__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-hero__search button { flex: none; width: 96px; height: 40px; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: var(--sf-ink); color: #fff; font: 700 18px/27px var(--sf-display); cursor: pointer; }
.sf-hero__search button:hover { background: #0B2442; }
.sf-hero__search:focus-within { box-shadow: 0 12px 28px rgba(0, 0, 0, .149), 0 0 0 2px rgba(15, 76, 129, .2); }

.sf-hero__shortcuts { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-hero__shortcuts button { height: 36px; min-height: 0; width: auto; display: block; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: #fff; color: #000; font: 600 13px/20px var(--sf-display); white-space: nowrap; cursor: pointer; }
.sf-hero__shortcuts button:hover { color: var(--sf-navy); box-shadow: 0 4px 12px rgba(6, 23, 46, .08); }

/* The two phones and the badge. Figma gives a rotated layer's position as the
   corner of its turned bounding box; these lefts and tops are the unturned
   boxes that land in the same place, relative to x=669 of the 1224 frame. */
.sf-hero__art { position: absolute; left: 669px; top: 0; width: 555px; height: 788px; pointer-events: none; }
.sf-hero__glow { position: absolute; left: 0; top: 105px; width: 531px; height: 530px; border-radius: 50%; background: rgba(146, 191, 223, .69); filter: blur(71.4px); }

.sf-phone { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; padding: 7px; border: 1.5px solid rgba(179, 222, 248, .25); background: linear-gradient(135deg, #2A3B52 0%, #0B1626 32.14%, #1C2B40 71.43%); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6); }
.sf-phone--front { left: 283.6px; top: 149.5px; width: 190px; height: 412px; border-radius: 34.2px; transform: rotate(-5deg); z-index: 3; }
.sf-phone--back { left: 55.4px; top: 194.9px; width: 181.9px; height: 360px; border-radius: 29.88px; transform: rotate(4deg); opacity: .9; z-index: 4; }
.sf-phone__island { position: absolute; left: 50%; top: 20px; width: 58px; height: 17px; margin-left: -29px; border-radius: 9px; background: #000; }
.sf-phone__screen { flex: 1; min-height: 0; border-radius: 28px; overflow: hidden; }

.sf-phone__screen--done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, #1B3A5C 0%, #06172E 71.43%); text-align: center; }
.sf-mock-unlock { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(74, 222, 154, .15); }
.sf-mock-unlock svg { width: 24px; height: 24px; fill: none; stroke: #4ADE9A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-phone__screen--done b { color: #fff; font: 700 12px/19px var(--sf-font); }
.sf-phone__screen--done small { color: #B3DEF8; font: 600 9px/11px var(--sf-latin); }

.sf-phone__screen--panel { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 36px 10px 10px; background: #F4F7FA; }
.sf-mock-top { height: 18px; display: flex; align-items: center; justify-content: space-between; }
.sf-mock-top b { color: var(--sf-ink); font: 800 10px/16px var(--sf-font); }
.sf-mock-top i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: var(--sf-ink); color: #fff; font: normal 700 7px/8px var(--sf-latin); }
.sf-mock-status { height: 22px; padding: 4px 7px; border-radius: 8px; background: #E5F7EE; color: #137A4B; font: 700 9px/14px var(--sf-font); white-space: nowrap; }
.sf-mock-card { position: relative; isolation: isolate; height: 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 9px; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #0F4C81 0%, #022C50 35.71%, #06172E 71.43%); direction: ltr; }
.sf-mock-card__row { align-self: stretch; height: 10px; display: flex; flex-direction: row-reverse; justify-content: space-between; color: #EAF3FB; font: 700 8px/10px var(--sf-latin); }
.sf-mock-card__chip { width: 18px; height: 13px; flex: none; border-radius: 3px; background: linear-gradient(135deg, #E3C08E 0%, #C2975C 71.43%); }
.sf-mock-card__fill { flex: 1; }
.sf-mock-card__ring { position: absolute; left: -33.37px; top: -31.74px; width: 90px; height: 90px; border: 1px solid rgba(194, 151, 92, .4); border-radius: 50%; z-index: -1; }
.sf-mock-card small { color: #B3DEF8; font: 600 7px/8px var(--sf-latin); }
.sf-mock-card b { color: #fff; font: 600 8.5px/10px var(--sf-latin); }
.sf-mock-questions { height: 51px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 5px 7px 6px; border: 1px solid #DDE6EF; border-radius: 8px; background: #fff; }
.sf-mock-questions b { color: var(--sf-ink); font: 600 9px/14px var(--sf-font); }
.sf-mock-questions i { display: block; width: 140px; height: 4px; border-radius: 2px; background: #DDE6EF; }
.sf-mock-questions i:nth-of-type(2) { width: 84px; background: #B3DEF8; }
.sf-mock-questions i:nth-of-type(3) { width: 112px; }
.sf-mock-fill { flex: 1; }
.sf-mock-button { height: 26px; padding: 6px 0; border-radius: 8px; background: var(--sf-ink); color: #fff; font: 700 9px/14px var(--sf-font); text-align: center; }

.sf-hero__tag { position: absolute; left: 36px; top: 571px; z-index: 2; min-width: 130px; min-height: 57px; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border: 1px solid rgba(179, 222, 248, .2); border-radius: 12px; background: rgba(6, 23, 46, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); white-space: nowrap; }
.sf-hero__tag b { color: #fff; font: 700 13px/20px var(--sf-font); }
.sf-hero__tag span { color: #DCE9F5; font: 400 12px/19px var(--sf-font); }

@media (max-width: 1260px) {
  .sf-hero__inner { height: auto; flex-direction: column; align-items: stretch; padding: 56px 0 0; direction: inherit; }
  .sf-hero__copy { width: min(600px, 100%); height: auto; gap: 28px; margin: 0 auto; }
  .sf-hero__art { position: relative; left: auto; align-self: center; flex: none; width: 555px; height: 660px; margin: -60px 0 0; top: 0; }
}

@media (max-width: 640px) {
  .sf-hero__inner { padding-top: 36px; }
  .sf-hero__copy { gap: 22px; }
  .sf-hero__copy h1 { font-size: 34px; line-height: 50px; }
  .sf-hero__lead { font-size: 16px; line-height: 26px; }
  .sf-hero__search { height: 56px; padding: 0 8px; gap: 8px; }
  .sf-hero__search input { font-size: 14px; }
  .sf-hero__search button { width: 76px; height: 40px; font-size: 16px; }
  .sf-hero__shortcuts { height: auto; flex-wrap: wrap; justify-content: flex-start; }
  .sf-hero__art { transform: scale(.6); transform-origin: top center; height: 420px; margin-bottom: -40px; }
}

/* ----------------------------------------------------------- benefits strip */

.sf-benefits { background: #fff; border-bottom: 1px solid rgba(6, 23, 46, .06); font-family: var(--sf-font); }
.sf-benefits__grid { width: min(1224px, calc(100% - 32px)); margin: 0 auto; padding-inline-end: 23px; display: grid; grid-template-columns: 248fr 318fr 318fr 318fr; }
.sf-benefits article { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 28px; }
.sf-benefits article + article { border-inline-start: 1px solid rgba(6, 23, 46, .07); }
.sf-benefits .sf-ico { width: 28px; height: 28px; color: var(--sf-blue); stroke-width: 1.5; }
.sf-benefits span { display: flex; flex-direction: column; }
.sf-benefits b { color: var(--sf-ink); font: 700 14px/21px var(--sf-font); }
.sf-benefits small { padding-top: 3px; color: var(--sf-muted); font: 400 12px/18px var(--sf-font); }

@media (max-width: 1024px) {
  .sf-benefits__grid { padding: 0; grid-template-columns: 1fr 1fr; }
  .sf-benefits article:nth-child(3) { border-inline-start: 0; }
  .sf-benefits article:nth-child(n+3) { border-top: 1px solid rgba(6, 23, 46, .07); }
}

@media (max-width: 560px) {
  .sf-benefits__grid { grid-template-columns: 1fr; }
  .sf-benefits article { justify-content: flex-start; min-height: 76px; padding: 16px 4px; }
  .sf-benefits article + article { border-inline-start: 0; border-top: 1px solid rgba(6, 23, 46, .07); }
}

/* ----------------------------------------------------- section, categories */

.sf-section { background: var(--sf-page); font-family: var(--sf-font); }
.sf-section__head { width: min(1222px, calc(100% - 32px)); min-height: 63px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-section__head h2 { margin: 0; color: var(--sf-ink); font: 800 24px/36px var(--sf-font); }
.sf-section__head p { margin: 0; padding-top: 6px; color: var(--sf-muted); font: 400 14px/21px var(--sf-font); }
.sf-section__more { flex: none; display: flex; align-items: center; gap: 4px; color: var(--sf-blue); font: 600 14px/20px var(--sf-font); }
.sf-section__more .sf-ico { width: 16px; height: 16px; }
[dir="ltr"] .sf-section__more .sf-ico { transform: scaleX(-1); }
.sf-section__more:hover { color: var(--sf-navy); }

.sf-categories { padding: 56px 0 120px; }
.sf-cats { width: min(1222px, calc(100% - 32px)); margin: 18px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 210px 147px; column-gap: 24.67px; row-gap: 18px; grid-template-areas: "c1 c2 c2 c3" "c1 c4 c5 c6"; }

.sf-cat { position: relative; min-width: 0; display: flex; border: 1px solid; border-radius: 24px; color: var(--sf-ink); transition: transform .18s ease, box-shadow .18s ease; }
.sf-cat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6, 23, 46, .08); }
.sf-cat__icon { flex: none; width: 48px; height: 48px; object-fit: contain; }
.sf-cat__copy { min-width: 0; display: flex; flex-direction: column; }
.sf-cat__copy b { font: 800 20px/28px var(--sf-font); }
.sf-cat__copy small { margin-top: 4px; color: var(--sf-ink); font: 400 16px/24px var(--sf-font); }

.sf-cat--1 { grid-area: c1; flex-direction: column; align-items: flex-start; padding: 24px 12px; background: #E1F4FF; border-color: #99D8FF; }
.sf-cat--1 .sf-cat__copy b { margin-top: 35px; color: var(--sf-navy); font-size: 24px; line-height: 36px; }
.sf-cat--1 .sf-cat__copy small { margin-top: 57px; }
.sf-cat__button { margin-top: auto; height: 48px; display: grid; place-items: center; padding: 0 16px; border-radius: 12px; background: var(--sf-navy); color: #fff; font: 500 18px/27px var(--sf-font); }
.sf-cat--1:hover .sf-cat__button { background: #0B3D69; }

.sf-cat--2 { grid-area: c2; flex-direction: row; align-items: center; gap: 30px; padding: 24px 12px; background: #E8EDF2; border-color: #BECCDA; }
.sf-cat--2 .sf-cat__copy b { font-size: 24px; line-height: 36px; }
.sf-cat--2 .sf-cat__copy small { margin-top: 33px; }

.sf-cat--3 { grid-area: c3; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 24px 12px; background: #FFEBEE; border-color: #FFCCD4; }

.sf-cat--4,
.sf-cat--5,
.sf-cat--6 { flex-direction: row; align-items: center; gap: 20px; padding: 16px 12px; }
.sf-cat--4 .sf-cat__icon,
.sf-cat--5 .sf-cat__icon,
.sf-cat--6 .sf-cat__icon { width: 56px; height: 56px; }
.sf-cat--4 .sf-cat__copy small,
.sf-cat--5 .sf-cat__copy small,
.sf-cat--6 .sf-cat__copy small { margin-top: 12px; }
.sf-cat--4 { grid-area: c4; background: #F3F0FF; border-color: #AD99FF; }
.sf-cat--4 .sf-cat__copy b { color: #5B21B6; }
.sf-cat--5 { grid-area: c5; background: #FFEBEE; border-color: #FF99A8; }
.sf-cat--5 .sf-cat__copy b { color: #B91C1C; }
.sf-cat--6 { grid-area: c6; background: #ECFDF5; border-color: #129C00; }
.sf-cat--6 .sf-cat__copy b { color: #1B7156; }

@media (max-width: 1024px) {
  .sf-categories { padding-bottom: 72px; }
  .sf-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(147px, auto); grid-template-areas: "c1 c3" "c1 c4" "c2 c2" "c5 c6"; gap: 16px; }
}

@media (max-width: 560px) {
  .sf-section__head { padding: 0; flex-wrap: wrap; }
  .sf-cats { grid-template-columns: 1fr; grid-template-areas: "c1" "c2" "c3" "c4" "c5" "c6"; }
  .sf-cat--1 { min-height: 300px; }
  .sf-cat--1 .sf-cat__copy small { margin-top: 20px; }
  .sf-cat--2 .sf-cat__copy small { margin-top: 12px; }
}

/* The grid of services under the categories keeps its old markup until its
   own design lands; the header no longer covers it when a search jumps here. */
#services { scroll-margin-top: 84px; }

/* ======================================================================== */
/* The customer's account (October 2026 design): sidebar, overview, orders,  */
/* a single order. Measured on the 1440 frame: sidebar 288 at the right,     */
/* content 912 beside it, 25 between.                                        */
/* ======================================================================== */

.sf-account {
  --orange: #58A1D3;
  --orange-dark: #4A8FC0;
  --soft: #E8F3FB;
  --brand: #58A1D3;
  --sf-panel-blue: #58A1D3;
  background: var(--sf-gray-100);
  font-family: var(--sf-font);
  color: var(--sf-gray-900);
  padding-bottom: 72px;
}
.dashboard-open .sf-topbar,
.order-history-open .sf-topbar,
.records-open .sf-topbar,
.funding-open .sf-topbar { display: none; }

.sf-account__shell { width: min(1225px, calc(100% - 32px)); margin: 0 auto; display: grid; grid-template-columns: 288px minmax(0, 912px); column-gap: 25px; justify-content: center; align-items: start; }
.sf-account__main { min-width: 0; }

/* ---- sidebar ---- */
.sf-side { margin-top: 1px; min-height: 867px; display: flex; flex-direction: column; border: 1px solid #E5E5E7; border-radius: 6px; background: #fff; }
@media (min-height: 940px) and (min-width: 1101px) { .sf-side { position: sticky; top: 65px; } }
.sf-side__who { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--sf-line); }
.sf-side__avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--sf-panel-blue); color: #fff; font: normal 600 16px/24px var(--sf-font); }
.sf-side__who > span { width: 163px; min-width: 0; display: flex; flex-direction: column; text-align: start; }
.sf-side__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); unicode-bidi: plaintext; }
.sf-side__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray); font: 400 12px/16px var(--sf-font); direction: ltr; text-align: end; }
[dir="ltr"] .sf-side__who small { text-align: start; }
.sf-side__nav { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sf-side__group { display: flex; flex-direction: column; gap: 4px; }
.sf-side__group + .sf-side__group { gap: 0; padding-top: 16px; }
.sf-side__group > p { margin: 0 0 4px; padding: 0 12px; color: var(--sf-gray); font: 600 10px/15px var(--sf-font); text-transform: uppercase; }
.sf-account .sf-side__item { width: 100%; height: 40px; min-height: 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--sf-gray); font: 500 14px/20px var(--sf-font); text-align: start; text-decoration: none; cursor: pointer; }
.sf-side__item .sf-ico { width: 20px; height: 20px; }
.sf-account .sf-side__item:hover { background: var(--sf-gray-100); color: var(--sf-gray-900); }
.sf-account .sf-side__item.is-active,
.sf-account .sf-side__item.is-active:hover { background: var(--sf-panel-blue); color: #fff; }
.sf-side__foot { padding: 12px; border-top: 1px solid var(--sf-line); }
.sf-account .sf-side__logout { width: 231px; max-width: 100%; height: 40px; min-height: 0; margin-inline-start: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: #FB2C36; font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-side__logout .sf-ico { width: 20px; height: 20px; }
[dir="rtl"] .sf-side__logout .sf-ico { transform: scaleX(-1); }
.sf-account .sf-side__logout:hover { background: #FEF2F2; }

/* ---- page heads ---- */
.sf-view { padding-top: 29px; }
.sf-orders, .sf-od, .sf-records { padding-top: 42px; }
.sf-crumbs { display: flex; align-items: center; gap: 6px; min-height: 20px; color: var(--sf-gray); font: 400 12px/20px var(--sf-font); }
.sf-account .sf-crumbs a, .sf-account .sf-crumbs button { height: auto; min-height: 0; width: auto; display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sf-account .sf-crumbs a:hover, .sf-account .sf-crumbs button:hover { color: var(--sf-gray-900); }
.sf-crumbs b { color: var(--sf-gray-900); font-weight: 600; }
.sf-crumbs .sf-ico { width: 12px; height: 12px; color: #9CA3AF; }
[dir="ltr"] .sf-crumbs .sf-ico { transform: scaleX(-1); }
.sf-page-title { margin: 4px 0 0; color: var(--sf-gray-900); font: 800 28px/40px var(--sf-font); }
.sf-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }

.sf-welcome { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-welcome h2 { margin: 0; color: var(--sf-gray-900); font: 700 22px/33px var(--sf-font); }
.sf-welcome p { margin: 0; padding-top: 4px; color: var(--sf-gray); font: 400 14px/20px var(--sf-font); }
.sf-account .sf-button { height: 36px; min-height: 0; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--sf-panel-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: #fff; font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-welcome .sf-button { width: 184px; }
.sf-account .sf-button:hover { background: #4A93C6; }
.sf-button .sf-ico { width: 16px; height: 16px; }

/* ---- balance card ---- */
.sf-balance { position: relative; isolation: isolate; overflow: hidden; margin-top: 9px; height: 292px; padding: 24px 22px 14px; border-radius: 16px; background: linear-gradient(135deg, #0D1520 0%, #18253A 60%, #1E2F45 100%); box-shadow: 0 8px 32px rgba(0, 0, 0, .28); color: #fff; }
.sf-balance__glow { position: absolute; left: -39px; top: -56px; z-index: -1; width: 160px; height: 160px; border-radius: 50%; background: #B3DEF8; opacity: .1; filter: blur(40px); }
.sf-balance__top { height: 70px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sf-balance__now { display: flex; flex-direction: column; align-items: flex-start; }
.sf-balance__now small { height: 26px; display: flex; align-items: center; color: rgba(255, 255, 255, .5); font: 500 15px/16px var(--sf-display); text-transform: uppercase; }
.sf-balance__now strong { margin-top: 4px; height: 40px; display: flex; align-items: flex-start; gap: 7px; direction: ltr; font-weight: 400; }
.sf-balance__now strong b { color: #fff; font: 700 36px/40px var(--sf-font); letter-spacing: -.9px; }
.sf-balance__now strong span { padding-top: 11px; color: rgba(255, 255, 255, .6); font: 500 18px/28px var(--sf-font); }
.sf-balance__when { display: flex; flex-direction: column; align-items: flex-start; }
.sf-balance__when small { height: 21px; color: rgba(255, 255, 255, .4); font: 400 14px/16px var(--sf-display); }
.sf-balance__when b { padding-top: 2px; color: rgba(255, 255, 255, .6); font: 500 14px/16px var(--sf-font); direction: ltr; }
.sf-account .sf-balance .balance-chart { height: 80px; margin: 0; padding: 24px 0 0; display: flex; align-items: flex-end; gap: 6px; border: 0; background: none; }
.sf-account .sf-balance .balance-chart span { flex: 1; min-height: 4px; max-height: 100%; margin: 0; border-radius: 4px 4px 0 0; background: #B3DEF8; opacity: 1; }
.sf-balance__boxes { padding-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sf-balance__boxes > div { height: 84px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .07); }
.sf-balance__boxes small { height: 17px; color: rgba(255, 255, 255, .45); font: 400 11px/16px var(--sf-font); }
.sf-balance__boxes > div > b { align-self: stretch; margin-top: 6px; height: 28px; display: flex; align-items: center; gap: 6px; direction: ltr; font-weight: 400; }
[dir="rtl"] .sf-balance__boxes > div > b { justify-content: flex-end; }
.sf-balance__boxes > div > b span { color: rgba(255, 255, 255, .5); font: 700 14px/20px var(--sf-font); }
.sf-balance__boxes > div > b b { color: #fff; font: 700 18px/28px var(--sf-font); }

/* ---- order counts ---- */
.sf-stats { margin-top: 35px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sf-account .sf-stat { height: 87px; min-height: 0; width: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.sf-account .sf-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .07); }
.sf-stat b { color: var(--sf-gray-900); font: 700 24px/32px var(--sf-font); }
.sf-stat small { color: var(--sf-gray); font: 500 12px/15px var(--sf-font); }
.sf-account .sf-stat.is-total { border-color: var(--sf-panel-blue); background: var(--sf-panel-blue); }
.sf-stat.is-total b { color: #fff; }
.sf-stat.is-total small { color: rgba(255, 255, 255, .8); }

/* ---- the two short lists ---- */
.sf-card { border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); }
.sf-recent { margin-top: 39px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sf-list { min-height: 280px; overflow: hidden; }
.sf-list > header { height: 53px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--sf-line); }
.sf-list > header h3 { margin: 0; color: var(--sf-gray-900); font: 700 16px/24px var(--sf-font); }
.sf-list > header a { display: inline-flex; align-items: center; gap: 4px; color: var(--sf-panel-blue); font: 500 13px/20px var(--sf-font); }
.sf-list > header a .sf-ico { width: 12px; height: 12px; }
.sf-account .sf-list__row { width: 100%; height: 65px; min-height: 0; display: flex; align-items: center; gap: 14px; padding: 0 21px; border: 0; border-bottom: 1px solid var(--sf-line); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: start; text-decoration: none; }
.sf-account .sf-list__row:last-child { border-bottom: 0; }
.sf-account a.sf-list__row:hover, .sf-account button.sf-list__row:hover { background: #F9FAFB; cursor: pointer; }
.sf-list__badge, .sf-list__file { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; font-style: normal; }
.sf-list__badge .sf-ico, .sf-list__file .sf-ico { width: 18px; height: 18px; }
.sf-list__badge.is-in { background: #002C22; color: #00BC7D; }
.sf-list__badge.is-out { background: #460809; color: #FF6467; }
.sf-list__file { background: var(--sf-gray-100); color: var(--sf-gray); }
.sf-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-list__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray-900); font: 500 15px/22px var(--sf-font); }
.sf-list__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray); font: 400 12px/18px var(--sf-font); }
.sf-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; letter-spacing: 0; }
.sf-list__text b.sf-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-weight: 500; }
.sf-list__amount { flex: none; font: 700 15px/22px var(--sf-font); unicode-bidi: isolate; direction: ltr; }
.sf-list__amount.is-in, .sf-amount.is-in { color: #00BC7D; }
.sf-list__amount.is-out, .sf-amount.is-out { color: #FB2C36; }
.sf-list__sum { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sf-list__sum strong { color: var(--sf-gray-900); font: 700 15px/22px var(--sf-font); direction: ltr; }
.sf-list__empty { margin: 0; padding: 40px 21px; color: #9CA3AF; font: 400 13px/20px var(--sf-font); text-align: center; }

/* ---- status pills ---- */
.sf-status { height: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid; border-radius: 999px; font: 600 12px/16px var(--sf-font); white-space: nowrap; }
.sf-status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.sf-status.is-success { border-color: #006045; background: #002C22; color: #00D492; }
.sf-status.is-rejected { border-color: #82181A; background: #460809; color: #FF6467; }
.sf-status.is-waiting { border-color: #7B3306; background: #461901; color: #FFB900; }
.sf-status.is-processing { border-color: #024A70; background: #052F4A; color: #74D4FF; }

/* ---- orders list ---- */
.sf-daterange { position: relative; width: 285px; height: 36px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; }
.sf-daterange .sf-ico { order: 9; width: 14px; height: 14px; color: var(--sf-gray); }
.sf-daterange span { color: #9CA3AF; font: 400 13px/20px var(--sf-font); }
.sf-daterange input { position: relative; flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--sf-gray-900); font: 400 12px/20px var(--sf-font); text-align: center; }
.sf-daterange input:not(:focus):invalid { color: transparent; }
.sf-daterange input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.sf-daterange:focus-within { border-color: #B6D5EC; box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }

.sf-orders__card { margin-top: 47px; padding: 35px 22px 29px; overflow: hidden; }
.sf-tabs { height: 43px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--sf-gray-100); }
.sf-account .sf-tabs button { height: 35px; min-height: 0; width: auto; flex: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 0 15px; border: 0; border-radius: 10px; background: transparent; color: #4B5563; font: 400 15px/24px var(--sf-font); cursor: pointer; }
.sf-tabs button i { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: #E5E7EB; color: var(--sf-gray); font: normal 500 12px/20px var(--sf-font); }
.sf-account .sf-tabs button.active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: var(--sf-gray-900); font-weight: 700; }
.sf-tabs button.active i { background: var(--sf-panel-blue); color: #fff; }
.sf-search-field { margin-top: 12px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; }
.sf-search-field .sf-ico { width: 16px; height: 16px; color: var(--sf-gray); }
.sf-search-field input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--sf-gray-900); font: 400 15px/24px var(--sf-font); }
.sf-search-field input::placeholder { color: var(--sf-gray); opacity: 1; }
.sf-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-search-field:focus-within { border-color: #B6D5EC; box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }

.sf-account .sf-table-wrap { margin: 28px -22px -29px; border-top: 1px solid var(--sf-line); background: #fff; overflow-x: auto; }
.sf-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.sf-account .sf-table th { height: 79px; padding: 0 12px 11px; border: 0; border-bottom: 1px solid var(--sf-line); background: #fff; color: var(--sf-gray); font: 400 17px/24px var(--sf-font); text-align: center; text-transform: none; letter-spacing: 0; vertical-align: bottom; }
.sf-account .sf-table td { height: 52px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--sf-line); color: #374151; font: 400 15px/22px var(--sf-font); text-align: center; vertical-align: middle; }
.sf-account .sf-table tbody tr:last-child td { border-bottom: 0; height: 56px; }
.sf-orders .sf-table th:nth-child(1), .sf-orders .sf-table td:nth-child(1) { width: 173px; }
.sf-orders .sf-table th:nth-child(2), .sf-orders .sf-table td:nth-child(2) { width: 161px; }
.sf-orders .sf-table th:nth-child(3), .sf-orders .sf-table td:nth-child(3) { width: 139px; }
.sf-orders .sf-table th:nth-child(4), .sf-orders .sf-table td:nth-child(4) { width: 127px; }
.sf-orders .sf-table th:nth-child(5), .sf-orders .sf-table td:nth-child(5) { width: 145px; }
.sf-account .sf-table tbody tr[data-order-id] { cursor: pointer; }
.sf-account .sf-table tbody tr[data-order-id]:hover td { background: #F9FAFB; }
.sf-account .sf-table tbody tr:focus-visible { outline: 2px solid var(--sf-panel-blue); outline-offset: -2px; }
.sf-account .sf-order-id { height: auto; min-height: 0; width: auto; display: inline; padding: 0; border: 0; background: none; color: var(--sf-panel-blue); font: 600 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; direction: ltr; unicode-bidi: isolate; cursor: pointer; }
.sf-order-service { color: var(--sf-gray-900); font-weight: 600; unicode-bidi: plaintext; }
.sf-order-price { color: var(--sf-gray-900); font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.sf-order-date { color: var(--sf-gray); font-size: 13px; direction: ltr; unicode-bidi: isolate; }

.sf-account .sf-empty { min-height: 0; padding: 130px 16px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sf-account .sf-empty > i { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 0; background: none; box-shadow: none; color: var(--sf-gray); font-style: normal; }
.sf-account .sf-empty > i .icon { width: 80px; height: 80px; stroke-width: 1.4; }
.sf-account .sf-empty h2 { margin: 22px 0 0; color: var(--sf-gray-900); font: 700 22px/32px var(--sf-font); }
.sf-account .sf-empty p { max-width: 440px; margin: 10px 0 0; color: var(--sf-gray); font: 400 18px/31px var(--sf-font); }
.sf-account .sf-empty .sf-button { margin-top: 24px; height: 34px; border-radius: 10px; }

/* ---- a single order ---- */
.sf-od__head { margin-top: 3px; display: flex; align-items: center; gap: 13px; }
.sf-account .sf-od__back { width: 36px; height: 36px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray); cursor: pointer; }
.sf-od__back .sf-ico { width: 16px; height: 16px; }
[dir="ltr"] .sf-od__back .sf-ico { transform: scaleX(-1); }
.sf-od__name { min-width: 0; flex: 1; }
.sf-od__name h1 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--sf-gray-900); font: 700 20px/28px var(--sf-font); }
#sfOrderTitle { unicode-bidi: plaintext; }
.sf-od__name p { margin: 2px 0 0; color: var(--sf-gray); font: 400 12px/18px var(--sf-font); text-align: right; }
[dir="ltr"] .sf-od__name p { text-align: left; }
.sf-od__price { flex: none; color: var(--sf-gray-900); font: 700 20px/28px var(--sf-font); direction: ltr; }
.sf-od__grid { margin-top: 79px; display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 27px; align-items: start; }
.sf-od__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sf-od__status { padding: 24px 22px 18px; }
.sf-od__status h3, .sf-od__info h3 { margin: 0; color: #374151; font: 500 13px/20px var(--sf-font); }
.sf-od__info h3 { color: var(--sf-gray-900); font-size: 14px; font-weight: 600; }
.sf-steps { margin: 16px 0 0; padding: 0; display: flex; align-items: flex-start; list-style: none; }
.sf-step { width: 76px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sf-step i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #E5E7EB; border-radius: 50%; background: #fff; color: #9CA3AF; font-style: normal; }
.sf-step i .sf-ico { width: 16px; height: 16px; stroke-width: 2.5; }
.sf-step span { color: #9CA3AF; font: 500 13px/18px var(--sf-font); white-space: nowrap; }
.sf-step + .sf-step::before { content: none; }
.sf-step.is-done i { border-color: #006045; background: #002C22; color: #00BC7D; }
.sf-step.is-done span { color: #00BC7D; }
.sf-step.is-current i { border-color: #58A1D3; background: #E8F3FB; box-shadow: 0 0 0 4px rgba(88, 161, 211, .15); }
.sf-step.is-current span { color: var(--sf-panel-blue); }
.sf-step.is-failed i { border-color: #82181A; background: #460809; color: #FF6467; }
.sf-step.is-failed span { color: #FB2C36; }
.sf-step-line { flex: 1; height: 2px; margin: 15px 4px 0; border-radius: 2px; background: #E5E7EB; }
.sf-step-line.is-done { background: #00BC7D; }
.sf-od__result { padding: 22px 22px 24px; }
.sf-od__result h3 { margin: 0 0 18px; display: flex; align-items: center; gap: 8px; color: var(--sf-gray-900); font: 700 16px/24px var(--sf-font); }
.sf-od__result h3 .sf-ico { width: 20px; height: 20px; }
.sf-od__result h3.is-good .sf-ico { color: #00BC7D; }
.sf-od__result h3.is-bad .sf-ico { color: #FB2C36; }
.sf-od__result h3.is-wait .sf-ico { color: var(--sf-panel-blue); }
.sf-od__box { min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); color: #374151; font: 400 14px/22px var(--sf-font); }
.sf-od__box + .sf-od__box { margin-top: 12px; }
.sf-od__box.is-result code { flex: 1; min-width: 0; text-align: left; color: #374151; font: 400 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.sf-od__box.is-quiet { color: var(--sf-gray); }
.sf-od__box.is-bad { border-color: #9F0712; background: #643030; color: #FFA2A2; unicode-bidi: plaintext; }
.sf-od__box.is-good { border-color: #006045; background: #294E45; color: #5EE9B5; }
.sf-od__box.is-good .sf-ico { width: 18px; height: 18px; flex: none; }
.sf-account .sf-copy { width: 26px; height: 26px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #9CA3AF; cursor: pointer; }
.sf-account .sf-copy:hover { background: rgba(6, 23, 46, .06); color: #374151; }
.sf-account .sf-copy.is-copied { color: #00BC7D; }
.sf-copy .sf-ico { width: 14px; height: 14px; }
.sf-od__side { display: flex; flex-direction: column; gap: 16px; }
.sf-od__info { min-height: 269px; padding: 24px; }
.sf-od__info dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 14px; }
.sf-od__info dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-od__info dl > div.is-stacked { flex-direction: column; align-items: stretch; gap: 2px; }
.sf-od__info dt { color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-od__info dd { margin: 0; display: flex; align-items: center; gap: 4px; color: var(--sf-gray-900); font: 400 15px/22px var(--sf-font); direction: ltr; }
.sf-od__info dd > span:not(.sf-mono) { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
.sf-od__info dd .sf-mono { color: #374151; font-size: 13px; }
.sf-account .sf-od__ticket { height: 34px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-account .sf-od__ticket:hover { border-color: #C9CDD3; }
.sf-od__ticket .sf-ico, .sf-od__again .sf-ico { width: 16px; height: 16px; }
.sf-account .sf-od__again { height: 40px; min-height: 0; width: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--sf-gray-900); font: 700 16px/24px var(--sf-font); cursor: pointer; }
.sf-account .sf-od__again:hover { color: var(--sf-panel-blue); }
.sf-od__extra:empty { display: none; }
.sf-od__extra #reviewBlock { padding: 22px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; }
.sf-od__extra #reviewBlock h3 { margin: 0 0 12px; font: 700 15px/22px var(--sf-font); }

/* ---- the pages the design did not draw: same frame, same type ---- */
.sf-account .sf-records .sf-table { min-width: 0; }
.sf-account .sf-records .sf-table th { height: 56px; padding: 0 8px 11px; font-size: 13px; }
.sf-account .sf-records .sf-table td { padding: 0 8px; font-size: 13px; }
.sf-link { color: var(--sf-panel-blue); font-weight: 600; }
.sf-account .sf-records .sf-empty { padding-top: 70px; }

/* ---- the statement: one page inside #recordsPage, the invoices the other ---- */
#recordsPage[data-type="statement"] { padding-top: 0; }
#recordsPage[data-type="statement"] .sf-records__invoices,
#recordsPage:not([data-type="statement"]) .sf-stmt { display: none; }
.sf-stmt__stats { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.sf-stmt__stat { min-height: 140px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 20px; }
.sf-stmt__stat > span { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sf-stmt__stat small { margin-top: 8px; color: #4A5565; font: 400 14px/20px var(--sf-font); }
.sf-stmt__stat b { margin-top: 16px; color: var(--sf-gray-900); font: 700 28px/36px var(--sf-font); white-space: nowrap; }
.sf-stmt__stat em { margin-top: 3px; color: #00BC7D; font: normal 500 12px/16px var(--sf-font); }
.sf-stmt__stat em[hidden] { display: none; }
.sf-stmt__stat > i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--sf-gray-100); color: var(--sf-panel-blue); }
.sf-stmt__stat > i .sf-ico { width: 20px; height: 20px; }

.sf-stmt__card { margin-top: 35px; padding: 12px; overflow: hidden; }
.sf-stmt__card .sf-tabs { border-radius: 14px; }
.sf-stmt__tools { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.sf-stmt__tools .sf-search-field { flex: 1; min-width: 0; margin: 0; height: 36px; }
.sf-stmt__tools .sf-search-field input { height: 34px; font-size: 14px; }
.sf-stmt__tools .sf-daterange { width: 177px; }
.sf-account .sf-stmt__csv { height: 36px; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); white-space: nowrap; }
.sf-account .sf-stmt__csv:hover { border-color: #C9CDD3; }
.sf-stmt__csv .sf-ico { width: 16px; height: 16px; }

.sf-account .sf-stmt .sf-table-wrap { margin: 0 0 -12px; border-top: 0; }
.sf-account .sf-stmt .sf-table-wrap[hidden] { display: none; }
.sf-stmt__table { min-width: 860px; table-layout: fixed; }
.sf-account .sf-stmt .sf-stmt__table th { height: 71px; padding: 0 8px 18px; border-bottom: 1px solid #757275; color: #4A5565; font: 400 18px/24px var(--sf-font); }
.sf-account .sf-stmt .sf-stmt__table td { height: 90px; padding: 8px; border-bottom: 1px solid #757275; color: var(--sf-gray-900); font: 400 15px/22px var(--sf-font); }
.sf-account .sf-stmt .sf-stmt__table tbody tr:last-child td { height: 89px; border-bottom: 0; }
.sf-stmt__table th:nth-child(1) { width: 108px; }
.sf-stmt__table th:nth-child(2) { width: 200px; }
.sf-stmt__table th:nth-child(3) { width: 112px; }
.sf-stmt__table th:nth-child(4) { width: 172px; }
.sf-stmt__table th:nth-child(5) { width: 180px; }
.sf-stmt__table th:nth-child(6) { width: 116px; padding-inline: 2px; white-space: nowrap; }
.sf-stmt__when b { display: block; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-stmt__when small { display: block; color: var(--sf-gray); font: 400 12px/16px var(--sf-font); }
.sf-stmt__desc { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; }
.sf-stmt__desc > i { margin-top: 3px; flex: none; display: grid; }
.sf-stmt__desc > i .sf-ico { width: 18px; height: 18px; }
.sf-stmt__desc > i.is-in { color: #00BC7D; }
.sf-stmt__desc > i.is-out { color: #FB2C36; }
.sf-stmt__desc > i.is-back { color: #FFB900; }
.sf-stmt__desc > i.is-quiet { color: var(--sf-gray); }
.sf-stmt__desc > span { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.sf-stmt__desc b { color: var(--sf-gray-900); font: 400 15px/22px var(--sf-font); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sf-stmt__desc small { color: var(--sf-gray); font: 400 12px/18px var(--sf-font); overflow-wrap: anywhere; }
.sf-stmt__desc small.sf-mono { margin-top: 4px; font-size: 11px; }
.sf-kind { height: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid; border-radius: 999px; font: 600 12px/16px var(--sf-font); white-space: nowrap; }
.sf-kind::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.sf-kind.is-deposit { border-color: #006045; background: #002C22; color: #00D492; }
.sf-kind.is-purchase { border-color: #193CB8; background: #162456; color: #51A2FF; }
.sf-kind.is-refund { border-color: #7B3306; background: #461901; color: #FFB900; }
.sf-kind.is-adjustment { border-color: var(--sf-line); background: var(--sf-gray-100); color: #4A5565; }
.sf-account .sf-stmt .sf-stmt__table td.sf-stmt__amount,
.sf-account .sf-stmt .sf-stmt__table td.sf-stmt__after { font: 600 16px/24px var(--sf-font); }
.sf-account .sf-stmt .sf-stmt__table td.sf-stmt__amount.is-in { color: #00BC7D; }
.sf-account .sf-stmt .sf-stmt__table td.sf-stmt__amount.is-out { color: #FB2C36; }
.sf-account .sf-stmt__ref { height: auto; min-height: 0; width: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--sf-panel-blue); font: 500 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; cursor: pointer; }
.sf-stmt__ref .sf-ico { width: 13px; height: 13px; }
.sf-stmt__none { color: #9CA3AF; }
.sf-stmt__empty { padding: 56px 16px 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sf-stmt__empty[hidden] { display: none; }
.sf-stmt__empty .sf-ico { width: 40px; height: 40px; color: #9CA3AF; }
.sf-stmt__empty b { color: var(--sf-gray-900); font: 700 16px/24px var(--sf-font); }
.sf-stmt__empty small { color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-stmt__empty small:empty { display: none; }

.sf-pager { margin-top: 31px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-pager[hidden] { display: none; }
.sf-pager > span { color: var(--sf-gray); font: 400 14px/20px var(--sf-font); }
.sf-pager > div { display: flex; align-items: center; gap: 8px; }
.sf-account .sf-pager button { height: 32px; min-height: 0; width: auto; min-width: 32px; display: grid; place-items: center; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #4A5565; font: 500 16px/24px var(--sf-font); cursor: pointer; }
.sf-account .sf-pager .sf-pager__num.is-current { border-color: var(--sf-panel-blue); background: var(--sf-panel-blue); color: #fff; }
.sf-account .sf-pager .sf-pager__step { padding: 0 12px; border-color: var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-account .sf-pager .sf-pager__step:disabled { background: var(--sf-gray-100); color: #9CA3AF; opacity: 1; cursor: default; }
.sf-pager__gap { color: #9CA3AF; }

/* ---- pages drawn in the second round: one head for all of them ---- */
.sf-lean { padding-top: 40px; }
.sf-lean .sf-crumbs { min-height: 16px; gap: 4px; line-height: 16px; }
.sf-lean .sf-crumbs .sf-ico { color: var(--sf-gray); }
.sf-lean .sf-page-title { margin-top: 8px; font: 700 28px/35px var(--sf-font); }
.sf-kicker { margin: 0; color: var(--sf-panel-blue); font: 500 12px/16px var(--sf-font); }
.sf-card-title { margin: 4px 0 0; color: var(--sf-gray-900); font: 700 16px/24px var(--sf-font); }

/* ---- add balance: three steps beside a summary ---- */
.sf-fund { margin-top: 82px; display: grid; grid-template-columns: minmax(0, 600px) 288px; justify-content: space-between; gap: 24px; align-items: start; }
.sf-fund__main { min-height: 380px; padding: 24px; display: flex; flex-direction: column; }
.sf-stepper { margin: 0; padding: 0; display: flex; align-items: center; list-style: none; }
.sf-stepper > li:not(.sf-stepper__line) { flex: none; display: flex; align-items: center; gap: 10px; color: var(--sf-gray); font: 500 14px/20px var(--sf-font); }
.sf-stepper > li > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #E5E7EB; color: var(--sf-gray); font: normal 600 14px/20px var(--sf-font); transition: background .2s ease, box-shadow .2s ease; }
.sf-stepper > li.is-current > i,
.sf-stepper > li.is-done > i { background: var(--sf-panel-blue); box-shadow: 0 0 0 4px rgba(88, 161, 211, .56); color: #fff; }
.sf-stepper > li.is-current,
.sf-stepper > li.is-done { color: var(--sf-gray-900); }
.sf-stepper > li.is-done { cursor: pointer; }
.sf-stepper > li.is-done:focus-visible { outline: 2px solid var(--sf-panel-blue); outline-offset: 4px; border-radius: 999px; }
.sf-stepper__line { flex: 1; height: 1px; margin-inline: 8px 16px; background: #E5E7EB; }
.sf-stepper__line.is-done { background: var(--sf-panel-blue); }

/* The design lets the step's own content run 7px past the card's padding on
   the reading-start side; the stepper and the button keep to it. */
.sf-fund__step { margin-top: 30px; margin-inline-start: -7px; }
.sf-fund__step[data-fund-step="2"] { margin-top: 32px; }
.sf-fund__step[hidden] { display: none; }
.sf-fund__label { display: block; margin: 0; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
p.sf-fund__label { margin-top: 18px; color: #4A5565; font-weight: 400; }
.sf-fund__amount { margin-top: 4px; height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 32px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; cursor: text; }
[dir="ltr"] .sf-fund__amount { flex-direction: row-reverse; justify-content: flex-end; }
.sf-fund__amount:focus-within { border-color: var(--sf-panel-blue); box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }
.sf-fund__amount b { color: var(--sf-gray); font: 600 16px/24px var(--sf-font); }
.sf-account .sf-fund__amount input { width: 4ch; min-width: 2ch; max-width: calc(100% - 60px); height: 44px; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--sf-gray-900); font: 700 20px/28px var(--sf-font); text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.sf-fund__amount input::-webkit-outer-spin-button,
.sf-fund__amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-fund__min { display: block; margin-top: 6px; color: var(--sf-gray); font: 400 12px/16px var(--sf-font); }
.sf-fund__min b { font-weight: 400; unicode-bidi: isolate; }
.sf-fund__chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-account .sf-fund__chips button { height: 37px; min-height: 0; width: auto; min-width: 57px; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray); font: 600 16px/24px var(--sf-font); cursor: pointer; }
.sf-account .sf-fund__chips button:hover { border-color: #B6D5EC; color: var(--sf-gray-900); }
.sf-account .sf-fund__chips button.is-active { border-color: #022C50; background: var(--sf-panel-blue); color: #fff; }

.sf-gateways { margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 21px; border: 0; }
.sf-gateway { position: relative; min-height: 86px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px; border: 2px solid var(--sf-line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sf-gateway:hover { border-color: #C9DDED; }
.sf-gateway input { position: absolute; opacity: 0; pointer-events: none; }
.sf-gateway.is-chosen { border-color: var(--sf-panel-blue); background: #F5FAFD; }
.sf-gateway:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(88, 161, 211, .25); }
.sf-gateway__mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background-color: var(--sf-gray-100); background-position: center; background-repeat: no-repeat; background-size: 70%; color: #fff; font: normal 700 20px/28px var(--sf-font); }
.sf-gateway__mark.has-logo { border: 1px solid var(--sf-line); background-color: #fff; }
.sf-gateway__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-gateway__text b { color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); unicode-bidi: plaintext; }
.sf-gateway__text small { color: var(--sf-gray); font: 400 12px/16px var(--sf-font); }
.sf-gateway__end { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; }
.sf-fee { padding: 1px 8px; border: 1px solid #7B3306; border-radius: 999px; background: #461901; color: #FFB900; font: normal 500 12px/16px var(--sf-font); white-space: nowrap; }
.sf-fee.is-zero { border-color: #006045; background: #002C22; color: #00D492; }
.sf-radio { width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--sf-line); border-radius: 50%; background: #fff; }
.sf-gateway.is-chosen .sf-radio { border-color: var(--sf-panel-blue); }
.sf-gateway.is-chosen .sf-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-panel-blue); }
.sf-gateways.is-review { gap: 16px; }
.sf-gateways.is-review .sf-gateway { cursor: default; }
.sf-gateways.is-review .sf-radio { display: none; }
.sf-fund__note { margin: 0 0 16px; color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-fund__how { margin: 0; padding: 12px 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); color: #374151; font: 400 13px/22px var(--sf-font); white-space: pre-line; unicode-bidi: plaintext; }
.sf-account .funding-none { margin: 0; padding: 16px; border: 1px dashed var(--sf-line); border-radius: 12px; color: var(--sf-gray); font: 400 13px/22px var(--sf-font); }

.sf-fund__actions { margin-top: 29px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sf-account .sf-fund__next { width: 551px; max-width: 100%; height: 44px; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--sf-panel-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: #fff; font: 600 16px/24px var(--sf-font); cursor: pointer; transition: background .15s ease; }
.sf-account .sf-fund__next:hover:not(:disabled) { background: #4A93C6; }
.sf-account .sf-fund__next:disabled { background: #B3DEF8; color: var(--sf-gray); opacity: 1; cursor: not-allowed; }
.sf-account .sf-fund__next[hidden] { display: none; }
.sf-fund__next .sf-ico { width: 18px; height: 18px; }
[dir="ltr"] .sf-fund__next .sf-ico { transform: scaleX(-1); }
.sf-account .sf-fund__next.processing { opacity: .8; cursor: progress; }
.sf-account .sf-fund__back { align-self: center; height: 32px; min-height: 0; width: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 0; background: none; color: var(--sf-gray); font: 500 13px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-fund__back:hover { color: var(--sf-gray-900); }
.sf-account .sf-fund__back[hidden] { display: none; }
.sf-fund__back .sf-ico { width: 14px; height: 14px; }
[dir="ltr"] .sf-fund__back .sf-ico { transform: scaleX(-1); }

.sf-fund__side { display: flex; flex-direction: column; gap: 18px; }
.sf-fund__summary { padding: 24px; }
.sf-fund__summary h3 { margin: 0; color: var(--sf-panel-blue); font: 600 14px/16px var(--sf-display); }
.sf-fund__summary dl { margin: 16px 0 0; margin-inline-start: -11px; display: flex; flex-direction: column; gap: 11px; }
.sf-fund__summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-fund__summary dt { color: var(--sf-gray); font: 400 14px/20px var(--sf-font); }
.sf-fund__summary dd { margin: 0; color: var(--sf-gray-900); font: 500 14px/20px var(--sf-font); white-space: nowrap; }
.sf-fund__summary dd.is-zero { color: #00BC7D; }
.sf-fund__summary hr { margin: 4px 0 1px; border: 0; border-top: 1px solid var(--sf-line); }
.sf-fund__summary .is-total dt { color: var(--sf-gray-900); font-weight: 600; }
.sf-fund__summary .is-total dd { color: var(--sf-panel-blue); font: 700 16px/24px var(--sf-font); }
#sfFundGateway { max-width: 150px; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.sf-fund__now { padding: 16px 16px 18px; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; }
.sf-fund__now small { color: var(--sf-gray); font: 400 10px/15px var(--sf-font); }
.sf-fund__now b { align-self: stretch; color: var(--sf-gray-900); font: 700 24px/32px var(--sf-font); text-align: right; }
[dir="ltr"] .sf-fund__now b { text-align: left; }
/* The settings panes. Their base rules live in admin.css, which the shop
   front never loads, so on the storefront they were drawn unstyled. */
.sf-account #settingsView:not(.sf-designed) { min-height: 560px; padding-top: 0; font-family: var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .settings-header { margin-bottom: 20px; padding-bottom: 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--sf-line); }
.sf-account #settingsView:not(.sf-designed) .settings-header > i { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #E8F3FB; color: var(--sf-panel-blue); font-style: normal; }
.sf-account #settingsView:not(.sf-designed) .settings-header > i .icon { width: 22px; height: 22px; }
.sf-account #settingsView:not(.sf-designed) .settings-header > span { display: grid; gap: 2px; }
.sf-account #settingsView:not(.sf-designed) .settings-header p { margin: 0; color: var(--sf-panel-blue); font: 600 11px/16px var(--sf-font); text-transform: uppercase; }
.sf-account #settingsView:not(.sf-designed) .settings-header h1 { margin: 0; color: var(--sf-gray-900); font: 800 24px/34px var(--sf-font); letter-spacing: 0; }
.sf-account #settingsView:not(.sf-designed) .settings-header small { color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .settings-form,
.sf-account #settingsView:not(.sf-designed) .api-layout { padding: 24px; display: grid; gap: 18px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); }
.sf-account #settingsView:not(.sf-designed) .api-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.sf-account #settingsView:not(.sf-designed) .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.sf-account #settingsView:not(.sf-designed) label { display: grid; gap: 8px; color: #374151; font: 600 13px/18px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .switch { display: block; }
.sf-account #settingsView:not(.sf-designed) input:not([type="checkbox"]):not([type="radio"]),
.sf-account #settingsView:not(.sf-designed) select,
.sf-account #settingsView:not(.sf-designed) textarea { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; outline: 0; color: var(--sf-gray-900); font: 400 14px/20px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) textarea { height: auto; min-height: 96px; padding: 10px 14px; }
.sf-account #settingsView:not(.sf-designed) input:focus,
.sf-account #settingsView:not(.sf-designed) select:focus,
.sf-account #settingsView:not(.sf-designed) textarea:focus { border-color: var(--sf-panel-blue); box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }
.sf-account #settingsView:not(.sf-designed) input:disabled { background: var(--sf-gray-100); color: #9CA3AF; }
.sf-account #settingsView:not(.sf-designed) button[type="submit"],
.sf-account #settingsView:not(.sf-designed) .settings-form > button { justify-self: start; min-width: 180px; height: 42px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--sf-panel-blue); color: #fff; font: 600 14px/20px var(--sf-font); cursor: pointer; }
.sf-account #settingsView:not(.sf-designed) button[type="submit"]:hover { background: #4A93C6; }
.sf-account #settingsView:not(.sf-designed) .setting-row { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; }
.sf-account #settingsView:not(.sf-designed) .setting-row > span { display: grid; gap: 4px; }
.sf-account #settingsView:not(.sf-designed) .setting-row b { color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .setting-row small { color: var(--sf-gray); font: 400 12px/18px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .api-resources { display: grid; }
.sf-account #settingsView:not(.sf-designed) .api-resources article { min-height: 96px; padding: 16px 0; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--sf-line); }
.sf-account #settingsView:not(.sf-designed) .api-resources article:last-child { border-bottom: 0; }
.sf-account #settingsView:not(.sf-designed) .api-resources article > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #E8F3FB; color: var(--sf-panel-blue); font-style: normal; }
.sf-account #settingsView:not(.sf-designed) .api-resources article > span { display: grid; gap: 4px; }
.sf-account #settingsView:not(.sf-designed) .api-resources article b { color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .api-resources article small { color: var(--sf-gray); font: 400 12px/18px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .api-resources article em { color: #00A86B; font: normal 500 12px/18px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .api-resources article > div { display: grid; gap: 6px; }
.sf-account #settingsView:not(.sf-designed) .api-resources article > button,
.sf-account #settingsView:not(.sf-designed) .api-resources article > div button { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--sf-gray-900); color: #fff; font: 600 13px/20px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .api-resources article > div button:first-child { background: var(--sf-panel-blue); }
.sf-account #settingsView:not(.sf-designed) .api-toggle { padding: 18px; border: 1px solid var(--sf-line); border-radius: 14px; background: #F9FAFB; }
.sf-account #settingsView:not(.sf-designed) .api-toggle > span { display: flex; align-items: center; gap: 8px; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .api-toggle > span i { color: var(--sf-panel-blue); font-style: normal; }
.sf-account #settingsView:not(.sf-designed) .api-toggle > .switch { margin-top: 16px; }
.sf-account #settingsView:not(.sf-designed) .api-toggle > small { display: block; margin-top: 12px; color: var(--sf-gray); font: 400 12px/18px var(--sf-font); }
.sf-account #settingsView:not(.sf-designed) .password-meter li { font-size: 12px; }


/* ---- the four settings panes the design draws: profile, password, email,
   security. The panes above (API, Telegram) keep the older look. ---- */
.sf-account #settingsView.sf-designed { min-height: 0; }
.sf-input { width: 100%; height: 40px; min-width: 0; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; outline: 0; box-shadow: none; color: var(--sf-gray-900); font: 400 16px/24px var(--sf-font); }
.sf-input:focus { border-color: var(--sf-panel-blue); box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }
.sf-input[aria-invalid="true"] { border-color: #FB2C36; }
select.sf-input { padding-inline-end: 36px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; cursor: pointer; }
[dir="ltr"] select.sf-input { background-position: right 14px center; }
select.sf-input[dir="ltr"] { padding-inline: 12px 36px; background-position: right 14px center; }
.sf-tel select.sf-input { padding-inline: 10px 26px; background-position: right 8px center; }
.sf-flags { font-family: "Twemoji Country Flags", var(--sf-font); }
.sf-label { display: flex; flex-direction: column; gap: 5px; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-hint { color: var(--sf-gray); font: 400 12px/16px var(--sf-font); }
.sf-hint.is-bad { color: #E7000B; }
.sf-hint[hidden] { display: none; }

.sf-switch { position: relative; width: 44px; height: 24px; flex: none; display: inline-block; direction: ltr; cursor: pointer; }
.sf-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sf-switch i { position: absolute; inset: 0; border-radius: 999px; background: #E5E7EB; transition: background .2s ease; pointer-events: none; }
.sf-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); transition: transform .2s ease; }
.sf-switch input:checked + i { background: var(--sf-panel-blue); }
.sf-switch input:checked + i::after { transform: translateX(20px); }
.sf-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(88, 161, 211, .3); }

.sf-infobar { margin: 25px 0 0; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); color: #4A5565; font: 400 14px/20px var(--sf-font); }
.sf-infobar .sf-ico { width: 16px; height: 16px; flex: none; color: var(--sf-panel-blue); }
.sf-account .sf-save-button { height: 36px; min-height: 0; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--sf-panel-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: #fff; font: 600 14px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-save-button:hover { background: #4A93C6; }
.sf-save-button .sf-ico { width: 16px; height: 16px; }
.sf-account .sf-danger { height: 31px; min-height: 0; width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #82181A; border-radius: 8px; background: #460809; color: #FF6467; font: 600 13px/20px var(--sf-font); white-space: nowrap; cursor: pointer; }
.sf-account .sf-danger:hover:not(:disabled) { background: #5A0C0E; }
.sf-account .sf-danger:disabled { opacity: .5; cursor: default; }
.sf-danger .sf-ico { width: 14px; height: 14px; }
.sf-account .sf-text-button { height: 36px; min-height: 0; width: auto; padding: 0 10px; border: 0; background: none; color: var(--sf-gray); font: 500 13px/20px var(--sf-font); cursor: pointer; }

/* profile */
.sf-prof { margin-top: 60px; display: flex; flex-direction: column; gap: 24px; }
.sf-prof__top { display: grid; grid-template-columns: 288px minmax(0, 600px); justify-content: space-between; gap: 24px; }
.sf-prof__card { min-height: 277px; padding: 24px; display: flex; flex-direction: column; }
.sf-prof__card .sf-card-title { margin-top: 2px; }
.sf-prof__top .sf-prof__card { min-height: 281px; }
.sf-prof__pair { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sf-prof__pair .sf-input[data-profile="name"] { unicode-bidi: plaintext; }
.sf-input.is-locked { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--sf-gray-100); color: var(--sf-gray); cursor: default; }
.sf-input.is-locked span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; order: 2; }
.sf-input.is-locked a { flex: none; color: var(--sf-panel-blue); font: 400 14px/20px var(--sf-font); }
[dir="ltr"] .sf-input.is-locked span { order: 0; }
.sf-prof__mobile { width: 402px; max-width: 100%; margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.sf-prof__mobile .sf-label { text-align: left; }
.sf-tel { display: grid; grid-template-columns: 81px minmax(0, 1fr); gap: 8px; }
.sf-tel input { direction: ltr; }
.sf-prof__grid { margin-top: 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sf-prof__wide { margin-top: 20px; }
.sf-prof__grid .sf-hint { margin-top: 3px; font-weight: 400; }
.sf-prof__who { min-height: 281px; padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sf-prof__avatar { position: relative; width: 96px; height: 96px; }
.sf-prof__avatar > i { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: var(--sf-panel-blue) center / cover no-repeat; color: #fff; font: normal 700 24px/32px var(--sf-font); }
.sf-account .sf-prof__cam { position: absolute; left: 0; top: 78px; width: 32px; height: 32px; min-height: 0; display: grid; place-items: center; padding: 0; border: 1px solid var(--sf-line); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: var(--sf-gray); cursor: pointer; }
.sf-prof__cam .sf-ico { width: 15px; height: 15px; }
.sf-prof__who > b { margin-top: 19px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray-900); font: 700 18px/24px var(--sf-font); unicode-bidi: plaintext; }
.sf-prof__who > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--sf-gray); font: 400 14px/20px var(--sf-font); }
.sf-prof__who > strong { margin-top: 2px; color: var(--sf-panel-blue); font: 600 14px/20px var(--sf-font); }
.sf-account .sf-prof__photo { margin-top: 20px; height: 31px; min-height: 0; width: auto; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-prof__photo:hover { border-color: #C9CDD3; }

/* password */
.sf-pass { width: 600px; max-width: 100%; margin-top: 74px; padding: 24px 24px 42px; display: flex; flex-direction: column; }
.sf-pass .sf-card-title { margin-top: 2px; }
.sf-pass > .sf-label { margin-top: 18px; gap: 4px; }
.sf-pass > .sf-label:first-of-type { margin-top: 22px; }
.sf-pass > .sf-hint { margin-top: 6px; }
.sf-secret { position: relative; display: block; }
.sf-secret .sf-input { padding-inline-start: 44px; letter-spacing: 0; }
.sf-account .sf-secret__eye { position: absolute; inset-inline-start: 12px; top: 50%; width: 22px; height: 22px; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--sf-gray); transform: translateY(-50%); cursor: pointer; }
.sf-secret__eye .sf-ico { width: 18px; height: 18px; }
.sf-pass__forgot { align-self: flex-start; margin-top: 18px; color: var(--sf-panel-blue); font: 400 14px/20px var(--sf-font); }
.sf-account .sf-wide-button { margin-top: 25px; height: 44px; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: var(--sf-panel-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: #fff; font: 600 16px/24px var(--sf-font); cursor: pointer; }
.sf-account .sf-wide-button:disabled { background: #D9EEFB; color: #8095A7; opacity: 1; cursor: not-allowed; }
.sf-wide-button .sf-ico { width: 18px; height: 18px; }

/* email notifications */
.sf-mail { margin-top: 43px; padding: 24px; display: flex; flex-direction: column; }
.sf-mail .sf-card-title { margin-top: 2px; }
.sf-mail__rows { margin-top: 7px; display: flex; flex-direction: column; }
.sf-mail__row { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--sf-line); }
.sf-mail__row > span { display: flex; flex-direction: column; gap: 1px; }
.sf-mail__row b { color: var(--sf-gray-900); font: 600 15px/20px var(--sf-font); }
.sf-mail__row small { color: var(--sf-gray); font: 400 13px/16px var(--sf-font); }
.sf-mail .sf-save-button { align-self: flex-end; margin-top: 17px; }
[dir="ltr"] .sf-mail .sf-save-button { align-self: flex-start; }

/* security */
.sf-sec { margin-top: 74px; padding: 24px; display: flex; flex-direction: column; }
.sf-sec .sf-card-title { margin-top: 2px; }
.sf-sec__cards { margin-top: 33px; display: flex; flex-direction: column; gap: 21px; }
.sf-sec__card { min-height: 82px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 20px; padding: 20px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.sf-sec__card > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-sec__card b { color: var(--sf-gray-900); font: 700 16px/22px var(--sf-font); }
.sf-sec__card small { color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-sec__card .sf-switch { margin-top: 1px; }
.sf-sec__more { flex-basis: 100%; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--sf-line); }
.sf-sec__more[hidden] { display: none; }
.sf-totp { display: flex; align-items: flex-start; gap: 20px; }
.sf-totp p { margin: 0 0 10px; color: #374151; font: 400 13px/20px var(--sf-font); }
.sf-totp__qr { width: 132px; height: 132px; flex: none; padding: 6px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; }
.sf-totp__qr svg { display: block; width: 100%; height: 100%; }
.sf-totp__key span { display: block; color: var(--sf-gray); font-size: 12px; }
.sf-totp__key code { color: var(--sf-gray-900); font: 600 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; word-break: break-all; }
.sf-totp__row { display: flex; align-items: center; gap: 10px; }
.sf-totp__row .sf-input { max-width: 260px; }
.sf-recovery { margin: 8px 0 0; padding: 12px 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); font: 500 13px/22px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-sec__head { margin-top: 29px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-sec__head h3 { margin: 0; color: var(--sf-gray-900); font: 700 16px/24px var(--sf-font); }
.sf-sessions { margin-top: 13px; display: flex; flex-direction: column; gap: 13px; }
.sf-session { min-height: 87px; display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.sf-session__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--sf-gray-100); color: var(--sf-gray); }
.sf-session__icon .sf-ico { width: 20px; height: 20px; }
.sf-session__who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sf-session__who b { color: var(--sf-gray-900); font: 600 16px/22px var(--sf-font); }
.sf-session__who small, .sf-session__end small { color: var(--sf-gray); font: 400 14px/20px var(--sf-font); }
.sf-session__end { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.sf-session__end.is-row { flex-direction: row; align-items: center; gap: 17px; }
.sf-session__end .sf-status { height: 22px; }
.sf-sessions__none { margin: 0; padding: 4px 4px 0; color: #9CA3AF; font: 400 13px/20px var(--sf-font); }

@media (max-width: 760px) {
  .sf-account #settingsView:not(.sf-designed) .form-grid,
  .sf-account #settingsView:not(.sf-designed) .api-layout { grid-template-columns: 1fr; }
}

/* The account menu in the header, as the design draws it. */
.sf-header .account-menu { width: 208px; padding: 0; overflow: hidden; }
.sf-header.is-signed-in .sf-actions .account-menu { top: calc(100% + 19px); }
.sf-menu-who { padding: 14px 16px 12px; display: flex; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--sf-line); }
.sf-menu-who b { color: var(--sf-gray-900); font: 700 14px/20px var(--sf-font); unicode-bidi: plaintext; }
.sf-menu-who small { color: var(--sf-gray); font: 400 12px/18px var(--sf-font); }
.sf-menu-who small:empty { display: none; }
.sf-menu-who strong { color: #58A1D3; font: 700 14px/20px var(--sf-font); unicode-bidi: plaintext; }
.sf-header .account-menu a,
.sf-header .account-menu button { height: 40px; margin: 0; padding: 0 16px; border-radius: 0; font-size: 15px; }
.sf-header .account-menu > a:first-of-type { margin-top: 6px; }
.sf-header .account-menu > a:last-of-type { margin-bottom: 6px; }
.sf-header .account-menu .sf-ico { width: 18px; height: 18px; color: #374151; }
.sf-header .account-menu .sf-menu-out { height: 46px; border-top: 1px solid var(--sf-line); color: #FB2C36; }
.sf-header .account-menu .sf-menu-out .sf-ico { color: #FB2C36; }
[dir="rtl"] .sf-header .account-menu .sf-menu-out .sf-ico { transform: scaleX(-1); }
.sf-header .account-menu a:hover,
.sf-header .account-menu button:hover { background: var(--sf-field); }

@media (max-width: 1100px) {
  .sf-account__shell { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .sf-side { min-width: 0; min-height: 0; margin-top: 16px; }
  .sf-side__nav { flex-direction: row; flex-wrap: nowrap; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none; }
  .sf-side__group, .sf-side__group + .sf-side__group { flex-direction: row; flex-wrap: nowrap; padding-top: 0; gap: 6px; }
  .sf-side__group > p { display: none; }
  .sf-account .sf-side__item { width: auto; flex: none; white-space: nowrap; }
  .sf-side__foot { display: none; }
}

@media (max-width: 760px) {
  .sf-side__who { display: none; }
  .sf-page-head { flex-direction: column; align-items: stretch; }
  .sf-daterange { width: 100%; }
  .sf-welcome { flex-direction: column; align-items: stretch; }
  .sf-account .sf-welcome .sf-button { width: 100%; }
  .sf-balance { height: auto; }
  .sf-balance__top { height: auto; flex-direction: column; }
  .sf-balance__boxes { grid-template-columns: 1fr; gap: 12px; }
  .sf-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sf-recent { grid-template-columns: 1fr; }
  .sf-tabs { overflow-x: auto; }
  .sf-od__head { flex-wrap: wrap; }
  .sf-od__grid { margin-top: 24px; grid-template-columns: 1fr; }
}

/* ======================================================================== */
/* The front page's lower half (October 2026 design): popular services, the */
/* special offer, today's deals, technicians' services, testimonials, and   */
/* the footer every storefront page shares. Measured on the 1:1 frame.      */
/* ======================================================================== */

/* The storefront is drawn light only: the design has no dark version, and the
   shared theme preference defaults to dark for the console. The moon in the
   header would switch nothing a visitor can see, so it is not shown. */
.sf-header [data-sf-theme] { display: none; }

.sf-popular { padding: 0 0 80px; }
.sf-popular__grid { width: min(1224px, calc(100% - 32px)); margin: 35px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sf-pcard { min-width: 0; min-height: 215px; padding: 13px 14px 13px 13px; display: flex; flex-direction: column; border: 1px solid #878787; border-radius: 12px; background: linear-gradient(160deg, #F5F8FC 0%, #FBFCFE 55%, #F9FBFD 100%); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.sf-pcard:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 23, 46, .08); }
.sf-pcard:focus-visible { outline: 2px solid var(--sf-navy); outline-offset: 2px; }
.sf-pcard__icon, .sf-tcard__icon { flex: none; display: grid; place-items: center; overflow: hidden; font-style: normal; }
.sf-pcard__icon { align-self: flex-start; width: 40px; height: 40px; border-radius: 50%; background: #EEF0F3; color: #255C8C; }
.sf-pcard__icon svg, .sf-tcard__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-pcard__icon img, .sf-tcard__icon img { width: 100%; height: 100%; object-fit: cover; }
.sf-pcard h3 { margin: 16px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0A0A0A; font: 700 16px/24px var(--sf-font); text-align: start; }
/* A Latin title keeps its own word order but sits at the reading start, as drawn. */
.sf-pcard h3, .sf-pcard p { unicode-bidi: plaintext; }
[dir="rtl"] .sf-pcard h3, [dir="rtl"] .sf-pcard p { text-align: right; }
.sf-pcard p { margin: 14px 0 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #1A4D82; font: 400 14px/22px var(--sf-font); }
.sf-pcard footer { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-pcard footer b { color: #111827; font: 400 15px/22px var(--sf-font); white-space: nowrap; }
.sf-pcard footer button { min-width: 81px; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--sf-navy); color: #fff; font: 400 12px/18px var(--sf-font); cursor: pointer; }
.sf-pcard footer button:hover { background: #0B3D69; }

/* The old grid of every service: opened by a search or "View all". */
.sf-all { padding-top: 0; }
.sf-all[hidden] { display: none; }

.sf-special { padding: 0 0 63px; }
.sf-special__heading { width: min(1224px, calc(100% - 32px)); margin: 0 auto; padding: 0 4px; color: var(--sf-ink); font: 800 24px/36px var(--sf-font); }
.sf-offer { position: relative; isolation: isolate; width: min(1220px, calc(100% - 32px)); height: 343px; margin: 25px auto 0; overflow: hidden; border-radius: 24px; background: radial-gradient(circle at 16% 28%, rgba(37, 74, 112, .55), transparent 34%), linear-gradient(118deg, #0B2443 0%, #03264A 46%, #0E4A7E 100%); box-shadow: 0 30px 60px -22px rgba(6, 23, 46, .55); color: #fff; }
.sf-offer__guarantee { position: absolute; inset-inline-end: auto; inset-inline-start: 41px; top: 17px; height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .06); font: 500 12px/16px var(--sf-font); }
.sf-offer__phone { position: absolute; inset-inline-start: 101px; top: 61px; width: 118px; height: 219px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06)); text-align: center; }
.sf-offer__phone svg { width: 36px; height: 36px; fill: #fff; }
.sf-offer__phone img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.sf-offer__phone small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #C2D0DE; font: 400 11px/15px var(--sf-font); }
.sf-offer__phone em { margin-top: 10px; padding: 1px 8px; border-radius: 999px; background: #00BC7D; color: #fff; font: normal 600 10px/16px var(--sf-font); }
.sf-offer__badge { position: absolute; inset-inline-end: 30px; top: 41px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid rgba(233, 185, 73, .35); border-radius: 999px; background: rgba(255, 255, 255, .05); color: #E9B949; font: 500 11px/16px var(--sf-font); }
.sf-offer__copy { position: absolute; inset-inline-start: 379px; inset-inline-end: 260px; top: 84px; text-align: start; }
[dir="rtl"] .sf-offer__copy h3, [dir="rtl"] .sf-offer__copy p { text-align: right; }
.sf-offer__guarantee i, .sf-offer__badge i { margin-inline-end: 6px; font-style: normal; }
.sf-offer__copy h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font: 700 28px/36px var(--sf-font); unicode-bidi: plaintext; }
.sf-offer__copy p { margin: 20px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #B9C6D3; font: 400 15px/22px var(--sf-font); }
.sf-offer__facts { position: absolute; inset-inline-start: 379px; inset-inline-end: 30px; top: 180px; margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.sf-offer__facts > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sf-offer__facts > div[hidden] { display: none; }
.sf-offer__facts dt { color: #8FA3B8; font: 400 11px/16px var(--sf-font); }
.sf-offer__facts dd { margin: 0; display: flex; align-items: center; gap: 6px; color: #fff; font: 600 14px/22px var(--sf-font); }
.sf-offer__facts dd .sf-ico { width: 14px; height: 14px; }
.sf-offer__facts .is-price dd b { color: #7AB3E8; font: 700 20px/28px var(--sf-font); }
.sf-offer__facts .is-price dd small { color: #7AB3E8; font: 500 11px/16px var(--sf-font); }
.sf-stars { color: #FFB900; font-size: 16px; letter-spacing: 1px; line-height: 1; }
.sf-offer__actions { position: absolute; inset-inline-end: 30px; bottom: 40px; display: flex; gap: 13px; }
.sf-offer__order, .sf-offer__more { height: 47px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 10px; font: 600 15px/22px var(--sf-font); cursor: pointer; }
.sf-offer__order { min-width: 128px; border: 0; background: linear-gradient(135deg, #2A6CB0, #1D5C9C); box-shadow: 0 8px 20px rgba(29, 92, 156, .35); color: #fff; }
.sf-offer__order:hover { background: linear-gradient(135deg, #3478BE, #2266A8); }
.sf-offer__more { min-width: 117px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); color: #fff; font-weight: 500; font-size: 14px; }
.sf-offer__more:hover { background: rgba(255, 255, 255, .1); }

.sf-deals { padding: 0 0 64px; }
.sf-deals__grid { width: min(1222px, calc(100% - 32px)); margin: 30px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.sf-deal { min-width: 0; min-height: 253px; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(6, 23, 46, .06); }
.sf-deal header { height: 58px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px; background: linear-gradient(90deg, #091E3A 0%, #143D69 100%); }
.sf-deal header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #DCE5EF; font: 500 13px/20px var(--sf-font); }
.sf-deal header em { flex: none; padding: 3px 12px; border: 1px solid rgba(227, 163, 58, .45); border-radius: 999px; background: rgba(181, 135, 45, .16); color: #E3A33A; font: normal 600 12px/16px var(--sf-font); }
.sf-deal__body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 23px; }
.sf-deal__body h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0A1A33; font: 700 16px/24px var(--sf-font); }
.sf-deal__price { margin: 26px 0 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
[dir="ltr"] .sf-deal__price { justify-content: flex-start; }
.sf-deal__price b { color: #1A4D82; font: 700 22px/30px var(--sf-font); }
.sf-deal__price s { color: #9CA3AF; font: 400 12px/18px var(--sf-font); }
.sf-deal__price small { color: #9CA3AF; font: 400 11px/16px var(--sf-font); }
.sf-deal__body button { margin-top: auto; height: 41px; border: 0; border-radius: 8px; background: var(--sf-ink); color: #fff; font: 600 13px/20px var(--sf-font); cursor: pointer; }
.sf-deal__body button:hover { background: #0D2847; }

.sf-tech { padding: 0 0 107px; }
.sf-tech__grid { width: min(1222px, calc(100% - 32px)); margin: 30px auto 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; }
.sf-tcard { min-width: 0; min-height: 180px; display: flex; flex-direction: column; align-items: center; padding: 22px 12px 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(6, 23, 46, .05); color: inherit; text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.sf-tcard:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 23, 46, .08); }
.sf-tcard__icon { width: 52px; height: 52px; border-radius: 12px; background: #F0F4FA; color: #1A4D82; }
.sf-tcard__icon svg { width: 26px; height: 26px; }
.sf-tcard b { max-width: 100%; margin-top: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0A1A33; font: 700 14px/20px var(--sf-font); }
.sf-tcard small { max-width: 100%; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9CA3AF; font: 400 11px/16px var(--sf-font); }
.sf-tcard em { margin-top: 10px; color: #1A4D82; font: normal 600 12px/16px var(--sf-font); }

.sf-quotes { margin-bottom: 96px; padding: 62px 16px 96px; background: radial-gradient(circle at 50% 0%, rgba(30, 64, 104, .45), transparent 55%), linear-gradient(180deg, #06182F 0%, #0B2748 55%, #0F355F 100%); color: #fff; font-family: var(--sf-font); text-align: center; }
.sf-quotes h2 { margin: 0; font: 700 24px/36px var(--sf-font); }
.sf-quotes > p { margin: 13px 0 0; color: #A9B8C8; font: 400 14px/20px var(--sf-font); }
.sf-quotes__grid { width: min(1222px, 100%); margin: 42px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.sf-quote { flex: 0 1 390px; min-width: 0; min-height: 195px; margin: 0; display: flex; flex-direction: column; padding: 20px 20px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); text-align: start; }
.sf-quote header { display: flex; align-items: center; gap: 12px; }
.sf-quote header > i { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #1A4D82, #0B2443); color: #fff; font: normal 600 18px/1 var(--sf-font); }
.sf-quote header > span:not(.sf-stars) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-quote header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/22px var(--sf-font); }
.sf-quote header small { color: #9FB0C3; font: 400 12px/18px var(--sf-font); }
.sf-quote blockquote { unicode-bidi: plaintext; margin: 16px 0 0; color: #D7DEE7; font: 400 14px/22px var(--sf-font); }
.sf-quote figcaption { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-quote figcaption small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8FA3B8; font: 400 11px/16px var(--sf-font); }
.sf-quote figcaption em { flex: none; white-space: nowrap; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; color: #00D492; font: normal 500 12px/16px var(--sf-font); }
.sf-quote figcaption em .sf-ico { width: 14px; height: 14px; }

/* ---- footer ---- */
.sf-footer { padding: 50px 0 74px; background: #030A17; color: #fff; font-family: var(--sf-font); }
.sf-footer__inner { width: min(1224px, calc(100% - 32px)); margin: 0 auto; }
.sf-footer__top { display: grid; grid-template-columns: 262px repeat(3, minmax(0, 1fr)) 180px; gap: 24px; align-items: start; }
.sf-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.sf-footer__logo { display: block; width: 262px; max-width: 100%; }
.sf-footer__logo img { display: block; width: 100%; height: 59px; object-fit: contain; object-position: right center; }
[dir="ltr"] .sf-footer__logo img { object-position: left center; }
.sf-footer__logo.is-plate { padding: 8px 12px; border-radius: 12px; background: #fff; }
.sf-footer__copy { margin: 30px 0 0; color: #9AA6B4; font: 400 13px/20px var(--sf-font); }
.sf-footer__contacts { margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; list-style: none; }
.sf-footer__contacts a { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 10px; font: 400 14px/20px var(--sf-font); }
.sf-footer__contacts i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; font-style: normal; }
.sf-footer__contacts .sf-ico { width: 15px; height: 15px; }
.sf-footer__contacts .is-phone a { color: #E5E7EB; }
.sf-footer__contacts .is-phone i { background: #B3DEF8; color: var(--sf-navy); }
.sf-footer__contacts .is-telegram a { color: #4FA3E0; }
.sf-footer__contacts .is-telegram i { background: #134D6C; color: #8FD3F7; }
.sf-footer__contacts .is-email a { color: #F2B33D; }
.sf-footer__contacts .is-email i { background: #3E362C; color: #F2B33D; }
.sf-footer__contacts .is-instagram a { color: #F1416C; }
.sf-footer__contacts .is-instagram i { background: #3A2027; color: #F1416C; }
.sf-footer__col { padding-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; }
.sf-footer__col h2 { margin: 0 0 14px; color: #fff; font: 700 15px/22px var(--sf-font); }
.sf-footer__col a { color: #C9D2DC; font: 400 14px/20px var(--sf-font); }
.sf-footer__col a:hover, .sf-footer__contacts a:hover { color: #fff; }
.sf-footer__prefs { padding-top: 96px; display: flex; flex-direction: column; align-items: flex-start; }
.sf-footer__lang { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.sf-footer__lang .sf-ico { width: 18px; height: 18px; flex: none; }
.sf-footer__lang select { appearance: none; padding: 0 22px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; color: #fff; font: 400 18px/26px var(--sf-font); cursor: pointer; }
.sf-footer__lang select option { color: #111827; }
.sf-footer__pay { margin-top: 64px; }
.sf-footer__pay + .sf-footer__pay { margin-top: 34px; }
.sf-footer__pay h2 { margin: 0; color: #fff; font: 700 18px/28px var(--sf-font); }
.sf-footer__pay ul { margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.sf-footer__pay li { width: 70px; height: 55px; display: grid; place-items: center; padding: 8px; border-radius: 10px; background: #06172E; color: #fff; font: 600 12px/16px var(--sf-font); text-align: center; }
.sf-footer__pay li img { max-width: 100%; max-height: 32px; object-fit: contain; }
.sf-footer__pay li svg { width: 30px; height: 30px; }
.sf-footer__bottom { margin-top: 18px; padding-top: 24px; border-top: 1px solid #171D29; display: flex; justify-content: flex-end; }
.sf-footer__addresses { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; list-style: none; }
.sf-footer__addresses li { display: flex; align-items: center; gap: 10px; color: #E5E7EB; font: 400 13px/20px var(--sf-font); }
.sf-footer__addresses .sf-ico { width: 18px; height: 18px; flex: none; }

@media (max-width: 1100px) {
  .sf-popular__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-tech__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-offer { height: auto; min-height: 343px; padding: 70px 30px 30px; display: grid; gap: 22px; }
  .sf-offer__guarantee, .sf-offer__badge { top: 20px; }
  .sf-offer__phone { display: none; }
  .sf-offer__copy, .sf-offer__facts, .sf-offer__actions { position: static; }
  .sf-offer__copy h3, .sf-offer__copy p { white-space: normal; }
  .sf-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-footer__brand, .sf-footer__prefs { grid-column: 1 / -1; padding-top: 0; }
}

@media (max-width: 760px) {
  .sf-popular__grid, .sf-deals__grid { grid-template-columns: minmax(0, 1fr); }
  .sf-quote { flex-basis: 100%; }
  .sf-tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .sf-offer__facts { flex-wrap: wrap; }
  .sf-offer__actions { flex-wrap: wrap; }
  .sf-footer__top { grid-template-columns: minmax(0, 1fr); }
  .sf-footer__col { align-items: flex-start; text-align: start; padding-top: 0; }
}

/* ---- the second-round account pages on narrower screens ---- */
@media (max-width: 980px) {
  .sf-fund { margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .sf-fund__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sf-prof { margin-top: 32px; }
  .sf-prof__top { grid-template-columns: minmax(0, 1fr); }
  .sf-pass, .sf-mail, .sf-sec { margin-top: 32px; }
  .sf-stmt__stats { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 760px) {
  .sf-fund__main, .sf-fund__summary, .sf-prof__card, .sf-pass, .sf-mail, .sf-sec { padding: 18px; }
  .sf-fund__side { grid-template-columns: minmax(0, 1fr); }
  .sf-fund__step { margin-inline-start: 0; }
  .sf-fund__summary dl { margin-inline-start: 0; }
  .sf-stepper > li:not(.sf-stepper__line) { gap: 6px; font-size: 13px; }
  .sf-stepper__line { margin-inline: 6px; }
  .sf-gateway { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .sf-gateway__mark { width: 40px; height: 40px; font-size: 17px; }
  .sf-gateway__end { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .sf-prof__pair, .sf-prof__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sf-prof__mobile { width: 100%; }
  .sf-prof__card, .sf-prof__top .sf-prof__card { min-height: 0; }
  .sf-sec__card { padding: 16px; }
  .sf-sec__head { flex-wrap: wrap; }
  .sf-session { flex-wrap: wrap; }
  .sf-session__who { flex-basis: calc(100% - 56px); }
  .sf-session__end, .sf-session__end.is-row { flex-basis: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .sf-totp { flex-direction: column; }
  .sf-stmt__stat { min-height: 0; padding: 16px; }
  .sf-stmt__stat b { margin-top: 10px; font-size: 22px; line-height: 30px; }
  .sf-stmt__tools { flex-wrap: wrap; }
  .sf-stmt__tools .sf-search-field { flex-basis: 100%; }
  .sf-stmt__tools .sf-daterange { flex: 1; width: auto; }
  .sf-pager { flex-direction: column; align-items: stretch; }
  .sf-pager > div { justify-content: center; flex-wrap: wrap; }
}

/* ======================================================================== */
/* Support (October 2026 design): the ticket list at /support and one       */
/* conversation at /support/{reference}, inside the account frame. Measured */
/* on the 1440 frames: list card 912 wide, conversation column 672.         */
/* ======================================================================== */

.sf-tk-frame { min-height: calc(100vh - 64px); }
.sf-account__shell.is-solo { grid-template-columns: minmax(0, 912px); }
.sf-tk__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-tk.sf-lean { padding-top: 37px; }
.sf-tk--thread.sf-lean { padding-top: 43px; }
.sf-tk .sf-page-title { margin-bottom: 0; }
.sf-tk--thread .sf-page-title { margin-top: 31px; }

/* ---- page head: title and "New ticket" ---- */
.sf-tk__head { margin-top: 50px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sf-tk__head .sf-page-title { margin: 0; }
.sf-tk__actions { display: flex; align-items: center; gap: 16px; }
.sf-account .sf-tk__new { height: 32px; min-height: 0; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--sf-panel-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: #fff; font: 500 12px/16px var(--sf-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sf-account .sf-tk__new:hover { background: #4A93C6; }
.sf-tk__new .sf-ico { width: 15px; height: 15px; }
.sf-account .sf-tk__guest { height: 32px; min-height: 0; width: auto; padding: 0 4px; border: 0; background: none; color: var(--sf-gray-900); font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-tk__guest:hover { color: var(--sf-panel-blue); }

/* ---- the list card ---- */
.sf-tk__card { margin-top: 52px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); overflow: hidden; }
.sf-tk__bar { padding: 16px; border-bottom: 1px solid var(--sf-line); }
.sf-tk__tabs { height: 44px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sf-gray-100); overflow-x: auto; scrollbar-width: none; }
.sf-account .sf-tk__tabs button { height: 36px; min-height: 0; width: auto; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--sf-gray); font: 500 14px/20px var(--sf-font); white-space: nowrap; cursor: pointer; }
.sf-account .sf-tk__tabs button:hover { color: var(--sf-gray-900); }
.sf-tk__tabs button i { min-width: 19px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 999px; background: #E5E7EB; color: #374151; font: normal 600 12px/20px var(--sf-font); }
.sf-account .sf-tk__tabs button.is-active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: var(--sf-gray-900); font-weight: 600; }
.sf-tk__tabs button.is-active i { background: var(--sf-panel-blue); color: #fff; }
.sf-tk__tabs button:focus-visible { outline: 2px solid var(--sf-panel-blue); outline-offset: -2px; }

.sf-tk__list { margin: 0; padding: 0; list-style: none; }
.sf-tk__list > li[hidden] { display: none; }
.sf-tk__list > li:not([hidden]) ~ li:not([hidden]) { border-top: 1px solid var(--sf-line); }
.sf-tk__row { min-height: 72px; display: flex; align-items: center; gap: 16px; padding: 16px; color: inherit; text-decoration: none; }
.sf-tk__row:hover { background: #F9FAFB; }
.sf-tk__row:focus-visible { outline: 2px solid var(--sf-panel-blue); outline-offset: -2px; }
.sf-tk__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--sf-gray-100); color: var(--sf-gray); font-style: normal; }
.sf-tk__icon .sf-ico { width: 18px; height: 18px; }
.sf-tk__dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--sf-panel-blue); }
.sf-tk__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-tk__line { min-width: 0; height: 22px; display: flex; align-items: center; gap: 8px; }
.sf-tk__line b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
[dir="rtl"] .sf-tk__line b { text-align: right; }
.sf-tk__meta { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--sf-gray); font: 400 12px/16px var(--sf-font); }
.sf-tk__meta > i { font-style: normal; color: #9CA3AF; }
.sf-tk__order { color: var(--sf-panel-blue); font: 400 12px/16px ui-monospace, "Cascadia Mono", Consolas, monospace; unicode-bidi: isolate; }
.sf-tk__row > .sf-ico { width: 16px; height: 16px; color: var(--sf-gray); }
[dir="ltr"] .sf-tk__row > .sf-ico { transform: scaleX(-1); }
.sf-tk__none { margin: 0; padding: 40px 16px; color: var(--sf-gray); font: 400 14px/20px var(--sf-font); text-align: center; }
.sf-tk__none[hidden] { display: none; }

.sf-tk__empty { padding: 56px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sf-tk__empty > i { width: 56px; height: 56px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 16px; background: var(--sf-gray-100); color: var(--sf-gray); font-style: normal; }
.sf-tk__empty > i .sf-ico { width: 24px; height: 24px; }
.sf-tk__empty b { color: var(--sf-gray-900); font: 600 16px/24px var(--sf-font); }
.sf-tk__empty small { max-width: 440px; color: var(--sf-gray); font: 400 14px/22px var(--sf-font); }
.sf-tk__empty .sf-tk__new { margin-top: 14px; }
.sf-tk__mail { margin-top: 8px; color: var(--sf-panel-blue); font: 500 14px/20px var(--sf-font); }

/* ---- the pills: priority and state ---- */
.sf-tk-pill { height: 22px; flex: none; display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid; border-radius: 999px; font: normal 500 13px/16px var(--sf-font); white-space: nowrap; }
.sf-tk-pill::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 999px; background: currentColor; }
.sf-tk-pill.is-open { border-color: #193CB8; background: #162456; color: #51A2FF; }
.sf-tk-pill.is-waiting, .sf-tk-pill.is-normal { border-color: #973C00; background: #461901; color: #FFB900; }
.sf-tk-pill.is-closed, .sf-tk-pill.is-low { border-color: #364153; background: #1E2939; color: #99A1AF; }
.sf-tk-pill.is-high { border-color: #9F0712; background: #460809; color: #FF6467; }

/* ---- one conversation: the head ---- */
.sf-tk-head { margin-top: 34px; display: flex; align-items: flex-start; gap: 12px; }
.sf-account .sf-tk-head__back { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray); }
.sf-account .sf-tk-head__back:hover { color: var(--sf-gray-900); }
.sf-tk-head__back .sf-ico { width: 16px; height: 16px; }
[dir="ltr"] .sf-tk-head__back .sf-ico { transform: scaleX(-1); }
.sf-tk-head__main { min-width: 0; flex: 1; }
.sf-tk-head__line { min-height: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sf-tk-head__line h1 { min-width: 0; margin: 0; color: var(--sf-gray-900); font: 700 18px/28px var(--sf-font); overflow-wrap: anywhere; }
.sf-tk-head__meta { margin: 4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-tk-head__meta > i { font-style: normal; color: #9CA3AF; }
.sf-account .sf-tk-head__order { display: inline-flex; align-items: center; gap: 4px; color: var(--sf-panel-blue); text-decoration: none; }
.sf-account .sf-tk-head__order:hover { text-decoration: underline; }
.sf-tk-head__order .sf-ico { width: 12px; height: 12px; }
.sf-tk-head__ref { font: 400 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-account .sf-tk-head__close { height: 36px; min-height: 0; width: auto; flex: none; margin-inline-start: auto; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: #4B5563; font: 500 12px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-tk-head__close:hover { background: #fff; color: var(--sf-gray-900); }

/* ---- the messages ---- */
.sf-tk-thread { width: min(672px, 100%); margin-top: 25px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); overflow: hidden; }
.sf-tk-msg { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.sf-tk-msg + .sf-tk-msg { border-top: 1px solid var(--sf-line); }
.sf-tk-msg.is-staff { background: var(--sf-gray-100); }
.sf-tk-msg__avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--sf-panel-blue); color: #fff; font: normal 600 12px/16px var(--sf-font); }
.sf-tk-msg.is-staff .sf-tk-msg__avatar { background: #62748E; }
.sf-tk-msg__avatar .sf-ico { width: 16px; height: 16px; }
.sf-tk-msg__body { min-width: 0; flex: 1; }
.sf-tk-msg__body > header { height: 18px; display: flex; align-items: center; gap: 8px; }
.sf-tk-msg__body > header b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray-900); font: 600 14px/18px var(--sf-font); }
.sf-tk-msg time { flex: none; color: var(--sf-gray); font: 400 12px/18px var(--sf-font); direction: ltr; unicode-bidi: isolate; }
.sf-tk-msg__body > p { margin: 0; color: var(--sf-gray-900); font: 400 14px/24px var(--sf-font); white-space: pre-wrap; overflow-wrap: anywhere; }
[dir="rtl"] .sf-tk-msg__body > p { text-align: right; }
.sf-tk-msg__files { margin-top: 9px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sf-account .sf-tk-chip { height: 30px; max-width: 100%; display: inline-flex; direction: ltr; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid #F6D7CD; border-radius: 8px; background: #F4ECEB; color: var(--sf-panel-blue); font: 400 12px/20px var(--sf-font); text-decoration: none; }
.sf-account .sf-tk-chip:hover { border-color: #EDC3B4; }
.sf-tk-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tk-chip .sf-ico { width: 14px; height: 14px; }
.sf-tk-msg.is-system { justify-content: center; padding: 10px 16px; background: #FAFAFB; }
.sf-tk-msg.is-system p { margin: 0; color: var(--sf-gray); font: 400 12px/18px var(--sf-font); text-align: center; }
.sf-tk-msg.is-system time { margin-inline-start: 6px; }

/* ---- the reply box ---- */
.sf-tk-compose { width: min(672px, 100%); margin-top: 15px; padding: 24px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); }
.sf-tk-compose textarea { width: 100%; min-height: 102px; height: 102px; display: block; padding: 40px 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; color: var(--sf-gray-900); font: 400 14px/20px var(--sf-font); resize: none; outline: 0; }
.sf-tk-compose textarea::placeholder { color: var(--sf-gray); opacity: 1; }
.sf-tk-compose textarea:focus { border-color: var(--sf-panel-blue); box-shadow: 0 0 0 3px rgba(88, 161, 211, .18); }
.sf-tk-compose__row { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-tk-drop { position: relative; width: 272px; max-width: 100%; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 2px dashed var(--sf-line); border-radius: 12px; background: #fff; color: var(--sf-gray); font: 400 12px/20px var(--sf-font); cursor: pointer; }
.sf-tk-drop:hover, .sf-tk-drop.is-over { border-color: #A6C7DF; }
.sf-tk-drop.has-file { border-style: solid; border-color: #A6C7DF; color: var(--sf-gray-900); }
.sf-tk-drop:focus-within { border-color: var(--sf-panel-blue); }
.sf-tk-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sf-tk-drop span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tk-drop .sf-ico { width: 16px; height: 16px; }
.sf-account .sf-tk-send { width: 72px; height: 50px; min-height: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 12px; background: var(--sf-panel-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: #fff; font: 600 14px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-tk-send:hover { background: #4A93C6; }
.sf-tk-send .sf-ico { width: 16px; height: 16px; }
[dir="rtl"] .sf-tk-send .sf-ico { transform: scaleX(-1); }
.sf-tk-form__error { margin: 10px 0 0; color: #DC2626; font: 400 13px/20px var(--sf-font); }
.sf-tk-form__error[hidden] { display: none; }

/* ---- the new-ticket dialog ---- */
.sf-tk-modal { --sf-panel-blue: #58A1D3; width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--sf-gray-900); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); font-family: var(--sf-font); overflow: auto; }
.sf-tk-modal::backdrop { background: rgba(17, 24, 39, .5); }
.sf-tk-form { padding: 24px; }
.sf-tk-form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sf-tk-form > header h2 { margin: 0; font: 700 18px/28px var(--sf-font); }
.sf-tk-form > header p { margin: 4px 0 0; color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-tk-modal__x { width: 32px; height: 32px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--sf-gray); cursor: pointer; }
.sf-tk-modal__x:hover { background: var(--sf-gray-100); color: var(--sf-gray-900); }
.sf-tk-modal__x .sf-ico { width: 18px; height: 18px; }
.sf-tk-form__grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sf-tk-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-tk-field.is-wide { grid-column: 1 / -1; }
.sf-tk-field > b { color: #374151; font: 500 13px/20px var(--sf-font); }
.sf-tk-field input:not([type="file"]), .sf-tk-field select, .sf-tk-field textarea { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; color: var(--sf-gray-900); font: 400 14px/20px var(--sf-font); outline: 0; }
.sf-tk-field textarea { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; }
.sf-tk-field textarea::placeholder { color: #9CA3AF; }
.sf-tk-field input:focus, .sf-tk-field select:focus, .sf-tk-field textarea:focus { border-color: var(--sf-panel-blue); box-shadow: 0 0 0 3px rgba(88, 161, 211, .18); }
.sf-tk-field .sf-tk-drop { width: 100%; }
.sf-tk-field .field-error { color: #DC2626; font: 400 12px/18px var(--sf-font); }
.sf-tk-field .field-error[hidden] { display: none; }
.sf-tk-trap { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sf-tk-form > footer { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.sf-tk-modal .sf-tk__new { height: 44px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--sf-panel-blue); color: #fff; font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-tk-modal .sf-tk__new:hover { background: #4A93C6; }
.sf-tk-form__cancel { height: 44px; min-height: 0; padding: 0 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; color: var(--sf-gray); font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-tk-form__cancel:hover { color: var(--sf-gray-900); }

@media (max-width: 760px) {
  .sf-tk__head { margin-top: 20px; }
  .sf-tk__card { margin-top: 24px; }
  .sf-tk__bar { padding: 12px; }
  .sf-tk__row { gap: 12px; padding: 14px 12px; align-items: flex-start; flex-wrap: wrap; }
  .sf-tk__text { flex-basis: calc(100% - 92px); }
  .sf-tk__line { height: auto; flex-wrap: wrap; row-gap: 4px; }
  .sf-tk__line b { white-space: normal; }
  .sf-tk__row > .sf-tk-pill { margin-inline-start: 52px; }
  .sf-tk__row > .sf-ico { display: none; }
  .sf-tk-head { flex-wrap: wrap; margin-top: 24px; }
  .sf-tk-head__main { flex-basis: calc(100% - 48px); }
  .sf-account .sf-tk-head__close { margin-inline-start: 48px; padding: 0; height: 28px; }
  .sf-tk-thread { margin-top: 20px; }
  .sf-tk-compose { padding: 16px; }
  .sf-tk-compose textarea { padding: 12px; }
  .sf-tk-compose__row { flex-wrap: wrap; }
  .sf-tk-compose__row .sf-tk-drop { flex: 1; width: auto; }
  .sf-tk-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================== */
/* Invoices, one invoice, API access and the Telegram bot (October 2026     */
/* design, images 21-26). Measured on the 1440 frames.                      */
/* ======================================================================== */

/* ---- the dot pills the invoices and the bot share ---- */
.sf-pill-dot { height: 22px; flex: none; display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid; border-radius: 999px; font: normal 500 12px/16px var(--sf-font); white-space: nowrap; }
.sf-pill-dot::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 999px; background: currentColor; }
.sf-pill-dot.is-paid { border-color: #006045; background: #002C22; color: #00D492; }
.sf-pill-dot.is-pending { border-color: #973C00; background: #461901; color: #FFB900; }
.sf-pill-dot.is-cancelled { border-color: #364153; background: #1E2939; color: #99A1AF; }
.sf-pill-dot.is-failed { border-color: #9F0712; background: #460809; color: #FF6467; }

/* ---- #recordsPage holds three pages: the invoices, one invoice, the statement ---- */
#recordsPage[data-type="statement"],
#recordsPage[data-type="invoices"],
#recordsPage[data-type="invoice"],
#recordsPage:not([data-type]) { padding-top: 0; }
#recordsPage[data-type="statement"] .sf-records__invoices,
#recordsPage[data-type="invoice"] .sf-records__invoices,
#recordsPage:not([data-type="invoice"]) .sf-invd { display: none; }

.sf-inv, .sf-invd { padding-top: 28px; }
.sf-inv .sf-crumbs, .sf-invd .sf-crumbs { min-height: 16px; gap: 4px; line-height: 16px; }
.sf-inv .sf-crumbs .sf-ico, .sf-invd .sf-crumbs .sf-ico { color: var(--sf-gray); }
.sf-invd .sf-crumbs a b { color: var(--sf-gray-900); }
.sf-inv .sf-page-title { margin: 17px 0 0; font: 700 28px/35px var(--sf-font); }

/* ---- the three figures ---- */
.sf-inv__stats { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sf-inv__stat { min-height: 174px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.sf-inv__stat > header { align-self: stretch; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-inv__stat small { color: var(--sf-gray); font: 500 12px/16px var(--sf-font); letter-spacing: .3px; }
.sf-inv__stat > header i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--sf-gray-100); color: var(--sf-panel-blue); font-style: normal; }
.sf-inv__stat > header .sf-ico { width: 20px; height: 20px; stroke-width: 1.67; }
.sf-inv__stat > b { margin-top: 12px; color: var(--sf-gray-900); font: 700 24px/32px var(--sf-font); white-space: nowrap; }
.sf-inv__stat > em { margin-top: 4px; color: #00BC7D; font: normal 500 12px/16px var(--sf-font); }

/* ---- tabs, words and days ---- */
.sf-inv__filters { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--sf-line); border-radius: 6px; background: #fff; }
.sf-inv__tools { position: relative; height: 36px; display: flex; align-items: stretch; gap: 18px; }
.sf-account .sf-inv__search { min-width: 0; flex: 1; height: 36px; padding-block: 0; padding-inline: 35px 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; outline: 0; color: var(--sf-gray-900); font: 400 14px/20px var(--sf-font); }
.sf-account .sf-inv__search::placeholder { color: var(--sf-gray); opacity: 1; }
.sf-account .sf-inv__search:focus { border-color: var(--sf-panel-blue); box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }
.sf-inv__range { position: relative; flex: none; }
.sf-account .sf-inv__rangebtn { height: 36px; min-height: 0; min-width: 88px; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; color: var(--sf-gray); font: 400 13px/20px var(--sf-font); white-space: nowrap; cursor: pointer; }
.sf-account .sf-inv__rangebtn:hover, .sf-account .sf-inv__rangebtn.is-set { border-color: #A6C7DF; color: var(--sf-gray-900); }
.sf-inv__rangebtn .sf-ico { width: 14px; height: 14px; }
.sf-inv__pop { position: absolute; top: 44px; inset-inline-end: 0; z-index: 5; width: 260px; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, .08); }
.sf-inv__pop[hidden] { display: none; }
.sf-inv__pop label { display: grid; gap: 4px; color: var(--sf-gray); font: 500 12px/16px var(--sf-font); }
.sf-account .sf-inv__pop input { height: 36px; padding: 0 10px; border: 1px solid var(--sf-line); border-radius: 10px; color: var(--sf-gray-900); font: 400 14px/20px var(--sf-font); }
.sf-account .sf-inv__pop button { height: 32px; min-height: 0; border: 0; border-radius: 10px; background: var(--sf-gray-100); color: var(--sf-gray-900); font: 500 13px/20px var(--sf-font); cursor: pointer; }

/* ---- the table ---- */
.sf-inv__table { position: relative; padding: 24px; border: 1px solid var(--sf-line); border-top: 0; border-radius: 0 0 6px 6px; background: #fff; }
.sf-inv__filters { border-radius: 6px 6px 0 0; }
.sf-inv__grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.sf-inv__grid[hidden] { display: none; }
.sf-inv__grid col.c-id { width: 133px; } .sf-inv__grid col.c-when { width: 133px; } .sf-inv__grid col.c-gw { width: 162px; }
.sf-inv__grid col.c-trx { width: 130px; } .sf-inv__grid col.c-sum { width: 149px; } .sf-inv__grid col.c-state { width: 107px; } .sf-inv__grid col.c-get { width: 49px; }
.sf-account .sf-inv__grid th { height: 39px; padding: 12px 16px; border: 0; background: none; color: var(--sf-gray); font: 600 10px/14px var(--sf-font); letter-spacing: .25px; text-align: start; text-transform: uppercase; white-space: nowrap; }
.sf-account .sf-inv__grid th.c-sum { text-align: center; }
.sf-account .sf-inv__grid th.c-gw { padding-inline-start: 53px; }
.sf-account .sf-inv__grid th.c-when { padding-inline-start: 25px; }
.sf-account .sf-inv__grid th.c-trx { padding-inline-start: 6px; }
.sf-account .sf-inv__grid th.c-state { padding-inline-start: 24px; }
.sf-account .sf-inv__grid td { height: 60px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--sf-line); background: none; color: var(--sf-gray); font: 400 14px/20px var(--sf-font); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-account .sf-inv__grid tbody tr:last-child td { border-bottom: 0; }
.sf-account .sf-inv__grid tbody tr { cursor: pointer; }
.sf-account .sf-inv__grid tbody tr:hover td { background: #F9FAFB; }
.sf-account .sf-inv__grid tbody tr:focus-visible { outline: 2px solid var(--sf-panel-blue); outline-offset: -2px; }
.sf-inv__no { color: var(--sf-panel-blue); font: 700 12px/16px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-account .sf-inv__grid td.c-when b { display: block; color: var(--sf-gray-900); font: 500 12px/16px var(--sf-font); }
.sf-account .sf-inv__grid td.c-when small { display: block; color: var(--sf-gray); font: 400 10px/14px var(--sf-font); }
[dir="rtl"] .sf-account .sf-inv__grid td.c-when b, [dir="rtl"] .sf-account .sf-inv__grid td.c-when small { text-align: right; }
.sf-account .sf-inv__grid td.c-trx { font: 400 12px/16px ui-monospace, "Cascadia Mono", Consolas, monospace; }
[dir="rtl"] .sf-account .sf-inv__grid td.c-trx { text-align: right; }
.sf-account .sf-inv__grid td.c-sum { color: var(--sf-gray-900); font: 700 14px/20px var(--sf-font); text-align: center; }
.sf-account .sf-inv__grid td.c-state { text-align: end; }
.sf-account .sf-inv__grid td.c-get { padding: 14px 0; text-align: center; }
.sf-inv__get { width: 27px; height: 27px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--sf-gray); }
.sf-inv__get:hover { background: var(--sf-gray-100); color: var(--sf-gray-900); }
.sf-inv__get .sf-ico { width: 15px; height: 15px; stroke-width: 1.67; }
.sf-inv__empty { padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--sf-gray); }
.sf-inv__empty[hidden] { display: none; }
.sf-inv__empty > .sf-ico { width: 36px; height: 36px; margin-bottom: 8px; stroke-width: 1.5; }
.sf-inv__empty b { color: var(--sf-gray-900); font: 600 16px/24px var(--sf-font); }
.sf-inv__empty small { font: 400 14px/22px var(--sf-font); }
.sf-inv__empty .sf-tk__new { margin-top: 12px; }
#sfInvPager { margin-top: 16px; }

/* ---- one invoice ---- */
.sf-invd__head { margin-top: 17px; min-height: 36px; display: flex; align-items: center; gap: 12px; }
.sf-account .sf-invd__close { width: 36px; height: 36px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray); cursor: pointer; }
.sf-account .sf-invd__close:hover { color: var(--sf-gray-900); }
.sf-invd__close .sf-ico { width: 16px; height: 16px; }
.sf-invd__title { margin: 0; color: var(--sf-gray-900); font: 700 24px/32px var(--sf-font); }
.sf-invd__tools { margin-inline-start: auto; margin-inline-end: 8px; display: flex; gap: 8px; }
.sf-account .sf-invd__tool { height: 32px; min-height: 0; width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); color: var(--sf-gray-900); font: 500 13px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-invd__tool:hover { border-color: #A6C7DF; }
.sf-invd__tool .sf-ico { width: 16px; height: 16px; }
.sf-invd__card { width: min(705px, 100%); margin-top: 65px; }
.sf-inv__missing { margin: 0; padding: 32px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; color: var(--sf-gray); text-align: center; }

/* ---- the invoice card, on screen and on paper ---- */
.sf-inv-card { --sf-panel-blue: #58A1D3; padding: 24px; border: 1px solid var(--sf-line, #E5E7EB); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); color: var(--sf-gray-900, #111827); font-family: var(--sf-font); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sf-inv-card__top { padding-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #E5E7EB; }
.sf-inv-card__shop { min-width: 0; display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; }
.sf-inv-card__logo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #58A1D3; color: #fff; font: normal 700 20px/28px var(--sf-font); }
.sf-inv-card__shop > span { min-width: 0; display: flex; flex-direction: column; }
.sf-inv-card__shop b { color: #111827; font: 700 20px/28px var(--sf-font); }
.sf-inv-card__shop small { color: #6B7280; font: 400 13px/16px var(--sf-font); }
.sf-inv-card__shop small + small { font-size: 14px; }
[dir="rtl"] .sf-inv-card__shop small[dir="ltr"] { text-align: right; }
.sf-inv-card__id { display: flex; flex-direction: column; align-items: flex-start; }
.sf-inv-card__id h2 { margin: 0; color: #111827; font: 700 24px/32px var(--sf-font); }
.sf-inv-card__no { color: #58A1D3; font: 400 13px/18px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-inv-card__id .sf-pill-dot { margin-top: 4px; }
.sf-inv-card__parties { padding: 20px 0 19px; padding-inline-start: 33px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 1px solid #E5E7EB; }
.sf-inv-card__parties small { color: #6B7280; font: 500 12px/16px var(--sf-font); letter-spacing: .3px; }
.sf-inv-card__who { min-width: 0; display: flex; flex-direction: column; }
.sf-inv-card__who b { margin-top: 4px; color: #111827; font: 700 16px/22px var(--sf-font); }
.sf-inv-card__who span { color: #6B7280; font: 400 14px/18px var(--sf-font); }
[dir="rtl"] .sf-inv-card__who span[dir="ltr"] { text-align: right; }
.sf-inv-card__facts { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.sf-inv-card__facts > small { margin-bottom: 4px; }
.sf-inv-card__facts div { display: flex; align-items: center; gap: 6px; }
.sf-inv-card__facts dt { color: #6B7280; font: 400 13px/18px var(--sf-font); }
.sf-inv-card__facts dd { margin: 0; display: flex; align-items: center; gap: 2px; color: #111827; font: 600 14px/18px var(--sf-font); }
.sf-inv-card__trx span { font: 600 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-inv-copy { width: 18px; height: 18px; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #6B7280; cursor: pointer; }
.sf-inv-copy .sf-ico { width: 14px; height: 14px; }
.sf-inv-copy:hover, .sf-inv-copy.is-done { color: #58A1D3; }
.sf-inv-card__lines { width: 100%; margin-top: 7px; table-layout: fixed; border-collapse: collapse; }
.sf-inv-card__lines th { padding: 2px 12px 8px; border: 0; background: none; color: #6B7280; font: 500 12px/16px var(--sf-font); text-align: start; }
.sf-inv-card__lines th:first-child { padding-inline-start: 46px; }
.sf-inv-card__lines td { height: 42px; padding: 8px 12px 10px; border: 0; border-bottom: 1px solid #E5E7EB; color: #6B7280; font: 400 16px/24px var(--sf-font); text-align: start; }
.sf-inv-card__lines td:first-child { color: #111827; }
.sf-inv-card__lines th:nth-child(2), .sf-inv-card__lines td:nth-child(2) { width: 95px; }
.sf-inv-card__lines th:nth-child(3), .sf-inv-card__lines td:nth-child(3) { width: 104px; }
.sf-inv-card__lines th:nth-child(4), .sf-inv-card__lines td:nth-child(4) { width: 140px; }
.sf-inv-card__lines td b { color: #111827; font-weight: 700; }
.sf-inv-card__sums { margin: 0; padding: 14px 0 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #E5E7EB; }
.sf-inv-card__sums div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-inv-card__sums dt { color: #6B7280; font: 400 14px/20px var(--sf-font); }
.sf-inv-card__sums dd { margin: 0; color: #111827; font: 400 14px/20px var(--sf-font); }
.sf-inv-card__sums .is-fee dd { color: #00BC7D; }
.sf-inv-card__total { padding-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-inv-card__total span { color: #111827; font: 700 16px/24px var(--sf-font); }
.sf-inv-card__total b { color: #58A1D3; font: 700 20px/28px var(--sf-font); }
.sf-inv-card__credited { margin: 6px 0 0; color: #6B7280; font: 400 13px/20px var(--sf-font); }
.sf-inv-card__notice { margin: 9px 0 0; padding: 10px 16px 11px; border: 1px solid #973C00; border-radius: 12px; background: #461901; color: #FFD230; font: 400 13px/20px var(--sf-font); text-align: center; }

@media print {
  html.sf-printing * { visibility: hidden !important; }
  html.sf-printing #sfInvCard, html.sf-printing #sfInvCard * { visibility: visible !important; }
  html.sf-printing #sfInvCard { position: absolute; top: 0; left: 0; right: 0; width: auto; margin: 0; }
  html.sf-printing .sf-inv-card { box-shadow: none; }
  html.sf-printing .sf-inv-copy { display: none; }
}

/* ---- the settings panes the two designs set their own heading for ---- */
.sf-account #customerDashboard.sf-lean[data-pane="api"] { padding-top: 31px; }
.sf-account #customerDashboard.sf-lean[data-pane="telegram"] { padding-top: 30px; }

/* ---- API access ---- */
.sf-api { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 600px) 288px; gap: 24px; justify-content: space-between; align-items: start; }
.sf-api__main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sf-api__keys { padding: 24px; }
.sf-api__label { margin: 20px 0 0; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-api__field { min-height: 42px; margin-top: 4px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); }
.sf-api__field.is-fresh { border-color: #A6C7DF; }
.sf-api__field code { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray-900); font: 400 15px/22px ui-monospace, "Cascadia Mono", Consolas, monospace; text-align: left; }
.sf-account .sf-api__copy { height: 28px; min-height: 0; width: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border: 0; background: none; color: var(--sf-gray); font: 400 13px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-api__copy:hover { color: var(--sf-gray-900); }
.sf-account .sf-api__copy[aria-disabled="true"] { opacity: .55; }
.sf-api__copy .sf-ico { width: 16px; height: 16px; }
.sf-api__keys .sf-hint { margin: 8px 0 0; }
.sf-account .sf-api__regen { height: 34px; min-height: 0; width: auto; margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border: 1px solid #9F0712; border-radius: 10px; background: #460809; color: #FF6467; font: 500 13px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-api__regen:hover { background: #58070A; }
.sf-api__regen .sf-ico { width: 16px; height: 16px; }
.sf-api__h { margin: 0; color: var(--sf-gray-900); font: 700 18px/28px var(--sf-font); }
.sf-api__settings { padding: 24px; }
.sf-api__row { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-api__row > span { min-width: 0; display: flex; flex-direction: column; }
.sf-api__row b { color: var(--sf-gray-900); font: 600 15px/20px var(--sf-font); }
.sf-api__row small { color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-api__ips { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sf-api__ips[hidden] { display: none; }
.sf-api__ips textarea.sf-input { height: auto; min-height: 84px; padding: 8px 12px; font: 400 14px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical; }
.sf-account .sf-api__save { height: 34px; min-height: 0; width: auto; padding: 0 16px; border: 0; border-radius: 10px; background: var(--sf-panel-blue); color: #fff; font: 500 13px/20px var(--sf-font); cursor: pointer; }
.sf-api__code > header { min-height: 89px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px; border-bottom: 1px solid var(--sf-line); }
.sf-api__code > header a { display: inline-flex; align-items: center; gap: 6px; color: var(--sf-gray-900); font: 500 14px/20px var(--sf-font); text-decoration: none; }
.sf-api__code > header a:hover { color: var(--sf-panel-blue); }
.sf-api__code > header .sf-ico { width: 16px; height: 16px; }
.sf-api__code pre { margin: 20px 24px 20px 22px; padding: 17px 24px; overflow-x: auto; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); color: var(--sf-gray-900); font: 400 13px/16px ui-monospace, "Cascadia Mono", Consolas, monospace; text-align: left; }
.sf-api__side { display: flex; flex-direction: column; gap: 28px; }
.sf-api__stat { min-height: 139px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.sf-api__stat > header { align-self: stretch; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-api__stat > header small { color: var(--sf-gray); font: 500 13px/20px var(--sf-font); }
.sf-api__stat > header i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--sf-gray-100); color: var(--sf-panel-blue); font-style: normal; }
.sf-api__stat > header .sf-ico { width: 20px; height: 20px; }
.sf-api__stat > b { margin-top: 8px; color: var(--sf-gray-900); font: 700 28px/36px var(--sf-font); }
.sf-api__stat > em, .sf-api__stat > small { margin-top: 4px; color: var(--sf-gray); font: normal 400 12px/16px var(--sf-font); }
.sf-api__stat > em span { color: #00BC7D; font-weight: 600; }
.sf-api__stat > em.is-down span { color: #FB2C36; }
.sf-api__usage { padding: 24px 24px 22px; }
.sf-api__usage h2 { margin: 0 0 17px; color: var(--sf-gray-900); font: 700 18px/28px var(--sf-font); }
.sf-api__use + .sf-api__use { margin-top: 8px; }
.sf-api__use > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-api__use small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-api__use b { color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-api__use > i { height: 8px; margin-top: 4px; display: block; overflow: hidden; border-radius: 999px; background: #E5E7EB; }
.sf-api__use > i b { height: 100%; display: block; border-radius: 999px; background: var(--sf-panel-blue); }

/* ---- the Telegram bot ---- */
.sf-tg { margin-top: 33px; display: grid; grid-template-columns: minmax(0, 600px) 288px; gap: 24px; justify-content: space-between; align-items: start; }
.sf-tg__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sf-tg__bot { position: relative; min-height: 105px; display: flex; align-items: center; gap: 16px; padding: 24px; padding-inline-start: 35px; }
.sf-tg__mark { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 16px; background: #E9F5FB; color: #229ED9; font-style: normal; }
.sf-tg__mark .sf-ico { width: 28px; height: 28px; }
.sf-tg__bot > span { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sf-tg__bot b { color: var(--sf-gray-900); font: 700 16px/24px var(--sf-font); }
.sf-tg__bot small { color: var(--sf-gray); font: 400 13px/20px var(--sf-font); }
.sf-tg__bot .sf-pill-dot { position: absolute; top: 33px; inset-inline-end: 24px; }
.sf-tg__link { padding: 24px; }
.sf-tg__link > .sf-card-title { margin-top: 2px; font-size: 16px; }
.sf-tg__inner { margin-inline-start: 11px; }
.sf-tg__steps { margin-top: 23px; padding: 13px 16px 16px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); }
.sf-tg__steps p { margin: 0; color: var(--sf-gray); font: 400 14px/24px var(--sf-font); }
.sf-tg__steps a { width: max-content; margin-top: 7px; display: flex; align-items: center; gap: 4px; color: var(--sf-panel-blue); font: 400 14px/24px var(--sf-font); text-decoration: none; }
.sf-tg__steps a:hover { text-decoration: underline; }
.sf-tg__steps a .sf-ico { width: 14px; height: 14px; }
.sf-tg__label { margin-top: 15px; display: block; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-account .sf-tg__input { width: 100%; height: 40px; margin-top: 2px; display: block; font-size: 16px; text-align: left; }
.sf-tg__input::placeholder { color: var(--sf-gray); opacity: 1; }
.sf-tg__inner > .sf-hint { margin-top: 6px; display: block; }
.sf-account .sf-tg__connect { width: 100%; height: 38px; min-height: 0; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--sf-panel-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); color: #fff; font: 600 15px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-tg__connect:hover { background: #4A93C6; }
.sf-account .sf-tg__connect[disabled] { opacity: .5; cursor: not-allowed; }
.sf-tg__connect .sf-ico { width: 18px; height: 18px; }
[dir="rtl"] .sf-tg__connect .sf-ico { transform: scaleX(-1); }
.sf-tg__ok { min-height: 72px; margin-top: 22px; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid #006045; border-radius: 12px; background: #002C22; }
.sf-tg__ok > .sf-ico { width: 24px; height: 24px; flex: none; color: #00D492; }
.sf-tg__ok > span { display: flex; flex-direction: column; }
.sf-tg__ok b { color: #A4F4CF; font: 600 15px/22px var(--sf-font); }
.sf-tg__ok small { color: #00BC7D; font: 400 13px/20px var(--sf-font); }
[dir="rtl"] .sf-tg__ok small { text-align: right; }
.sf-account .sf-tg__off { width: 100%; height: 38px; min-height: 0; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid #9F0712; border-radius: 12px; background: #460809; color: #FF6467; font: 600 15px/20px var(--sf-font); cursor: pointer; }
.sf-account .sf-tg__off:hover { background: #58070A; }
.sf-tg__off .sf-ico { width: 18px; height: 18px; }
.sf-tg__alerts { min-height: 480px; padding: 24px; }
.sf-tg__alerts h2 { margin: 0 0 19px; color: var(--sf-gray-900); font: 700 18px/28px var(--sf-font); }
.sf-tg__alert { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-tg__alert + .sf-tg__alert { margin-top: 20px; }
.sf-tg__alert b { color: var(--sf-gray-900); font: 500 15px/20px var(--sf-font); }

@media (max-width: 1100px) {
  .sf-inv__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .sf-api, .sf-tg { grid-template-columns: minmax(0, 1fr); }
  .sf-tg__alerts { min-height: 0; }
}

@media (max-width: 760px) {
  .sf-inv__stats { margin-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sf-inv__stat { min-height: 0; }
  .sf-inv__filters { margin-top: 24px; }
  .sf-inv__tools { height: auto; flex-wrap: wrap; gap: 8px; }
  .sf-account .sf-inv__search { flex-basis: 100%; height: 36px; }
  .sf-inv__table { padding: 8px 0; overflow-x: auto; }
  .sf-inv__grid { min-width: 720px; }
  .sf-invd__head { flex-wrap: wrap; }
  .sf-invd__tools { margin-inline: 0; width: 100%; }
  .sf-invd__card { margin-top: 24px; }
  .sf-inv-card { padding: 16px; }
  .sf-inv-card__top, .sf-inv-card__parties { flex-direction: column; padding-inline-start: 0; }
  .sf-inv-card__lines th:first-child { padding-inline-start: 12px; }
  .sf-inv-card__lines th:nth-child(2), .sf-inv-card__lines td:nth-child(2), .sf-inv-card__lines th:nth-child(3), .sf-inv-card__lines td:nth-child(3) { width: 56px; }
  .sf-inv-card__lines th:nth-child(4), .sf-inv-card__lines td:nth-child(4) { width: 96px; }
  .sf-api, .sf-tg { margin-top: 24px; }
  .sf-api__keys, .sf-api__settings, .sf-tg__link { padding: 18px; }
  .sf-api__code > header { padding: 18px; min-height: 0; }
  .sf-api__code pre { margin: 16px; }
  .sf-tg__bot { padding: 18px; flex-wrap: wrap; }
  .sf-tg__inner { margin-inline-start: 0; }
  .sf-tg__bot .sf-pill-dot { position: static; }
}