/* Generated by scripts/sync-ui-components.mjs from assets/ui-contract.mjs. */
@layer flygram-layout, flygram-components;
@layer flygram-components {
@font-face { font-family:"FlyGram Plex"; src:url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Regular.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"FlyGram Plex"; src:url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Medium.ttf") format("truetype"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"FlyGram Plex"; src:url("/assets/fonts/ibm-plex-sans/IBMPlexSans-SemiBold.ttf") format("truetype"); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:"FlyGram Plex Desktop Bold"; src:url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Bold.ttf") format("truetype"); font-style:normal; font-weight:700; font-display:swap; }
:root { --ui-weight-bold: 700; --ui-font-family-bold: "FlyGram Plex Desktop Bold", var(--ui-font-family); }
:root { --ui-font-family: "FlyGram Plex", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ui-weight-regular: 400; --ui-weight-emphasis: 600; --ui-link-hover: #a6c8ff; --ui-site-background: var(--desktop-carbon-layer); --ui-site-header-background: var(--desktop-carbon-background); --ui-site-header-border: var(--desktop-carbon-border-subtle); --ui-disabled-bg: var(--desktop-control-bg); --ui-danger-hover: color-mix(in srgb, var(--desktop-danger-text), white 8%); --ui-font-11: 11px; --ui-font-12: 12px; --ui-font-13: 13px; --ui-font-14: 14px; --ui-font-15: 15px; --ui-font-16: 16px; --ui-font-17: 17px; --ui-font-18: 18px; --ui-font-19: 19px; --ui-font-20: 20px; --ui-font-22: 22px; --ui-font-24: 24px; --ui-font-26: 26px; --ui-font-28: 28px; --ui-font-30: 30px; --ui-font-32: 32px; --ui-font-34: 34px; --ui-font-36: 36px; --ui-font-38: 38px; --ui-font-40: 40px; --ui-font-42: 42px; --ui-font-44: 44px; --ui-font-48: 48px; --ui-font-52: 52px; --ui-font-56: 56px; --ui-font-58: 58px; --ui-font-60: 60px; --ui-font-64: 64px; --ui-font-66: 66px; --ui-font-72: 72px; }
:root[data-site-theme="light"] { --ui-link-hover: #0043ce; --ui-site-background: var(--desktop-carbon-background); --ui-site-header-background: var(--desktop-carbon-layer); --ui-disabled-bg: var(--desktop-surface); }
:root { --ui-weight-medium: 500; --ui-radius-control: 8px; --ui-radius-panel: 12px; --ui-radius-pill: 999px; --ui-motion-feedback: 100ms; --ui-motion-disclosure: 160ms; --ui-shell-background: var(--desktop-group-bg); }
body { font-family: var(--ui-font-family); }
[data-ui] { font-family: var(--ui-font-family); font-size: var(--ui-action-font, var(--ui-font-14)); line-height: 20px; font-weight: var(--ui-weight-regular); letter-spacing: normal; cursor: pointer; transition: color var(--ui-motion-feedback) ease, background-color var(--ui-motion-feedback) ease, border-color var(--ui-motion-feedback) ease, opacity var(--ui-motion-disclosure) ease, transform var(--ui-motion-disclosure) ease; text-decoration: none; }
[data-ui]:is([data-ui="primary"],[data-ui="tertiary"],[data-ui="danger"]) { border-radius: var(--ui-radius-control); text-align: center; font-weight: var(--ui-weight-medium); }
[data-ui]:is([data-ui="primary"],[data-ui="tertiary"],[data-ui="danger"])[data-ui-size="large"] { border-radius: var(--ui-radius-panel); }
[data-ui-context="auth"] { --ui-action-font: 16px; }
[data-ui][data-ui-font="body"] { --ui-action-font: var(--ui-font-16); }
[data-ui][data-ui-font="control"] { --ui-action-font: var(--ui-font-14); }
[data-ui][data-ui-font="caption"] { --ui-action-font: var(--ui-font-12); }
[data-ui][data-ui="primary"] { color: #fff; background: var(--desktop-status-info); border: 1px solid var(--desktop-status-info); }
[data-ui][data-ui="primary"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-primary-hover); }
[data-ui][data-ui="primary"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-primary-pressed); }
[data-ui][data-ui="tertiary"] { color: var(--desktop-text-primary); background: var(--desktop-button-bg); border: 1px solid var(--desktop-control-border); }
[data-ui][data-ui="tertiary"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-button-hover); }
[data-ui][data-ui="tertiary"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-button-pressed); }
[data-ui][data-ui="text"] { color: var(--desktop-text-secondary); background: transparent; border: 0; }
[data-ui][data-ui="text"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-header-action-hover-text); }
[data-ui][data-ui="text"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-status-info); }
[data-ui][data-ui="link"] { color: var(--desktop-status-link); background: transparent; border: 0; }
[data-ui][data-ui="link"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--ui-link-hover); text-decoration: underline; }
[data-ui][data-ui="link"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-status-info); }
[data-ui][data-ui="icon"] { color: var(--desktop-text-secondary); background: transparent; border: 0; }
[data-ui][data-ui="icon"]:not([data-ui-chrome="avatar"]):hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-header-action-hover-text); background: var(--desktop-row-hover); }
[data-ui][data-ui="icon"]:not([data-ui-chrome="avatar"]):active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-header-action-hover-text); background: var(--desktop-row-pressed); }
[data-ui][data-ui="row"] { color: var(--desktop-text-primary); background: transparent; border: 0; }
[data-ui][data-ui="row"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-row-hover); }
[data-ui][data-ui="row"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-row-pressed); }
[data-ui][data-ui="navigation"] { color: var(--desktop-text-secondary); background: transparent; border: 0; }
[data-ui][data-ui="navigation"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-text-primary); background: var(--desktop-row-hover); }
[data-ui][data-ui="navigation"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-text-primary); background: var(--desktop-row-pressed); }
[data-ui][data-ui="function"] { color: var(--desktop-button-text); background: transparent; border: 0; }
[data-ui][data-ui="danger"] { color: #fff; background: var(--desktop-danger-text); border: 1px solid var(--desktop-danger-text); }
[data-ui][data-ui="danger"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--ui-danger-hover); border-color: var(--ui-danger-hover); }
[data-ui][data-ui="danger"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-carbon-danger-button-active); }
[data-ui][data-ui="danger-text"] { color: var(--desktop-danger-text); background: transparent; border: 0; }
[data-ui][data-ui="danger-text"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--ui-danger-hover); text-decoration: underline; }
[data-ui][data-ui="danger-text"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--desktop-carbon-danger); }
[data-ui][data-ui="field"] { color: var(--desktop-carbon-text-primary); background: var(--desktop-carbon-field); border: 0; border-bottom: 1px solid var(--desktop-carbon-border-strong); }
[data-ui][data-ui="field"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-carbon-field-hover); }
[data-ui][data-ui="field"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-carbon-field-hover); }
[data-ui][data-ui="option"] { color: var(--desktop-carbon-text-primary); background: var(--desktop-carbon-layer); border: 0; }
[data-ui][data-ui="option"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-carbon-layer-hover); }
[data-ui][data-ui="option"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { background: var(--desktop-carbon-layer-active); }
[data-ui][data-ui-size="small"] { min-height: 32px; }
[data-ui][data-ui-size="medium"] { min-height: 40px; }
[data-ui][data-ui-size="large"] { min-height: 48px; }
[data-ui][data-ui-size="auth"] { min-height: 36px; }
[data-ui][data-ui-geometry="productive"] { padding: 0 20px; text-align: center; justify-self: start; }
[data-ui]:focus-visible { outline: 2px solid var(--desktop-carbon-focus); outline-offset: 2px; }
#portal-topup h2.settings-section-title[tabindex="-1"]:focus { outline: none; }
:where(input[type="checkbox"], input[type="radio"], select):focus-visible { outline: 2px solid var(--desktop-carbon-focus); outline-offset: 2px; box-shadow: none; }
[data-ui-input] { outline: none; box-shadow: none; font-family: var(--ui-font-family); }
.desktop-app { --ui-input-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.desktop-app [data-ui-input] { font-family: var(--ui-input-font-family); font-size: var(--ui-font-14); font-weight: 400; font-style: normal; letter-spacing: normal; }
.desktop-app [data-ui-input]::placeholder { font-family: inherit; font-size: inherit; font-weight: 400; font-style: normal; letter-spacing: inherit; line-height: inherit; opacity: 1; }
[data-ui-input]:focus { outline: none; box-shadow: none; }
[data-ui-input="standalone"]:focus:not(:where(.desktop-app *)) { border-color: var(--desktop-carbon-focus); }
[data-ui-input="time"]:focus:not(:where(.desktop-app *)) { border-color: var(--desktop-carbon-focus); }
[data-demo-interval] input[aria-invalid="true"] { border-color: var(--desktop-danger-text); }
.app-time-error { margin: 8px 0 0; color: var(--desktop-danger-text); font-size: 12px; line-height: 16px; }
.app-time-error[data-notice="true"] { color: var(--desktop-text-secondary); }
[data-ui-input="auth"]:focus:not(:where(.desktop-app *)) { border-color: var(--line); }
[data-ui-input="inline"] { width: 100%; min-width: 0; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--desktop-text-primary); font-size: var(--ui-font-14); font-weight: var(--ui-weight-regular); line-height: 20px; text-align: end; }
[data-ui-input="inline"]::placeholder { color: var(--desktop-text-secondary); opacity: 1; font-weight: var(--ui-weight-regular); text-transform: none; }
[data-ui-input="inline"]:disabled { color: var(--desktop-text-disabled); }
.app-message-editor:focus-within:not(:where(.desktop-app *)) { border-color: var(--desktop-carbon-focus); outline: none; box-shadow: none; }
.app-switch-row:focus-within .app-switch-track { outline: 2px solid var(--desktop-carbon-focus); outline-offset: 2px; }
[data-ui]:is([data-ui="field"],[data-ui="option"]):focus-visible { outline-offset: -2px; }
[data-ui]:is(:disabled,[aria-disabled="true"]):not([data-ui-state="explain"]) { cursor: not-allowed; color: var(--desktop-text-disabled); border-color: var(--desktop-divider); }
[data-ui]:is([data-ui="primary"],[data-ui="tertiary"],[data-ui="danger"]):is(:disabled,[aria-disabled="true"]) { background: var(--ui-disabled-bg); }
[data-ui][data-ui-chrome="segment"] { border-inline-end: 1px solid var(--desktop-group-border); }
.header-language [data-ui][data-ui="text"]:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--language-hover); }
[data-ui][data-ui-chrome="divided"] { border-bottom: 1px solid var(--desktop-divider); }
[data-ui][data-ui-chrome="divided"]:last-child { border-bottom: 0; }
[data-ui][data-ui-chrome="account"] { border-inline-end: 3px solid var(--desktop-row-selected-indicator); }
[data-ui][data-ui-chrome="menu"] { border-radius: var(--ui-radius-control); }
[data-ui][data-ui="icon"][data-ui-chrome="avatar"]:is(:hover, :active) { background: transparent; }
[data-ui][data-ui="icon"][data-ui-chrome="avatar"] [data-ui-avatar] { background: var(--desktop-button-bg); color: var(--desktop-button-text); transition: background-color var(--ui-motion-feedback) ease, color var(--ui-motion-feedback) ease; }
[data-ui][data-ui="icon"][data-ui-chrome="avatar"]:hover:not(:disabled):not([aria-disabled="true"]) [data-ui-avatar] { background: var(--desktop-button-hover); }
[data-ui][data-ui="icon"][data-ui-chrome="avatar"]:active:not(:disabled):not([aria-disabled="true"]) [data-ui-avatar] { background: var(--desktop-button-pressed); }
[data-ui][data-ui="icon"][data-ui-chrome="avatar"]:is(:disabled, [aria-disabled="true"]) [data-ui-avatar] { color: var(--desktop-text-disabled); }
[data-ui][data-ui="field"]:disabled { color: var(--desktop-carbon-disabled-text); border-color: var(--desktop-carbon-border-subtle); }
[data-ui][data-ui="row"]:is(.active,[aria-current="page"],[aria-current="true"]) { background: var(--desktop-row-selected); }
[data-ui][data-ui="option"][aria-selected="true"]:not(:hover):not(:active) { background: var(--desktop-carbon-selected); }
[data-ui][data-ui="navigation"] { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; min-height: 48px; padding: 10px 16px; border-radius: var(--ui-radius-panel); text-align: start; font-weight: var(--ui-weight-medium); }
[data-ui][data-ui="navigation"] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-ui][data-ui="navigation"] [data-ui-label] { min-width: 0; overflow-wrap: anywhere; }
[data-ui][data-ui="navigation"][aria-current="page"] { color: var(--desktop-text-primary); background: var(--desktop-row-selected); }
[data-ui][data-ui="navigation"][aria-current="page"] svg { color: var(--desktop-status-info); }
[data-ui][data-ui="navigation"]:focus-visible { outline-offset: -2px; }
[data-ui][data-ui="navigation"][hidden] { display: none; }
[data-ui-history] { overflow: auto; border: 1px solid var(--desktop-group-border); border-radius: 0; background: var(--desktop-surface); }
[data-ui-history] table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--ui-font-14); line-height: 20px; color: var(--desktop-text-primary); }
[data-ui-history] table[hidden] { display: none; }
[data-ui-history] :is(th, td) { height: 40px; padding: 0 16px; white-space: nowrap; text-align: start; border-bottom: 1px solid var(--desktop-divider); font-weight: var(--ui-weight-regular); }
[data-ui-history] th { font-weight: var(--ui-weight-emphasis); background: var(--desktop-carbon-layer-hover); }
[data-ui-history] tbody tr:last-child td { border-bottom: 0; }
[data-ui-history] tbody tr:hover { background: var(--desktop-carbon-layer-hover); }
[data-ui-history] .history-amount { text-align: end; font-variant-numeric: tabular-nums; }
[data-ui][data-ui="function"]::before { background: var(--desktop-button-bg); }
[data-ui][data-ui="function"]:hover:not(:disabled)::before { background: var(--desktop-button-hover); }
[data-ui][data-ui="function"]:active:not(:disabled)::before { background: var(--desktop-button-pressed); }
[data-ui][data-ui="function"]:disabled::before { opacity: .45; }
[data-ui][data-ui-tone="carbon"] { background: var(--desktop-carbon-brand); color: var(--desktop-carbon-text-on-color); border-color: var(--desktop-carbon-brand); }
[data-ui][data-ui-tone="carbon"]:hover:not(:disabled) { background: var(--desktop-carbon-primary-button-hover); }
[data-ui][data-ui-tone="carbon"]:active:not(:disabled) { background: var(--desktop-carbon-brand-active); }
[data-ui][data-ui-tone="carbon"]:disabled { background: var(--desktop-carbon-disabled-background); color: var(--desktop-carbon-disabled-text); border-color: transparent; }
@media (max-width:600px) { [data-ui][data-ui-size="auth"] { min-height: 40px; }
}
@media (max-width:600px) { [data-ui][data-ui="navigation"] { min-height: 48px; }
}
@media (prefers-reduced-motion:reduce) { :root { --ui-motion-feedback: 0ms; --ui-motion-disclosure: 0ms; }
[data-ui] { transition: none; }
}
.desktop-app { --ui-workspace-background: #1c1b1f; --ui-workspace-avatar: #27262b; --ui-workspace-search: var(--desktop-control-bg); }
html[data-app-theme="light"] .desktop-app { --ui-workspace-background: var(--desktop-carbon-layer); --ui-workspace-avatar: #ffffff; --ui-workspace-search: var(--desktop-surface); }
.desktop-app[data-view="home"] { --bg: var(--ui-workspace-background); }
.desktop-app[data-view="home"] [data-ui="function"] { font-weight: var(--ui-weight-medium); }
.desktop-app [data-ui="icon"][data-ui-chrome="workspace"] { position: relative; color: var(--workspace-icon-color, var(--desktop-text-secondary)); background: transparent; opacity: 1; border-radius: 50%; }
.desktop-app [data-ui="icon"][data-ui-chrome="workspace"]:hover:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])), .desktop-app [data-ui="icon"][data-ui-chrome="workspace"]:active:not(:disabled):not([aria-disabled="true"]:not([data-ui-state="explain"])) { color: var(--workspace-icon-color, var(--desktop-text-primary)); background: transparent; }
.desktop-app [data-ui="icon"][data-ui-chrome="workspace"]:is([aria-current="page"],[aria-pressed="true"]) { --workspace-icon-color: var(--desktop-status-info); color: var(--desktop-status-info); }
.desktop-app [data-ui="icon"][data-ui-chrome="workspace"]:focus-visible { outline: none; }
.desktop-app [data-ui="icon"][data-ui-chrome="workspace"]:focus-visible::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--desktop-carbon-focus); }
.desktop-app [data-ui="row"][data-ui-chrome="workspace-account"], .desktop-app [data-ui="row"][data-ui-chrome="workspace-account"]:hover, .desktop-app [data-ui="row"][data-ui-chrome="workspace-account"]:active { background: transparent; }
.desktop-app [data-pane="mailing"] [data-ui-input="time"]::placeholder { color: inherit; opacity: 1; }
.desktop-app [data-pane="mailing"] .app-mail-scroll:focus-visible { outline: 2px solid var(--desktop-carbon-focus); outline-offset: -2px; }
.desktop-app[data-view="mailing"] { --ui-mailing-hover: #0f000000; }
.desktop-app[data-view="mailing"] #app-back { font-weight: var(--ui-weight-medium); }
.desktop-app [data-pane="mailing"] .app-picker-footer [data-ui] { --ui-action-font: var(--ui-font-12); line-height: 16px; }
.desktop-app [data-pane="mailing"] .app-target-selection input::after { content: none; }
.desktop-app [data-pane="mailing"] .app-target-selection .app-icon { display: none; color: var(--desktop-background); }
.desktop-app [data-pane="mailing"] .app-target-selection input:checked { background: var(--desktop-accent); border-color: var(--desktop-accent); }
.desktop-app [data-pane="mailing"] .app-target-selection input:checked + .app-icon { display: block; }
.desktop-app [data-pane="mailing"] [data-ui-target]:hover { background: var(--ui-mailing-hover); }
.desktop-app [data-pane="mailing"] [data-ui-target]:has(input:focus-visible) { outline: 2px solid var(--desktop-carbon-focus); outline-offset: -2px; }
.desktop-app [data-pane="mailing"] [data-ui-target] input:focus-visible { outline: none; }
.desktop-app [data-pane="mailing"] textarea::placeholder { color: var(--desktop-text-secondary); }
.desktop-app [data-pane="mailing"] .app-time-unit, .desktop-app [data-pane="mailing"] .app-colon, .desktop-app [data-pane="mailing"] .app-clock-row > span:first-child:not(.app-time-inputs) { font-family: var(--ui-input-font-family); font-size: var(--ui-font-14); font-weight: 400; }
.desktop-app [data-pane="mailing"] textarea:focus::placeholder { color: transparent; }
.desktop-app[data-view="mailing"] #app-mail-actions [data-ui="icon"] { opacity: 1; color: var(--desktop-text-primary); }
.desktop-app[data-view="mailing"] #app-mail-actions [data-ui="icon"]:is(:disabled,[data-demo-gate]) { color: var(--desktop-text-secondary); opacity: 1; }
.desktop-app[data-view="mailing"] #app-mail-actions [data-ui="icon"][aria-pressed="true"] { color: var(--desktop-status-info); }
.desktop-app[data-view="mailing"] #app-mail-actions [data-ui="icon"] .app-icon { fill: currentColor; stroke: none; }
.desktop-app[data-view="mailing"] #app-mail-actions [data-ui="icon"]:hover:not(:disabled):not([data-demo-gate]) { background: var(--ui-mailing-hover); }
.desktop-app[data-view="mailing"] #app-mail-actions [data-ui="icon"]:active:not(:disabled):not([data-demo-gate]) { background: var(--desktop-overlay); }
}