/*
 * 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 (assets/fonts/IRANSansX/, from the shop's
     GSMWEB project); brand_font_css() points both tokens at it. Vazirmatn is
     what is left when those files are absent. */
  --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 */
/* The 2026-10-20 landing design: a 38px navy strip - the shop's line with a
   green dot at the start, its email and Instagram, language · currency and the
   light/dark switch at the end. Measured on the 1440 frame (120px margins). */

.sf-topbar { position: relative; z-index: 61; background: #06172E; color: #fff; font-family: var(--sf-font); }
.sf-topbar__inner { width: min(1200px, calc(100% - 32px)); min-height: 38px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-topbar__note { min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .75); font: 400 12px/19px var(--sf-font); }
.sf-topbar__note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-topbar__note i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #4FD1A1; box-shadow: 0 0 0 3px rgba(79, 209, 161, .16); }
.sf-topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }
.sf-topbar__contact { display: flex; align-items: center; gap: 6px; }
.sf-topbar__email { color: #fff; font: 500 14px/20px var(--sf-latin); text-decoration: underline; text-underline-offset: 3px; }
.sf-topbar__instagram { display: block; width: 16px; height: 16px; }
.sf-topbar__instagram svg { display: block; width: 16px; height: 16px; }
.sf-topbar a:hover { opacity: .85; }
/* Language, currency and light/dark (site-header.php's [data-sf-prefs]): here for
   a visitor, in the white bar once signed in. Each place shows its own marks. */
.sf-prefs { display: flex; align-items: center; }
.sf-prefs__menus { position: relative; display: flex; align-items: center; }
.sf-pref { min-height: 0; width: auto; display: inline-flex; align-items: center; cursor: pointer; }
.sf-topbar .sf-prefs { gap: 20px; }
.sf-topbar .sf-prefs__menus { gap: 4px; }
.sf-topbar .sf-pref__dot { color: rgba(255, 255, 255, .7); font: normal 400 12px/19px var(--sf-font); }
.sf-topbar .sf-pref { height: 26px; gap: 6px; padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: 400 12px/19px var(--sf-font); }
.sf-topbar .sf-pref .sf-ico { width: 14px; height: 14px; stroke-width: 1.6; }
.sf-topbar .sf-pref:hover { background: rgba(255, 255, 255, .08); }
.sf-topbar .sf-pref:focus-visible { outline: 2px solid #4FD1A1; outline-offset: 1px; }
.sf-topbar .sf-pref--theme { width: 26px; justify-content: center; padding: 0; border-radius: 8px; color: rgba(255, 255, 255, .8); }
.sf-topbar .sf-pref--theme .sf-ico { width: 15px; height: 15px; }
.sf-topbar .sf-pref__translate, .sf-topbar .sf-pref__code, .sf-topbar .sf-pref__dollar { display: none; }
.sf-pref--theme[aria-pressed="true"] { color: #F2C14E; }
.sf-topbar .dropdown-panel { top: calc(100% + 6px); padding: 8px; border: 1px solid #E1E6EE; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(6, 23, 46, .16); color: #0F1B2D; font-family: var(--sf-font); }
[dir="rtl"] .sf-topbar .dropdown-panel { left: 0; right: auto; }
[dir="ltr"] .sf-topbar .dropdown-panel { right: 0; left: auto; }
/* styles.css gives every .currency-menu button a white box; a colour of its own here is what the dark copy turns. */
.sf-topbar .currency-menu button { border-radius: 10px; background: transparent; color: #0F1B2D; }
.sf-topbar .currency-menu button:hover { background: #F1F4F9; }
.sf-topbar .currency-menu b { color: #0F4C81; }

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

/* The header stays at the top of the window while the page scrolls (2026-10-28, the owner). It was
   sticky on paper all along, and so were the phone's app bar, the panel's side menu and the cart's
   summary: styles.css cuts sideways overflow with `overflow-x: hidden` on html and body, which makes
   body a scroll container of its own - one that never scrolls - so nothing inside it could stick.
   `clip` cuts the same overflow without making one (a browser without it keeps `hidden`).
   --sf-head is the header's height, measured by site-header.js, for what sits under it. */
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--sf-head, 0px) + 12px); }

.sf-header {
  position: sticky;
  top: 0;
  z-index: 60;
  font-family: var(--sf-font);
  background: #fff;
  border-bottom: 1px solid #E8ECF2;
  transition: box-shadow .2s ease;
}
/* Once the page runs under it. */
.sf-header.is-stuck { box-shadow: 0 10px 28px -14px rgba(6, 23, 46, .22); }
.sf-topbar--app.is-stuck { box-shadow: 0 10px 28px -14px rgba(6, 23, 46, .22); }
.sf-header__bar { width: min(1200px, calc(100% - 32px)); min-height: 102px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

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

.sf-search { flex: none; width: 346px; height: 38px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 12px; background: #F1F4F9; }
.sf-search .sf-ico { width: 17px; height: 17px; color: #0F1B2D; }
.sf-search input { flex: 1; min-width: 0; height: 20px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #0F1B2D; font: 400 13px/20px var(--sf-font); }
.sf-search input::placeholder { color: #8A93A3; 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-nav { display: flex; align-items: center; gap: 34px; }
.sf-nav__group { position: relative; }
.sf-header .sf-nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #3D4757; font: 500 14.5px/23px var(--sf-font); white-space: nowrap; cursor: pointer; }
.sf-header .sf-nav__link:hover { color: #0F4C81; }
.sf-header .sf-nav__link.is-active { color: #0F4C81; font-weight: 700; }
/* The design's 18x3 bar under the page's own item, 4px below its words. */
.sf-header .sf-nav__link.is-active::after { content: ""; position: absolute; inset-inline: 0; bottom: -7px; width: 18px; height: 3px; margin: 0 auto; border-radius: 2px; background: #0F4C81; }
.sf-nav__chev.sf-ico { width: 14px; height: 14px; color: #5B6577; stroke-width: 1.7; }

.sf-actions { display: flex; align-items: center; gap: 10px; }

.sf-header .sf-icon-button { position: relative; width: 46px; height: 46px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; background: #F1F4F9; color: #0F1B2D; cursor: pointer; }
.sf-header .sf-icon-button:hover { background: #E7ECF4; }
.sf-header .sf-icon-button .sf-ico { width: 20px; height: 20px; stroke-width: 1.7; }
.sf-header .sf-cart-badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: #C2975C; color: #fff; font: normal 700 10px/16px var(--sf-font); }
.sf-header .sf-join { height: 46px; min-height: 0; width: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding-block: 12px; padding-inline: 18px 20px; border: 0; border-radius: 14px; background: #0F4C81; box-shadow: 0 8px 18px -4px rgba(15, 76, 129, .3); color: #fff; font: 600 14px/22px var(--sf-font); white-space: nowrap; cursor: pointer; }
.sf-header .sf-join:hover { background: #0B3D69; }
.sf-header .sf-join .sf-ico { width: 18px; height: 18px; stroke-width: 1.6; }

.sf-header .sf-account__button { height: 46px; min-height: 0; width: auto; display: flex; align-items: center; gap: 8px; padding-block: 0; padding-inline: 8px 12px; border: 0; border-radius: 14px; background: #F1F4F9; color: #0F1B2D; cursor: pointer; }
.sf-header .sf-account__button:hover { background: #E7ECF4; }
.sf-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 999px; background: #0F4C81; 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: #0F1B2D; font: 600 13px/18px var(--sf-font); }
.sf-account__text small { color: #5B6577; font: 400 11px/14px 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: #5B6577; }

/* 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; }

/* Signed in: the 2026-10-20 customer panel design's bar. 64px, as wide as the
   panel (1226: sidebar, gap, content), no strip above it; the logo 130 wide, the
   menu 181px from it, then light/dark, the language and currency pills and the
   account button. Search is gone; the cart stays only while something is in it. */
.sf-topbar:has(+ .sf-header.is-signed-in) { display: none; }
.sf-header.is-signed-in { border-bottom-color: #E5E7EB; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); }
.sf-header.is-signed-in .sf-header__bar { width: min(1226px, calc(100% - 32px)); min-height: 64px; justify-content: flex-start; gap: 16px; }
.sf-header.is-signed-in .sf-brand,
.sf-header.is-signed-in .sf-brand img { width: 130px; height: 30px; }
.sf-header.is-signed-in .sf-nav { gap: 4px; margin-inline-start: 165px; }
.sf-header.is-signed-in .sf-nav__link { padding: 6px 14px; border-radius: 8px; color: #4A5F78; font: 500 14px/21px var(--sf-font); }
.sf-header.is-signed-in .sf-nav__link:hover { background: #F3F4F6; color: #4A5F78; }
.sf-header.is-signed-in .sf-nav__link.is-active { color: #0F4C81; font-weight: 600; }
.sf-header.is-signed-in .sf-nav__link.is-active::after { bottom: 0; }
.sf-header.is-signed-in .sf-actions { margin-inline-start: auto; gap: 8px; }
.sf-header.is-signed-in .sf-search-link,
.sf-header.is-signed-in .sf-cart-link:has(> [data-cart-badge][hidden]) { display: none; }
.sf-header.is-signed-in .sf-icon-button { width: 36px; height: 36px; border-radius: 12px; }
.sf-header.is-signed-in .sf-icon-button .sf-ico { width: 18px; height: 18px; }
.sf-header .sf-prefs { gap: 8px; }
.sf-header .sf-prefs__menus { gap: 8px; }
.sf-header .sf-pref { height: 36px; gap: 4px; padding: 0 12px; border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; color: #6B7280; font: 500 14px/20px var(--sf-font); direction: ltr; }
.sf-header .sf-pref:hover { background: #F3F4F6; }
.sf-header .sf-pref .sf-ico { width: 15px; height: 15px; stroke-width: 1.25; }
.sf-header .sf-pref--language { gap: 6px; }
.sf-header .sf-pref--language .sf-ico { width: 16px; height: 16px; stroke-width: 1.33; }
.sf-header .sf-pref--theme { order: -1; width: 36px; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
.sf-header .sf-pref--theme .sf-ico { width: 18px; height: 18px; stroke-width: 1.5; }
.sf-header .sf-pref__globe, .sf-header #languageLabel, .sf-header .sf-pref__dot { display: none; }
.sf-header.is-signed-in .sf-account__button { height: 36px; gap: 8px; padding-block: 0; padding-inline: 6px 12px; border: 1px solid #E5E7EB; border-radius: 12px; background: #F3F4F6; }
.sf-header.is-signed-in .sf-account__button:hover { background: #ECEEF2; }
.sf-header.is-signed-in .sf-avatar { width: 28px; height: 28px; background: #06172E; font: normal 600 12px/16px var(--sf-font); }
.sf-header.is-signed-in .sf-account__text b { color: #111827; font: 600 12px/16px var(--sf-font); }
.sf-header.is-signed-in .sf-account__text small { color: #6B7280; font: 400 10px/12px var(--sf-font); }
.sf-header.is-signed-in .sf-account__chevron.sf-ico { color: #6B7280; }

/* Panels hanging off the header. */
.sf-header .dropdown-panel { top: calc(100% + 10px); padding: 8px; border: 1px solid #E1E6EE; border-radius: 14px; 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: #5B6577; }
.sf-header .telegram-menu a,
.sf-header .currency-menu button { border-radius: 10px; background: transparent; color: #0F1B2D; }
.sf-header .telegram-menu a:hover,
.sf-header .currency-menu button:hover { background: #F1F4F9; }
.sf-header .telegram-menu b,
.sf-header .currency-menu b { color: #0F4C81; }

/* The services panel (2026-10-23 design): 344 wide, "Browse services", a 60px row a section - its
   mark, its name over a line, a chevron - then "All services" with how many there are. styles.css
   gives every .services-menu a white grid cell, hence the three classes. The dark design's own
   colours are among the corrections of bin/storefront-dark.php. */
.sf-header .dropdown-panel.services-menu { width: 344px; padding: 0; overflow: hidden; border: 1px solid #E6EAF2; border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(6, 23, 46, .14); }
.sf-header .services-menu > p { margin: 0; padding: 14px 16px 8px; color: #8A93A3; font: 600 14px/21px var(--sf-font); letter-spacing: 0; text-align: start; text-transform: none; }
.sf-header .services-menu #serviceMenuItems { display: flex; flex-direction: column; }
.sf-header .services-menu .sf-svm__item { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-inline: 16px 14px; border: 0; border-radius: 0; background: transparent; color: #06172E; text-align: start; text-decoration: none; }
.sf-header .services-menu .sf-svm__icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 11px; background: #EAEFFB; color: #0F4C81; }
.sf-header .services-menu .sf-svm__icon svg { width: 20px; height: 20px; }
.sf-header .services-menu .sf-svm__text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.sf-header .services-menu .sf-svm__text b { color: #06172E; font: 600 14px/21px var(--sf-font); }
.sf-header .services-menu .sf-svm__text small { color: #8A93A3; font: 400 12px/18px var(--sf-font); }
.sf-header .services-menu .sf-svm__go { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 7px; background: #F1F4F9; color: #8A93A3; }
.sf-header .services-menu .sf-svm__go svg { width: 14px; height: 14px; }
.sf-header .services-menu .sf-svm__item:hover,
.sf-header .services-menu .sf-svm__item:focus-visible,
.sf-header .services-menu .sf-svm__item.is-current { background: #EAEFFB; }
.sf-header .services-menu .sf-svm__item:hover .sf-svm__icon,
.sf-header .services-menu .sf-svm__item:focus-visible .sf-svm__icon,
.sf-header .services-menu .sf-svm__item.is-current .sf-svm__icon { background: #0F4C81; color: #fff; }
.sf-header .services-menu .sf-svm__item:hover .sf-svm__text b,
.sf-header .services-menu .sf-svm__item:focus-visible .sf-svm__text b,
.sf-header .services-menu .sf-svm__item.is-current .sf-svm__text b { color: #0F4C81; }
.sf-header .services-menu .sf-svm__item:hover .sf-svm__go,
.sf-header .services-menu .sf-svm__item:focus-visible .sf-svm__go,
.sf-header .services-menu .sf-svm__item.is-current .sf-svm__go { background: #fff; color: #0F4C81; }
.sf-header .services-menu .sf-svm__all { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 14px 16px; border: 0; border-top: 1px solid #E6EAF2; border-radius: 0; background: #F3F5F9; color: #06172E; text-align: start; text-decoration: none; }
.sf-header .services-menu .sf-svm__all > span { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.sf-header .services-menu .sf-svm__all b { color: #06172E; font: 700 13.5px/20px var(--sf-font); }
.sf-header .services-menu .sf-svm__count { padding: 1px 8px; border-radius: 999px; background: #F6EEE1; color: #C2975C; font: 600 10.5px/16px var(--sf-font); white-space: nowrap; }
.sf-header .services-menu .sf-svm__all > svg { width: 16px; height: 16px; color: #0F4C81; }
[dir="ltr"] .sf-header .services-menu .sf-svm__go svg,
[dir="ltr"] .sf-header .services-menu .sf-svm__all > svg { transform: scaleX(-1); }
.sf-header .account-menu { width: 230px; }
.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: 10px; background: transparent; color: #0F1B2D; 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: #F1F4F9; }
.sf-header .account-menu .icon { width: 16px; height: 16px; flex: 0 0 16px; color: #0F4C81; }

.sf-header .sf-menu-toggle { display: none; }

/* Backgrounds of its own: styles.css paints the menu and every row #fff, and a colour this file does not
   name is one the dark sheet never turns (2026-10-26: a white menu with light words in dark). */
.sf-header .sf-mobile-menu.open { padding: 12px 16px 16px; border-bottom: 1px solid #E8ECF2; background: #fff; 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: #3D4757; font: 500 14px/21px var(--sf-font); border-bottom-color: #F1F4F9; background: transparent; }
.sf-header .sf-mobile-menu a:hover,
.sf-header .sf-mobile-menu button:hover { background: #F5F8FC; color: #06172E; }
.sf-search--mobile { width: 100%; margin: 0 0 6px; }

@media (max-width: 1240px) {
  .sf-nav { gap: 24px; }
  .sf-brand, .sf-brand img { width: 180px; height: 42px; }
  .sf-header.is-signed-in .sf-nav { margin-inline-start: 40px; }
}

@media (max-width: 1100px) {
  .sf-header .sf-nav { display: none; }
  .sf-header .sf-menu-toggle { display: grid; }
  .sf-header__bar { min-height: 76px; }
}

@media (max-width: 760px) {
  .sf-topbar__note { display: none; }
  .sf-topbar__end { width: 100%; justify-content: space-between; gap: 12px; }
  .sf-topbar__email { font-size: 12px; }
}

@media (max-width: 760px) {
  .sf-header .sf-pref { padding: 0 10px; }
  .sf-header .sf-pref__code { display: none; }
}

@media (max-width: 640px) {
  .sf-header .sf-prefs, .sf-header .sf-prefs__menus { gap: 6px; }
  .sf-header .sf-pref { height: 36px; padding: 0 8px; }
  .sf-header .sf-pref__dollar { display: none; }
  .sf-header__bar { min-height: 64px; gap: 10px; }
  .sf-brand,
  .sf-brand img { width: 120px; height: 28px; }
  .sf-actions { gap: 6px; }
  .sf-header .sf-icon-button { width: 40px; height: 40px; border-radius: 12px; }
  .sf-header .sf-account__text,
  .sf-header .sf-account__chevron { display: none; }
  .sf-header .sf-account__button { height: 40px; padding: 0 4px; border-radius: 12px; }
  .sf-header .sf-join { height: 40px; padding-inline: 12px; border-radius: 12px; font-size: 13px; }
  .sf-header .sf-join .sf-ico { display: none; }
}

@media (max-width: 420px) {
  .sf-header .sf-pref--theme { display: none; }
  .sf-brand,
  .sf-brand img { width: 100px; height: 24px; }
  .sf-header .sf-search-link { display: none; }
  .sf-topbar__contact { display: none; }
}

@media (max-width: 360px) {
  .sf-header .sf-join { padding-inline: 10px; font-size: 12px; }
}

/* 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; }

/* The landing page's own sections are in landing.css. */

/* ======================================================================== */
/* 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: #0F4C81;
  --orange-dark: #0B3D69;
  --soft: #E8F3FB;
  --brand: #0F4C81;
  --sf-panel-blue: #0F4C81;
  background: var(--sf-gray-100);
  font-family: var(--sf-font);
  color: var(--sf-gray-900);
  padding-bottom: 72px;
}
/* The panel design has no strip, no footer, and nothing of the landing page:
   styles.css hides `main > section`, and the landing's card bar is a nav. */
.dashboard-open :is(.sf-topbar, .sf-footer, .lp-quick),
.order-history-open :is(.sf-topbar, .sf-footer, .lp-quick),
.records-open :is(.sf-topbar, .sf-footer, .lp-quick),
.funding-open :is(.sf-topbar, .sf-footer, .lp-quick),
.sf-panel-boot :is(.sf-topbar, .sf-footer, .lp-quick) { display: none; }
/* A panel address reloaded while signed in (home.php's body.sf-panel-boot): the panel from the first
   paint, never the landing page first; its page stays blank until dashboard.js has opened the one the
   address names - for a single order, that order rather than the list on the way to it. */
.sf-panel-boot main > section:not(.sf-account) { display: none !important; }
.sf-panel-boot .sf-account__main > * { visibility: hidden; }

.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; }
/* Under the pinned header, when the window is tall enough to hold all of it. */
@media (min-height: 960px) and (min-width: 1101px) { .sf-side { position: sticky; top: calc(var(--sf-head, 65px) + 16px); } }
.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; }
/* A Latin name keeps its own letter order but sits beside the avatar, like the email under it. */
[dir="rtl"] .sf-side__who b { text-align: right; }
.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); }
/* Blue in the 2026-10-20 panel design (the account menu's own "log out" stays red). */
.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; }
/* Red, as every frame from 64 on draws it (57-63 had it blue; owner 2026-10-21: the new UI). */
.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; }
/* Frames 59-62 set the orders' crumbs 4px higher than the invoices' (2026-10-21). */
.sf-orders, .sf-od { padding-top: 38px; }
.sf-records { padding-top: 42px; }
.sf-orders .sf-page-title { margin-top: 5px; }
.sf-orders .sf-daterange { margin-bottom: 2px; }
.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: 34px; 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: #0B3D69; }
.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: 37px; 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; }
/* Frame 57 gives an invoice row (sum over its state pill) 75px, a transaction 65. */
#sfRecentInv .sf-list__row { height: 75px; }
.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 ---- */
/* The dot follows the word, as frames 59 and 70/77 draw it. */
.sf-status { height: 22px; display: inline-flex; flex-direction: row-reverse; 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(15, 76, 129, .15); }
/* Date pickers in the reader's calendar (date-picker.js): the browser's box is
   hidden, a button shows the day, and the month opens under it. The selectors
   are pinned high enough to beat the invoice popover's own button rules. */
.sf-date-native { display: none !important; }
.sf-date-btn { flex: 1; min-width: 0; height: 34px; padding: 0 2px; border: 0; background: transparent; color: var(--sf-gray-900); font: 400 12px/20px var(--sf-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sf-date-btn.is-empty { color: #9CA3AF; }
.sf-date-btn:focus-visible { outline: 0; border-radius: 8px; background: rgba(15, 76, 129, .12); }
.sf-account .sf-inv__pop .sf-date-btn { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; color: var(--sf-gray-900); font: 400 14px/20px var(--sf-font); text-align: start; }
.sf-account .sf-inv__pop .sf-date-btn.is-empty { color: #9CA3AF; }
.sf-account .sf-inv__pop .sf-date-btn:focus-visible { border-color: #B6D5EC; border-radius: 10px; background: #fff; box-shadow: 0 0 0 3px rgba(15, 76, 129, .15); }
.sf-cal { position: fixed; z-index: 50; width: 272px; max-width: calc(100vw - 16px); padding: 12px; border: 1px solid var(--sf-line); border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgba(15, 23, 43, .14); color: var(--sf-gray-900); font: 400 13px/20px var(--sf-font); text-align: center; }
.sf-cal > header { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-cal > header b { color: var(--sf-gray-900); font: 700 14px/20px var(--sf-font); }
.sf-cal > header > button.sf-cal__step { width: 30px; height: 30px; min-height: 0; padding: 0; border: 1px solid var(--sf-line); border-radius: 8px; background: #fff; color: var(--sf-gray-900); font: 600 18px/1 var(--sf-font); cursor: pointer; }
.sf-cal[dir="rtl"] > header > button.sf-cal__step { transform: scaleX(-1); }
.sf-cal > header > button.sf-cal__step { display: inline-grid; place-items: center; }
.sf-cal__step .sf-ico { width: 16px; height: 16px; }
.sf-cal .sf-cal__week, .sf-cal .sf-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sf-cal .sf-cal__week span { color: var(--sf-gray); font: 600 11px/24px var(--sf-font); }
.sf-cal .sf-cal__days > button[data-cal-day] { height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--sf-gray-900); font: 500 13px/32px var(--sf-font); cursor: pointer; }
.sf-cal .sf-cal__days > button[data-cal-day]:hover { background: var(--sf-gray-100); }
.sf-cal .sf-cal__days > button[data-cal-day].is-range { border-radius: 0; background: #EAF4FB; }
.sf-cal .sf-cal__days > button[data-cal-day].is-today { box-shadow: inset 0 0 0 1px var(--sf-panel-blue); }
.sf-cal .sf-cal__days > button[data-cal-day].is-chosen { border-radius: 8px; background: var(--sf-panel-blue); color: #fff; }
.sf-cal > footer { margin-top: 8px; padding-top: 8px; display: flex; justify-content: space-between; border-top: 1px solid var(--sf-line); }
.sf-cal > footer > button[type] { height: 28px; min-height: 0; padding: 0 8px; border: 0; background: none; color: var(--sf-panel-blue); font: 600 12px/28px var(--sf-font); cursor: pointer; }

.sf-orders__card { margin-top: 51px; padding: 34px 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(15, 76, 129, .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; }
/* One line, as the design draws every row: a long name ends in an ellipsis and keeps the whole in its title. */
.sf-order-service { display: inline-block; max-width: 200px; overflow: hidden; color: var(--sf-gray-900); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; 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; white-space: nowrap; 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: 5px; 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: 82px; 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: #0F4C81; background: #E8F3FB; box-shadow: 0 0 0 4px rgba(15, 76, 129, .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; }

/* ---- the service result, drawn from its tags (order-result.js) ---- */
.sf-od__result h3 .sf-od__lines { height: 30px; min-height: 0; margin-inline-start: auto; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sf-line); border-radius: 8px; background: #fff; color: #4B5563; font: 500 12px/18px var(--sf-font); cursor: pointer; }
.sf-od__result h3 .sf-od__lines:hover { border-color: var(--sf-panel-blue); color: var(--sf-panel-blue); }
.sf-od__result h3 .sf-od__lines .sf-ico { width: 14px; height: 14px; color: currentColor; }
.sf-od__box.sf-reply { max-height: 440px; align-items: flex-start; overflow: auto; cursor: pointer; }
.sf-od__box.sf-reply:hover { border-color: #CBD5E1; }
.sf-reply__body { flex: 1; min-width: 0; color: #374151; font: 400 14px/22px var(--sf-font); overflow-wrap: anywhere; text-align: start; }
.sf-reply__body.is-plain { font: 400 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; }
.sf-reply__body p, .sf-reply__body ul, .sf-reply__body ol, .sf-reply__body dl, .sf-reply__body pre, .sf-reply__body blockquote, .sf-reply__body table { margin: 0 0 6px; }
.sf-reply__body > :last-child { margin-bottom: 0; }
.sf-reply__body h1, .sf-reply__body h2, .sf-reply__body h3, .sf-reply__body h4, .sf-reply__body h5, .sf-reply__body h6 { margin: 8px 0 6px; color: var(--sf-gray-900); font: 700 15px/22px var(--sf-font); }
.sf-reply__body ul, .sf-reply__body ol { padding-inline-start: 20px; }
.sf-reply__body b, .sf-reply__body strong, .sf-reply__body th { color: var(--sf-gray-900); font-weight: 700; }
.sf-reply__body a { color: var(--sf-panel-blue); text-decoration: underline; }
.sf-reply__body img { max-width: 100%; height: auto; border-radius: 8px; vertical-align: middle; }
.sf-reply__body .sf-reply__pic { margin: 4px 0 8px; text-align: center; }
.sf-reply__body table { border-collapse: collapse; max-width: 100%; }
.sf-reply__body td, .sf-reply__body th { padding: 4px 10px; border: 1px solid #E5E7EB; text-align: start; vertical-align: top; }
.sf-reply__body th { background: #F3F4F6; }
.sf-reply__body hr { margin: 8px 0; border: 0; border-top: 1px solid #E5E7EB; }
.sf-reply__body pre, .sf-reply__body code { font: 400 13px/20px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-reply__body pre { white-space: pre-wrap; }
.sf-reply__body blockquote { padding-inline-start: 10px; border-inline-start: 3px solid #E5E7EB; color: #6B7280; }
.sf-reply__body mark { background: #FEF3C7; color: inherit; }

/* ---- the service result, line by line ---- */
.sf-result-modal { width: min(640px, 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: hidden; }
.sf-result-modal::backdrop { background: rgba(17, 24, 39, .5); }
.sf-result-modal__box { max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.sf-result-modal__box > header { padding: 20px 24px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #E5E7EB; }
.sf-result-modal__box > header h2 { margin: 0; font: 700 18px/28px var(--sf-font); }
.sf-result-modal__box > header p { margin: 4px 0 0; color: var(--sf-gray); font: 400 13px/20px var(--sf-font); overflow-wrap: anywhere; }
.sf-result-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-result-modal__x:hover { background: var(--sf-gray-100); color: var(--sf-gray-900); }
.sf-result-modal__x .sf-ico { width: 18px; height: 18px; }
.sf-result-lines { min-height: 0; flex: 1 1 auto; margin: 0; padding: 6px 24px; overflow: auto; list-style: none; }
.sf-result-lines > li { min-height: 44px; padding: 8px 0; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #F3F4F6; text-align: start; }
.sf-result-lines > li:last-child { border-bottom: 0; }
.sf-result-lines__k { min-width: 0; flex: 0 0 38%; color: var(--sf-gray); font: 500 13px/20px var(--sf-font); overflow-wrap: anywhere; }
.sf-result-lines__v { min-width: 0; flex: 1; color: var(--sf-gray-900); font: 500 14px/22px var(--sf-font); overflow-wrap: anywhere; white-space: pre-wrap; }
.sf-result-lines > li.is-head { padding-top: 14px; }
.sf-result-lines > li.is-head b { font: 700 14px/22px var(--sf-font); }
.sf-result-lines > li.sf-result-lines__img { align-items: center; flex-direction: column; gap: 8px; text-align: center; }
.sf-result-lines__img img { max-width: 100%; max-height: 320px; border: 1px solid #E5E7EB; border-radius: 10px; }
.sf-result-lines__acts { display: flex; justify-content: center; gap: 6px; }
.sf-result-modal__box > footer { padding: 14px 24px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #E5E7EB; }
.sf-result-modal__all { height: 44px; min-height: 0; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 12px; background: var(--sf-panel-blue); color: #fff; font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-result-modal__all:hover { background: #0B3D69; }
.sf-result-modal__all.is-copied { background: #00BC7D; }
.sf-result-modal__all .sf-ico { width: 16px; height: 16px; }
.sf-result-modal__close { 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-result-modal__close:hover { color: var(--sf-gray-900); }
@media (max-width: 560px) {
  .sf-result-modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .sf-result-modal__box { height: 100%; max-height: 100%; }
  .sf-result-modal__box > header, .sf-result-lines, .sf-result-modal__box > footer { padding-inline: 16px; }
  .sf-result-lines > li { flex-wrap: wrap; row-gap: 2px; }
  .sf-result-lines__k { flex-basis: 100%; }
}
.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 { gap: 0; }
.sf-od__info dl > div { min-width: 0; padding: 9px 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid #F3F4F6; }
.sf-od__info dl > div:last-child { border-bottom: 0; }
.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 dt { max-width: 9.5em; overflow-wrap: anywhere; }
.sf-od__info dd { min-width: 0; justify-content: flex-end; }
html[dir="rtl"] .sf-od__info dd { justify-content: flex-start; }
.sf-od__info dd .sf-od__val { min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: thin; }
.sf-od__info dd .sf-od__val.is-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
.sf-od__info dd .sf-od__val.is-wide { cursor: grab; user-select: none; }
.sf-od__info dd .sf-od__val.is-dragging { cursor: grabbing; }
.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: 20px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; }
.sf-od__extra #reviewBlock h3 { margin: 0 0 14px; color: var(--sf-gray-900); font: 700 15px/22px var(--sf-font); }
#reviewBlock #reviewForm { margin: 0; display: flex; flex-direction: column; gap: 14px; }
#reviewBlock .sf-review__field { margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; border: 0; color: #374151; font: 500 13px/20px var(--sf-font); }
#reviewBlock .sf-review__field > legend { margin: 0 0 8px; padding: 0; }
#reviewBlock textarea { width: 100%; min-height: 96px; margin: 0; padding: 10px 12px; display: block; box-sizing: border-box; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; color: var(--sf-gray-900); font: 400 14px/22px var(--sf-font); resize: vertical; outline: 0; }
#reviewBlock textarea:focus { border-color: #e8b84a; box-shadow: 0 0 0 3px rgba(232, 184, 74, .2); }
#reviewBlock .field-error { margin: 0; }
#reviewBlock .field-error[hidden] { display: none; }
#reviewBlock .sf-review__send { width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 18px; position: static; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--sf-panel-blue); box-shadow: none; color: #fff; font: 600 14px/20px var(--sf-font); transform: none; cursor: pointer; }
#reviewBlock .sf-review__send:hover { background: #0B3D69; }
#reviewBlock .sf-review__mine { margin: 0 0 8px; color: #374151; font: 400 14px/22px var(--sf-font); white-space: pre-wrap; overflow-wrap: anywhere; }
#reviewBlock .sf-review__state { margin: 0; color: var(--sf-gray); font: 400 12px/18px var(--sf-font); }
/* Stars in GSMWEB's premium gold (its "★ Premium" badge: #fff4cc -> #ffd97a, #e8b84a, #8a5a00). */
.sf-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sf-stars__star { position: relative; width: 30px; height: 30px; display: inline-grid; place-items: center; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(138, 90, 0, .28)); }
.sf-stars--read .sf-stars__star { width: 18px; height: 18px; cursor: default; }
.sf-stars__star > i { width: 100%; height: 100%; display: block; background: #E5E7EB; clip-path: polygon(50% 2%, 62% 36%, 98% 36%, 69% 58%, 80% 93%, 50% 72%, 20% 93%, 31% 58%, 2% 36%, 38% 36%); transition: transform .12s ease, background .12s ease; }
.sf-stars__star.is-on > i { background: linear-gradient(135deg, #fff4cc 0%, #ffd97a 48%, #e8b84a 100%); }
.sf-stars__star:hover > i { transform: scale(1.12); }
.sf-stars__star > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sf-stars__star:focus-within { outline: 2px solid #e8b84a; outline-offset: 1px; border-radius: 6px; }
.sf-stars__value { margin-inline-start: 6px; padding: 1px 9px; border: 1px solid #e8b84a; border-radius: 999px; background: linear-gradient(135deg, #fff4cc, #ffd97a); color: #8a5a00; font: 800 12px/18px var(--sf-font); white-space: nowrap; }

/* ---- 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; }
/* Frame 71/78 sets the statement's crumbs 10px higher and its title 16px lower
   than the other panes; the figures stay at 212. */
.sf-stmt.sf-lean { padding-top: 30px; }
.sf-stmt.sf-lean .sf-page-title { margin-top: 34px; }
.sf-stmt__stats { margin-top: 32px; 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; }
/* Frame 71's proportions inside the card's 886px (they added up to 888 and the last column was cut). */
.sf-stmt__table th:nth-child(1) { width: 108px; }
.sf-stmt__table th:nth-child(2) { width: 190px; }
.sf-stmt__table th:nth-child(3) { width: 104px; }
.sf-stmt__table th:nth-child(4) { width: 140px; }
.sf-stmt__table th:nth-child(5) { width: 196px; white-space: nowrap; }
.sf-stmt__table th:nth-child(6) { width: 136px; 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(15, 76, 129, .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(15, 76, 129, .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(15, 76, 129, .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: #0B3D69; }
.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(15, 76, 129, .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: #0B3D69; }
.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(15, 76, 129, .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 { width: auto; min-width: 96px; padding-inline: 10px 28px; background-position: right 8px center; }
/* The other list boxes of the shop - the support form's, a service's order form's, the deposit check's and the
   older settings view's - drawn as .sf-input's are (2026-10-28, the owner: every list box in the project): no
   browser arrow, the same chevron at the reading end, a darker line on hover and the ring while the list is open. */
html body :is(.sf-tk-field, .order-fields) select, html body .sf-svd-order .order-fields select, html body #depositChain,
html body .sf-account #settingsView:not(.sf-designed) select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 40px; cursor: pointer;
  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-size: 16px 16px; background-position: left 14px center;
}
html[dir="ltr"] body :is(.sf-tk-field, .order-fields) select, html[dir="ltr"] body .sf-svd-order .order-fields select, html[dir="ltr"] body #depositChain,
html[dir="ltr"] body .sf-account #settingsView:not(.sf-designed) select { background-position: right 14px center; }
select.sf-input:hover:not(:disabled), html body :is(.sf-tk-field, .order-fields) select:hover, html body #depositChain:hover { border-color: #9DB4CC; }
html body select:not([multiple])[aria-expanded="true"] { border-color: #0F4C81; box-shadow: 0 0 0 3px rgba(15, 76, 129, .22); }
/* The sort's select sits in a pill that rings itself (services.css). */
html body .sf-svl__select select[aria-expanded="true"] { box-shadow: none; }
.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(15, 76, 129, .3); }

/* Notifications and Security (frames 69, 70/77) draw a 16px knob; the API and
   Telegram designs keep the 20px one above. */
.sf-mail .sf-switch i::after, .sf-sec .sf-switch i::after { top: 4px; left: 4px; width: 16px; height: 16px; }

.sf-infobar { margin: 24px 0 0; min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-gray-100); color: var(--sf-gray); font: 400 12px/16px 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: #0B3D69; }
.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; }
/* The Save bar every pane ends with (account.js): greyed until something
   changes, then a note - and for Security and API access the password box. */
.sf-savebar { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; }
.sf-savebar__note { margin-inline-end: auto; color: #B45309; font: 500 13px/20px var(--sf-font); }
.sf-savebar__note[hidden], .sf-savebar__pass[hidden], .sf-api__confirm[hidden] { display: none; }
.sf-savebar .sf-savebar__pass, .sf-api__confirm .sf-input { width: 220px; max-width: 100%; height: 36px; font-size: 14px; }
.sf-account .sf-savebar .sf-save-button:disabled { opacity: .45; box-shadow: none; cursor: default; }
.sf-prof > .sf-savebar { margin-top: 0; }
.sf-api__confirm { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.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; }
/* A GSM GPT account (account.js): its code is sent from beside the box, and what
   GSM GPT owns is shown here, not edited, with the way to GSM GPT. */
.sf-account .sf-sendcode { color: var(--sf-panel-blue); font-weight: 600; white-space: nowrap; }
.sf-account .sf-sendcode:disabled { opacity: .5; cursor: default; }
.sf-managed { flex-wrap: wrap; }
.sf-managed span { flex: 1 1 220px; }
.sf-managed a { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--sf-panel-blue); font-weight: 600; white-space: nowrap; }
.sf-managed a .sf-ico { width: 14px; height: 14px; }
.sf-prof > .sf-managed { margin: 0; }
.sf-prof.is-managed .sf-input:disabled { background-color: var(--sf-gray-100); color: var(--sf-gray); opacity: 1; cursor: default; }
.sf-prof.is-managed select.sf-input:disabled { background-image: none; }

/* profile */
.sf-prof { margin-top: 47px; 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: 276px; 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: 19px; 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); }
/* The email cannot be changed: a lock in place of a link. */
.sf-input.is-locked .sf-ico { width: 16px; height: 16px; flex: none; color: var(--sf-gray); }
[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; }
/* The design draws the number group at the far (left) end of the card, under the email. */
[dir="rtl"] .sf-prof__mobile { margin-right: auto; }
/* The calling code takes the width it needs ("+1268" with its flag), the number the rest. */
.sf-tel { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; }
.sf-tel input { direction: ltr; }
.sf-prof__grid { margin-top: 26px; 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 24px 23px; 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: 46px; padding: 24px 24px 41px; 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; }
/* Frames 67 and 68 both leave 7px more between the third label and its box. */
.sf-pass > .sf-label:nth-of-type(3) > .sf-secret { margin-top: 7px; }
.sf-account .sf-pass .sf-wide-button { margin-top: 24px; }
.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: 14px; padding: 24px; display: flex; flex-direction: column; }
.sf-mail .sf-card-title { margin-top: 2px; }
.sf-mail__rows { margin-top: 20px; display: flex; flex-direction: column; }
.sf-mail__row { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sf-line); }
.sf-mail__row:first-child { min-height: 53px; padding-top: 0; }
.sf-mail__row > span { display: flex; flex-direction: column; }
.sf-mail__row b { color: var(--sf-gray-900); font: 500 14px/20px var(--sf-font); }
.sf-mail__row small { color: var(--sf-gray); font: 400 12px/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 */
/* Frames 69 and 70/77 centre the title in an 80px row, so it sits lower than
   on the other panes; the cards keep their place. */
.sf-account #customerDashboard.sf-lean:is([data-pane="security"], [data-pane="notifications"]) .sf-page-title { margin-top: 35px; }
/* Profile (frame 66) and password (67/68) each place their head lower too
   (owner, 2026-10-21: "apply what the new UI has"); the cards stay put. */
.sf-account #customerDashboard.sf-lean[data-pane="profile"] { padding-top: 50px; }
.sf-account #customerDashboard.sf-lean[data-pane="profile"] .sf-page-title { margin-top: 9px; }
.sf-account #customerDashboard.sf-lean[data-pane="password"] { padding-top: 42px; }
.sf-account #customerDashboard.sf-lean[data-pane="password"] .sf-page-title { margin-top: 33px; }
.sf-sec { margin-top: 45px; padding: 24px; display: flex; flex-direction: column; }
.sf-sec .sf-kicker, .sf-mail .sf-kicker { font-weight: 600; }
.sf-sec .sf-card-title, .sf-mail .sf-card-title { font-weight: 600; }
.sf-sec .sf-card-title { margin-top: 2px; }
.sf-sec__cards { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.sf-sec__card { min-height: 84px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; padding: 20px; 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-sec__card > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-sec__card b { color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-sec__card small { color: var(--sf-gray); font: 400 12px/20px var(--sf-font); }
.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; flex-wrap: wrap; 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: 28px; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-sec__head h3 { margin: 0; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-account .sf-sec .sf-danger { height: 32px; gap: 8px; border-color: #9F0712; border-radius: 12px; font: 500 12px/16px var(--sf-font); }
.sf-sec .sf-danger .sf-ico { width: 13px; height: 13px; }
/* The design turns the way-out arrow towards the reading end. */
.sf-sec [data-end-all] .sf-ico { transform: scaleX(-1); }
[dir="ltr"] .sf-sec [data-end-all] .sf-ico { transform: none; }
.sf-sessions { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
/* A session as frame 70/77 prints it: three lines beside the icon - the device
   (with "current" at the far end), the IP, then where and when. This session
   keeps its IP under the device and "where" under the badge; the others put
   the IP beside their end button and "where" under the device. */
.sf-session { min-height: 88px; 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, .06), 0 1px 2px rgba(0, 0, 0, .04); }
.sf-session__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--sf-gray-100); color: var(--sf-gray); }
.sf-session__icon .sf-ico { width: 18px; height: 18px; stroke-width: 1.5; }
.sf-session__who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sf-session__name { align-self: stretch; min-height: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sf-session__who b { min-width: 0; color: var(--sf-gray-900); font: 500 14px/20px var(--sf-font); overflow-wrap: anywhere; }
.sf-session__who small { color: var(--sf-gray); font: 400 12px/16px var(--sf-font); }
.sf-session__who .sf-session__ip { padding-top: 2px; }
.sf-session.is-current .sf-session__where,
.sf-session:not(.is-current) .sf-session__ip { align-self: flex-end; }
.sf-session .sf-status { height: 22px; gap: 4px; padding: 0 10px; font-weight: 500; }
.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 0 4px; overflow: hidden; }
/* Frame 58: 13px in from the account pill's far end, the name block tight
   (16px lines, 6px under the balance), 16px icons (2026-10-21). */
.sf-header.is-signed-in .sf-actions .account-menu { top: calc(100% + 19px); inset-inline-end: 13px; }
.sf-menu-who { padding: 14px 16px 6px; 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/16px var(--sf-font); unicode-bidi: plaintext; }
.sf-menu-who small { color: var(--sf-gray); font: 400 12px/16px var(--sf-font); }
.sf-menu-who small:empty { display: none; }
.sf-menu-who strong { color: #0F4C81; 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: 4px; }
.sf-header .account-menu > a:last-of-type { margin-bottom: 4px; }
.sf-header .account-menu .sf-ico { width: 16px; height: 16px; 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 footer every storefront page shares, and the pieces around it.       */
/* ======================================================================== */

/* ---- footer (2026-10-20 landing design) ---- */
/* One dark card with rounded corners, 1200 wide, on every storefront page. */
/* styles.css gives every <footer> a dark band, 67px of padding and right-aligned text. */
.sf-footer { width: min(1200px, calc(100% - 32px)); margin: 57px auto 40px; padding: 0; background: none; text-align: start; font-family: var(--sf-font); }
.sf-footer__card { position: relative; overflow: hidden; padding: 56px 56px 40px; border-radius: 40px; color: #fff; background: radial-gradient(ellipse 50% 60% at 92% 0%, rgba(30, 80, 150, .55), transparent 70%), linear-gradient(180deg, #061227 0%, #050F21 100%); box-shadow: 0 24px 60px rgba(6, 23, 46, .18); }
[dir="ltr"] .sf-footer__card { background: radial-gradient(ellipse 50% 60% at 8% 0%, rgba(30, 80, 150, .55), transparent 70%), linear-gradient(180deg, #061227 0%, #050F21 100%); }
.sf-footer__top { display: grid; grid-template-columns: minmax(0, 330px) repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
.sf-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.sf-footer__logo { display: block; width: 226px; max-width: 100%; }
.sf-footer__logo img { display: block; width: 100%; height: 52px; 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__about { margin: 24px 0 0; color: #AFC0D6; font: 400 14px/28px var(--sf-font); }
.sf-footer__contacts { margin: 22px 0 0; padding: 0; display: grid; gap: 16px; list-style: none; }
.sf-footer__contacts a, .sf-footer__line { display: inline-flex; align-items: center; gap: 12px; color: #fff; font: 500 15px/22px var(--sf-font); }
.sf-footer__contacts a:hover { color: #E9C88F; }
.sf-footer__contacts i { flex: none; display: grid; place-items: center; color: #AFC0D6; }
.sf-footer__contacts .sf-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-footer__col { min-width: 0; }
.sf-footer__col h2 { margin: 0 0 22px; color: #E9C88F; font: 700 16px/24px var(--sf-font); }
.sf-footer__col ul { margin: 0; padding: 0; display: grid; gap: 16px; list-style: none; }
.sf-footer__col li { display: flex; align-items: center; gap: 12px; }
.sf-footer__col li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #C2975C; }
.sf-footer__col a { color: #DCE4F0; font: 400 15px/22px var(--sf-font); }
.sf-footer__col a:hover { color: #fff; }
/* "Trust badges" as the design draws them (2026-10-23, the owner's picture): 76x78 white tiles, each seal
   (CMS -> Home Page -> Licences, as many as there are) WHOLE inside its tile (2026-10-28, the owner: the
   seals were cut - a "max-height: 100%" that resolved against nothing let a 106x120 seal draw 86px tall in
   a 78px tile). As many to a row as fit: two in the desktop column, four across a phone. */
.sf-footer__licences ul { display: grid; grid-template-columns: repeat(auto-fill, 76px); gap: 12px; }
.sf-footer__licences li { width: 76px; height: 78px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.sf-footer__licences li[hidden] { display: none; }
.sf-footer__licences li::before { display: none; }
.sf-footer__licences li a, .sf-footer__licences li span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box; }
.sf-footer__licences img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.sf-footer__pay { margin-top: 34px; max-width: 470px; display: grid; gap: 30px; }
.sf-footer__pay ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.sf-footer__pay li { width: 70px; height: 56px; display: grid; place-items: center; padding: 8px; border-radius: 12px; color: #fff; font: 700 12px/16px var(--sf-font); text-align: center; }
.sf-footer__coins li { background: #0E2A50; }
.sf-footer__gateways li { border: 1px solid rgba(255, 255, 255, .06); background: #0B1A30; }
.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__rule { position: relative; height: 64px; margin-top: 26px; display: grid; place-items: center; }
.sf-footer__rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #5C4E39; }
.sf-footer__rule i { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border: 4px solid #3A3530; border-radius: 50%; background: #06172E; color: #fff; box-shadow: 0 0 0 1px #6A5A45; }
.sf-footer__rule .sf-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-footer__copy { margin: 18px 0 0; color: #AFC0D6; font: 400 14px/22px var(--sf-font); }
/* The release after the copyright line; on a phone it has a line of its own. */
.sf-footer__version { display: inline-block; white-space: nowrap; }
.sf-footer__copy > span + .sf-footer__version::before { content: "·"; margin-inline: 10px; }

@media (max-width: 1100px) {
  .sf-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-footer__brand { grid-column: 1 / -1; }
}

/* A column heading is a button that folds its list on a phone; here it is the heading as drawn. */
.sf-footer__fold { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: default; }
.sf-footer__fold .sf-ico { display: none; }

/* A phone (design 108, 2026-10-26): edge to edge on the shop's navy, the contacts as chips, the two link
   columns folded behind 52px rows. */
@media (max-width: 760px) {
  .sf-footer { width: 100%; margin: 40px 0 0; }
  .sf-footer__card { padding: 32px 16px 24px; border-radius: 0; background: #06172E; }
  [dir="ltr"] .sf-footer__card { background: #06172E; }
  .sf-footer__top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sf-footer__col h2 { margin-bottom: 14px; }
  .sf-footer__about { font-size: 13.5px; line-height: 26px; }
  .sf-footer__contacts { display: flex; flex-wrap: wrap; gap: 8px; }
  .sf-footer__contacts a, .sf-footer__line { min-height: 40px; padding: 0 14px; border-radius: 12px; background: #0E2340; font: 400 14px/20px var(--sf-font); }
  .sf-footer__contacts i { display: none; }
  .sf-footer--folds .sf-footer__top { gap: 0; }
  .sf-footer--folds .sf-footer__brand { margin-bottom: 24px; }
  .sf-footer--folds .sf-footer__col:not(.sf-footer__licences) { border-top: 1px solid #16304F; }
  .sf-footer--folds .sf-footer__col:not(.sf-footer__licences):has(+ .sf-footer__licences), .sf-footer--folds .sf-footer__col:not(.sf-footer__licences):last-child { border-bottom: 1px solid #16304F; }
  .sf-footer--folds .sf-footer__col:not(.sf-footer__licences) h2 { margin: 0; color: #fff; }
  .sf-footer--folds .sf-footer__fold { width: 100%; min-height: 52px; justify-content: space-between; cursor: pointer; }
  .sf-footer--folds .sf-footer__fold .sf-ico { display: block; width: 18px; height: 18px; color: #fff; transition: transform .2s; }
  .sf-footer--folds .sf-footer__col.is-open .sf-footer__fold .sf-ico { transform: rotate(180deg); }
  .sf-footer--folds .sf-footer__col:not(.sf-footer__licences) ul { padding: 4px 0 18px; }
  .sf-footer--folds .sf-footer__col:not(.sf-footer__licences):not(.is-open) ul { display: none; }
  .sf-footer--folds .sf-footer__licences { margin-top: 24px; }
  .sf-footer__coins li, .sf-footer__gateways li { border: 1px solid #1C3557; background: #0E2340; }
  .sf-footer__version { display: block; margin-top: 2px; }
  .sf-footer__copy > span + .sf-footer__version::before { content: none; }
}


/* Every <select>'s list (select-menu.js): the browser's grey popup, drawn in the
   shop's design. Fixed to the window so no card clips it; a sheet on a narrow one. */
.sf-select-menu { position: fixed; z-index: 1300; max-width: calc(100vw - 16px); max-height: 340px; display: flex; flex-direction: column; overflow: hidden; padding: 6px; border: 1px solid #E3E8EF; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(6, 23, 46, .16); color: #06172E; font: 400 14px/22px var(--sf-font); text-align: start; }
.sf-select-menu.sf-flags { font-family: "Twemoji Country Flags", var(--sf-font); }
.sf-select-menu__search { height: 38px; margin: 2px 2px 6px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #D5DDE7; border-radius: 10px; background: #F8FAFC; cursor: text; }
.sf-select-menu__search:focus-within { border-color: #0F4C81; background: #fff; }
.sf-select-menu__search .sf-ico { width: 16px; height: 16px; flex: none; color: #5B6676; }
.sf-select-menu__search input { min-width: 0; flex: 1; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #06172E; font: 400 14px/22px var(--sf-font); }
.sf-select-menu__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-select-menu ul { min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.sf-select-menu li[role="option"] { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 9px; color: #2A3646; cursor: pointer; }
.sf-select-menu li[role="option"] > span { min-width: 0; overflow-wrap: anywhere; }
.sf-select-menu li[role="option"] .sf-ico { width: 16px; height: 16px; flex: none; visibility: hidden; color: #0F4C81; stroke-width: 2.4; }
.sf-select-menu li[role="option"].is-active { background: #F1F4F8; }
.sf-select-menu li[role="option"][aria-selected="true"] { background: #EAF3FB; color: #0F4C81; font-weight: 600; }
.sf-select-menu li[role="option"][aria-selected="true"].is-active { background: #DCEBF8; }
.sf-select-menu li[role="option"][aria-selected="true"] .sf-ico { visibility: visible; }
.sf-select-menu li[role="option"][aria-disabled="true"] { color: #A9B4C2; cursor: default; }
.sf-select-menu li[hidden] { display: none; }
.sf-select-menu__group { padding: 10px 12px 4px; color: #5B6676; font: 700 12px/18px var(--sf-font); }
.sf-select-menu__none { margin: 0; padding: 14px 12px; color: #5B6676; text-align: center; }
.sf-select-menu__none[hidden] { display: none; }
.sf-select-menu.is-sheet { inset: auto 0 0 0; width: auto; max-width: none; max-height: 72vh; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(6, 23, 46, .18); animation: sf-sheet-up .22s ease-out; }
.sf-select-menu.is-sheet::before { content: ""; width: 40px; height: 4px; margin: 0 auto 6px; flex: none; border-radius: 2px; background: #D5DDE7; }
.sf-select-menu.is-sheet li[role="option"] { min-height: 50px; padding-inline: 14px; font-size: 15px; }
/* 2026-10-28: the sheet's name and its close button; the dropdown fades in (a transform would move where it is measured). */
.sf-select-menu__head { min-height: 44px; margin: 0 2px 6px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 2px 8px; border-bottom: 1px solid #EEF1F5; }
.sf-select-menu__head b { min-width: 0; overflow: hidden; color: #06172E; font: 700 16px/24px var(--sf-font); white-space: nowrap; text-overflow: ellipsis; }
.sf-select-menu__close { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: #F1F4F9; color: #3D4757; cursor: pointer; }
.sf-select-menu__close .sf-ico { width: 18px; height: 18px; }
.sf-select-menu:not(.is-sheet) { animation: sf-menu-in .14s ease-out; }
@keyframes sf-menu-in { from { opacity: 0; } }
@keyframes sf-sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sf-select-menu, .sf-select-menu.is-sheet { animation: none; } }
html.sf-select-locked, html.sf-select-locked body { overflow: hidden; }
.sf-select-backdrop { position: fixed; inset: 0; z-index: 1299; background: rgba(6, 23, 46, .35); animation: sf-menu-in .2s ease-out; }
select[aria-expanded="true"] { border-color: #0F4C81; }

/* A language's flag, in every language menu. */
.sf-flag { width: 22px; height: 15px; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.language-menu button.has-flag, [data-payment-language].has-flag { grid-template-columns: 22px minmax(0, 1fr) 22px; column-gap: 10px; }

/* ---- the second-round account pages on narrower screens ---- */
@media (max-width: 980px) {
  .sf-fund { margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .sf-gsmgpt-wallet { margin-top: 32px; }
  .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: #0B3D69; }
.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(15, 76, 129, .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: #0B3D69; }
.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: #0F4C81; 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(15, 76, 129, .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: #0B3D69; }
.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: 27px; }
.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; }
/* The invoices frame sets the open tab in Medium and the other counts in grey. */
.sf-account .sf-inv__tabs button.is-active { font-weight: 500; }
.sf-inv__tabs button:not(.is-active) i { color: var(--sf-gray); }
.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(15, 76, 129, .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: #0F4C81; 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: #0F4C81; 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: #0F4C81; font: 400 13px/18px ui-monospace, "Cascadia Mono", Consolas, monospace; }
/* Both invoice frames draw this pill 90px wide, the word centred. */
.sf-inv-card__id .sf-pill-dot { min-width: 90px; margin-top: 4px; justify-content: center; }
.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: #0F4C81; }
.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: #0F4C81; 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; }
/* The whole command shows: a long address wraps inside the box instead of running out of the card. */
.sf-api__code pre { margin: 20px 24px; 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/20px ui-monospace, "Cascadia Mono", Consolas, monospace; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The DHRU Fusion card: what a Fusion panel or GSM Theme shop asks for. Shown as the
   design shows credentials (owner, 2026-10-21: "keep the DHRU structure, show it
   better"): each value under its label, in the box the API key sits in, with its copy button. */
.sf-api__dhru { padding: 24px; }
.sf-api__dhru > .sf-hint { margin: 8px 0 0; }
.sf-api__conn { margin: 0; display: block; }
.sf-api__conn > div { display: block; }
.sf-api__conn dt { margin: 20px 0 0; color: var(--sf-gray-900); font: 600 14px/20px var(--sf-font); }
.sf-api__conn dd { min-width: 0; min-height: 42px; margin: 4px 0 0; 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__conn dd > span { flex: 1; color: var(--sf-gray); font: 400 14px/20px var(--sf-font); }
.sf-api__conn 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-api__dhru > .sf-api__label { margin-top: 24px; }
.sf-api__actions { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-api__actions code { padding: 4px 10px; border: 1px solid var(--sf-line); border-radius: 8px; background: var(--sf-gray-100); color: var(--sf-gray-900); font: 400 13px/18px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-api__lang { margin: 18px 24px -12px; color: var(--sf-gray); font: 600 12px/16px var(--sf-font); 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); }
/* Unlike the invoice pills, both Telegram frames put the dot before the word. */
.sf-tg__bot .sf-pill-dot { position: absolute; top: 33px; inset-inline-end: 24px; flex-direction: row; }
.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: #0B3D69; }
.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; }
}

/* ------------------------------------------- sign-in dialog (2026-10, two) */
/* The two-column dialog of the design: the form on one side, the navy pitch on
   the other. Every rule is under .sf-auth because styles.css still styles
   .auth-form, .checkbox and .auth-submit for the old dialog, some of it with
   !important. */

.sf-auth { --sf-auth-navy: #0F4C81; width: min(896px, 100%); height: 677px; min-height: 540px; max-height: calc(100vh - 32px); display: flex; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); font-family: var(--sf-font); }
.sf-auth .sf-auth__close { position: absolute; top: 14px; right: auto; left: auto; inset-inline-end: 14px; z-index: 6; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #90A1B9; }
.sf-auth .sf-auth__close:hover { background: #F1F5F9; color: #0F172B; }
.sf-auth .sf-auth__close .sf-ico { width: 18px; height: 18px; }

/* the navy column */
.sf-auth .sf-auth__side { position: relative; width: 380px; flex: none; display: block; padding: 40px; overflow: hidden; background: #06172E; color: #fff; text-align: initial; }
.sf-auth .sf-auth__side::after { content: none; }
.sf-auth .sf-auth__logo { position: static; display: block; width: 157px; height: 36px; margin: 0 auto; object-fit: contain; filter: none; }
.sf-auth .sf-auth__pitch { position: absolute; top: 186.75px; left: 40px; z-index: 4; width: 300px; display: block; }
.sf-auth .sf-auth__copy { min-height: 176px; }
.sf-auth .sf-auth__pitch h3 { width: 225px; margin: 0 auto; padding-top: 20px; color: #fff; font: 900 30px/38px var(--sf-display); letter-spacing: 0; text-align: left; }
.sf-auth .sf-auth__pitch h3 span { display: inline; padding: 0; border: 0; color: inherit; font: inherit; }
.sf-auth .sf-auth__pitch p { width: 276px; max-width: none; margin: 0 0 0 auto; padding-top: 12px; color: rgba(179, 222, 248, .733); font: 400 14px/23px var(--sf-font); text-align: left; }
[dir="ltr"] .sf-auth .sf-auth__pitch p { margin: 0 auto 0 0; }
.sf-auth .sf-auth__pitch ul { height: 52px; margin: 0; padding: 0; display: flex; justify-content: center; gap: 8px; list-style: none; }
.sf-auth .sf-auth__pitch li { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(15, 76, 129, .333); color: #B3DEF8; font: 600 12px/16px var(--sf-font); white-space: nowrap; }
.sf-auth .sf-auth__pitch li span { padding: 0; border: 0; color: inherit; font: inherit; }
.sf-auth .sf-auth__pitch li svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sf-auth .sf-auth__ring { position: absolute; z-index: 1; width: 288px; height: 288px; display: block; border-radius: 50%; background: #0F4C81; opacity: .2; font-size: 0; }
.sf-auth .sf-auth__ring--a { top: 469px; left: 172px; }
.sf-auth .sf-auth__ring--b { top: 517px; left: 220px; width: 192px; height: 192px; background: #C2975C; opacity: .15; }
[dir="ltr"] .sf-auth .sf-auth__ring--a { left: auto; right: 172px; }
[dir="ltr"] .sf-auth .sf-auth__ring--b { left: auto; right: 220px; }
.sf-auth .sf-auth__stats { position: absolute; top: 566px; left: 40px; z-index: 5; width: 300px; height: 71px; margin: 0; padding-top: 25px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(15, 76, 129, .19); }
.sf-auth .sf-auth__stats div { width: 144px; display: flex; flex-direction: column; align-items: flex-start; }
.sf-auth .sf-auth__stats dd { margin: 0; color: #C2975C; font: 900 20px/28px var(--sf-display); direction: ltr; }
.sf-auth .sf-auth__stats dt { padding-top: 2px; color: rgba(179, 222, 248, .533); font: 400 12px/16px var(--sf-font); }

/* the form */
.sf-auth .sf-auth__main { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 48px 40px; overflow-y: auto; text-align: initial; }
/* Centred by auto margins, not justify-content: a reset step taller than the
   dialog would lose its top, and scrolling cannot reach what flex pushed up. */
.sf-auth .sf-auth__main > :first-child { margin-top: auto !important; }
.sf-auth .sf-auth__main > :last-child { margin-bottom: auto !important; }
.sf-auth .sf-auth__main > .kicker { margin: 0; padding-bottom: 8px; color: var(--sf-auth-navy); font: 700 14px/20px var(--sf-font) !important; text-align: start; text-transform: none; letter-spacing: 0; }
.sf-auth .sf-auth__main > h2 { margin: 0; padding: 0 0 6px; color: #0F172B; font: 900 30px/39px var(--sf-display); letter-spacing: 0; text-align: center; }
.sf-auth .sf-auth__main > #authDescription { min-height: 52px; margin: 0; display: flex; align-items: center; justify-content: center; color: #90A1B9; font: 400 14px/20px var(--sf-font) !important; text-align: center; }
.sf-auth form { display: block; }
.sf-auth form > label { display: flex !important; flex-direction: column; gap: 0; color: #45556C; font: 600 14px/20px var(--sf-font) !important; }
.sf-auth form > small + label { padding-top: 16px; }
.sf-auth form > label > span { padding-bottom: 6px; text-align: start; }
/* styles.css stars every required box; the design marks none. */
.sf-auth form > label > span:first-child::after { content: none; }
.sf-auth form input:not([type="checkbox"]) { width: 100%; height: 46px; margin: 0; padding: 12px 16px; border: 1px solid #E2E8F0; border-radius: 20px; background: #FAFBFD; color: #314158; font: 400 14px/20px var(--sf-font) !important; outline: 0; box-shadow: none; }
.sf-auth form input::placeholder { color: #CAD5E2; opacity: 1; }
.sf-auth form input:not([type="checkbox"]):focus,
.sf-auth form input:not([type="checkbox"]):not(:placeholder-shown) { border-color: #0F4C81; background: rgba(179, 222, 248, .25); box-shadow: none; }
.sf-auth form input[type="email"] { direction: ltr; text-align: right; }
[dir="ltr"] .sf-auth form input[type="email"] { text-align: left; }
.sf-auth .password-wrap { position: relative; }
.sf-auth .password-wrap input { padding-inline-end: 44px; }
.sf-auth .password-wrap button { position: absolute; top: 15px; right: auto; left: auto; inset-inline-end: 12px; width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: 0; background: none; transform: none; color: #90A1B9; cursor: pointer; }
.sf-auth .password-wrap button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-auth .field-error { margin: 6px 0 0; font: 400 12px/18px var(--sf-font); }
.sf-auth .auth-error { margin: 12px 0 0 !important; padding: 10px 12px; border-radius: 12px; font: 400 13px/20px var(--sf-font) !important; }
.sf-auth .auth-error .auth-address { direction: ltr; unicode-bidi: isolate; }
/* "Send the code again" under the activation box: a link in looks, a button in kind. */
.sf-auth .auth-resend { align-self: flex-start; margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--sf-auth-navy); font: 600 13px/20px var(--sf-font); text-decoration: underline; cursor: pointer; }
.sf-auth .auth-resend:disabled { color: #90A1B9; text-decoration: none; cursor: default; }
/* Iran mode: "forgot password" becomes "ask the admin" (nothing can be mailed). */
.sf-auth .sf-auth__iran { margin: 8px 0 0; color: #E11D48; font: 500 12px/19px var(--sf-font); text-align: start; unicode-bidi: plaintext; }
.sf-auth .sf-auth__iran a { color: #BE123C; font-weight: 700; text-decoration: underline; }
.sf-auth .sf-auth__iran a:hover { opacity: .75; }
/* Iran mode (2026-10-31, the owner: a badge, not the red halo): IRAN MODE on the logo's top right
   corner - on the logo, so the header keeps its size -, and a click opens the operator's sentence
   (site-header.js). */
.sf-brand-box { position: relative; flex: none; }
.sf-iran-badge { position: absolute; top: -9px; right: -10px; z-index: 1; height: 18px; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0 7px 0 6px; border: 0; border-radius: 999px; background: #E11D48; box-shadow: 0 0 0 2px #fff, 0 4px 10px -3px rgba(225, 29, 72, .55); color: #fff; font: 800 9.5px/18px var(--sf-latin); letter-spacing: .06em; white-space: nowrap; cursor: pointer; }
.sf-iran-badge::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: #fff; animation: sf-iran-dot 1.6s ease-in-out infinite; }
.sf-iran-badge:hover { background: #BE123C; }
.sf-iran-badge:focus-visible { outline: 2px solid #E11D48; outline-offset: 3px; }
@keyframes sf-iran-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sf-iran-dialog { width: min(380px, calc(100vw - 32px)); margin: auto; padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -18px rgba(6, 23, 46, .45); color: #0F1B2D; font-family: var(--sf-font); }
.sf-iran-dialog::backdrop { background: rgba(6, 23, 46, .45); backdrop-filter: blur(2px); }
.sf-iran-dialog__body { padding: 24px 22px 20px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.sf-iran-dialog__tag { height: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: #FFE4E8; color: #BE123C; font: 800 11px/24px var(--sf-latin); letter-spacing: .06em; }
.sf-iran-dialog__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E11D48; }
.sf-iran-dialog p { margin: 0; color: #314158; font: 500 15px/1.9 var(--sf-font); unicode-bidi: plaintext; }
.sf-iran-dialog button { min-width: 120px; height: 42px; margin-top: 4px; padding: 0 18px; border: 0; border-radius: 12px; background: #0F4C81; color: #fff; font: 700 14px/42px var(--sf-font); cursor: pointer; }
.sf-iran-dialog button:hover { background: #0B3D69; }
@media (prefers-reduced-motion: reduce) { .sf-iran-badge::before { animation: none; } }
@media (max-width: 760px) { .sf-iran-badge { top: -8px; right: -12px; height: 16px; padding: 0 6px 0 5px; font-size: 8.5px; line-height: 16px; } }
/* The two-minute clock on an emailed code; red once it has run out. */
.sf-auth .sf-auth__timer { margin: 10px 0 0; color: #45556C; font: 500 13px/20px var(--sf-font); }
.sf-auth .sf-auth__timer.is-expired { color: #C10007; }
.sf-auth .auth-error .auth-support { margin-inline-start: 4px; color: inherit; font-weight: 700; text-decoration: underline; }
/* The password rules under a box that chooses one (password-rules.js): grey
   until typed, then green when kept and red while missing. */
.sf-pass-rules { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; color: #62748E; font: 500 12px/18px var(--sf-font); text-align: start; }
.sf-pass-rules li { position: relative; padding-inline-start: 18px; }
.sf-pass-rules li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #CAD5E2; }
.sf-pass-rules li.is-ok { color: #008236; }
.sf-pass-rules li.is-ok::before { content: "✓"; inset-inline-start: 1px; top: 0; width: auto; height: auto; border-radius: 0; background: none; color: #00A63E; font-weight: 700; }
.sf-pass-rules li.is-missing { color: #C10007; }
.sf-pass-rules li.is-missing::before { background: #FB2C36; }
.sf-auth .sf-pass-rules { margin-top: 8px; }
/* The Password pane (2026-10-20 design) draws no list: it shows while the new
   password is being typed, and stays while what was typed still misses a rule. */
.sf-pass .sf-pass-rules { display: none; }
.sf-pass .sf-label:focus-within + .sf-pass-rules,
.sf-pass .sf-pass-rules:has(.is-missing) { display: grid; }
/* The security check: a widget, or the sum with its answer box and refresh. */
.sf-auth .sf-auth__captcha { margin: 14px 0 0; display: grid; gap: 8px; }
.sf-auth .sf-captcha__label { color: #45556C; font: 600 13px/20px var(--sf-font); text-align: start; }
.sf-auth .sf-captcha__math { display: flex; align-items: center; gap: 10px; direction: ltr; }
.sf-auth .sf-captcha__math img { width: 150px; height: 54px; flex: none; border: 1px solid #E2E8F0; border-radius: 12px; object-fit: cover; }
.sf-auth .sf-captcha__math b { color: #45556C; font: 700 20px/1 var(--sf-latin); }
.sf-auth .sf-captcha__math input { width: 0; min-width: 70px; flex: 1; height: 48px; padding: 0 12px; border: 1px solid #E2E8F0; border-radius: 14px; background: #F8FAFC; color: #0F172B; font: 600 18px/1 var(--sf-latin); text-align: center; }
.sf-auth .sf-captcha__refresh { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; color: var(--sf-auth-navy); cursor: pointer; }
.sf-auth .sf-captcha__refresh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-auth .sf-captcha__widget { min-height: 65px; }
/* The other ways in, under "or": GSM GPT Account, Google, Telegram. */
.sf-auth .sf-auth__social { margin: 0 0 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.sf-auth .sf-auth__provider { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid #E2E8F0; border-radius: 16px; background: #fff; color: #0F172B; font: 600 13px/20px var(--sf-font); text-decoration: none; cursor: pointer; }
.sf-auth .sf-auth__provider:hover { border-color: #CAD5E2; background: #F8FAFC; }
.sf-auth .sf-auth__provider svg { width: 20px; height: 20px; flex: none; }
.sf-auth .sf-auth__provider span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-auth .sf-auth__mono { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; background: #032747; color: #fff; font: 800 9px/1 var(--sf-latin); letter-spacing: -.02em; }

.sf-auth .form-options { min-height: 36px; padding-top: 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.sf-auth .checkbox { position: relative; display: flex !important; align-items: center; gap: 10px !important; color: var(--sf-auth-navy) !important; font: 600 14px/20px var(--sf-font) !important; cursor: pointer; }
.sf-auth .checkbox input { position: absolute; display: block; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sf-auth .checkbox > span { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 2px solid #CAD5E2; border-radius: 14px; background: #fff; color: transparent; }
.sf-auth .checkbox input:checked + span { border-color: var(--sf-auth-navy); background: var(--sf-auth-navy); color: #fff; }
.sf-auth .checkbox input:focus-visible + span { outline: 2px solid #0F4C81; outline-offset: 2px; }
.sf-auth .checkbox > span svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sf-auth .checkbox b { color: inherit; font: inherit; }
.sf-auth .checkbox.is-terms b { color: #90A1B9; font-weight: 400; }
.sf-auth .checkbox.is-terms b a, .sf-auth .checkbox.is-terms b span { color: var(--sf-auth-navy); font-weight: 600; }
.sf-auth .checkbox.is-terms b a:hover { text-decoration: underline; }
.sf-auth .form-options > button { padding: 0; border: 0; background: none; color: var(--sf-auth-navy); font: 600 13px/20px var(--sf-font) !important; cursor: pointer; }
.sf-auth .form-options > button:hover { text-decoration: underline; }

.sf-auth .auth-submit { width: 100%; height: 48px; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 20px; background: var(--sf-auth-navy); box-shadow: 0 8px 24px rgba(15, 76, 129, .333); color: #fff; font: 700 14px/20px var(--sf-font) !important; cursor: pointer; }
.sf-auth .auth-submit::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m15 18-6-6 6-6%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m15 18-6-6 6-6%27/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="ltr"] .sf-auth .auth-submit::after { transform: scaleX(-1); }
.sf-auth .auth-submit:hover { background: #0B3D69; }
.sf-auth .auth-submit:disabled, .sf-auth .auth-submit.is-busy { opacity: .7; cursor: progress; }

.sf-auth .divider { margin: 0; padding: 20px 0; display: flex; align-items: center; gap: 12px; color: #90A1B9; font: 400 12px/16px var(--sf-font); }
.sf-auth .divider span { height: 1px; flex: 1; background: #F1F5F9; }
.sf-auth .switch-auth { width: 100%; height: 52px; flex: none; padding: 0; border: 2px solid #E2E8F0; border-radius: 20px; background: #fff; color: #022C50; font: 600 14px/20px var(--sf-font) !important; cursor: pointer; }
.sf-auth .switch-auth:hover { border-color: #CAD5E2; background: #F8FAFC; color: #022C50; }

/* The rules above force display with !important (styles.css does too), so a
   step that hides a box has to win back. */
.sf-auth [hidden], .sf-auth form > label[hidden] { display: none !important; }

@media (max-width: 860px) {
  .sf-auth { width: min(516px, 100%); height: auto; min-height: 0; max-height: calc(100dvh - 24px); }
  .sf-auth .sf-auth__side { display: none; }
  .sf-auth .sf-auth__main { padding: 44px 24px 28px; }
  .sf-auth .sf-auth__main > h2 { font-size: 26px; line-height: 36px; }
}

/* Sign in with GSM-GPT WEB (gsmgpt-signin.js, 2026-10-17): the log-in step is
   one button. The form stays in the page for its error line; everything else
   in it steps aside. */
.sf-auth.is-gsmgpt #authForm > :not(#authError),
.sf-auth.is-gsmgpt .divider,
.sf-auth.is-gsmgpt #authSocial { display: none !important; }
.sf-auth .sf-gsmgpt { margin: 6px 0 16px; display: flex; flex-direction: column; gap: 14px; }
.sf-auth .sf-gsmgpt__go { height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid #DADCE0; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(15, 76, 129, .12); color: #1F2328; font: 700 15px/20px var(--sf-font); text-decoration: none; }
.sf-auth .sf-gsmgpt__go:hover { border-color: #C4C8CE; background: #F6F7F9; }
.sf-auth .sf-gsmgpt__go svg { width: 24px; height: 24px; flex: none; }
.sf-auth .sf-gsmgpt__go.is-busy { opacity: .72; }
.sf-auth .sf-gsmgpt__wait { order: 3; margin: 0; color: #45556C; font: 500 13px/20px var(--sf-font); text-align: center; }
.sf-auth .sf-gsmgpt__wait button { padding: 0; border: 0; background: none; color: var(--sf-auth-navy); font: 600 13px/20px var(--sf-font); text-decoration: underline; cursor: pointer; }
.sf-auth .sf-gsmgpt__lock { order: 4; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #008236; font: 500 12px/18px var(--sf-font); text-align: center; }
.sf-auth .sf-gsmgpt__lock svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-auth .sf-gsmgpt__new { order: 5; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px; border: 1px dashed #CAD5E2; border-radius: 16px; background: #F8FAFC; text-align: center; }
.sf-auth .sf-gsmgpt__new b { color: #0F172B; font: 700 14px/20px var(--sf-font); }
.sf-auth .sf-gsmgpt__new > span { color: #62748E; font: 400 13px/20px var(--sf-font); }
.sf-auth .sf-gsmgpt__make { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--sf-auth-navy); font: 700 14px/20px var(--sf-font); text-decoration: none; }
.sf-auth .sf-gsmgpt__make:hover { text-decoration: underline; }
.sf-auth .sf-gsmgpt__make svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-auth .sf-gsmgpt__new small { color: #90A1B9; font: 400 12px/16px var(--sf-latin); word-break: break-all; }
/* Sign-up turned off (gsmgpt-signin.js, 2026-10-18): "Create a new account"
   opens this popup over the log-in step. */
.modal-backdrop.sf-signoff-backdrop { z-index: 110; background: rgba(2, 12, 27, .5); }
.sf-signoff { --sf-auth-navy: #0F4C81; position: relative; width: min(420px, 100%); max-height: calc(100dvh - 24px); overflow: auto; padding: 40px 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 24px; background: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35); font-family: var(--sf-font); text-align: center; animation: sf-signoff-in .18s ease-out; }
@keyframes sf-signoff-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.sf-signoff__x { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #62748E; cursor: pointer; }
.sf-signoff__x:hover { background: #F1F5F9; color: #0F172B; }
.sf-signoff__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sf-signoff__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #FFF1E7; color: #F26B1D; }
.sf-signoff__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-signoff h2 { margin: 4px 0 0; color: #0F172B; font: 800 22px/32px var(--sf-display); }
.sf-signoff p { margin: 0 0 8px; color: #62748E; font: 400 14px/24px var(--sf-font); }
.sf-signoff__go { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 0; border-radius: 20px; background: var(--sf-auth-navy); box-shadow: 0 8px 24px rgba(15, 76, 129, .333); color: #fff; font: 700 15px/20px var(--sf-font); cursor: pointer; }
.sf-signoff__go:hover { background: #0B3D69; }
.sf-signoff__go svg { width: 24px; height: 24px; flex: none; }
.sf-signoff__make { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 2px solid #E2E8F0; border-radius: 20px; background: #fff; color: #022C50; font: 600 14px/20px var(--sf-font); text-decoration: none; }
.sf-signoff__make:hover { border-color: #CAD5E2; background: #F8FAFC; }
.sf-signoff__make.is-first { border: 0; background: var(--sf-auth-navy); box-shadow: 0 8px 24px rgba(15, 76, 129, .333); color: #fff; }
.sf-signoff__make.is-first:hover { background: #0B3D69; }
.sf-signoff__make svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-signoff small { margin-top: -6px; color: #90A1B9; font: 400 12px/16px var(--sf-latin); word-break: break-all; }
.sf-signoff__later { margin-top: 2px; padding: 6px 12px; border: 0; border-radius: 10px; background: none; color: #62748E; font: 600 13px/20px var(--sf-font); cursor: pointer; }
.sf-signoff__later:hover { background: #F1F5F9; color: #0F172B; }
@media (max-width: 640px) {
  .sf-signoff { padding: 36px 20px 18px; border-radius: 20px; }
  .sf-signoff h2 { font-size: 20px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-signoff { animation: none; }
}

/* Add balance while the GSM GPT credit pays (gsmgpt-checkout.js). */
/* Where the three steps of add balance would start (.sf-fund), not against the title. */
.sf-gsmgpt-wallet { margin-top: 82px; display: flex; align-items: flex-start; gap: 20px; padding: 28px; }
.sf-gsmgpt-wallet__mark svg { width: 48px; height: 48px; display: block; }
.sf-gsmgpt-wallet__body { min-width: 0; flex: 1; }
.sf-gsmgpt-wallet h2 { margin: 0 0 6px; color: #0F172B; font: 800 20px/28px var(--sf-display); }
.sf-gsmgpt-wallet p { margin: 0 0 14px; color: #62748E; font: 400 14px/22px var(--sf-font); }
.sf-gsmgpt-wallet dl { margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; }
.sf-gsmgpt-wallet dt { color: #62748E; font: 500 13px/20px var(--sf-font); }
.sf-gsmgpt-wallet dd { margin: 0; color: #0F4C81; font: 900 28px/36px var(--sf-display); }
.sf-gsmgpt-wallet p.sf-gsmgpt-wallet__stale { margin-top: -8px; color: #B45309; font-size: 12px; line-height: 18px; }
.sf-gsmgpt-wallet__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-gsmgpt-wallet__buy { height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 14px; background: #0F4C81; color: #fff; font: 700 14px/20px var(--sf-font); text-decoration: none; }
.sf-gsmgpt-wallet__buy:hover { background: #0B3D69; }
.sf-gsmgpt-wallet__refresh { height: 44px; padding: 0 16px; border: 1px solid #E2E8F0; border-radius: 14px; background: #fff; color: #0F172B; font: 600 14px/20px var(--sf-font); cursor: pointer; }
.sf-gsmgpt-wallet__refresh:disabled { opacity: .6; cursor: progress; }
@media (max-width: 640px) {
  .sf-gsmgpt-wallet { flex-direction: column; padding: 20px; }
}

/* ------------------------------------------------ magazine (2026-10, two) */
/* The article card, shared by the front page, /magazine and an article's
   "more to read". 392 × 344 in the design: a 200px cover, the category pill,
   the title and two lines of summary. */
.sf-mag-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(6, 23, 46, .06), 0 6px 18px rgba(6, 23, 46, .04); transition: transform .15s ease, box-shadow .15s ease; }
.sf-mag-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 23, 46, .08); }
.sf-mag-card__cover { height: 200px; flex: none; display: block; overflow: hidden; background: linear-gradient(135deg, #0B1E36 0%, #1A4D82 100%); }
.sf-mag-card__cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sf-mag-card__cover span { height: 100%; display: grid; place-items: center; color: rgba(255, 255, 255, .3); }
.sf-mag-card__cover svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sf-mag-card__body { min-height: 144px; padding: 23px 22px 16px; display: flex; flex-direction: column; align-items: flex-start; }
.sf-mag-card__tag { height: 20px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: #EEF3FB; color: #1A4D82; font: 600 11px/16px var(--sf-font); white-space: nowrap; }
a.sf-mag-card__tag:hover { background: #DCE8F7; }
.sf-mag-card h3 { width: 100%; margin: 11px 0 0; color: #06172E; font: 700 16px/24px var(--sf-font); text-align: start; }
.sf-mag-card h3 a { color: inherit; }
.sf-mag-card h3 a:hover { color: var(--sf-navy); }
.sf-mag-card p { width: 100%; margin: 6px 0 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #6B7F99; font: 400 13px/22px var(--sf-font); text-align: start; }

/* ---- "≈ ۳۵۹٬۰۰۰ تومان" under a credit price, for a Persian reader (TomanRate; 2026-10-23) ---- */
.sf-toman { margin-top: 2px; display: block; flex-basis: 100%; color: #6B7280; font: 400 12px/18px var(--sf-font); white-space: nowrap; direction: rtl; unicode-bidi: isolate; }
.sf-toman[hidden] { display: none; }
.sf-cart__line .sf-toman { margin-top: 0; text-align: end; }

/* --------------------------------- profile tab and phone bar (2026-10-24) */
/* The phone design (390 frame): a bar of three tabs at the foot of every page
   under 760px - home, the product groups, the profile tab - and /profile
   itself: a bar of its own with the title and language · currency (the strip,
   site-header.php's $appTitle), the account card, the wallet card and the
   footer's two lists, which is why the footer steps aside there. */
.sf-tabbar, .sf-topbar__title, .sf-topbar__cart { display: none; }

.sf-me { width: min(560px, calc(100% - 32px)); margin: 32px auto 56px; display: grid; gap: 13px; font-family: var(--sf-font); }
.sf-me * { box-sizing: border-box; }
.sf-me__title { margin: 0 0 3px; color: #06172E; font: 700 24px/34px var(--sf-display); }
.sf-me__card { padding: 23px 20px; display: grid; justify-items: center; border: 1px solid #DCE7F3; border-radius: 24px; background: linear-gradient(180deg, #fff 0%, #F5F9FD 100%); text-align: center; }
.sf-me__avatar { width: 72px; height: 72px; margin-bottom: 12px; display: grid; place-items: center; border: 1px solid #B3DEF8; border-radius: 50%; background: #EEF5FC; color: #0F4C81; }
.sf-me__avatar .sf-ico { width: 30px; height: 30px; stroke-width: 1.6; }
.sf-me__card h2 { max-width: 100%; margin: 0; overflow-wrap: anywhere; color: #06172E; font: 700 20px/28px var(--sf-display); }
.sf-me__card p { margin: 6px 0 0; color: #4A5F78; font: 400 13px/24px var(--sf-font); text-wrap: balance; }
.sf-me__card .sf-me__email { margin-top: 2px; font: 400 14px/22px var(--sf-latin); }
.sf-me__card .sf-me__balance { display: flex; align-items: center; gap: 8px; }
.sf-me__balance b { color: #06172E; font: 700 16px/24px var(--sf-latin); }
.sf-me__button { width: 100%; height: 50px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #0F4C81; border-radius: 16px; background: #0F4C81; color: #fff; font: 700 16px/24px var(--sf-font); text-decoration: none; cursor: pointer; }
.sf-me__button:hover { background: #0B3D69; }
.sf-me__button .sf-ico { width: 20px; height: 20px; }
.sf-me__more { width: 100%; margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-me__ghost { min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #DCE7F3; border-radius: 14px; background: #fff; color: #0F4C81; font: 600 14px/20px var(--sf-font); text-decoration: none; cursor: pointer; }
.sf-me__ghost:hover { border-color: #0F4C81; }
.sf-me__ghost .sf-ico { width: 18px; height: 18px; }

/* The front page's third quick card, as it is drawn there (dark in both themes). */
.sf-me__wallet { min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 14px; padding-inline-end: 20px; border-radius: 20px; background: linear-gradient(to left, #06172E 0%, #0B2D55 55%, #0F4C81 100%); color: #fff; text-decoration: none; transition: transform .15s, box-shadow .15s; }
[dir="ltr"] .sf-me__wallet { background: linear-gradient(to right, #06172E 0%, #0B2D55 55%, #0F4C81 100%); }
.sf-me__wallet:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 23, 46, .18); }
.sf-me__wallet-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #06172E; color: #E2C08A; }
.sf-me__wallet-icon .sf-ico { width: 22px; height: 22px; }
.sf-me__wallet-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sf-me__wallet-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.sf-me__wallet-text b { font: 700 16px/24px var(--sf-font); }
.sf-me__wallet-text small { color: #C9D7E8; font: 400 14px/22px var(--sf-font); }
.sf-me__wallet > .sf-ico { width: 20px; height: 20px; color: #B3DEF8; }

/* The footer's two lists: a gold dot, the name, a chevron the way the page reads. */
.sf-me__group { display: grid; gap: 6px; }
.sf-me__head { margin: 5px 0 0; padding-inline: 1px; color: #06172E; font: 700 17px/26px var(--sf-display); }
.sf-me__list { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid #E5E7EB; border-radius: 20px; background: #fff; }
.sf-me__list li + li { border-top: 1px solid #E5E7EB; }
.sf-me__list a { min-height: 51px; display: flex; align-items: center; gap: 10px; padding-inline: 16px 14px; color: #06172E; font: 400 16px/24px var(--sf-font); text-decoration: none; }
.sf-me__list a::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #C2975C; }
.sf-me__list a:hover { background: #F5F8FC; }
.sf-me__list span { min-width: 0; flex: 1; }
.sf-me__list .sf-ico { width: 18px; height: 18px; color: #7F99B2; }
[dir="ltr"] .sf-me__go { transform: scaleX(-1); }

/* Light / dark / auto (2026-10-28; partials/theme-switch.php): three equal buttons in a track, the chosen one
   raised - in the profile tab as a card, in the menu under the links. The menu's own button rules (styles.css:
   a full row, a line under it; storefront.css: its colours) are out-weighed by the track's class. */
.sf-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid #E5E7EB; border-radius: 14px; background: #F1F4F9; font-family: var(--sf-font); }
.sf-themes button,
.sf-header .sf-mobile-menu .sf-themes button { min-width: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: #4A5F78; font: 600 14px/20px var(--sf-font); text-align: center; cursor: pointer; }
.sf-themes button:hover,
.sf-header .sf-mobile-menu .sf-themes button:hover { background: rgba(6, 23, 46, .05); color: #06172E; }
.sf-themes button[aria-checked="true"],
.sf-header .sf-mobile-menu .sf-themes button[aria-checked="true"] { background: #fff; color: #0F4C81; box-shadow: 0 1px 3px rgba(6, 23, 46, .14); }
.sf-themes .sf-ico { width: 18px; height: 18px; flex: none; }
.sf-themes span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-themes:focus-within { outline: 0; }
.sf-themes button:focus-visible { outline: 2px solid #0F4C81; outline-offset: 1px; }
.sf-themes--card { padding: 5px; border-radius: 20px; background: #fff; }
.sf-themes--card button[aria-checked="true"] { background: #0F4C81; color: #fff; box-shadow: none; }
.sf-mobile-menu__theme { display: grid; gap: 8px; padding: 14px 4px 4px; }
.sf-mobile-menu__theme > span { color: #6B7F99; font: 600 13px/18px var(--sf-font); }

@media (max-width: 760px) {
  /* The bar: 63px over the safe area, the current tab's mark in a navy pill. */
  .sf-tabbar { position: fixed; inset: auto 0 0; z-index: 59; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #E5E7EB; background: #fff; font-family: var(--sf-font); }
  .sf-tabbar::before { content: ""; position: absolute; inset: auto 0 100%; height: 62px; background: linear-gradient(to bottom, rgba(6, 23, 46, 0), rgba(6, 23, 46, .05)); pointer-events: none; }
  .sf-tabbar__item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #6B7F99; text-decoration: none; }
  .sf-tabbar__item i { width: 60px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 15px; }
  .sf-tabbar__item .sf-ico { width: 22px; height: 22px; stroke-width: 1.8; }
  .sf-tabbar__item span { max-width: 100%; overflow: hidden; font: 500 13px/18px var(--sf-font); white-space: nowrap; text-overflow: ellipsis; }
  .sf-tabbar__item.is-active { color: #06172E; }
  .sf-tabbar__item.is-active i { border-color: #0F4C81; background: #0F4C81; color: #fff; }
  .sf-tabbar__item.is-active span { font-weight: 700; }
  body:has(.sf-tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.sf-tabbar) .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* The profile tab's own bar: the strip, taller, with the title at the start, language · currency
     and a globe at the end; the header bar and the footer step aside. */
  .sf-topbar.sf-topbar--app:has(+ .sf-header) { display: block; }
  .sf-topbar--app { position: sticky; top: 0; border-bottom: 1px solid #E5E7EB; background: #fff; color: #06172E; }
  .sf-topbar--app .sf-topbar__inner { min-height: 63px; }
  .sf-topbar--app .sf-topbar__title { display: block; min-width: 0; overflow: hidden; color: #06172E; font: 700 22px/30px var(--sf-display); white-space: nowrap; text-overflow: ellipsis; }
  .sf-topbar--app .sf-topbar__note, .sf-topbar--app .sf-topbar__contact, .sf-topbar--app .sf-pref--theme, .sf-topbar--app .sf-pref__globe { display: none; }
  .sf-topbar--app .sf-topbar__end { width: auto; }
  .sf-topbar--app .sf-pref { height: 32px; color: #06172E; font: 600 14px/20px var(--sf-font); }
  .sf-topbar--app .sf-pref:hover { background: rgba(6, 23, 46, .06); }
  .sf-topbar--app .sf-pref__dot { color: #06172E; font: 600 14px/20px var(--sf-font); }
  .sf-topbar--app .sf-prefs__menus::after { content: ""; order: 9; width: 18px; height: 18px; margin-inline-start: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18'/%3E%3C/svg%3E") center / contain no-repeat; }
  .sf-header.has-app-bar, .sf-me-page .sf-footer { display: none; }
  /* The categories tab's bar (design 110): a blue-to-gold mark before the title, the cart in place of
     the switches, and no line under it - the page's search continues it. */
  .sf-topbar--shop { border-bottom: 0; }
  .sf-topbar--shop .sf-topbar__inner { min-height: 68px; }
  .sf-topbar--shop .sf-topbar__title { display: flex; align-items: center; gap: 10px; }
  .sf-topbar--shop .sf-topbar__title::before { content: ""; width: 4px; height: 20px; flex: none; border-radius: 2px; background: linear-gradient(180deg, #58A1D3, #C2975C); }
  .sf-topbar--shop .sf-prefs { display: none; }
  .sf-topbar--shop .sf-topbar__cart { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #F1F4F9; color: #06172E; }
  .sf-topbar--shop .sf-topbar__cart .sf-ico { width: 22px; height: 22px; }
  .sf-topbar--shop .sf-cart-badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: #C2975C; color: #fff; font: normal 700 10px/16px var(--sf-font); }
  .sf-topbar--shop .sf-cart-badge[hidden] { display: none; }
  .sf-me { margin: 16px auto 24px; }
  .sf-me__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The signed-in bar on a phone (design 108): the avatar with the balance beside it; language · currency
   are in the profile tab's bar now. */
@media (max-width: 640px) {
  .sf-header.is-signed-in .sf-prefs { display: none; }
  .sf-header.is-signed-in .sf-account__button { height: 44px; flex-direction: row-reverse; gap: 8px; padding: 5px 4px; border: 0; border-radius: 12px; background: transparent; }
  .sf-header.is-signed-in .sf-account__button:hover { background: #F3F4F6; }
  .sf-header.is-signed-in .sf-avatar { width: 34px; height: 34px; border-radius: 10px; background: #06172E; font: normal 700 12px/19px var(--sf-font); }
  .sf-header.is-signed-in .sf-account__text { display: flex; }
  .sf-header.is-signed-in .sf-account__text b { display: none; }
  .sf-header.is-signed-in .sf-account__text small { color: #5B6676; font: 400 12px/19px var(--sf-font); }
}

@media print {
  .sf-tabbar { display: none !important; }
}

/* ----------------------------- the cards styles.css still drew (2026-10-26) */
/* The Telegram announcement, the "You're signed in" card and the payment
   instructions were the old orange-on-white cards of styles.css, which no dark
   copy ever reached: white in dark, with the title in the dark sheet's light
   ink. Each is drawn here in the shop's own navy and gold, by its backdrop's
   id so the older rules lose, and the dark sheet turns them with the rest. */
#noticeBackdrop .notice-modal, #successBackdrop .success-modal, #fundingNoticeBackdrop .shop-order-modal { border: 1px solid #E5E9F0; background: #fff; color: #06172E; font-family: var(--sf-font); box-shadow: 0 30px 80px rgba(6, 23, 46, .28); }
#noticeBackdrop .modal-close, #successBackdrop .modal-close, #fundingNoticeBackdrop .modal-close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #F1F4F9; color: #5B6676; font: 400 22px/1 var(--sf-font); cursor: pointer; }
#noticeBackdrop .modal-close:hover, #successBackdrop .modal-close:hover, #fundingNoticeBackdrop .modal-close:hover { background: #E7ECF4; color: #06172E; }

#noticeBackdrop .notice-modal { width: min(460px, 100%); padding: 40px 32px 26px; border-radius: 24px; text-align: center; }
#noticeBackdrop .notice-modal > i { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: #0F4C81; color: #fff; }
#noticeBackdrop .notice-modal .kicker { margin: 0 0 6px; color: #A0763A; font: 700 13px/20px var(--sf-font); letter-spacing: 0; text-transform: none; }
#noticeBackdrop .notice-modal h2 { margin: 0 0 10px; color: #06172E; font: 800 22px/1.5 var(--sf-display); letter-spacing: 0; }
#noticeBackdrop .notice-modal > p:not(.kicker) { max-width: 380px; margin: 0 auto 22px; color: #5B6676; font: 400 14px/1.9 var(--sf-font); }
#noticeBackdrop .notice-modal > a { height: 48px; border-radius: 14px; background: #0F4C81; color: #fff; font: 700 14px/20px var(--sf-font); }
#noticeBackdrop .notice-modal > a:hover { background: #0B3D69; }
#noticeBackdrop .notice-modal > button:last-child { margin-top: 12px; padding: 6px 12px; color: #5B6676; font: 500 13px/20px var(--sf-font); cursor: pointer; }
#noticeBackdrop .notice-modal > button:last-child:hover { color: #06172E; }

#successBackdrop .success-modal { border-radius: 24px; }
#successBackdrop .success-visual { border-color: #E5E9F0; background: linear-gradient(145deg, #F5F9FD, #EAF3FB); }
#successBackdrop .success-visual::after { background: rgba(15, 76, 129, .06); }
#successBackdrop .success-orbit { background: rgba(15, 76, 129, .14); }
#successBackdrop .success-card { background: #fff; box-shadow: 0 25px 65px rgba(6, 23, 46, .14); }
#successBackdrop .success-card > span { background: #EAF3FB; color: #0F4C81; }
#successBackdrop .success-card > i { background: #EEF1F5; }
#successBackdrop .success-card > b { background: linear-gradient(90deg, #0F4C81, #58A1D3); }
#successBackdrop .success-shield { background: #0F4C81; color: #fff; }
#successBackdrop .success-mail { background: #fff; color: #0F4C81; }
#successBackdrop .success-mail small { background: #C2975C; color: #fff; }
#successBackdrop .success-check { background: #1F9D6B; color: #fff; box-shadow: 0 0 0 14px rgba(31, 157, 107, .12); }
#successBackdrop .success-copy h2 { color: #06172E; font: 800 24px/1.5 var(--sf-display); }
#successBackdrop .success-copy > p { color: #5B6676; font: 400 14px/22px var(--sf-font); }
#successBackdrop .success-copy > button { border-radius: 14px; background: #0F4C81; color: #fff; font: 700 14px/20px var(--sf-font); }
#successBackdrop .success-copy > button:hover { background: #0B3D69; }
#successBackdrop .success-copy > small { color: #5B6676; font: 400 12px/18px var(--sf-font); }
#successBackdrop .success-copy > small b { color: #06172E; }

#fundingNoticeBackdrop .shop-order-modal { border-radius: 20px; }
#fundingNoticeBackdrop .shop-order-head p { color: #A0763A; font: 700 11px/16px var(--sf-font); letter-spacing: .06em; }
#fundingNoticeBackdrop .shop-order-head h2 { color: #06172E; font: 800 20px/1.5 var(--sf-display); letter-spacing: 0; }
#fundingNoticeBackdrop .detail-facts, #fundingNoticeBackdrop .detail-facts > div { border-color: #E5E9F0; }
#fundingNoticeBackdrop .detail-facts small { color: #5B6676; font: 600 11px/16px var(--sf-font); letter-spacing: 0; }
#fundingNoticeBackdrop .detail-facts b { color: #06172E; }
#fundingNoticeBackdrop .detail-facts > div:nth-child(2) b { color: #0F4C81; }
#fundingNoticeBackdrop #fundingNoticeBody p { color: #2A3646; }
#fundingNoticeBackdrop #fundingNoticeBody > small { color: #5B6676; }
/* The QR stays on white in both themes: a phone's camera reads it that way. */
#fundingNoticeBackdrop .funding-qr img { border-color: #E5E9F0; background: #fff; }
#fundingNoticeBackdrop .funding-qr figcaption { color: #5B6676; }

/* ---- A picture still on its way (1.4.6, picture-loading.js) ----------------------------------
   The owner: "a picture that arrives late should show a small animation, as Facebook does." A soft
   light moves across the picture's place until it arrives, then the picture fades in. Still, not
   moving, for a reader who asked for less motion. */
img.sf-img-loading { background-color: rgba(148, 163, 184, .16); background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 70%); background-size: 250% 100%; background-repeat: no-repeat; animation: sf-img-shimmer 1.3s linear infinite; }
img.sf-img-arrived { animation: sf-img-in .35s ease-out; }
@keyframes sf-img-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes sf-img-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  img.sf-img-loading, img.sf-img-arrived { animation: none; }
}