:root { --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif; --theme-canvas: #f6f7f9; --theme-surface: #fff; --theme-surface-subtle: #fbfcfd; --theme-surface-soft: #f6f8fb; --theme-surface-muted: #f4f6f8; --theme-surface-control: #f7f8fb; --theme-surface-raised: #f8fafb; --theme-surface-selected: #f2f6ff; --theme-surface-hover: #f7faf9; --theme-surface-blue: #eff6ff; --theme-surface-green: #edf7f5; --theme-surface-green-soft: #f0fbf7; --theme-surface-orange: #fff7ed; --theme-surface-orange-soft: #fff8ed; --theme-surface-yellow: #fffbeb; --theme-surface-red: #fff2f2; --theme-surface-purple: #f5f3ff; --theme-text: #15171a; --theme-text-strong: #111827; --theme-text-strong-alt: #172033; --theme-text-secondary: #303a45; --theme-text-muted: #68717d; --theme-text-soft: #566171; --theme-text-tertiary: #4c5662; --theme-border: #dfe5eb; --theme-border-subtle: #dde3ea; --theme-border-soft: #edf0f3; --theme-border-control: #d7dfe7; --theme-border-raised: #e8edf2; --theme-border-blue: #dbeafe; --theme-border-green: #c9e8d8; --theme-border-orange: #fed7aa; --theme-border-red: #fecdd3; --theme-border-purple: #ded4fb; --theme-blue-text: #0b72b9; --theme-green-text: #0f766e; --theme-green-strong: #10704f; --theme-red-text: #a83b3b; --theme-orange-text: #9a5b13; --theme-indigo-text: #3156a3; --theme-deep-indigo-text: #273a9f; --theme-blue-strong: #2563eb; --theme-blue-deep: #1d4ed8; --theme-orange-strong: #c2410c; --theme-orange-medium: #b45309; --theme-red-strong: #b91c1c; --theme-purple-text: #6366f1; --theme-pink-text: #9f1239; --theme-on-accent: #fff; --theme-overlay: rgba(21, 23, 26, 0.46); --glass-surface: rgba(255, 255, 255, 0.72); --glass-surface-strong: rgba(255, 255, 255, 0.88); --glass-surface-muted: rgba(244, 247, 250, 0.76); --glass-border: rgba(116, 137, 158, 0.22); --glass-highlight: rgba(255, 255, 255, 0.72); --glass-shadow: 0 12px 34px rgba(31, 45, 61, 0.09); --glass-shadow-soft: 0 5px 18px rgba(31, 45, 61, 0.065); --glass-blur: blur(24px) saturate(1.42); --glass-action-blue: linear-gradient(180deg, rgba(32, 166, 255, 0.98), rgba(0, 122, 255, 0.96)); --glass-action-blue-border: rgba(0, 101, 221, 0.32); --glass-action-blue-shadow: 0 9px 22px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(0, 74, 172, 0.2); --glass-action-clear: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 249, 0.58)); --glass-action-clear-shadow: 0 7px 20px rgba(31, 45, 61, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(116, 137, 158, 0.1); --radius-card: 16px; --radius-control: 12px; --control-hit-size: 44px; } html[data-theme="dark"] { --theme-canvas: #0b0f14; --theme-surface: #111820; --theme-surface-subtle: #151d26; --theme-surface-soft: #18212b; --theme-surface-muted: #1b2530; --theme-surface-control: #1a232d; --theme-surface-raised: #17202a; --theme-surface-selected: #17283a; --theme-surface-hover: #17251f; --theme-surface-blue: #132338; --theme-surface-green: #102720; --theme-surface-green-soft: #122b23; --theme-surface-orange: #2b2117; --theme-surface-orange-soft: #2a2118; --theme-surface-yellow: #292516; --theme-surface-red: #2d191b; --theme-surface-purple: #241d39; --theme-text: #eef3f7; --theme-text-strong: #f8fafc; --theme-text-strong-alt: #edf2f7; --theme-text-secondary: #c7d0d9; --theme-text-muted: #a7b2be; --theme-text-soft: #aeb9c5; --theme-text-tertiary: #bac4ce; --theme-border: #34414e; --theme-border-subtle: #303d49; --theme-border-soft: #25313c; --theme-border-control: #3a4754; --theme-border-raised: #2d3945; --theme-border-blue: #28527d; --theme-border-green: #285846; --theme-border-orange: #75461d; --theme-border-red: #71313a; --theme-border-purple: #4d3c78; --theme-blue-text: #67c1f5; --theme-green-text: #5eead4; --theme-green-strong: #6ee7b7; --theme-red-text: #fca5a5; --theme-orange-text: #facc8a; --theme-indigo-text: #9db9ff; --theme-deep-indigo-text: #a5b4fc; --theme-blue-strong: #93c5fd; --theme-blue-deep: #bfdbfe; --theme-orange-strong: #fdba74; --theme-orange-medium: #fcd38d; --theme-red-strong: #fca5a5; --theme-purple-text: #c4b5fd; --theme-pink-text: #f9a8d4; --theme-overlay: rgba(0, 0, 0, 0.62); --glass-surface: rgba(19, 27, 36, 0.74); --glass-surface-strong: rgba(20, 29, 38, 0.9); --glass-surface-muted: rgba(27, 37, 48, 0.76); --glass-border: rgba(169, 189, 207, 0.18); --glass-highlight: rgba(255, 255, 255, 0.08); --glass-shadow: 0 14px 38px rgba(0, 0, 0, 0.28); --glass-shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.22); --glass-action-blue: linear-gradient(180deg, rgba(40, 166, 255, 0.96), rgba(0, 114, 236, 0.94)); --glass-action-blue-border: rgba(120, 203, 255, 0.28); --glass-action-blue-shadow: 0 10px 24px rgba(0, 103, 218, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 31, 72, 0.3); --glass-action-clear: linear-gradient(180deg, rgba(45, 58, 72, 0.78), rgba(24, 34, 45, 0.62)); --glass-action-clear-shadow: 0 8px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18); } * { box-sizing: border-box; } .visually-hidden { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } html { background: var(--theme-surface); color-scheme: light dark; overflow-x: hidden; overscroll-behavior-x: none; } body { margin: 0; min-height: 100vh; background: var(--theme-canvas); color: var(--theme-text); font-family: var(--font-ui); } body.company-banking-dashboard-page { background: var(--theme-surface); overflow-x: hidden; overscroll-behavior-x: none; } body.company-banking-launch-page { background: var(--theme-surface); height: 100dvh; overflow: hidden; overscroll-behavior: none; } body.company-banking-login-page { -webkit-touch-callout: none; -webkit-user-select: none; background: var(--theme-surface); height: 100dvh; max-height: 100dvh; min-height: 100dvh; overflow: hidden; overflow: clip; overscroll-behavior: none; touch-action: manipulation; user-select: none; width: 100%; } .launch-shell { align-items: center; background: var(--theme-surface); display: grid; height: 100dvh; justify-items: center; overflow: hidden; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); position: relative; } .launch-content { --launch-accent: #1ab6ee; --launch-accent-dark: #0b7ed0; align-items: center; display: grid; justify-items: center; position: relative; transform: translateY(-18px); width: min(100%, 480px); z-index: 1; } .launch-shell.is-logo-pending .launch-content, .startup-overlay.is-logo-pending .launch-content { opacity: 0; transform: translateY(-10px) scale(0.992); } .launch-shell.is-logo-ready .launch-content, .startup-overlay.is-logo-ready .launch-content { opacity: 1; transform: translateY(-18px) scale(1); transition: opacity 0.24s ease, transform 0.24s ease; } .launch-logo-frame { aspect-ratio: 1057 / 121; display: block; line-height: 0; max-height: 80px; max-width: 100%; position: relative; width: min(88vw, 460px); } .launch-logo-mark { display: block; height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; } .launch-logo-mark-dark { display: none; } .launch-title { -webkit-font-smoothing: antialiased; color: var(--theme-text-secondary); font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 27px 0 0; max-width: 100%; text-align: center; white-space: nowrap; } .launch-subtitle { -webkit-font-smoothing: antialiased; color: var(--theme-text-muted); font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.28; margin: 12px 0 0; max-width: 100%; text-align: center; white-space: nowrap; } .launch-dots { align-items: center; display: flex; gap: 12px; justify-content: center; margin-top: 28px; min-height: 10px; } .launch-dot { animation: company-banking-launch-dot 1.35s ease-in-out infinite; background: var(--launch-accent); border-radius: 999px; display: block; height: 9px; opacity: 0.28; width: 9px; } .launch-dot:nth-child(2) { animation-delay: 0.18s; } .launch-dot:nth-child(3) { animation-delay: 0.36s; } .startup-overlay { align-items: center; background: var(--theme-surface); display: grid; inset: 0; justify-items: center; overflow: hidden; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); position: fixed; z-index: 9999; } .startup-overlay[hidden] { display: none; } .startup-overlay.is-hiding { opacity: 0; pointer-events: none; transition: opacity 0.24s ease; } .shell { margin: 0 auto; min-height: 100vh; padding: 0 14px 28px; position: relative; transform: translate3d(var(--drawer-shell-translate-x, 0px), 0, 0); transition: transform 0.2s ease; width: min(100%, 720px); will-change: transform; z-index: 1; } body.company-banking-dashboard-page .shell { background: var(--theme-canvas); } .login-shell { display: grid; align-items: center; min-height: 100vh; padding: 20px 14px; } .company-banking-login-page .login-shell { align-items: center; height: 100dvh; justify-items: center; max-height: 100dvh; max-width: 100%; min-height: 0; overflow: hidden; padding: calc(26px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); width: 100%; } .login-panel, .panel, .metric, .transaction-group, .companies-summary, .vat-panel, .vat-companies-summary, .vat-period-list { background: var(--theme-surface); border: 1px solid var(--theme-border-subtle); border-radius: 9px; box-shadow: 0 8px 18px rgba(22, 28, 35, 0.045); } .login-panel { width: min(100%, 420px); margin: 0 auto; padding: 22px; } .company-banking-login-page .login-panel { background: transparent; border: 0; box-shadow: none; justify-self: center; max-width: 100%; min-width: 0; padding: 0; text-align: center; width: min(100%, 326px); } .login-brand { display: grid; justify-items: center; margin: 0 auto 24px; } .login-logo { display: block; height: 90px; margin: 0 auto 17px; object-fit: contain; pointer-events: none; user-select: none; width: 90px; } .company-banking-login-page .login-logo { -webkit-user-drag: none; height: 90px; margin: 0 auto 17px; max-width: 100%; width: 90px; } .company-banking-login-page .login-panel.is-loading { display: grid; justify-items: center; padding: 28px 22px; } .company-banking-login-page .login-panel.is-loading .login-logo { margin: 0 0 22px; } .pull-refresh-indicator { --pull-refresh-content-height: 30px; align-items: center; box-sizing: border-box; color: var(--theme-text-muted); display: flex; font-size: 12px; font-weight: 750; gap: 8px; height: 0; justify-content: center; opacity: 0; overflow: hidden; padding-top: 0; transform: translateY(-8px); transition: height 0.16s ease, opacity 0.16s ease, padding-top 0.16s ease, transform 0.16s ease; } .pull-refresh-indicator.is-visible { height: calc(env(safe-area-inset-top) + 6px + var(--pull-refresh-content-height)); opacity: 1; padding-top: calc(env(safe-area-inset-top) + 6px); transform: translateY(0); } .pull-refresh-indicator.is-visible + .topbar { padding-top: 4px; } .pull-refresh-indicator.is-ready { color: var(--theme-green-text); } .pull-refresh-spinner { border: 2px solid rgba(15, 118, 110, 0.18); border-radius: 999px; border-top-color: #168a55; display: block; height: 15px; width: 15px; } .pull-refresh-indicator.is-refreshing .pull-refresh-spinner { animation: company-banking-spin 0.75s linear infinite; } body.drawer-open, body.company-sheet-open, body.notification-sheet-open, body.release-popup-open { overflow: hidden; } .drawer-overlay{background:rgba(21,23,26,.44);clip-path:inset(0 0 0 var(--drawer-overlay-left,0px));inset:0;opacity:var(--drawer-overlay-opacity,0);pointer-events:none;position:fixed;transition:opacity .18s ease,visibility 0s linear .18s;visibility:hidden;z-index:70} body.drawer-open .drawer-overlay{--drawer-overlay-left:min(82vw,320px);opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible} .app-drawer { background: var(--theme-surface); border-right: 1px solid var(--theme-border); bottom: 0; box-shadow: 18px 0 42px rgba(22, 28, 35, var(--drawer-shadow-alpha, 0)); display: flex; flex-direction: column; height: auto; left: 0; max-width: 320px; min-height: 0; overflow: hidden; overscroll-behavior: contain; padding: 0; position: fixed; top: 0; touch-action: pan-y; transform: translate3d(var(--drawer-translate-x, -105%), 0, 0); transition: transform 0.2s ease; width: min(82vw, 320px); will-change: transform; z-index: 80; } body.drawer-open .app-drawer { --drawer-translate-x: 0px; } body.drawer-open .app-drawer { --drawer-shadow-alpha: 0.18; } body.drawer-open .shell{--drawer-shell-translate-x:min(82vw,320px)} body.drawer-dragging .app-drawer, body.drawer-dragging .drawer-overlay, body.drawer-dragging .shell { transition: none; } body.drawer-dragging .drawer-overlay { opacity: var(--drawer-overlay-opacity, 0); pointer-events: none; transition-delay: 0s; visibility: visible; } .drawer-main,.drawer-settings-panel,.drawer-settings-menu-surface,.drawer-settings-page-surface{background:var(--theme-surface);display:flex;flex:1 1 auto;flex-direction:column;height:100%;min-height:0;width:100%} .drawer-main[hidden], .drawer-settings-panel[hidden] { display: none !important; } .drawer-settings-menu-surface[hidden]{display:none!important} .drawer-head { align-items: center; display: flex; flex: 0 0 auto; gap: 13px; justify-content: flex-start; margin: 0; padding: calc(18px + env(safe-area-inset-top)) 16px 16px; } .drawer-avatar { background: transparent; border: 0; border-radius: 999px; box-shadow: none; display: block; flex: 0 0 auto; height: 64px; overflow: hidden; width: 64px; } .drawer-avatar img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; } .drawer-user-meta { display: grid; gap: 4px; min-width: 0; } .drawer-user-line { align-items: center; display: flex; gap: 7px; min-width: 0; } .drawer-user-name { color: var(--theme-text); font-size: 18px; font-weight: 760; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-user-badge { background: var(--theme-surface-green); border-radius: 999px; color: var(--theme-green-text); flex: 0 0 auto; font-size: 10px; font-weight: 820; letter-spacing: 0; line-height: 1; padding: 5px 7px 4px; text-transform: uppercase; } .drawer-user-badge.is-teal { background: var(--theme-surface-green); color: var(--theme-green-text); } .drawer-user-badge.is-green { background: var(--theme-surface-green); color: var(--theme-green-strong); } .drawer-user-badge.is-blue { background: var(--theme-surface-blue); color: var(--theme-blue-deep); } .drawer-user-badge.is-purple { background: var(--theme-surface-purple); color: #6d28d9; } .drawer-user-badge.is-pink { background: var(--theme-surface-purple); color: #be185d; } .drawer-user-badge.is-red { background: var(--theme-surface-red); color: var(--theme-red-strong); } .drawer-user-badge.is-orange { background: var(--theme-surface-orange); color: var(--theme-orange-strong); } .drawer-user-badge.is-amber { background: var(--theme-surface-yellow); color: var(--theme-orange-medium); } .drawer-user-badge.is-slate { background: var(--theme-surface-muted); color: var(--theme-text-tertiary); } .drawer-user-badge.is-black { background: #15171a; color: var(--theme-on-accent); } .drawer-user-username { color: var(--theme-text-muted); font-size: 12px; font-weight: 720; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-context { color: var(--theme-text-muted); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; } .drawer-company-switcher { align-items: center; appearance: none; background: transparent; border: 0; color: var(--theme-text-muted); cursor: pointer; display: inline-flex; font: inherit; gap: 5px; max-width: 100%; min-height: 20px; min-width: 0; padding: 0; text-align: left; } .drawer-company-switcher:focus-visible { border-radius: 6px; outline: 3px solid rgba(15, 118, 110, 0.2); outline-offset: 2px; } .drawer-company-name { color: var(--theme-text-muted); font-size: 12px; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-company-caret { border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; flex: 0 0 auto; height: 6px; margin-top: -2px; transform: rotate(45deg); width: 6px; } .menu-button { appearance: none; color: var(--theme-text); cursor: pointer; flex: 0 0 auto; height: 40px; padding: 0; width: 40px; } .menu-button:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.2); outline-offset: 2px; } .menu-button { align-items: center; background: transparent; border: 0; border-radius: 0; display: inline-flex; flex-direction: column; gap: 4px; justify-content: center; margin-top: 1px; } .menu-button-line { background: var(--theme-text); border-radius: 999px; display: block; height: 2px; width: 18px; } .drawer-nav { align-content: start; display: grid; flex: 1 1 auto; gap: 6px; grid-auto-rows: max-content; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 12px; -webkit-overflow-scrolling: touch; } .drawer-nav-item { appearance: none; align-items: center; background: var(--theme-surface); border: 0; border-radius: 8px; color: var(--theme-text); display: grid; gap: 12px; grid-template-columns: 42px minmax(0, 1fr); min-height: 58px; padding: 8px 11px; text-align: left; text-decoration: none; width: 100%; } .drawer-nav-item:disabled { opacity: 1; } .drawer-nav-item.active { background: var(--theme-surface-green); box-shadow: none; color: var(--theme-text); } .drawer-nav-item.is-coming-soon { color: var(--theme-text-muted); cursor: default; } .drawer-icon-tile { align-items: center; background: var(--drawer-icon-bg, var(--theme-surface-muted)); border-radius: 8px; color: var(--drawer-icon-color, var(--theme-text-secondary)); display: inline-grid; height: 42px; justify-items: center; place-items: center; position: relative; width: 42px; } .drawer-icon-tile svg { display: block; height: 24px; width: 24px; } .drawer-nav-item.is-banking { --drawer-icon-bg: #ddf6e8; --drawer-icon-color: #16a34a; } .drawer-nav-item.is-vat { --drawer-icon-bg: #e6fbf8; --drawer-icon-color: #14b8a6; } .drawer-nav-item.is-shipments { --drawer-icon-bg: #fff1e7; --drawer-icon-color: #f97316; } .drawer-nav-item.is-inventory { --drawer-icon-bg: #eff0ff; --drawer-icon-color: var(--theme-purple-text); } .drawer-nav-item.is-documents { --drawer-icon-bg: #f3f5f9; --drawer-icon-color: var(--theme-text-strong-alt); } .drawer-nav-item.is-hmrc { --drawer-icon-bg: #fff0f2; --drawer-icon-color: #e11d48; } .drawer-nav-item.is-profit-loss { --drawer-icon-bg: #eaf5ff; --drawer-icon-color: var(--theme-blue-strong); } .drawer-nav-copy { display: grid; gap: 4px; min-width: 0; } .drawer-nav-title { align-items: center; color: var(--theme-text); display: flex; font-size: 15px; font-weight: 720; gap: 8px; justify-content: space-between; line-height: 1.1; min-width: 0; } .drawer-nav-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .drawer-nav-subtitle { color: var(--theme-text-muted); font-size: 12px; font-weight: 440; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-badge{background:var(--theme-surface-muted);border-radius:5px;color:var(--theme-text-soft);flex:0 0 auto;font-size:9.5px;font-weight:720;line-height:1;padding:4px 7px;white-space:nowrap} .drawer-chat-unread{align-items:center;background:#078f83;border:0;border-radius:999px;color:#fff;display:flex;font-size:9px;height:19px;justify-content:center;line-height:1;min-width:19px;padding:0 4px;position:absolute;right:-5px;top:-5px}.drawer-chat-unread[hidden]{display:none} .drawer-footer{background:var(--theme-surface);border-top:1px solid var(--theme-border-soft);display:grid;flex:0 0 auto;gap:9px;margin-top:0;padding:12px 12px max(8px,env(safe-area-inset-bottom))} .drawer-footer-action { align-items: center; background: var(--theme-surface-muted); border-radius: 8px; color: var(--theme-text); display: grid; font-size: 14px; font-weight: 820; gap: 12px; grid-template-columns: 32px minmax(0, 1fr); min-height: 52px; padding: 0 14px; text-align: left; text-decoration: none; width: 100%; } .drawer-footer-icon { align-items: center; color: var(--theme-text-strong); display: inline-grid; height: 24px; justify-items: center; place-items: center; width: 24px; } .drawer-footer-icon svg { display: block; height: 24px; width: 24px; } .drawer-footer-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-version { color: var(--theme-text-muted); font-size: 12px; font-weight: 500; line-height: 1; padding: 8px 0 0; text-align: right; } .drawer-settings-button { border: 0; cursor: pointer; font-family: inherit; } .drawer-settings-head { align-items: center; border-bottom: 1px solid var(--theme-border-soft); display: flex; flex: 0 0 auto; gap: 10px; margin: 0; padding: calc(18px + env(safe-area-inset-top)) 16px 12px; } .drawer-settings-avatar { background:var(--theme-surface-muted); border:1px solid var(--theme-border); border-radius:50%; height:40px; margin-left:auto; overflow:hidden; width:40px; } .drawer-settings-avatar img { display:block; height:100%; object-fit:cover; width:100%; } .drawer-settings-title { color: var(--theme-text); font-size: 17px; font-weight: 720; line-height: 1.15; } .drawer-settings-back { appearance: none; align-items: center; background: var(--theme-surface-muted); border: 1px solid var(--theme-border-raised); border-radius: 999px; color: var(--theme-text-secondary); cursor: pointer; display: inline-grid; flex: 0 0 auto; height: 40px; place-items: center; width: 40px; } .drawer-settings-back-icon { border-bottom: 2px solid var(--theme-text); border-left: 2px solid var(--theme-text); display: block; height: 9px; margin-left: 4px; transform: rotate(45deg); width: 9px; } .drawer-settings-back:focus-visible, .drawer-settings-button:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.2); outline-offset: 2px; } .drawer-settings-body { align-content: start; display: grid; flex: 1 1 auto; gap: 12px; min-height: 0; overflow: auto; overscroll-behavior:contain; padding: 12px 16px; touch-action:pan-y; -webkit-overflow-scrolling: touch; } .drawer-settings-body[hidden] { display: none !important; } .security-device-state { align-items:center; border-radius:999px; display:inline-flex; flex:0 0 auto; font-size:8.5px; font-weight:850; justify-content:center; line-height:1; min-height:22px; padding:0 9px; text-align:center; text-transform:uppercase; white-space:nowrap; } .security-device-state.is-pending { background:#fff3cd; color:#805c00; } .security-device-state.is-authorized { background:#d9f7e8; color:#087545; } .security-device-state.is-blocked { background:#ffe0e5; color:#a3132f; } .security-device-state.is-ip-blocked { background:#ffe8c7; color:#8a4d00; } .drawer-settings-menu-surface{transform:translate3d(0,0,0);will-change:transform} .drawer-settings-page-surface{box-shadow:-12px 0 28px rgba(22,28,35,.12);inset:0;position:fixed;transform:translate3d(100%,0,0);transition:transform .4s cubic-bezier(.22,1,.36,1);visibility:hidden;width:100vw;will-change:transform;z-index:81} .app-drawer.settings-transition{background:transparent;border:0;box-shadow:none;overflow:visible;transition:none} .app-drawer.settings-transition .drawer-settings-panel{background:transparent} .app-drawer.settings-transition .drawer-settings-menu-surface{transition:transform .4s cubic-bezier(.22,1,.36,1)} .app-drawer.settings-transition .drawer-settings-page-surface{visibility:visible} .app-drawer.settings-page-in .drawer-settings-menu-surface{transform:translate3d(-100%,0,0)} .app-drawer.settings-page-in .drawer-settings-page-surface{transform:translate3d(0,0,0)} .app-drawer.settings-section-dragging .drawer-settings-menu-surface{transform:translateX(calc(-100% + var(--smx,0)));transition:none} .app-drawer.settings-section-dragging .drawer-settings-page-surface{transform:translateX(var(--spx,0));transition:none} body.settings-section-dragging :is(.drawer-overlay,.shell){transition:none!important} .settings-section-list{align-content:start;display:grid;gap:9px;width:100%} .settings-section-item{appearance:none;align-items:center;background:var(--theme-surface);border:1px solid var(--theme-border-soft);border-radius:8px;color:var(--theme-text);cursor:pointer;display:grid;font-family:inherit;gap:12px;grid-template-columns:40px minmax(0,1fr) 20px;min-height:56px;padding:8px 11px;text-align:left;width:100%} .settings-section-item:disabled{color:var(--theme-text-muted);cursor:default;opacity:1} .settings-section-item:not(:disabled):active{background:var(--theme-surface-hover)} .settings-section-item:focus-visible{outline:3px solid rgba(15,118,110,.2);outline-offset:2px} .settings-section-icon{background:var(--theme-surface-muted);border-radius:8px;color:var(--theme-text-secondary);display:inline-grid;height:40px;place-items:center;width:40px} .settings-section-item:disabled .settings-section-icon{color:var(--theme-text-muted)} .settings-section-icon svg:not(.language-flag){display:block;height:23px;width:23px} .settings-section-label{color:inherit;font-size:15px;font-weight:760;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .settings-section-arrow{color:var(--theme-text-muted);display:inline-grid;height:20px;place-items:center;width:20px} .settings-section-arrow svg{display:block;height:18px;width:18px} .appearance-settings{align-self:start;display:grid;gap:12px;width:100%} .appearance-settings-copy{color:var(--theme-text-muted);font-size:13px;line-height:1.45;padding:1px 2px} .appearance-options{display:grid;gap:9px} .appearance-option{appearance:none;align-items:center;background:var(--theme-surface);border:1px solid var(--theme-border-soft);border-radius:10px;color:var(--theme-text);cursor:pointer;display:grid;font:inherit;gap:12px;grid-template-columns:58px minmax(0,1fr) 24px;min-height:68px;padding:9px 11px;text-align:left;width:100%} .appearance-option[aria-pressed="true"]{background:var(--theme-surface-selected);border-color:var(--theme-blue-text);box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-blue-text) 20%,transparent)} .appearance-option:focus-visible{outline:3px solid color-mix(in srgb,var(--theme-blue-text) 24%,transparent);outline-offset:2px} .appearance-preview { background: #f8fafc; border: 1px solid #d7dfe7; border-radius: 7px; display: grid; gap: 3px; grid-template-rows: 5px 1fr 1fr; height: 38px; overflow: hidden; padding: 5px; width: 56px; } .appearance-preview span { background: #dce3eb; border-radius: 2px; display: block; } .appearance-preview span:first-child { background: #64748b; width: 56%; } .appearance-preview-dark { background: #111820; border-color: #3a4754; } .appearance-preview-dark span { background: #34414e; } .appearance-preview-dark span:first-child { background: #a7b2be; } .appearance-preview-system { background: linear-gradient(90deg, #f8fafc 0 50%, #111820 50% 100%); } .appearance-preview-system span { background: linear-gradient(90deg, #dce3eb 0 50%, #34414e 50% 100%); } .appearance-preview-system span:first-child { background: linear-gradient(90deg, #64748b 0 50%, #a7b2be 50% 100%); } .appearance-option-copy { display: grid; gap: 3px; min-width: 0; } .appearance-option-label { font-size: 14.5px; font-weight: 750; line-height: 1.15; } .appearance-option-description { color: var(--theme-text-muted); font-size: 11.5px; line-height: 1.3; } .appearance-option-check { color: var(--theme-blue-text); font-size: 17px; font-weight: 800; text-align: center; } .display-settings{align-self:start;display:grid;gap:22px;padding-bottom:calc(20px + env(safe-area-inset-bottom));width:100%} .display-settings-section{display:grid;gap:10px} .display-settings-section h2{color:var(--theme-text);font-size:15px;font-weight:760;line-height:1.2;margin:0 2px} .display-setting-row{align-items:center;background:var(--theme-surface);border:1px solid var(--theme-border-soft);border-radius:10px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;min-height:64px;padding:10px 11px} .display-setting-copy{display:grid;gap:3px;min-width:0} .display-setting-copy strong{color:var(--theme-text);font-size:14px;font-weight:750;line-height:1.2} .display-setting-copy small{color:var(--theme-text-muted);font-size:11.5px;line-height:1.35} .display-setting-row input{appearance:none;background:var(--theme-border-control);border:0;border-radius:999px;cursor:pointer;height:22px;margin:0;min-height:22px;padding:2px;width:38px} .display-setting-row input::after{background:var(--theme-surface);border-radius:999px;box-shadow:0 1px 3px rgba(30,41,59,.24);content:"";display:block;height:18px;transform:translateX(0);transition:transform .16s ease;width:18px} .display-setting-row input:checked{background:#0b72b9} .display-setting-row input:checked::after{transform:translateX(16px)} .display-setting-row input:focus-visible{outline:3px solid color-mix(in srgb,var(--theme-blue-text) 24%,transparent);outline-offset:2px} .about-settings { align-self: start; width: 100%; } .about-image { aspect-ratio: 1280 / 853; border: 1px solid var(--theme-border); border-radius: 12px; display: block; height: auto; margin: 2px 0 18px; object-fit: cover; width: 100%; } .about-language { color: var(--theme-text-tertiary); display: grid; font-size: 13.5px; font-weight: 440; gap: 14px; line-height: 1.58; padding: 2px 1px calc(22px + env(safe-area-inset-bottom)); } .about-language[hidden], .about-language-zh { display: none; } html[lang="zh-CN"] .about-language-en { display: none; } html[lang="zh-CN"] .about-language-zh { display: grid; } .about-language h2 { color: var(--theme-text); font-size: 21px; font-weight: 760; letter-spacing: -0.01em; line-height: 1.12; margin: 0 0 2px; } .about-language p { margin: 0; overflow-wrap: anywhere; } .about-language strong { color: var(--theme-text); font-weight: 780; } .about-language .about-principles { border-top: 1px solid var(--theme-border); color: var(--theme-text); font-weight: 760; line-height: 1.48; margin-top: 4px; padding-top: 16px; } .drawer-settings-body .account-settings { align-self: start; margin: 0; padding: 0; width: 100%; } .drawer-settings-body .notification-settings { align-self: start; background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; width: 100%; } .drawer-logout { background: var(--theme-surface-muted); color: var(--theme-text-secondary); font-weight: 800; } .topbar { align-items: center; background: var(--theme-surface); border-bottom: 1px solid var(--theme-border-soft); display: flex; gap: 8px; justify-content: space-between; margin: 0 -14px 0; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; position: relative; z-index: 12; } html[data-native-workspace-chrome="acknowledged"] .topbar { height: var(--chat-native-workspace-chrome-inset,calc(env(safe-area-inset-top) + 56px)); min-height:var(--chat-native-workspace-chrome-inset,calc(env(safe-area-inset-top) + 56px)); padding:0; visibility:hidden; } /* The native app keeps the web control's layout while UIKit renders its visible action. */ html[data-companies-os-native-app="true"] [data-native-action-proxied="true"] { box-shadow: none !important; opacity: 0 !important; pointer-events: none !important; } .topbar-main { align-items: center; display: flex; flex: 1; min-height: 40px; min-width: 0; position: relative; } .topbar-side { align-items: center; display: flex; flex: 0 0 auto; flex-direction: row; gap: 7px; } .sync-form.topbar-sync-form { align-items: center; display: inline-flex; flex: 0 0 auto; gap: 0; justify-content: center; justify-items: center; margin: 0; } .topbar-sync-button { appearance: none; align-items: center; background: transparent; border: 0; border-radius: 0; color: var(--theme-text-secondary); cursor: pointer; display: inline-grid; flex: 0 0 auto; height: 40px; justify-content: center; padding: 0; place-items: center; position: relative; width: 40px; } .topbar-connect-bank-link { text-decoration: none; } .topbar-connect-bank-link:hover { color: var(--theme-blue-text); } .topbar-sync-button svg { display: block; grid-area: 1 / 1; height: 18px; width: 18px; } .topbar-sync-button:disabled { cursor: default; opacity: 1; } .topbar-sync-form .sync-button-refresh { display: block; grid-area: 1 / 1; } .topbar-sync-form.is-syncing .sync-button-refresh { display: none; } .topbar-sync-form .sync-button-spinner { border-color: rgba(26, 182, 238, 0.22); border-top-color: #0b7ed0; grid-area: 1 / 1; height: 18px; width: 18px; } .topbar-sync-a11y { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .topbar-sync-line { height: 3px; margin: 0 -14px; overflow: hidden; position: relative; z-index: 11; } .topbar-sync-line::before { background: linear-gradient(90deg, rgba(0, 122, 255, 0), #007aff 30%, #31d7ee 58%, rgba(49, 215, 238, 0)); background-size: 220% 100%; box-shadow: 0 0 10px rgba(0, 122, 255, 0.48); content: ""; display: block; height: 100%; opacity: 0; } .topbar-sync-line.is-syncing::before { animation: company-banking-progress 1.15s ease-in-out infinite; opacity: 1; } .wise-statement-sca-panel { margin: 8px 0 10px; } h1 { font-size: 22px; line-height: 1.05; margin: 3px 0 0; letter-spacing: 0; } .company-heading-static { align-items: center; display: inline-flex; max-width: 100%; min-height: 40px; min-width: 0; } .company-heading-text { color: var(--theme-text); display: block; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.25; max-width: min(60vw, 260px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-overview-link { align-items: center; appearance: none; background: transparent; border: 0; color: var(--theme-text); cursor: pointer; display: inline-flex; font: inherit; max-width: 100%; min-height: 40px; min-width: 0; padding: 0; text-align: left; text-decoration: none; } .company-overview-link:focus-visible { border-radius: 6px; outline: 3px solid rgba(15, 118, 110, 0.2); outline-offset: 3px; } .company-sheet-overlay { background: rgba(21, 23, 26, 0.46); inset: 0; opacity: var(--company-sheet-overlay-opacity, 0); pointer-events: none; position: fixed; transition: opacity 0.18s ease, visibility 0s linear 0.18s; visibility: hidden; z-index: 90; } .company-sheet { background: var(--theme-surface); border-radius: 20px 20px 0 0; bottom: 0; box-shadow: 0 -14px 34px rgba(22, 28, 35, 0.16); display: flex; flex-direction: column; gap: 7px; height: calc(100dvh - max(16px, env(safe-area-inset-top))); left: 50%; max-height: calc(100dvh - max(16px, env(safe-area-inset-top))); min-height: 0; overflow: hidden; padding: 7px 18px calc(10px + env(safe-area-inset-bottom)); position: fixed; touch-action: pan-y; transform: translate3d(-50%, var(--company-sheet-translate-y, 105%), 0); transition: transform 0.22s ease; width: min(100%, 520px); will-change: transform; z-index: 100; } .company-sheet:focus { outline: 0; } body.company-sheet-open .company-sheet-overlay { --company-sheet-overlay-opacity: 1; pointer-events: auto; transition-delay: 0s; visibility: visible; } body.company-sheet-open .company-sheet { --company-sheet-translate-y: 0px; } body.company-sheet-dragging .company-sheet, body.company-sheet-dragging .company-sheet-overlay { transition: none; } .company-sheet-handle { align-self: center; background: var(--theme-border-control); border-radius: 999px; height: 4px; justify-self: center; width: 32px; } .company-sheet-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; padding: 0; } .company-sheet-title { color: var(--theme-text-strong); font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: 0; } .company-sheet-close { align-items: center; appearance: none; background: var(--theme-surface-control); border: 0; border-radius: 999px; box-shadow: none; color: var(--theme-text-strong); cursor: pointer; display: inline-grid; flex: 0 0 auto; height: 34px; place-items: center; position: relative; width: 34px; } .company-sheet-close::before, .company-sheet-close::after { background: currentColor; border-radius: 999px; content: ""; height: 1.7px; position: absolute; width: 10px; } .company-sheet-close::before { transform: rotate(45deg); } .company-sheet-close::after { transform: rotate(-45deg); } .company-sheet-close:focus-visible, .company-sheet-search:focus-within, .company-sheet-option:focus-visible, .company-sheet-manage:focus-visible { outline: 3px solid rgba(31, 49, 84, 0.16); outline-offset: 2px; } .company-sheet-search { align-items: center; background: var(--theme-surface-muted); border: 1px solid var(--theme-border); border-radius: 11px; color: var(--theme-text-muted); display: grid; gap: 7px; grid-template-columns: 16px minmax(0, 1fr) 18px; min-height: 34px; padding: 0 9px; } .company-sheet-search-icon, .company-sheet-search-clear { align-items: center; display: inline-grid; height: 18px; place-items: center; width: 18px; } .company-sheet-search-icon svg { height: 16px; width: 16px; } .company-sheet-search input { appearance: none; background: transparent; border: 0; color: var(--theme-text-strong); font: inherit; font-size: 12.5px; font-weight: 610; line-height: 1.2; min-width: 0; outline: 0; padding: 0; width: 100%; } .company-sheet-search input::placeholder { color: var(--theme-text-muted); opacity: 1; } .company-sheet-search input::-webkit-search-cancel-button { appearance: none; } .company-sheet-search-clear { appearance: none; background: #aeb6c4; border: 0; border-radius: 999px; color: var(--theme-on-accent); cursor: pointer; position: relative; } .company-sheet-search-clear::before, .company-sheet-search-clear::after { background: currentColor; border-radius: 999px; content: ""; height: 1.7px; position: absolute; width: 7px; } .company-sheet-search-clear::before { transform: rotate(45deg); } .company-sheet-search-clear::after { transform: rotate(-45deg); } .company-sheet-results { color: var(--theme-text-muted); flex: 0 0 auto; font-size: 10.8px; font-weight: 740; line-height: 1.2; margin: -2px 0 -4px; min-height: 13px; } .company-sheet-results[hidden], .company-sheet-search-clear[hidden], .company-sheet-option[hidden], .company-sheet-empty[hidden] { display: none !important; } .company-sheet-options { align-content: start; display: grid; flex: 1 1 auto; gap: 7px; max-height: none; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 0 2px; -webkit-overflow-scrolling: touch; } .company-sheet.is-empty .company-sheet-options { flex: 1 1 auto; max-height: none; } .company-sheet-option{align-items:center;background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:14px;color:var(--theme-text-strong-alt);display:grid;gap:8px;grid-template-columns:34px minmax(0,1fr) 22px;min-height:60px;padding:8px 10px;text-decoration:none} .company-sheet-option.selected{background:var(--theme-surface-selected);box-shadow:0 0 0 1px rgba(43,74,124,.03)} .company-sheet-option.is-hk{box-shadow:inset 4px 0 var(--theme-red-strong)} .company-sheet-option-icon { align-items: center; background: var(--theme-surface-selected); border-radius: 10px; color: #253f73; display: inline-grid; height: 34px; justify-items: center; place-items: center; width: 34px; } .company-sheet-option-icon svg { display: block; height: 19px; width: 19px; } .company-sheet-option-copy { display: grid; gap: 4px; min-width: 0; } .company-sheet-option-title-row { align-items: center; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; } .company-sheet-option-name { color: var(--theme-text-strong); display: block; font-size: 12.4px; font-weight: 800; line-height: 1.14; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-sheet-current-pill { background: var(--theme-surface-selected); border-radius: 999px; color: #304b89; flex: 0 0 auto; font-size: 9.5px; font-weight: 800; line-height: 1; padding: 3.5px 6px; } .company-sheet-option-meta { color: var(--theme-text-tertiary); display: flex; flex-wrap: nowrap; font-size: 11px; font-weight: 680; gap: 5px; line-height: 1.2; min-width: 0; overflow: hidden; } .company-sheet-option-meta span { white-space: nowrap; } .company-sheet-option-action { align-items: center; display: inline-grid; flex: 0 0 auto; height: 22px; place-items: center; width: 22px; } .company-sheet-check { background: #17315f; border-radius: 999px; color: var(--theme-on-accent); display: inline-grid; height: 22px; place-items: center; position: relative; width: 22px; } .company-sheet-check::before { border-bottom: 1.8px solid currentColor; border-right: 1.8px solid currentColor; content: ""; height: 7px; margin-top: -2px; transform: rotate(45deg); width: 3.5px; } .company-sheet-chevron { color: var(--theme-text-secondary); } .company-sheet-chevron svg { display: block; height: 17px; width: 17px; } .company-sheet-empty { align-content: center; align-items: center; display: grid; justify-items: center; min-height: 140px; padding: 12px 10px; text-align: center; } .company-sheet-empty-icon { align-items: center; background: var(--theme-surface-muted); border-radius: 999px; color: var(--theme-text-secondary); display: inline-grid; height: 52px; margin-bottom: 10px; place-items: center; width: 52px; } .company-sheet-empty-icon svg { height: 27px; width: 27px; } .company-sheet-empty-title { color: var(--theme-text-strong); font-size: 14.5px; font-weight: 820; line-height: 1.15; } .company-sheet-empty-copy { color: var(--theme-text-muted); font-size: 11.5px; font-weight: 650; line-height: 1.25; margin-top: 6px; } .company-sheet-manage { align-items: center; appearance: none; background: var(--theme-surface-control); border: 1px solid var(--theme-border); border-radius: 13px; color: var(--theme-text-tertiary); cursor: pointer; display: grid; flex: 0 0 auto; font: inherit; gap: 8px; grid-template-columns: 26px minmax(0, 1fr) 17px; margin-top: 6px; min-height: 44px; padding: 7px 10px; text-align: left; width: 100%; } .company-sheet.is-empty .company-sheet-manage { margin-top: auto; } .company-sheet-manage-icon { align-items: center; color: var(--theme-text-tertiary); display: inline-grid; height: 26px; place-items: center; width: 26px; } .company-sheet-manage-icon svg { height: 18px; width: 18px; } .company-sheet-manage-text { color: var(--theme-text-tertiary); font-size: 12.5px; font-weight: 800; line-height: 1.12; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-sheet-toolbar{align-items:center;display:grid;gap:6px;grid-template-columns:minmax(0,1fr) auto;min-height:34px}.company-group-tabs,.company-group-custom{align-items:center;display:flex;gap:5px;min-width:0}.company-group-tabs{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}.company-group-tabs::-webkit-scrollbar{display:none}.company-group-custom{display:contents}.company-group-tabs button,.company-sheet-view-button{align-items:center;appearance:none;background:var(--theme-surface-muted);border:1px solid var(--theme-border);border-radius:999px;color:var(--theme-text-secondary);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-size:10.5px;font-weight:760;height:30px;justify-content:center;padding:0 10px;white-space:nowrap}.company-group-tabs [aria-selected="true"]{background:#17315f;border-color:#17315f;color:#fff}.company-group-chip{align-items:center;display:inline-flex;flex:0 0 auto}.company-group-chip>[data-company-group-filter]{border-radius:999px 0 0 999px;padding-right:7px}.company-group-edit{border-left:0!important;border-radius:0 999px 999px 0!important;padding:0 9px 0 4px!important}.company-group-edit span,.company-group-edit span::before,.company-group-edit span::after{background:currentColor;border-radius:50%;height:2.5px;width:2.5px}.company-group-edit span{position:relative}.company-group-edit span::before,.company-group-edit span::after{content:"";position:absolute;top:0}.company-group-edit span::before{left:-5px}.company-group-edit span::after{right:-5px}.company-group-add{font-size:16px!important;padding:0!important;width:30px}.company-sheet-view-button{border-radius:10px;gap:6px;max-width:142px;padding:0 9px}.company-sheet-view-button>span:last-child{max-width:108px;overflow:hidden;text-overflow:ellipsis}.company-sheet-view-icon{border-bottom:1.5px solid currentColor;border-top:1.5px solid currentColor;height:9px;position:relative;width:13px}.company-sheet-view-icon::after{background:currentColor;box-shadow:7px -5px 0 -1px currentColor;content:"";height:3px;left:2px;position:absolute;top:2px;width:3px}.company-sheet-option{display:block;min-height:48px;padding:0;position:relative}.company-sheet-option-link{align-items:center;color:inherit;display:grid;gap:8px;grid-template-columns:30px minmax(0,1fr) 22px;min-height:48px;padding:5px 10px;text-decoration:none}.company-sheet-option:has(.company-sheet-option-menu) .company-sheet-option-link{padding-right:42px}.company-sheet-option-icon{height:30px;width:30px}.company-sheet-option-icon svg{height:17px;width:17px}.company-sheet-option-copy{gap:2px}.company-sheet-option-name{font-size:11.8px}.company-sheet-option-meta{font-size:10.2px}.company-sheet-options{gap:5px}.company-sheet-option-menu{align-items:center;appearance:none;background:transparent;border:0;border-radius:9px;color:var(--theme-text-muted);cursor:pointer;display:grid;height:34px;padding:0;place-items:center;position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px}.company-sheet-menu-dots,.company-sheet-menu-dots::before,.company-sheet-menu-dots::after{background:currentColor;border-radius:50%;height:3px;width:3px}.company-sheet-menu-dots{position:relative}.company-sheet-menu-dots::before,.company-sheet-menu-dots::after{content:"";position:absolute;top:0}.company-sheet-menu-dots::before{left:-6px}.company-sheet-menu-dots::after{right:-6px}.company-sheet-option-menu:focus-visible,.company-sheet-view-button:focus-visible,.company-group-tabs button:focus-visible,.company-action-sheet :focus-visible{outline:3px solid rgba(31,49,84,.18);outline-offset:1px}.company-action-overlay{background:rgba(0,0,0,.34);inset:0;position:absolute;z-index:4}.company-action-overlay[hidden],.company-action-sheet[hidden]{display:none}.company-action-sheet{background:var(--theme-surface);border-radius:18px 18px 0 0;bottom:0;box-shadow:0 -12px 30px var(--theme-shadow);display:grid;gap:12px;left:0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));position:absolute;right:0;z-index:5}.company-action-head{align-items:center;display:flex;gap:12px;justify-content:space-between}.company-action-head>div{display:grid;gap:3px;min-width:0}.company-action-head strong{color:var(--theme-text-strong);font-size:15px}.company-action-head span{color:var(--theme-text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.company-action-sheet form,.company-action-sheet label{display:grid;gap:7px}.company-action-sheet label{color:var(--theme-text-tertiary);font-size:11px;font-weight:760}.company-action-sheet input,.company-action-sheet select{appearance:none;background:var(--theme-surface-muted);border:1px solid var(--theme-border-control);border-radius:11px;color:var(--theme-text-strong);font:inherit;font-size:13px;font-weight:700;height:42px;padding:0 12px}.company-action-sheet p{color:var(--theme-text-muted);font-size:10.5px}.company-action-buttons{display:grid;gap:8px;grid-template-columns:1fr 1fr}.company-action-buttons button{appearance:none;background:var(--theme-surface-muted);border:1px solid var(--theme-border);border-radius:11px;color:var(--theme-text-secondary);font:inherit;font-size:12px;font-weight:800;min-height:42px}.company-action-buttons button[type="submit"]{background:#17315f;border-color:#17315f;color:#fff}.company-group-sheet .company-action-buttons:has([hidden]) button:not([hidden]){grid-column:1/-1}.company-view-fields{display:grid;gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 64px}.company-view-fields label{display:grid;gap:5px}.company-sheet-direction{align-self:end;appearance:none;background:var(--theme-surface-muted);border:1px solid var(--theme-border-control);border-radius:11px;color:var(--theme-text-strong);cursor:pointer;font:inherit;font-size:11px;font-weight:800;height:42px}.company-group-error{color:var(--theme-red-strong)!important;font-weight:700}.company-group-delete[data-confirm="true"]{background:var(--theme-surface-red);border-color:var(--theme-border-red);color:var(--theme-red-strong)} .login-title { font-size: 22px; white-space: nowrap; } .company-banking-login-page .login-title { -webkit-font-smoothing: antialiased; color: var(--theme-text-strong); font-size: clamp(27px, 7vw, 30px); font-weight: 600; letter-spacing: 0; line-height: 1.06; margin: 0 auto; max-width: 330px; text-align: center; text-wrap: balance; white-space: normal; } h2 { font-size: 14px; margin: 0; letter-spacing: 0; } p { margin: 0; } .muted { color: var(--theme-text-muted); font-size: 12px; line-height: 1.35; } .login-kicker { color: var(--theme-text-tertiary); font-size: 11.5px; line-height: 1.25; margin-top: 3px; } .company-banking-login-page .login-kicker { -webkit-font-smoothing: antialiased; color: var(--theme-text-muted); font-size: 14.5px; font-weight: 420; letter-spacing: 0; line-height: 1.38; margin: 9px auto 0; max-width: 286px; text-align: center; } .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; } .metric { color: var(--theme-text); display: block; min-width: 0; padding: 12px; position: relative; text-decoration: none; } .metric.wide { grid-column: 1 / -1; } .metric.filter-card { cursor: pointer; padding-right: 38px; } .metric.filter-card.no-arrow { padding-right: 12px; } .metric.filter-card.active { border-color: var(--theme-green-text); box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.08), 0 10px 24px rgba(22, 28, 35, 0.05); } .metric.filter-card.active .label { color: var(--theme-green-text); } .metric-arrow { border-right: 2px solid #68717d; border-top: 2px solid #68717d; height: 11px; position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 11px; } .metric.filter-card.active .metric-arrow { border-color: var(--theme-green-text); } .metric.filter-card.has-target-progress { min-height: 0; padding-right: 12px; } .metric.filter-card.has-target-progress .metric-arrow { display: none; } .metric-label-row { align-items: center; display: flex; gap: 7px; margin-bottom: 5px; min-height: 20px; min-width: 0; } .metric-provider-logo { background: transparent; border: 0; border-radius: 0; flex: 0 1 auto; height: 18px; max-width: 116px; object-fit: contain; object-position: left center; padding: 0; width: auto; } .metric.has-metric-icon { align-items: center; display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); } .metric.has-metric-icon .metric-copy { min-width: 0; } .metric.has-metric-icon .value { overflow-wrap: normal; white-space: nowrap; } .provider-balance-panel { background: var(--theme-border-control); border: 1px solid var(--theme-border); border-radius: 14px; box-shadow: 0 4px 10px rgba(22, 28, 35, 0.025); display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; padding: 0; } .provider-balance-item { background: var(--theme-surface); border: 0; border-radius: 0; box-shadow: none; color: var(--theme-text); min-height: 58px; min-width: 0; overflow: hidden; position: relative; } .provider-balance-item:last-child:nth-child(odd) { grid-column: 1 / -1; } .provider-balance-link { align-content: center; color: inherit; display: grid; gap: 2px; height: 100%; min-width: 0; padding: 7px 12px; text-decoration: none; } .provider-balance-item.active { background: var(--theme-surface-selected); } .provider-balance-head { align-items: center; display: grid; min-height: 20px; min-width: 0; } .provider-balance-logo-row { align-items: center; display: flex; min-height: 22px; min-width: 0; overflow: hidden; } .provider-balance-logo { background: transparent; border: 0; flex: 0 1 auto; height: 19px; max-width: 78px; object-fit: contain; object-position: left center; width: auto; } .provider-balance-logo-airwallex { height: 11px; max-width: 78px; } .provider-balance-logo-wise { height: 14px; max-width: 58px; } .provider-balance-logo-equals-money { height: 14px; max-width: 62px; } .provider-balance-logo-pleo { height: 18px; max-width: 49px; } .provider-balance-logo-tide { height: 19px; max-width: 50px; } .provider-balance-name { color: var(--theme-text-tertiary); font-size: 12.2px; font-weight: 850; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .provider-balance-value{display:flex;flex-wrap:wrap;font-size:16.4px;font-weight:830;gap:4px 0;line-height:1.08} .provider-currency-balance{font-variant-numeric:tabular-nums;white-space:nowrap} .provider-currency-balance+.provider-currency-balance{border-left:1px solid var(--theme-border-control);margin-left:8px;padding-left:8px} .provider-balance-account-count { color:var(--theme-text-muted); display:block; font-size:10px; margin-top:3px; } .provider-balance-item.has-credit-limit { min-height: 68px; } .provider-balance-credit-limit { color: var(--theme-text-muted); font-size: 9.5px; font-weight: 650; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .provider-balance-freshness-toggle { align-items: stretch; appearance: none; background: transparent; border: 0; cursor: pointer; display: flex; height: 100%; justify-content: flex-end; padding: 7px 0; position: absolute; right: 0; top: 0; width: 30px; z-index: 2; } .provider-balance-freshness-toggle:focus-visible { outline: 3px solid rgba(31, 49, 84, 0.16); outline-offset: -4px; } .provider-balance-freshness-rail { background: #10b981; border-radius: 999px 0 0 999px; display: block; transition: background-color 160ms ease; width: 3px; } .provider-balance-item[data-freshness-state="warning"] .provider-balance-freshness-rail { background: #f59e0b; } .provider-balance-item[data-freshness-state="stale"] .provider-balance-freshness-rail { background: #dc2626; } .provider-balance-freshness-text { animation: provider-balance-freshness-hide 2.5s ease forwards; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--theme-border); border-radius: 999px; box-shadow: 0 2px 7px rgba(22, 28, 35, 0.08); color: var(--theme-text-muted); font-size: 9.8px; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1; opacity: 1; padding: 3px 6px; pointer-events: none; position: absolute; right: 8px; top: 7px; white-space: nowrap; } .provider-balance-item[data-freshness-state="warning"] .provider-balance-freshness-text { background: var(--theme-surface-orange); box-shadow: 0 0 0 2px #fffaf0; color: var(--theme-orange-medium); } .provider-balance-item[data-freshness-state="stale"] .provider-balance-freshness-text { background: var(--theme-surface-red); box-shadow: 0 0 0 2px #fff5f5; color: var(--theme-red-strong); } .provider-balance-item:hover .provider-balance-freshness-text { animation: none; opacity: 1; } .provider-balance-item:focus-within .provider-balance-freshness-text { animation: provider-balance-freshness-rehide 2.5s ease forwards; } .provider-balance-freshness-toggle:active + .provider-balance-freshness-text { animation: none; opacity: 1; } @keyframes provider-balance-freshness-hide { 0%, 82% { opacity: 1; } 100% { opacity: 0; } } @keyframes provider-balance-freshness-rehide { 0%, 82% { opacity: 1; } 100% { opacity: 0; } } .transfer-hero { align-items: center; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr); margin: 8px 0 10px; min-height: 82px; min-width: 0; padding: 12px; } .transfer-back-link { align-items: center; align-self: center; background: transparent; border: 0; border-radius: 0; color: var(--theme-text-secondary); display: inline-grid; grid-column: 1 / 2; height: 34px; justify-items: center; place-items: center; text-decoration: none; width: 34px; } .transfer-back-link:focus-visible { border-radius: 6px; outline: 3px solid rgba(31, 49, 84, 0.16); outline-offset: 2px; } .transfer-back-link svg { display: block; height: 18px; width: 18px; } .transfer-title-row { align-items: center; display: grid; gap: 10px; grid-template-columns: 42px minmax(0, 1fr); min-width: 0; } .transfer-hero-icon { align-items: center; background: var(--theme-surface-blue); border-radius: 8px; color: var(--theme-blue-strong); display: inline-grid; flex: 0 0 auto; height: 42px; justify-content: center; place-items: center; width: 42px; } .transfer-hero-icon svg { display: block; height: 24px; stroke-width: 2; width: 24px; } .transfer-hero-copy { display: grid; gap: 3px; grid-column: 2 / 3; min-width: 0; } .transfer-title-stack { display: grid; gap: 3px; min-width: 0; } .transfer-title { color: var(--theme-text); display: grid; font-size: 17px; font-weight: 760; letter-spacing: 0; line-height: 1.03; margin: 0; min-width: 0; } .transfer-title span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transfer-title span + span { color: var(--theme-text-secondary); font-size: 14px; font-weight: 650; line-height: 1.12; } .transfer-subtitle { color: var(--theme-text-muted); font-size: 11.6px; font-weight: 500; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transfer-grid { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; } .transfer-panel { background: var(--theme-surface); border: 1px solid var(--theme-border-subtle); border-radius: 9px; box-shadow: 0 6px 14px rgba(22, 28, 35, 0.035); min-width: 0; padding: 10px; } .transfer-panel-title { color: var(--theme-text-tertiary); font-size: 11.8px; font-weight: 720; line-height: 1.2; margin-bottom: 8px; } .transfer-form { display: grid; gap: 8px; } .transfer-form-row { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) 76px; } .form-field { display: grid; gap: 4px; min-width: 0; } .field-label { color: var(--theme-text-tertiary); font-size: 10.6px; font-weight: 650; line-height: 1.15; } .field-input { appearance: none; background: var(--theme-surface-subtle); border: 1px solid var(--theme-border-control); border-radius: 8px; color: var(--theme-text); font: inherit; font-size: 12.2px; font-weight: 560; line-height: 1.2; min-height: 34px; min-width: 0; overflow: hidden; padding: 6px 9px; text-overflow: ellipsis; white-space: nowrap; width: 100%; } select.field-input { background-image: linear-gradient(45deg, transparent 50%, #68717d 50%), linear-gradient(135deg, #68717d 50%, transparent 50%); background-position: calc(100% - 16px) 14px, calc(100% - 10px) 14px; background-repeat: no-repeat; background-size: 6px 6px, 6px 6px; padding-right: 30px; } .currency-field .field-input { text-transform: uppercase; } .transfer-submit { align-items: center; background: #303a45; border: 1px solid #303a45; border-radius: 8px; color: var(--theme-on-accent); cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 730; justify-content: center; margin-top: 2px; min-height: 38px; padding: 0 14px; } .transfer-submit:disabled { background: var(--theme-border-control); border-color: var(--theme-border); color: var(--theme-text-muted); cursor: not-allowed; } .transfer-message, .transfer-warning { border-radius: 8px; font-size: 12.2px; font-weight: 620; line-height: 1.3; margin: 0 0 10px; padding: 8px 10px; } .transfer-message.is-success { background: var(--theme-surface-selected); border: 1px solid var(--theme-border); color: var(--theme-deep-indigo-text); } .transfer-message.is-review { background: var(--theme-surface-orange); border: 1px solid var(--theme-border-orange); color: #9a3412; } .transfer-message.is-error, .transfer-warning { background: var(--theme-surface-orange); border: 1px solid var(--theme-border-orange); color: #9a3412; } .transfer-sca-panel{background:var(--theme-surface-soft);border:1px solid var(--theme-border-control);border-radius:8px;display:grid;gap:8px;margin-top:2px;padding:9px} .transfer-sca-title{color:var(--theme-text-tertiary);font-size:12.4px;font-weight:740;line-height:1.2} .transfer-sca-copy{color:var(--theme-text-muted);font-size:11.3px;line-height:1.35} .transfer-sca-actions{display:flex;flex-wrap:wrap;gap:6px} .transfer-sca-channel,.transfer-sca-button{appearance:none;border-radius:7px;cursor:pointer;font:inherit;min-height:32px;padding:0 10px} .transfer-sca-channel{background:var(--theme-surface);border:1px solid var(--theme-border-control);color:var(--theme-text-secondary);font-size:11.2px;font-weight:690} .transfer-sca-channel.is-active{background:var(--theme-surface-blue);border-color:#9bbcf9;color:var(--theme-blue-deep)} [data-app-icon]{border-radius:10px;overflow:hidden;padding:0;width:44px}[data-app-icon] img{display:block;height:42px;width:42px} .transfer-sca-code-row{display:grid;gap:7px;grid-template-columns:minmax(0,1fr) auto} .transfer-sca-input{appearance:none;background:var(--theme-surface);border:1px solid var(--theme-border-control);border-radius:8px;color:var(--theme-text);font:inherit;font-size:12.2px;font-weight:560;min-height:34px;min-width:0;padding:6px 9px} .transfer-sca-button { background: #303a45; border: 1px solid #303a45; color: var(--theme-on-accent); font-size: 11.4px; font-weight: 720; } .transfer-sca-button:disabled, .transfer-sca-channel:disabled { cursor: not-allowed; opacity: 0.58; } .transfer-sca-hint { color: var(--theme-text-muted); font-size: 10.6px; line-height: 1.25; } .transfer-account-summary { display: grid; gap: 8px; } .transfer-account-section { display: grid; gap: 6px; min-width: 0; } .transfer-account-section + .transfer-account-section { border-top: 1px solid var(--theme-border-soft); padding-top: 8px; } .transfer-account-section-title { color: var(--theme-text-muted); font-size: 10.6px; font-weight: 700; line-height: 1.2; } .transfer-account-list { display: grid; gap: 4px; } .transfer-account-card { background: var(--theme-surface-subtle); border: 1px solid var(--theme-border); border-radius: 8px; display: grid; gap: 1px; min-width: 0; padding: 7px 8px; } .transfer-account-card.is-disabled { color: var(--theme-text-muted); } .transfer-account-name { color: var(--theme-text); font-size: 11.7px; font-weight: 680; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transfer-account-card.is-disabled .transfer-account-name { color: var(--theme-text-muted); } .transfer-account-meta { color: var(--theme-text-muted); font-size: 10.5px; line-height: 1.25; overflow-wrap: anywhere; } .metric-label-row .label { margin-bottom: 0; min-width: 0; } .target-progress-wrap { display: grid; gap: 7px; justify-items: start; margin-top: 12px; width: 100%; } .target-progress { -webkit-backdrop-filter: blur(14px) saturate(1.34); backdrop-filter: blur(14px) saturate(1.34); background: var(--glass-action-clear); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: var(--glass-action-clear-shadow); display: block; height: 20px; max-width: 150px; overflow: hidden; position: relative; width: 100%; } .target-progress-fill { background: linear-gradient(90deg, #29a9e2 0%, #25c4a6 56%, #6575f5 100%); border-radius: inherit; box-shadow: 0 0 18px rgba(37, 196, 166, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.46); display: block; height: 100%; max-width: 100%; min-width: 0; transition: width 220ms cubic-bezier(.22,.8,.25,1); width: var(--target-progress); } .progress-pct-0 { --target-progress: 0%; }.progress-pct-5 { --target-progress: 5%; }.progress-pct-10 { --target-progress: 10%; }.progress-pct-15 { --target-progress: 15%; }.progress-pct-20 { --target-progress: 20%; }.progress-pct-25 { --target-progress: 25%; }.progress-pct-30 { --target-progress: 30%; }.progress-pct-35 { --target-progress: 35%; }.progress-pct-40 { --target-progress: 40%; }.progress-pct-45 { --target-progress: 45%; }.progress-pct-50 { --target-progress: 50%; }.progress-pct-55 { --target-progress: 55%; }.progress-pct-60 { --target-progress: 60%; }.progress-pct-65 { --target-progress: 65%; }.progress-pct-70 { --target-progress: 70%; }.progress-pct-75 { --target-progress: 75%; }.progress-pct-80 { --target-progress: 80%; }.progress-pct-85 { --target-progress: 85%; }.progress-pct-90 { --target-progress: 90%; }.progress-pct-95 { --target-progress: 95%; }.progress-pct-100 { --target-progress: 100%; } .anna-mobile-qr { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 6px; display: block; height: auto; margin: 18px auto; padding: 12px; width: min(280px, 100%); } .target-progress-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; } .target-progress-value { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: color-mix(in srgb, var(--glass-surface-strong) 78%, transparent); border: 1px solid color-mix(in srgb, var(--glass-border) 72%, transparent); border-radius: 999px; color: var(--theme-text); font-size: 10px; font-weight: 900; left: 50%; line-height: 1; padding: 2px 6px; position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; z-index: 2; } .target-progress-label { color: var(--theme-text-muted); font-size: 13px; font-weight: 600; line-height: 1.15; min-width: 0; } .target-progress-remaining { color: var(--theme-text-tertiary); font-size: 13px; font-weight: 600; line-height: 1.15; } .total-balance-card { align-content: start; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); overflow: hidden; padding: 11px 12px; position: relative; } .total-balance-card.all-companies-balance-card { align-items: center; gap: 12px; grid-template-columns: auto minmax(0, 1fr); padding: 12px 15px; } .all-companies-metric-copy { min-width: 0; } .all-companies-metric-icon { align-self: center; } .all-companies-metric-label { margin-bottom: 7px; max-width: 100%; } .all-companies-metric-value { display: block; } .all-companies-balance-icon { align-self: center; } .all-companies-balance-main { display: grid; gap: 3px; min-width: 0; } .all-companies-balance-main .balance-card-head { margin-bottom: 0; padding-right: 0; } .all-companies-balance-main .balance-spend-label { margin-bottom: 0; } .all-companies-balance-freshness { color: var(--theme-text-muted); font-size: 15.5px; font-weight: 400; line-height: 1.15; } .all-companies-balance-value-row { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; min-width: 0; } .all-companies-balance-value-row .value { flex: 0 1 auto; min-width: 0; white-space: nowrap; } .all-companies-balance-value-row .balance-spend-value { flex: 0 1 auto; min-width: 0; white-space: nowrap; } .all-companies-balance-meta { flex: 0 0 auto; margin-top: 0; text-align: right; white-space: nowrap; } .all-companies-static-metric .balance-spend-icon-banknote { background: var(--theme-surface-orange); color: var(--theme-orange-medium); } .all-companies-directory { background:var(--theme-surface); border:1px solid var(--theme-border); border-radius:14px; margin-top:12px; overflow:hidden; } .all-companies-directory>summary { align-items:center; cursor:pointer; display:flex; justify-content:space-between; list-style:none; padding:13px 14px; } .all-companies-directory>summary::-webkit-details-marker { display:none; } .all-companies-directory>summary span { color:var(--theme-text-strong); font-size:15px; font-weight:800; } .all-companies-directory>summary small { color:var(--theme-text-muted); font-size:11px; } .all-companies-directory[open]>summary { border-bottom:1px solid var(--theme-border-soft); } .all-companies-directory>[data-company-summary-progressive-root] { padding:12px; } .total-balance-card.is-syncing { border-color: rgba(48, 58, 69, 0.18); box-shadow: 0 10px 24px rgba(22, 28, 35, 0.05); } .total-balance-card.is-synced { border-color: rgba(48, 58, 69, 0.12); } .balance-card-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 5px; min-width: 0; padding-right: 62px; } .balance-card-head .label { margin-bottom: 0; min-width: 0; } .balance-spend-strip { align-items: stretch; background: transparent; border: 0; border-radius: 0; box-shadow: none; display: grid; gap: 8px; margin: 0 -14px 9px; overflow: visible; padding: 0 14px; position: relative; } .sync-problem-list{margin:8px 0 0;padding-left:18px}.sync-problem-list li{overflow-wrap:anywhere} .balance-spend-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 15px; box-shadow: 0 7px 18px rgba(21, 27, 34, 0.055); display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; padding: 18px 20px; } .balance-spend-main { align-content: start; display: grid; gap: 14px; min-width: 0; padding: 0; position: relative; } .balance-spend-main-content { align-items: center; column-gap: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; } .balance-spend-copy { display: grid; justify-items: start; min-width: 0; } .balance-spend-side { align-items: center; align-self:start; background: var(--theme-surface-control); border: 0; border-radius: 13px; color: inherit; column-gap: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; padding: 14px 16px; position: relative; text-decoration: none; } .balance-spend-side[href] { cursor: pointer; } .balance-spend-side[href]:focus-visible { outline: 3px solid var(--theme-blue-strong); outline-offset: 2px; } .balance-spend-side-copy { display: grid; justify-items: start; min-width: 0; } .balance-spend-label { align-items: center; color: #263141; display: inline-flex; flex-wrap: nowrap; font-size: 17px; font-weight: 650; gap: 8px; justify-self: start; line-height: 1.08; margin: 0 0 14px; min-width: 0; white-space: nowrap; } .balance-spend-value-row { align-items:center; display:flex; flex-wrap:nowrap; gap:8px; min-width:0; } .balance-spend-icon { align-items: center; color: var(--theme-green-text); display: inline-flex; flex: 0 0 auto; height: 24px; justify-content: center; opacity: 0.9; width: 24px; } .balance-spend-icon svg { display: block; height: 100%; width: 100%; } .balance-spend-main .balance-spend-icon { color: #0f8b68; } .balance-spend-side .balance-spend-icon { color: var(--theme-green-text); } .balance-spend-icon-wallet { background: var(--theme-surface-green); border-radius: 9px; height: 56px; width: 56px; } .balance-spend-icon-wallet svg { height: 28px; width: 28px; } .balance-spend-icon-trend { background: var(--theme-surface-selected); border-radius: 9px; color: var(--theme-deep-indigo-text); height: 56px; opacity: 0.95; width: 56px; } .balance-spend-side .balance-spend-icon-trend { color: var(--theme-deep-indigo-text); } .balance-spend-icon-trend svg { height: 30px; stroke-width: 2.2; width: 30px; } .balance-spend-icon-banknote { background: var(--theme-surface-green); border-radius: 9px; color: var(--theme-green-text); height: 56px; opacity: 0.95; width: 56px; } .balance-spend-icon-banknote svg { height: 30px; stroke-width: 2.1; width: 30px; } .balance-spend-value, .balance-spend-side-value { color: #05070a; font-variant-numeric: tabular-nums; font-weight: 780; letter-spacing: 0; line-height: 0.98; overflow-wrap: normal; white-space: nowrap; } .balance-spend-value { font-size: clamp(30px, 2.5vw, 34px); } .balance-spend-value-lines{display:grid;gap:4px}.balance-spend-value-lines>span{overflow-wrap:anywhere} .balance-currency-disclosure{position:relative} .balance-currency-disclosure>summary{background:var(--theme-surface-control);border:1px solid var(--theme-border-soft);border-radius:50%;display:grid;font-size:12px;font-weight:760;height:28px;place-items:center;width:28px} .balance-currency-disclosure>summary::-webkit-details-marker{display:none} .balance-currency-disclosure-values { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 12px; box-shadow: var(--theme-shadow-card); display: grid; gap: 6px; margin-top: 6px; padding: 10px 12px; position: absolute; z-index: 20; } .balance-currency-disclosure-values > span { color: var(--theme-text-strong); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .balance-spend-side-value { font-size: 43px; } .balance-spend-meta { align-items: center; color: var(--theme-text-muted); column-gap: 16px; display: grid; font-size: 15.5px; font-weight: 400; grid-template-columns: auto auto; justify-content: start; line-height: 1.15; max-width: 100%; min-width: 0; white-space: nowrap; width: fit-content; } .balance-spend-meta-update { white-space: nowrap; } .balance-spend-freshness { align-items: center; display: inline-flex; gap: 4px; justify-self: start; white-space: nowrap; } .balance-spend-meta-update-icon { display: inline-flex; flex: 0 0 auto; height: 1em; width: 1em; } .balance-spend-meta-update-icon svg { display: block; height: 100%; stroke-width: 2.2; width: 100%; } .balance-spend-progress { display: grid; gap: 7px; min-width: 0; padding: 0 3px; } .balance-spend-progress-row { align-items: center; display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; } .balance-spend-progress-track { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); background: var(--glass-action-clear); border: 1px solid rgba(255,255,255,.74); border-radius: 999px; box-shadow: var(--glass-action-clear-shadow); display: block; height: 34px; isolation: isolate; overflow: hidden; position: relative; width: 100%; } .balance-spend-progress-fill { background: linear-gradient(90deg, #32bff0 0%, #27d3d0 52%, #37c79b 100%); border-radius: inherit; box-shadow: 0 0 18px rgba(35,194,222,.26), inset 0 1px 0 rgba(255,255,255,.68), inset 0 -1px 0 rgba(0,91,126,.16); display: block; height: 100%; max-width: 100%; min-width: 0; overflow: hidden; position: relative; transition: width 220ms cubic-bezier(.22,.8,.25,1); width: var(--target-progress); z-index: 1; } .balance-spend-progress-value { color: var(--theme-text); font-size: 11.5px; font-weight: 800; left: 12px; letter-spacing: 0; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; z-index: 3; } .balance-spend-progress-remainder { align-items: center; background: rgba(236,243,249,.48); bottom: 0; color: #5d6b7c; display: flex; font-size: 12.2px; font-weight: 760; justify-content: center; left: var(--target-progress); line-height: 1; min-width: 0; overflow: hidden; padding: 0 9px 0 17px; position: absolute; right: 0; text-align: center; top: 0; z-index: 2; } .balance-spend-progress-remainder::before { background: linear-gradient(90deg, rgba(236,243,249,0), rgba(236,243,249,.46) 48%, rgba(236,243,249,.76) 76%, rgba(236,243,249,.9) 100%); bottom: 0; content: ""; left: -42px; pointer-events: none; position: absolute; top: 0; width: 56px; z-index: 0; } .balance-spend-progress-remainder-text { display: block; overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap; z-index: 1; } .balance-spend-target-edit { -webkit-backdrop-filter: var(--glass-blur); align-items: center; appearance: none; backdrop-filter: var(--glass-blur); background: var(--glass-action-clear); border: 1px solid var(--glass-border); border-radius: 11px; box-shadow: var(--glass-action-clear-shadow); color: var(--theme-blue-text); cursor: pointer; display: inline-flex; height: 34px; justify-content: center; padding: 0; position: relative; transition: box-shadow .18s ease, transform .18s ease; width: 38px; } .balance-spend-target-edit::before { content: ""; inset: -7px -5px; position: absolute; } .balance-spend-target-edit svg { height: 14px; stroke-width: 2; width: 14px; } .balance-spend-target-edit:active { box-shadow: 0 3px 10px rgba(31,45,61,.08), inset 0 1px 0 var(--glass-highlight); transform: scale(0.97); } .balance-spend-target-empty { align-items: center; appearance: none; background: var(--theme-surface-blue); border: 1px dashed #aac6e5; border-radius: 10px; color: #245b9f; display: inline-flex; font-size: 12px; font-weight: 720; gap: 7px; justify-content: center; min-height: 38px; padding: 0 14px; width: 100%; } .balance-spend-target-empty svg { height: 14px; width: 14px; } .target-editor-overlay { background: rgba(14, 23, 36, 0.34); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 180ms ease, visibility 0s linear 180ms; visibility: hidden; z-index: 150; } .target-editor { background: var(--theme-surface); border: 1px solid rgba(204, 216, 228, 0.78); border-radius: 20px 20px 0 0; bottom: 0; box-shadow: 0 -24px 60px rgba(15, 23, 42, 0.2); display: grid; gap: 16px; left: 50%; max-width: 460px; padding: 9px 18px calc(18px + env(safe-area-inset-bottom)); position: fixed; transform: translate3d(-50%, 110%, 0); transition: transform 210ms cubic-bezier(.22,.8,.25,1); width: min(100%, 460px); z-index: 160; } body.target-editor-open { overflow: hidden; } body.target-editor-open .target-editor-overlay { opacity: 1; pointer-events: auto; transition-delay: 0s; visibility: visible; } body.target-editor-open .target-editor { transform: translate3d(-50%, 0, 0); } .target-editor-handle { background: var(--theme-border-control); border-radius: 999px; height: 4px; justify-self: center; width: 38px; } .target-editor-head { align-items: center; display: flex; justify-content: space-between; min-width: 0; } .target-editor-head > div { display: grid; gap: 3px; min-width: 0; } .target-editor-kicker { color: var(--theme-blue-text); font-size: 10px; font-weight: 760; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .target-editor-head h2 { color: var(--theme-text-strong); font-size: 22px; font-weight: 780; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .target-editor-close { align-items: center; appearance: none; background: var(--theme-border-control); border: 0; border-radius: 999px; color: #52606f; display: inline-flex; font-size: 25px; font-weight: 350; height: 34px; justify-content: center; line-height: 1; padding: 0 0 3px; position: relative; width: 34px; } .target-editor-close::before { content: ""; inset: -5px; position: absolute; } .target-editor-current { align-items: center; background: linear-gradient(135deg, #f4f8fd 0%, #f8fbff 100%); border: 1px solid var(--theme-border); border-radius: 13px; display: grid; gap: 11px; grid-template-columns: 38px minmax(0, 1fr) max-content; min-width: 0; padding: 12px; } .target-editor-current-icon { align-items: center; background: var(--theme-surface-blue); border-radius: 10px; color: #2765aa; display: inline-flex; height: 38px; justify-content: center; width: 38px; } .target-editor-current-icon svg { height: 17px; width: 17px; } .target-editor-current-copy { display: grid; gap: 3px; min-width: 0; } .target-editor-current-copy strong { color: #1c2b3c; font-size: 13px; font-weight: 750; line-height: 1.08; } .target-editor-current-copy small { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 480; line-height: 1.22; } .target-editor-current-value { color: #173f73; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 780; white-space: nowrap; } .target-editor-form { display: grid; gap: 9px; } .target-editor-form > label { color: #273547; font-size: 12px; font-weight: 680; line-height: 1.1; } .target-editor-input-wrap { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 11px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 46px; overflow: hidden; transition: border-color 140ms ease, box-shadow 140ms ease; } .target-editor-input-wrap:focus-within { border-color: #4e91d1; box-shadow: 0 0 0 3px rgba(69, 139, 204, 0.13); } .target-editor-input-wrap > span { color: #516377; font-size: 16px; font-weight: 680; padding-left: 14px; } .target-editor-input-wrap input { appearance: none; background: transparent; border: 0; color: var(--theme-text-strong); font: inherit; font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 720; min-width: 0; outline: none; padding: 11px 14px 11px 5px; width: 100%; } .target-editor-input-wrap input::placeholder { color: var(--theme-text-muted); } .target-editor-help { color: var(--theme-text-muted); font-size: 10.8px; font-weight: 450; line-height: 1.3; } .target-editor-actions { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 2px; } .target-editor-save, .target-editor-auto { align-items: center; appearance: none; border-radius: 10px; display: inline-flex; font-size: 12.5px; font-weight: 740; height: 42px; justify-content: center; padding: 0 18px; } .target-editor-save { -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); background: var(--glass-action-blue); border: 1px solid var(--glass-action-blue-border); box-shadow: var(--glass-action-blue-shadow); color: var(--theme-on-accent); } .target-editor-auto { -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); background: var(--glass-action-clear); border: 1px solid var(--glass-border); box-shadow: var(--glass-action-clear-shadow); color: var(--theme-text-secondary); } .target-editor-auto[hidden] { display: none; } .target-editor-save:disabled, .target-editor-auto:disabled { cursor: wait; opacity: 0.62; } .target-editor-status { color: var(--theme-text-muted); font-size: 10.8px; font-weight: 520; line-height: 1.2; min-height: 13px; } .target-editor-status.is-error { color: #a43b45; } .target-editor-status.is-success { color: #176847; } .freshness-badge { align-items: center; color: var(--theme-green-strong); display: inline-flex; flex: 0 0 auto; font-size: 10.5px; font-weight: 650; gap: 5px; line-height: 1; white-space: nowrap; } .balance-card-head > .freshness-badge { position: absolute; right: 12px; top: 15px; } .freshness-badge.provider-balance-sync { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 400; gap: 4px; line-height: 1.15; } .freshness-dot { background: #10b981; border-radius: 999px; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); display: inline-block; height: 6px; width: 6px; } .sync-form { display: grid; gap: 5px; justify-items: end; margin: 0; } .sync-button-content { align-items: center; display: inline-flex; gap: 8px; justify-content: center; } .sync-button-spinner { animation: company-banking-spin 0.75s linear infinite; border: 2px solid rgba(255, 255, 255, 0.42); border-radius: 999px; border-top-color: var(--theme-on-accent); display: none; height: 15px; width: 15px; } .sync-form.is-syncing .sync-button-spinner { display: inline-block; } .sync-status { color: var(--theme-text-muted); font-size: 11px; line-height: 1.25; max-width: 112px; text-align: right; } .sync-form.is-synced .sync-status { color: var(--theme-text-muted); } .sync-status[hidden] { display: none; } .notification-button { appearance: none; align-items: center; background: transparent; border: 0; border-radius: 0; color: var(--theme-text-secondary); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 40px; justify-content: center; padding: 0; position: relative; width: 40px; } .notification-button svg { display: block; height: 18px; width: 18px; } .notification-button:disabled { cursor: default; opacity: 1; } .notification-badge { align-items: center; background: #ee2d18; border: 2px solid var(--theme-surface); border-radius: 999px; color: var(--theme-on-accent); display: inline-flex; font-size: 8.5px; font-weight: 900; height: 16px; justify-content: center; line-height: 1; min-width: 16px; padding: 0 3px; position: absolute; right: 5px; top: 4px; } .chat-global-button{align-items:center;appearance:none;background:transparent;border:0;color:var(--theme-text-secondary);cursor:pointer;display:inline-flex;flex:0 0 auto;height:40px;justify-content:center;padding:0;position:relative;width:40px} .chat-global-button svg,.chat-unread-toast-icon svg{display:block;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:20px} .chat-global-button.has-unread{color:#0b7ed0} .chat-global-badge{align-items:center;background:#ee2d18;border:2px solid var(--theme-surface);border-radius:999px;color:#fff;display:inline-flex;font-size:8.5px;font-weight:900;height:16px;justify-content:center;line-height:1;min-width:16px;padding:0 3px;position:absolute;right:3px;top:3px} .chat-global-badge[hidden],.chat-unread-overlay[hidden],.chat-unread-sheet[hidden],.chat-unread-toast[hidden]{display:none} .chat-unread-overlay{background:rgba(21,23,26,.42);inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .18s ease,visibility 0s linear .18s;visibility:hidden;z-index:130} .chat-unread-sheet{background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:18px 18px 0 0;bottom:0;box-shadow:0 -18px 42px rgba(22,28,35,.2);display:grid;gap:9px;left:50%;max-height:min(74dvh,560px);overflow:hidden;padding:8px 14px calc(14px + env(safe-area-inset-bottom));position:fixed;transform:translate3d(-50%,105%,0);transition:transform .2s ease;width:min(100%,520px);z-index:140} body.chat-unread-sheet-open .chat-unread-overlay{opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible} body.chat-unread-sheet-open .chat-unread-sheet{transform:translate3d(-50%,0,0)} .chat-unread-handle{background:var(--theme-border-control);border-radius:999px;height:4px;justify-self:center;width:36px} .chat-unread-head{align-items:center;display:flex;gap:12px;justify-content:space-between;padding:7px 0 3px} .chat-unread-head h2{color:var(--theme-text);font-size:16px;font-weight:850;line-height:1.1;margin:0} .chat-unread-head p{color:var(--theme-text-muted);font-size:11px;font-weight:680;line-height:1.3;margin:3px 0 0} .chat-unread-close{align-items:center;appearance:none;background:var(--theme-surface-muted);border:0;border-radius:999px;color:var(--theme-text-secondary);cursor:pointer;display:inline-grid;flex:0 0 auto;height:36px;place-items:center;position:relative;width:36px} .chat-unread-close::before,.chat-unread-close::after{background:currentColor;border-radius:999px;content:"";height:2px;position:absolute;width:14px}.chat-unread-close::before{transform:rotate(45deg)}.chat-unread-close::after{transform:rotate(-45deg)} .chat-unread-list{display:grid;gap:7px;max-height:min(52dvh,390px);overflow:auto;overscroll-behavior:contain;padding:1px;-webkit-overflow-scrolling:touch} .chat-unread-room{align-items:center;background:var(--theme-surface-subtle);border:1px solid var(--theme-border-soft);border-radius:11px;color:inherit;display:grid;gap:10px;grid-template-columns:42px minmax(0,1fr) auto;min-height:62px;padding:8px 9px;text-decoration:none} .chat-unread-room:active{background:var(--theme-surface-hover)} .chat-unread-avatar{align-items:center;background:var(--theme-surface-blue);border:1px solid var(--theme-border-blue);border-radius:999px;color:#0b7ed0;display:flex;font-size:11px;font-weight:850;height:42px;justify-content:center;object-fit:cover;width:42px} .chat-unread-room-copy{display:grid;gap:4px;min-width:0}.chat-unread-room-copy strong{color:var(--theme-text);font-size:13px;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-unread-room-copy small{color:var(--theme-text-muted);font-size:10.8px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat-unread-room-meta{align-items:end;display:grid;gap:4px;justify-items:end}.chat-unread-room-meta time{color:var(--theme-text-muted);font-size:9.5px;min-height:11px}.chat-unread-room-meta b{align-items:center;background:#0b7ed0;border-radius:999px;color:#fff;display:inline-flex;font-size:9px;height:19px;justify-content:center;line-height:1;min-width:19px;padding:0 5px}.chat-unread-room-meta span{color:#0b7ed0;font-size:10px;font-weight:800} .chat-unread-empty{color:var(--theme-text-muted);font-size:12px;line-height:1.4;margin:0;padding:24px 12px;text-align:center} .chat-unread-open-all{-webkit-backdrop-filter:blur(16px) saturate(1.35);align-items:center;backdrop-filter:blur(16px) saturate(1.35);background:var(--glass-action-blue);border:1px solid var(--glass-action-blue-border);border-radius:13px;box-shadow:var(--glass-action-blue-shadow);color:#fff;display:flex;font-size:12.5px;font-weight:820;height:42px;justify-content:center;text-decoration:none} .chat-unread-toast{align-items:center;background:var(--theme-surface);border:1px solid var(--theme-border-blue);border-radius:14px;box-shadow:0 14px 32px rgba(17,24,39,.22);color:inherit;display:grid;gap:10px;grid-template-columns:38px minmax(0,1fr) auto;left:50%;max-width:min(430px,calc(100vw - 28px));opacity:0;padding:9px 10px;position:fixed;text-decoration:none;top:calc(env(safe-area-inset-top) + 68px);transform:translate3d(-50%,-12px,0);transition:opacity .18s ease,transform .18s ease;width:max-content;z-index:125} .chat-unread-toast.is-visible{opacity:1;transform:translate3d(-50%,0,0)} .chat-unread-toast-icon{align-items:center;background:#0b7ed0;border-radius:11px;color:#fff;display:flex;height:38px;justify-content:center;width:38px}.chat-unread-toast-copy{display:grid;gap:3px;min-width:0}.chat-unread-toast-copy strong{color:var(--theme-text);font-size:12.5px;font-weight:820;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-unread-toast-copy small{color:var(--theme-text-muted);font-size:10.5px;line-height:1.2}.chat-unread-toast-action{color:#0b7ed0;font-size:10.5px;font-weight:850;padding:0 4px} .chat-global-button:focus-visible,.chat-unread-close:focus-visible,.chat-unread-room:focus-visible,.chat-unread-open-all:focus-visible,.chat-unread-toast:focus-visible{outline:3px solid rgba(15,118,110,.2);outline-offset:2px} .notification-sheet-overlay { background: rgba(21, 23, 26, 0.42); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 0.18s ease, visibility 0s linear 0.18s; visibility: hidden; z-index: 110; } .notification-sheet { background: var(--theme-surface); border-radius: 8px 8px 0 0; bottom: 0; box-shadow: 0 -18px 42px rgba(22, 28, 35, 0.18); display: grid; gap: 8px; left: 0; max-height: min(74dvh, 540px); overflow: hidden; padding: 8px 14px calc(14px + env(safe-area-inset-bottom)); position: fixed; right: 0; transform: translate3d(0, 105%, 0); transition: transform 0.2s ease; z-index: 120; } body.notification-sheet-open .notification-sheet-overlay { opacity: 1; pointer-events: auto; transition-delay: 0s; visibility: visible; } body.notification-sheet-open .notification-sheet { transform: translate3d(0, 0, 0); } .notification-sheet-handle { background: var(--theme-border-control); border-radius: 999px; height: 4px; justify-self: center; width: 36px; } .notification-sheet-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 8px 0 4px; } .notification-sheet-title { color: var(--theme-text); font-size: 15px; font-weight: 850; line-height: 1.1; } .notification-sheet-count { color: var(--theme-text-muted); font-size: 11px; font-weight: 700; line-height: 1.3; margin-top: 3px; } .notification-sheet-close { align-items: center; appearance: none; background: var(--theme-surface-muted); border: 0; border-radius: 999px; color: var(--theme-text-secondary); cursor: pointer; display: inline-grid; height: 34px; place-items: center; position: relative; width: 34px; } .notification-sheet-close::before, .notification-sheet-close::after { background: currentColor; border-radius: 999px; content: ""; height: 2px; position: absolute; width: 14px; } .notification-sheet-close::before { transform: rotate(45deg); } .notification-sheet-close::after { transform: rotate(-45deg); } .notification-sheet-close:focus-visible, .notification-button:focus-visible, .topbar-sync-button:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.2); outline-offset: 2px; } .notification-sheet-body { display: grid; gap: 12px; max-height: min(58dvh, 420px); overflow: auto; overscroll-behavior: contain; padding: 0 0 2px; -webkit-overflow-scrolling: touch; } .notification-sheet-section { display: grid; gap: 7px; } .notification-sheet-section-title { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 850; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; } .notification-alert-list { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; } .notification-update-list{display:grid;gap:7px;list-style:none;margin:0;padding:0} .notification-update-item{align-items:start;background:var(--theme-surface-subtle);border:1px solid var(--theme-border);border-radius:8px;display:grid;gap:8px;grid-template-columns:auto minmax(0,1fr) auto;padding:10px} .notification-update-item.is-unread,.notification-update-item.is-featured{background:var(--theme-surface-blue);border-color:var(--theme-border-blue);box-shadow:inset 3px 0 0 #0b7ed0} .notification-update-scope{background:var(--theme-surface-muted);border-radius:999px;color:var(--theme-text-tertiary);font-size:8.5px;font-weight:850;line-height:1;padding:5px 7px;text-transform:uppercase} .notification-update-item.is-fix .notification-update-scope{background:var(--theme-surface-red);color:var(--theme-red-text)} .notification-update-item.is-improvement .notification-update-scope{background:var(--theme-surface-blue);color:var(--theme-blue-text)} .notification-update-copy{display:grid;gap:3px;min-width:0} .notification-update-title{color:var(--theme-text);font-size:12.6px;font-weight:820;line-height:1.2} .notification-update-summary{color:var(--theme-text-muted);font-size:10.8px;line-height:1.35} .notification-update-meta {align-items:end;display:grid;gap:3px;justify-items: end;} .notification-update-version{color:var(--theme-text-muted);font-size:9.8px;font-weight:800;line-height:1.2;white-space:nowrap} .notification-update-date {color:var(--theme-text-muted);font-size:8.8px;font-weight:650;line-height:1.2;white-space: nowrap;} .notification-update-maintenance{border:1px solid var(--theme-border);border-radius:8px;padding:10px}.notification-update-maintenance summary{color:var(--theme-text-secondary);font-size:11px;font-weight:750}.notification-update-maintenance[open] summary{margin-bottom:7px} .notification-alert-item { align-items: center; background: var(--theme-surface-subtle); border: 1px solid var(--theme-border-soft); border-radius: 8px; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 55px; padding: 9px 10px; } .notification-event-history{display:grid;gap:8px}.notification-event-category.notification-update-maintenance{overflow:hidden;padding:0}.notification-event-category.notification-update-maintenance>summary{display:flex;justify-content:space-between;list-style:none;padding:10px}.notification-event-category>summary>small{background:var(--theme-surface-muted);border-radius:99px;padding:5px 7px}.notification-event-category[open]>summary{border-bottom:1px solid var(--theme-border-soft)}.notification-event-category>.notification-alert-list{padding:8px}.notification-event-category .notification-alert-item{display:block;padding:0}.notification-event-item>summary{list-style:none;padding:10px}.notification-event-item>summary>span{display:grid;gap:3px}.notification-event-item>summary strong{font-size:11.5px}.notification-event-item>summary small{color:var(--theme-text-muted);font-size:9.5px}.notification-event-item>p{margin:0;padding:8px 10px 3px}.notification-event-item>a{display:inline-block;margin:0 10px 9px} .notification-alert-item.is-info-required, .notification-alert-item.is-waiting-bank { background: var(--theme-surface-yellow); border-color: rgba(241, 210, 138, 0.9); } .notification-alert-item.is-released { background: var(--theme-surface-green-soft); border-color: rgba(15, 139, 104, 0.24); } .notification-alert-item.is-manual { background: var(--theme-surface-hover); border-color: rgba(69, 94, 82, 0.16); } .notification-alert-icon { align-items: center; display: inline-flex; height: 24px; justify-content: center; width: 24px; } .notification-alert-icon svg { display: block; height: 22px; width: 22px; } .notification-alert-image { border-radius: 6px; display: block; height: 28px; object-fit: contain; width: 28px; } .notification-alert-copy { display: grid; gap: 3px; min-width: 0; } .notification-alert-title { align-items: baseline; color: var(--theme-text); display: flex; font-size: 12.6px; font-weight: 800; gap: 7px; line-height: 1.15; min-width: 0; } .notification-alert-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification-alert-amount { color: var(--theme-text-tertiary); flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 760; white-space: nowrap; } .notification-alert-body { color: var(--theme-text-muted); font-size: 11.4px; font-weight: 620; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification-alert-state { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap; } .notification-alert-item.is-released .notification-alert-state { color: var(--theme-green-text); } .notification-empty { background: var(--theme-surface-subtle); border: 1px dashed var(--theme-border); border-radius: 8px; color: var(--theme-text-muted); font-size: 12px; font-weight: 650; line-height: 1.3; padding: 12px; text-align: center; } .release-popup-overlay[hidden] { display: none; } .release-popup-overlay { align-items: center; background: rgba(17, 24, 39, 0.48); display: flex; inset: 0; justify-content: center; opacity: 0; padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px); pointer-events: none; position: fixed; transition: opacity 0.2s ease; z-index: 130; } .release-popup-overlay.is-visible { opacity: 1; pointer-events: auto; } .release-popup-overlay.is-hiding { opacity: 0; pointer-events: none; } .release-popup { background: var(--theme-surface); border: 1px solid rgba(223, 229, 235, 0.96); border-radius: 8px; box-shadow: 0 24px 60px rgba(17, 24, 39, 0.24); color: var(--theme-text); display: grid; gap: 0; max-height: min(88dvh, 720px); max-width: 380px; overflow: hidden; position: relative; transform: translateY(10px) scale(0.98); transition: transform 0.22s ease; width: min(100%, 380px); } .release-popup-overlay.is-visible .release-popup { transform: translateY(0) scale(1); } .release-popup-close { align-items: center; appearance: none; background: rgba(255, 255, 255, 0.88); border: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12); color: var(--theme-text-secondary); cursor: pointer; display: inline-grid; height: 34px; place-items: center; position: absolute; right: 10px; top: 10px; width: 34px; z-index: 1; } .release-popup-close::before, .release-popup-close::after { background: currentColor; border-radius: 999px; content: ""; height: 2px; position: absolute; width: 14px; } .release-popup-close::before { transform: rotate(45deg); } .release-popup-close::after { transform: rotate(-45deg); } .release-popup-close:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.22); outline-offset: 2px; } .release-popup-image { aspect-ratio: 1 / 1; background: transparent; display: block; object-fit: contain; width: 100%; } .release-popup-copy { background: linear-gradient(180deg, #f6f7f4 0%, #eef2ef 100%); border-top: 1px solid var(--theme-border); display: grid; gap: 6px; padding: 18px 18px 20px; } .release-popup.has-no-image .release-popup-copy { border-top: 0; } .release-popup-title { color: #07130f; font-size: 25px; font-weight: 900; letter-spacing: 0; line-height: 1.02; overflow-wrap: anywhere; } .release-popup-detail { color: #137257; font-size: 13px; font-weight: 760; line-height: 1.3; } .account-settings { align-content: start; display: grid; gap: 12px; margin: 0; padding: 0; } .account-settings-head { align-items: start; display: flex; gap: 10px; justify-content: space-between; } .account-settings-head:has(.account-status:empty) { display: none; } .account-status { color: var(--theme-text-muted); font-size: 12px; font-weight: 700; line-height: 1.3; text-align: right; } .account-status.is-error { color: var(--theme-pink-text); } .account-status.is-success { color: var(--theme-green-strong); } .account-overview { display: grid; gap: 7px; min-width: 0; } .account-overview[hidden], .account-detail-panel[hidden] { display: none !important; } .account-field { display: grid; gap: 5px; min-width: 0; } .account-field-label { color: var(--theme-text-muted); font-size: 12px; font-weight: 720; line-height: 1.2; } .account-settings .account-input { font-size: 13px; min-height: 38px; padding: 0 10px; } .account-input[readonly] { background: var(--theme-surface-muted); color: var(--theme-text-muted); } .account-setting-list { display: grid; gap: 6px; } .account-setting-row { align-items: center; appearance: none; background: var(--theme-surface); border: 0; border-radius: 8px; color: var(--theme-text); cursor: pointer; display: grid; font-family: inherit; gap: 10px; grid-template-columns: 36px minmax(0, 1fr) 18px; min-height: 52px; padding: 7px 10px; text-align: left; width: 100%; } .account-setting-row-static { cursor: default; } .account-setting-row:focus-visible { outline: 3px solid rgba(48, 58, 69, 0.18); outline-offset: 2px; } .account-setting-icon { align-items: center; background: var(--theme-surface-muted); border-radius: 8px; color: var(--theme-text-secondary); display: inline-flex; height: 34px; justify-content: center; width: 34px; } .account-setting-icon svg { height: 17px; width: 17px; } .account-setting-copy { display: grid; gap: 3px; min-width: 0; } .account-setting-title { font-size: 13px; font-weight: 780; line-height: 1.16; } .account-setting-subtitle { color: var(--theme-text-muted); display: -webkit-box; font-size: 11.5px; font-weight: 620; line-height: 1.3; min-width: 0; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .account-setting-arrow, .account-setting-lock { color: var(--theme-text-muted); display: inline-grid; height: 18px; place-items: center; width: 18px; } .account-setting-arrow svg, .account-setting-lock svg { height: 16px; width: 16px; } .native-pin-row { grid-template-columns: 36px minmax(0, 1fr) auto; } [data-native-pin-state] { font-size: 11px; min-width: 36px; text-align: center; white-space: nowrap; width: auto; } .account-detail-panel { display: grid; gap: 10px; min-width: 0; } .account-actions { align-items: center; display: flex; gap: 10px; justify-content: flex-end; } .account-settings .account-save-button { background: #303a45; border-radius: 7px; color: var(--theme-on-accent); font-size: 13px; font-weight: 760; min-height: 34px; padding: 0 13px; } .account-logout { font-size: 13px; grid-template-columns: 30px minmax(0, 1fr); margin-top: 7px; min-height: 46px; padding: 0 12px; } .account-logout .drawer-footer-icon, .account-logout .drawer-footer-icon svg { height: 22px; width: 22px; } .notification-settings{align-content:start;color:var(--theme-text-secondary);display:grid;gap:10px;margin:14px 0 0;padding:14px} .notification-settings-head{align-items:start;display:flex;gap:10px;justify-content:space-between} .notification-settings h2{font-size:15px;line-height:1.2;margin:0} .notification-status{align-items:center;background:var(--theme-surface-green);border-radius:999px;color:#5f6a72;display:inline-flex;font-size:11.5px;font-weight:560;justify-content:center;line-height:1;min-height:22px;padding:0 8px;text-align:right} .notification-status.is-error{background:var(--theme-surface-red);color:#b4233c} .notification-status.is-success{background:var(--theme-surface-green);color:var(--theme-green-text)} .notification-option,.notification-company-option{align-items:center;color:var(--theme-text-secondary);display:flex;gap:10px;line-height:1.25;min-width:0} .notification-option{font-size:13px;font-weight:560}.notification-company-option{font-size:12.5px;font-weight:520} .notification-option input, .notification-company-option input { appearance:none;background:var(--theme-surface);border:1.25px solid var(--theme-border);border-radius:4px;color:var(--theme-on-accent);display:inline-grid;flex:0 0 auto;height: 18px;margin:0;min-height: 18px;place-items:center;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;width:18px; } .notification-company-option input { height: 17px; min-height: 17px; width: 17px; } .notification-option input::after,.notification-company-option input::after{border:solid currentColor;border-width:0 2px 2px 0;content:"";display:block;height:8px;opacity:0;transform:rotate(45deg) translate(-1px,-1px);width:4px} .notification-option input:checked,.notification-company-option input:checked{background:#238477;border-color:#238477} .notification-option input:checked::after,.notification-company-option input:checked::after{opacity:1} .notification-option input:disabled,.notification-company-option input:disabled{background:var(--theme-surface-muted);border-color:var(--theme-border);cursor:default} .notification-option input:disabled:checked,.notification-company-option input:disabled:checked{background:#a9c7bf;border-color:#a9c7bf} .notification-option input:not(:disabled),.notification-company-option input:not(:disabled){cursor:pointer} .notification-option input:focus-visible,.notification-company-option input:focus-visible{box-shadow:0 0 0 3px rgba(35,132,119,.18);outline:0} .notification-option:has(input:disabled),.notification-company-option:has(input:disabled){color:var(--theme-text-muted)} .notification-option-primary{align-items:center;display:grid;grid-template-columns:minmax(0,1fr) auto auto;justify-content:stretch} .notification-option-copy{align-items:center;display:flex;gap:9px;min-width:0} .notification-option-copy span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .notification-chat-option .notification-option-copy { display: grid; flex: 1; gap: 2px; } .notification-category-settings{min-width:0}.notification-event-option{align-items:start}.notification-event-option .notification-option-copy{display:grid;flex:1;gap:2px}.notification-event-option .notification-option-copy>span{white-space:normal}.notification-event-option small{font-size:11px;line-height:1.3} .notification-category-settings { background:var(--theme-surface); border:1px solid var(--theme-border); border-radius:10px; overflow:hidden; } .notification-category-settings>summary { align-items:center; color:var(--theme-text-strong); cursor:pointer; display:flex; font-size:12px; font-weight:780; justify-content:space-between; list-style:none; padding:10px; } .notification-category-settings>summary::-webkit-details-marker { display:none; } .notification-category-settings>summary small { align-items:center; background:var(--theme-surface-muted); border-radius:999px; display:flex; font-size:9px; height:22px; justify-content:center; min-width:22px; } .notification-category-settings>div { border-top:1px solid var(--theme-border-soft); display:grid; gap:9px; padding:10px; } .notification-option-primary .notification-option-copy span { color: var(--theme-text); font-weight: 620; } .notification-option-primary .notification-status { white-space: nowrap; } .notification-master-card { background: linear-gradient(135deg, #f3f8fc, #f8fbfd); border: 1px solid var(--theme-border); border-radius: 10px; gap: 8px; min-height: 52px; padding: 8px 10px; } .notification-master-card > input { background: var(--theme-border-control); border: 0; border-radius: 999px; height: 22px; min-height: 22px; padding: 2px; width: 38px; } .notification-master-card > input::after { background: var(--theme-surface); border: 0; border-radius: 999px; box-shadow: 0 1px 3px rgba(30, 41, 59, 0.24); height: 18px; justify-self: start; opacity: 1; transform: none; transition: transform 0.16s ease; width: 18px; } .notification-master-card > input:checked { background: #0b72b9; border-color: var(--theme-blue-text); } .notification-master-card > input:checked::after { transform: translateX(16px); } .notification-filter-list, .notification-scope-section { background: var(--theme-surface); border: 1px solid var(--theme-border-raised); border-radius: 10px; display: grid; gap: 7px; padding: 10px; } .notification-filter-title { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 760; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; } .notification-option-all, .notification-option-apply-all { background: var(--theme-surface-soft); border-radius: 8px; min-height: 40px; padding: 0 9px; } .notification-direction-grid { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .notification-direction-grid .notification-option { background: var(--theme-surface-muted); border: 1px solid var(--theme-border); border-radius: 8px; min-height: 42px; padding: 6px 8px; } .notification-keyword-field { display: grid; gap: 6px; } .notification-keyword-input { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-secondary); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.4; min-height: 52px; padding: 9px 10px; resize: vertical; width: 100%; } .notification-keyword-input::placeholder { color: var(--theme-text-muted); font-weight: 500; } .notification-keyword-input:disabled { background: var(--theme-surface-raised); border-color: var(--theme-border-soft); color: var(--theme-text-muted); } .notification-filter-list.is-disabled .notification-filter-title { color: var(--theme-text-muted); opacity: 0.72; } .notification-filter-list.is-disabled .notification-direction-grid, .notification-filter-list.is-disabled .notification-keyword-field { display: none; } .notification-company-list { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 220px; overflow: auto; overscroll-behavior: contain; padding-top: 1px; } .notification-company-list:has(input:disabled) { display: none; } .notification-company-option { background: var(--theme-surface-muted); border: 1px solid var(--theme-border); border-radius: 8px; min-height: 38px; padding: 5px 8px; } .notification-company-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification-actions { align-items: center; background: linear-gradient(rgba(255, 255, 255, 0), #fff 28%); bottom: -12px; display: flex; gap: 10px; justify-content: flex-end; margin: 0; padding: 16px 0 12px; position: sticky; z-index: 2; } .notification-settings .button { background: var(--glass-action-blue); border-radius: 13px; box-shadow: var(--glass-action-blue-shadow); color: var(--theme-on-accent); font-size: 13px; font-weight: 700; min-height: 44px; padding: 0 18px; width: 100%; } .label { color: var(--theme-text-muted); font-size: 12px; font-weight: 700; margin-bottom: 5px; } .value { font-size: 21px; font-weight: 800; line-height: 1.12; overflow-wrap: anywhere; } .subvalue { color: var(--theme-text-muted); font-size: 12px; line-height: 1.35; margin-top: 5px; } .held-funds-notice { align-items: center; background: var(--theme-surface-yellow); border-color: var(--theme-border-orange); box-shadow: none; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 48px; overflow: hidden; padding: 8px 9px 8px 11px; } .held-funds-notice[hidden] { display: none; } .held-funds-notice.is-released { background: var(--theme-surface-green-soft); border-color: rgba(15, 139, 104, 0.28); } .held-funds-warning-icon { align-items: center; color: #d99713; display: inline-flex; height: 25px; justify-content: center; width: 25px; } .held-funds-warning-icon svg { display: block; height: 22px; width: 22px; } .held-funds-copy { display: grid; gap: 3px; min-width: 0; } .held-funds-title { align-items: baseline; color: var(--theme-text); display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 760; gap: 5px; letter-spacing: 0; line-height: 1.15; min-width: 0; } .held-funds-separator { color: var(--theme-text-muted); font-weight: 760; } .held-funds-amount { color: var(--theme-text-tertiary); display: inline-flex; flex: 0 0 auto; font-size: inherit; font-variant-numeric: tabular-nums; font-weight: 720; letter-spacing: 0; line-height: 1; white-space: nowrap; } .held-funds-detail { color: var(--theme-text-muted); font-size: 11.5px; font-weight: 630; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .held-funds-dismiss { align-items: center; appearance: none; background: rgba(255, 255, 255, 0.72); border: 0; border-radius: 999px; color: var(--theme-text-muted); cursor: pointer; display: inline-grid; height: 26px; place-items: center; position: relative; width: 26px; } .held-funds-dismiss::before, .held-funds-dismiss::after { background: currentColor; border-radius: 999px; content: ""; height: 2px; position: absolute; width: 12px; } .held-funds-dismiss::before { transform: rotate(45deg); } .held-funds-dismiss::after { transform: rotate(-45deg); } .held-funds-dismiss:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.2); outline-offset: 2px; } .companies-summary { --companies-summary-fixed-width: 188px; --companies-summary-inline-pad: 12px; --companies-summary-row-height: 42px; display: grid; grid-template-columns: var(--companies-summary-fixed-width) minmax(0, 1fr); overflow: hidden; } .companies-summary-empty { grid-column: 1 / -1; padding: 14px var(--companies-summary-inline-pad); } .companies-summary-fixed { background: var(--theme-surface); box-shadow: 10px 0 14px -16px rgba(17, 24, 39, 0.52); min-width: 0; position: relative; z-index: 2; } .companies-summary-fixed-head, .companies-summary-head-stats { align-items: center; background: var(--theme-surface-subtle); border-bottom: 1px solid var(--theme-border-soft); color: var(--theme-text-muted); display: grid; font-size: 10.5px; font-weight: 850; letter-spacing: 0; min-height: 34px; text-transform: uppercase; } .companies-summary-fixed-head { display: flex; padding: 8px 10px 8px var(--companies-summary-inline-pad); } .companies-summary-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .companies-summary-scroll:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.18); outline-offset: -3px; } .companies-summary-scroll::-webkit-scrollbar { height: 5px; } .companies-summary-scroll::-webkit-scrollbar-thumb { background: rgba(104, 113, 125, 0.32); border-radius: 999px; } .companies-summary-stats-table { min-width: 420px; } .companies-summary-head-stats, .company-summary-stats-row { display: grid; gap: 8px; grid-template-columns: minmax(92px, 0.9fr) minmax(84px, 0.85fr) minmax(120px, 1fr) minmax(34px, 0.32fr); } .companies-summary-head-stats { padding: 8px var(--companies-summary-inline-pad) 8px 0; } .companies-summary-head-stats span, .company-summary-stat { min-width: 0; text-align: right; } .companies-summary-head-short, .company-summary-value-compact { display: none; } .company-summary-fixed-cell, .company-summary-stats-row { border-bottom: 1px solid var(--theme-border-soft); color: inherit; min-height: var(--companies-summary-row-height); text-decoration: none; -webkit-tap-highlight-color: transparent; } .company-summary-fixed-cell { align-items: center; display: flex; padding: 5px 10px 5px var(--companies-summary-inline-pad); } .company-summary-fixed-name { color: var(--theme-text); display: block; font-size: 13px; font-weight: 800; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-summary-stats-row { align-items: center; padding: 5px var(--companies-summary-inline-pad) 5px 0; } .company-summary-fixed-cell:last-child, .company-summary-stats-row:last-child { border-bottom: 0; } .company-summary-fixed-cell:hover, .company-summary-stats-row:hover { background: var(--theme-surface-subtle); } .company-summary-fixed-cell:active, .company-summary-stats-row:active { background: var(--theme-surface-green); } .company-summary-fixed-cell:focus-visible, .company-summary-stats-row:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.18); outline-offset: -3px; } .company-summary-label { display: none; } .company-summary-value { color: var(--theme-text); display: block; font-size: 12.5px; font-weight: 640; line-height: 1.2; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; } .company-summary-value.received { color: var(--theme-green-strong); font-weight: 650; } .company-summary-value.progress { color: var(--theme-deep-indigo-text); font-weight: 690; } .companies-summary-controls { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(180px, 1fr) auto auto; margin: -2px 0 9px; } .companies-summary-search, .all-transactions-search { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; display: flex; min-width: 0; } .companies-summary-search input, .all-transactions-search input { appearance: none; background: transparent; border: 0; color: var(--theme-text); font: inherit; font-size: 12.5px; min-height: 38px; min-width: 0; outline: 0; padding: 0 11px; width: 100%; } .companies-summary-search:focus-within, .all-transactions-search:focus-within { border-color: #7fb8ae; box-shadow: 0 0 0 3px rgba(35, 132, 119, 0.12); } .companies-summary-sort { appearance: none; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-secondary); font: inherit; font-size: 12px; min-height: 38px; padding: 0 30px 0 11px; } .companies-summary-result-count, .all-transactions-result-count { color: var(--theme-text-muted); font-size: 11.5px; white-space: nowrap; } .company-summary-mobile-list { display: none; } .company-summary-fixed-cell { gap: 7px; } .company-summary-attention { border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: 9px; font-weight: 720; line-height: 1; padding: 4px 6px; white-space: nowrap; } .company-summary-attention.is-red { background: var(--theme-surface-red); color: #ad273f; } .company-summary-attention.is-amber { background: var(--theme-surface-orange); color: #825d15; } .company-summary-attention.is-slate { background: var(--theme-surface-muted); color: #5f6873; } .company-summary-attention.is-green { background: var(--theme-surface-green); color: #16705d; } .all-transactions-tools { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(220px, 1fr) auto; margin: -2px 0 9px; } .all-transactions-empty[hidden], .companies-summary-filter-empty[hidden] { display: none; } [data-company-summary-row][hidden], [data-transaction-searchable][hidden], [data-transaction-search-group][hidden] { display: none; } .vat-dashboard-shell { padding-bottom: 34px; } .vat-dashboard-page .metrics { gap: 8px; margin-bottom: 10px; } .vat-dashboard-page .metric { border-radius: 8px; box-shadow: 0 3px 10px rgba(22, 28, 35, 0.026); padding: 10px 11px; } .vat-dashboard-page .metric.wide { padding: 12px 13px; } .vat-dashboard-page .label { color: var(--theme-text-muted); font-size: 11.8px; font-weight: 590; letter-spacing: 0; } .vat-dashboard-page .value { color: var(--theme-text-strong); font-size: 23px; font-weight: 690; letter-spacing: 0; line-height: 1.05; } .vat-dashboard-page .subvalue { color: var(--theme-text-muted); font-size: 11.5px; font-weight: 420; line-height: 1.28; margin-top: 5px; } .vat-dashboard-page .vat-metric-mtd { display: grid; gap: 1px; margin-top: 6px; padding-left: 1px; } .vat-dashboard-page .vat-metric-mtd-main { color: var(--theme-text-tertiary); } .vat-dashboard-page .vat-metric-mtd-count { color: var(--theme-text-muted); display: block; } .vat-status-pill { align-items: center; background: transparent; border: 0; border-radius: 0; display: inline-flex; font-size: 10.2px; font-weight: 590; line-height: 1.1; min-height: 0; padding: 0; white-space: nowrap; } .vat-status-pill.is-red { color: #8d3b45; } .vat-status-pill.is-green { color: #24674d; } .vat-status-pill.is-blue { color: #3f5f82; } .vat-status-pill.is-purple { color: #6b4ab7; } .vat-status-pill.is-amber { color: #76572a; } .vat-status-pill.is-slate { color: #5d6671; } .vat-metric .value { font-size: 16.8px; font-weight: 650; } .vat-metric-status { align-items: center; display: flex; gap: 8px; justify-content: space-between; min-width: 0; } .vat-metric-status .value { min-width: 0; overflow-wrap: anywhere; } .vat-workflow-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 10px; } .vat-workflow-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 9px rgba(22, 28, 35, 0.022); display: grid; gap: 4px; min-width: 0; padding: 9px 10px; } .vat-workflow-label { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 560; line-height: 1.15; } .vat-workflow-value { color: var(--theme-text); font-size: 18px; font-weight: 650; line-height: 1; } .vat-workflow-meta { color: var(--theme-text-muted); font-size: 10.8px; font-weight: 450; line-height: 1.25; } .vat-workflow-card.is-red .vat-workflow-value { color: #8d3b45; } .vat-workflow-card.is-green .vat-workflow-value { color: #24674d; } .vat-workflow-card.is-amber .vat-workflow-value { color: #76572a; } .vat-readiness-card { display: grid; gap: 8px; margin: 0 0 10px; padding: 12px; } .vat-readiness-body { align-items: center; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr); } .vat-lock-icon { align-items: center; background: var(--theme-surface-soft); border: 1px solid var(--theme-border); border-radius: 9px; color: var(--theme-text-soft); display: inline-grid; height: 34px; place-items: center; width: 34px; } .vat-lock-icon svg { height: 18px; width: 18px; } .vat-readiness-title { color: var(--theme-text); font-size: 13.5px; font-weight: 660; line-height: 1.15; } .vat-readiness-copy { color: var(--theme-text-muted); font-size: 11.6px; line-height: 1.3; margin-top: 3px; } .vat-companies-summary, .vat-period-list { overflow: hidden; } .vat-company-head, .vat-company-row { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1.35fr) minmax(112px, 0.86fr) minmax(0, 1.1fr) minmax(92px, 0.78fr); } .vat-company-head { background: var(--theme-surface-subtle); border-bottom: 1px solid var(--theme-border-soft); color: var(--theme-text-muted); font-size: 10.5px; font-weight: 700; padding: 8px 12px; text-transform: uppercase; } .vat-company-row { border-bottom: 1px solid var(--theme-border-soft); color: inherit; min-height: 50px; padding: 8px 11px; text-decoration: none; -webkit-tap-highlight-color: transparent; } .vat-company-row.is-blocking, .vat-period-row.is-blocking { background: var(--theme-surface-red); } .vat-company-row:last-child { border-bottom: 0; } .vat-company-name, .vat-period-title { color: var(--theme-text); font-size: 12.7px; font-weight: 620; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vat-company-detail, .vat-period-meta { color: var(--theme-text-muted); font-size: 11px; font-weight: 450; line-height: 1.25; margin-top: 3px; overflow-wrap: anywhere; } .vat-company-period, .vat-company-outstanding { color: var(--theme-text-secondary); font-size: 11.7px; font-weight: 590; line-height: 1.2; overflow-wrap: anywhere; } .vat-company-period-line { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .vat-company-period-badge { background: var(--theme-surface-muted); color: var(--theme-text-muted); flex: 0 0 auto; } .vat-company-outstanding { text-align: right; white-space: nowrap; } .vat-period-row { align-items: center; border-bottom: 1px solid var(--theme-border-soft); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(88px, 0.32fr); min-height: 58px; padding: 9px 12px; } .vat-period-row:last-child { border-bottom: 0; } .vat-period-amount { color: var(--theme-text-secondary); font-size: 12px; font-weight: 590; text-align: right; white-space: nowrap; } .vat-single-stack { display: grid; gap: 11px; margin-top: 11px; } .vat-current-period-card { border-radius: 8px; box-shadow: 0 3px 10px rgba(21, 27, 34, 0.026); display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 13px 14px 14px; } .vat-current-icon { align-items: center; background: var(--theme-surface-green); border-radius: 9px; color: #23796d; display: none; height: 44px; justify-content: center; width: 44px; } .vat-current-icon svg { display: block; height: 22px; stroke-width: 1.9; width: 22px; } .vat-period-icon, .vat-upcoming-icon, .vat-tracker-icon { align-items: center; border-radius: 999px; display: inline-grid; flex: 0 0 auto; height: 48px; place-items: center; width: 48px; } .vat-period-icon { background: var(--theme-surface-green); color: var(--theme-green-text); } .vat-upcoming-icon.is-green, .vat-tracker-icon.is-green { background: var(--theme-surface-green); color: var(--theme-green-strong); } .vat-upcoming-icon.is-blue, .vat-tracker-icon.is-blue { background: var(--theme-surface-selected); color: var(--theme-indigo-text); } .vat-upcoming-icon.is-amber, .vat-tracker-icon.is-amber { background: var(--theme-surface-orange-soft); color: var(--theme-orange-text); } .vat-upcoming-icon.is-red, .vat-tracker-icon.is-red { background: var(--theme-surface-red); color: var(--theme-red-text); } .vat-upcoming-icon.is-slate, .vat-tracker-icon.is-slate { background: var(--theme-surface-soft); color: var(--theme-text-soft); } .vat-period-icon svg, .vat-upcoming-icon svg, .vat-tracker-icon svg { height: 22px; width: 22px; } .vat-current-copy { display: grid; gap: 9px; min-width: 0; } .vat-current-head { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; min-width: 0; } .vat-current-label { color: var(--theme-text-muted); font-size: 11px; font-weight: 560; line-height: 1.1; } .vat-current-primary { align-items: start; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) max-content; min-width: 0; } .vat-current-period-value { color: var(--theme-text-strong); font-size: 21px; font-weight: 660; letter-spacing: 0; line-height: 1.02; overflow-wrap: anywhere; } .vat-current-amount-block { display: grid; justify-items: end; min-width: 0; text-align: right; } .vat-current-amount-value { color: var(--theme-text-strong); display: block; font-size: 21px; font-weight: 660; letter-spacing: 0; line-height: 1.02; overflow-wrap: anywhere; white-space: nowrap; } .vat-current-meta { color: var(--theme-text-muted); font-size: 11px; font-weight: 450; line-height: 1.18; overflow-wrap: anywhere; } .vat-readiness-panel, .vat-upcoming-panel, .vat-tracker-panel, .vat-history-panel { display: grid; gap: 13px; padding: 13px; } .vat-panel-head { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; min-width: 0; } .vat-panel-head h2 { color: var(--theme-text); font-size: 15px; font-weight: 780; line-height: 1.1; margin: 0; } .vat-panel-note { color: var(--theme-text-muted); font-size: 11px; font-weight: 590; line-height: 1.2; text-align: right; } .vat-readiness-panel { gap: 11px; } .vat-readiness-lock-row { align-items: center; display: grid; gap: 10px; grid-template-columns: 38px minmax(0, 1fr) auto; min-width: 0; } .vat-readiness-panel .vat-lock-icon { height: 38px; width: 38px; } .vat-upcoming-timeline { align-items: start; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; } .vat-upcoming-timeline::before { background: repeating-linear-gradient(90deg, #cbd5df 0 4px, transparent 4px 9px); content: ""; height: 2px; left: 18%; position: absolute; right: 18%; top: 25px; z-index: 0; } .vat-upcoming-item { align-items: center; display: grid; gap: 7px; justify-items: center; min-width: 0; position: relative; text-align: center; z-index: 1; } .vat-upcoming-value { color: var(--theme-text); font-size: 13.4px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; } .vat-upcoming-label { color: var(--theme-text-secondary); font-size: 11.2px; font-weight: 590; line-height: 1.2; } .vat-tracker-grid { border-top: 1px solid var(--theme-border-soft); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .vat-tracker-stat { align-content: center; display: grid; gap: 8px; justify-items: center; min-height: 96px; min-width: 0; padding: 12px 11px; text-align: center; } .vat-tracker-stat + .vat-tracker-stat { border-left: 1px solid var(--theme-border-soft); } .vat-tracker-label { color: var(--theme-text-secondary); font-size: 11.2px; font-weight: 620; line-height: 1.15; } .vat-tracker-value { color: var(--theme-text); font-size: 15px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; } .vat-history-panel { background: transparent; border: 0; box-shadow: none; gap: 7px; padding: 0; } .vat-history-panel .vat-panel-head { padding: 0 1px; } .vat-history-panel .vat-panel-head h2 { font-size: 14.4px; font-weight: 610; line-height: 1.1; } .vat-history-panel .vat-panel-note { font-size: 11.3px; font-weight: 430; } .vat-history-list { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 9px rgba(21, 27, 34, 0.022); display: grid; overflow: hidden; } .vat-history-table-head, .vat-history-row { align-items: center; display: grid; gap: 7px; grid-template-columns: minmax(78px, 1.05fr) minmax(68px, 0.74fr) minmax(76px, 0.86fr) minmax(62px, 0.7fr); } .vat-history-table-head { background: var(--theme-surface-subtle); border-bottom: 1px solid var(--theme-border-soft); color: var(--theme-text-muted); font-size: 9.7px; font-weight: 540; line-height: 1; padding: 7px 9px; } .vat-history-row { border-bottom: 1px solid var(--theme-border-soft); min-height: 44px; padding: 7px 9px; } .vat-history-row.is-current { background: var(--theme-surface); } .vat-history-row:last-child { border-bottom: 0; } .vat-history-period-cell { display: grid; gap: 3px; min-width: 0; } .vat-history-status-cell { min-width: 0; } .vat-history-status-cell .vat-status-pill { background: var(--theme-surface-soft); border: 1px solid var(--theme-border); border-radius: 6px; font-size: 9.3px; font-weight: 540; justify-content: center; line-height: 1.05; max-width: 100%; min-height: 19px; padding: 0 6px; white-space: normal; } .vat-history-status-cell .vat-status-pill.is-green { background: var(--theme-surface-green); border-color: var(--theme-border-green); color: #2a6d53; } .vat-history-status-cell .vat-status-pill.is-amber { background: var(--theme-surface-orange-soft); border-color: var(--theme-border-orange); color: #755326; } .vat-history-status-cell .vat-status-pill.is-blue { background: var(--theme-surface-selected); border-color: var(--theme-border-blue); color: #31599a; } .vat-history-status-cell .vat-status-pill.is-purple { background: var(--theme-surface-purple); border-color: var(--theme-border-purple); color: #6b4ab7; } .vat-history-status-cell .vat-status-pill.is-red { background: var(--theme-surface-red); border-color: var(--theme-border-red); color: #8b3740; } .vat-history-period { color: #182131; font-size: 11.8px; font-weight: 580; line-height: 1.12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vat-history-meta { color: var(--theme-text-muted); font-size: 10.7px; font-weight: 410; line-height: 1.2; overflow-wrap: anywhere; } .vat-history-details { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .vat-history-detail { align-items: center; background: transparent; border: 0; border-radius: 0; color: var(--theme-text-muted); display: inline-flex; font-size: 9.4px; font-weight: 420; line-height: 1.08; max-width: 100%; min-height: 0; padding: 0; } .vat-history-amount-cell { display: grid; gap: 3px; min-width: 0; } .vat-history-amount { color: var(--theme-text-secondary); font-size: 10.8px; font-weight: 540; line-height: 1.08; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .vat-history-amount-note { color: #2d6c55; font-size: 9.4px; font-weight: 420; line-height: 1.08; overflow-wrap: anywhere; } .vat-history-review { color: var(--theme-text-tertiary); font-size: 10.2px; font-weight: 420; line-height: 1.12; overflow-wrap: anywhere; text-align: left; } .vat-history-review.is-green { color: #2d6c55; } .vat-history-review.is-amber { color: #9a6422; } .vat-history-review.is-pink { color: #a4446d; } .vat-history-review.is-slate { color: var(--theme-text-tertiary); } .vat-history-row.is-refund .vat-history-amount { color: #2f7164; } .vat-history-row.is-payable .vat-history-amount { color: #74582f; } .vat-history-row.is-nil .vat-history-amount { color: var(--theme-text-muted); } .shipments-dashboard-shell { padding-bottom: 34px; } .shipments-page-head { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 10px rgba(22, 28, 35, 0.026); display: grid; gap: 12px; grid-template-columns: 48px minmax(0, 1fr); margin: 9px 0 9px; min-width: 0; padding: 13px; position: relative; } .shipments-page-head::before { background: #f97316; content: ""; height: 2px; inset: 0 0 auto; opacity: 0.9; position: absolute; } .shipments-head-icon { align-items: center; background: var(--theme-surface-orange); border: 1px solid var(--theme-border-orange); border-radius: 8px; color: #ea580c; display: inline-grid; height: 48px; place-items: center; width: 48px; } .shipments-head-icon svg { height: 24px; width: 24px; } .shipments-head-copy { display: grid; gap: 3px; min-width: 0; } .shipments-kicker { color: var(--theme-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1.08; text-transform: uppercase; } .shipments-page-head h1 { color: var(--theme-text); font-size: 21px; font-weight: 760; letter-spacing: 0; line-height: 1.05; margin: 0; min-width: 0; overflow-wrap: anywhere; } .shipments-head-meta { color: var(--theme-text-muted); font-size: 11.6px; font-weight: 450; line-height: 1.24; overflow-wrap: anywhere; } .shipments-kpi-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 9px; } .shipments-kpi { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 9px rgba(22, 28, 35, 0.022); display: grid; gap: 5px; min-height: 78px; min-width: 0; padding: 10px; } .shipments-kpi-label { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 590; line-height: 1.12; } .shipments-kpi-value { color: var(--theme-text); font-size: 18px; font-weight: 760; line-height: 1.02; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shipments-kpi-meta { color: var(--theme-text-muted); font-size: 10.6px; font-weight: 440; line-height: 1.18; overflow-wrap: anywhere; } .shipments-kpi.is-green .shipments-kpi-value { color: var(--theme-green-strong); } .shipments-kpi.is-amber .shipments-kpi-value { color: var(--theme-orange-text); } .shipments-kpi.is-red .shipments-kpi-value { color: var(--theme-red-text); } .shipments-notice { align-items: center; background: var(--theme-surface-orange); border: 1px solid var(--theme-border-orange); border-radius: 8px; color: #704a18; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr); margin: 0 0 9px; padding: 10px 11px; } .shipments-notice-icon { align-items: center; background: var(--theme-surface-yellow); border-radius: 8px; display: inline-grid; height: 34px; place-items: center; width: 34px; } .shipments-notice-icon svg { height: 18px; width: 18px; } .shipments-notice-title { color: #5f3f13; font-size: 12.8px; font-weight: 720; line-height: 1.12; } .shipments-notice-copy { color: #7a5928; font-size: 11.4px; font-weight: 450; line-height: 1.26; margin-top: 2px; overflow-wrap: anywhere; } .shipments-tabs { display: grid; gap: 7px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 9px; } .shipments-tab { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-tertiary); display: flex; font-size: 11px; font-weight: 680; gap: 5px; justify-content: center; line-height: 1; min-height: 34px; min-width: 0; padding: 0 8px; text-align: center; text-decoration: none; white-space: nowrap; } .shipments-tab.is-active { background: #15171a; border-color: var(--theme-text); color: var(--theme-on-accent); } .shipments-list { display: grid; gap: 9px; } .shipment-month-group { display: grid; gap: 8px; min-width: 0; } .shipment-month-group[hidden] { display: none; } .shipment-month-group summary { align-items: center; background: transparent; cursor: pointer; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) max-content 12px; list-style: none; min-height: 30px; outline: none; padding: 0 2px; } .shipment-month-group summary::-webkit-details-marker { display: none; } .shipment-month-title { color: var(--theme-text-secondary); font-size: 12.2px; font-weight: 780; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shipment-month-meta { color: var(--theme-text-muted); font-size: 10.8px; font-weight: 620; line-height: 1; white-space: nowrap; } .shipment-month-toggle { border-bottom: 2px solid #68717d; border-right: 2px solid #68717d; height: 7px; transform: rotate(45deg); width: 7px; } .shipment-month-group[open] .shipment-month-toggle { transform: rotate(225deg); } .shipment-month-items { display: grid; gap: 9px; min-width: 0; } .shipment-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 10px rgba(22, 28, 35, 0.026); display: grid; gap: 10px; min-width: 0; overflow: hidden; padding: 12px; } .shipment-card.is-attention { border-color: var(--theme-border-orange); } .shipment-card-main { align-items: start; display: grid; gap: 9px; grid-template-columns: minmax(0, 1fr) max-content; min-width: 0; } .shipment-primary { display: grid; gap: 6px; min-width: 0; } .shipment-title-row { align-items: center; display: flex; gap: 7px; min-width: 0; } .shipment-reference { color: var(--theme-text); font-size: 15px; font-weight: 760; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shipment-status-pill { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: 10px; font-weight: 760; line-height: 1; min-height: 22px; padding: 0 8px; white-space: nowrap; } .shipment-status-pill.is-delivered { background: var(--theme-surface-green); color: var(--theme-green-strong); } .shipment-status-pill.is-preparing { background: var(--theme-surface-orange); color: var(--theme-orange-strong); } .shipment-status-pill.is-shipped, .shipment-status-pill.is-info { background: var(--theme-surface-selected); color: var(--theme-indigo-text); } .shipment-status-pill.is-unknown { background: var(--theme-surface-soft); color: var(--theme-text-soft); } .shipment-route { color: var(--theme-text-muted); font-size: 11.8px; font-weight: 450; line-height: 1.25; overflow-wrap: anywhere; } .shipment-facts { display: flex; flex-wrap: wrap; gap: 5px 9px; min-width: 0; } .shipment-fact { align-items: center; color: var(--theme-text-muted); display: inline-flex; font-size: 10.8px; font-weight: 500; line-height: 1.16; min-width: 0; } .shipment-amount-block { display: grid; gap: 3px; justify-items: end; min-width: 92px; text-align: right; } .shipment-amount { color: var(--theme-text); font-size: 15.5px; font-weight: 780; line-height: 1.05; white-space: nowrap; } .shipment-waybill { color: var(--theme-text-muted); font-size: 10.8px; font-weight: 520; line-height: 1.18; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shipment-document-details { border-top: 1px solid var(--theme-border-soft); display: grid; gap: 0; margin-top: 1px; padding-top: 9px; } .shipment-document-details summary { align-items: center; cursor: pointer; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) max-content; list-style: none; min-height: 28px; outline: none; } .shipment-document-details summary::-webkit-details-marker { display: none; } .shipment-document-title { color: var(--theme-text-secondary); font-size: 11.8px; font-weight: 680; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shipment-document-dots { align-items: center; display: inline-flex; gap: 5px; justify-content: flex-end; min-width: 0; } .shipment-document-dot { border-radius: 999px; display: inline-block; height: 8px; width: 8px; } .shipment-document-dot.is-present { background: #16a34a; } .shipment-document-dot.is-missing { background: var(--theme-border-control); } .shipment-document-grid { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 8px; } .shipment-document-chip { align-items: center; background: var(--theme-surface-subtle); border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-secondary); display: flex; gap: 6px; min-height: 32px; min-width: 0; padding: 0 8px; } .shipment-document-chip.is-present { background: var(--theme-surface-green); border-color: var(--theme-border-green); color: #206247; } .shipment-document-chip.is-missing { background: var(--theme-surface-soft); border-color: var(--theme-border); color: var(--theme-text-muted); } .shipment-document-check { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; height: 17px; justify-content: center; width: 17px; } .shipment-document-chip.is-present .shipment-document-check { background: #16a34a; color: var(--theme-on-accent); } .shipment-document-chip.is-missing .shipment-document-check { background: var(--theme-border-control); color: var(--theme-on-accent); } .shipment-document-check svg { height: 11px; width: 11px; } .shipment-document-name { font-size: 10.8px; font-weight: 620; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shipments-empty-state { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-muted); display: grid; gap: 4px; padding: 18px 14px; text-align: center; } .shipments-empty-state[hidden] { display: none; } .shipments-empty-state strong { color: var(--theme-text); font-size: 14px; line-height: 1.15; } .shipments-empty-state span { font-size: 11.8px; line-height: 1.28; } .documents-dashboard-shell { padding-bottom: 34px; } .documents-icon-button{-webkit-backdrop-filter:blur(14px) saturate(1.35);align-items:center;backdrop-filter:blur(14px) saturate(1.35);background:var(--glass-action-clear);border:1px solid var(--glass-border);border-radius:10px;box-shadow:var(--glass-action-clear-shadow);color:var(--theme-text-tertiary);display:inline-grid;height:34px;justify-content:center;min-width:34px;padding:0}.documents-icon-button svg{height:17px;width:17px}.documents-icon-button:active{transform:scale(.97)}.documents-icon-button.is-primary{background:var(--glass-action-blue);border-color:var(--glass-action-blue-border);box-shadow:var(--glass-action-blue-shadow);color:var(--theme-on-accent)} .documents-search{align-items:center;background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:8px;display:grid;gap:7px;grid-template-columns:18px minmax(0,1fr) 24px;min-height:30px;min-width:0;padding:0 4px 0 9px}.documents-search-icon{color:var(--theme-text-muted);display:inline-grid;height:18px;place-items:center;width:18px}.documents-search-icon svg{height:15px;width:15px} .documents-search input{background:transparent;border:0;color:var(--theme-text);font:inherit;font-size:12.4px;font-weight:520;min-width:0;outline:none;padding:0}.documents-search input::placeholder{color:var(--theme-text-muted);font-weight:450} .documents-search-clear{align-items:center;background:var(--theme-surface-muted);border:0;border-radius:7px;color:var(--theme-text-muted);display:inline-grid;height:24px;place-items:center;width:24px}.documents-search-clear[hidden]{display:none}.documents-search-clear svg{height:13px;width:13px} .documents-action-cluster{align-items:center;display:flex;gap:6px;justify-content:flex-end;min-width:0} .documents-upload-button{-webkit-backdrop-filter:blur(16px) saturate(1.35);align-items:center;backdrop-filter:blur(16px) saturate(1.35);background:var(--glass-action-blue);border:1px solid var(--glass-action-blue-border);border-radius:12px;box-shadow:var(--glass-action-blue-shadow);color:var(--theme-on-accent);display:inline-flex;gap:7px;height:36px;justify-content:center;padding:0 12px} .documents-upload-button svg{height:16px;width:16px}.documents-upload-button span{font-size:12px;font-weight:720;line-height:1} .documents-title-row{align-items:end;background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:8px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) max-content;margin:8px 0 10px;padding:10px}.documents-title-copy{display:grid;gap:4px;min-width:0}.documents-kicker{color:var(--theme-text-muted);font-size:10.8px;font-weight:720;letter-spacing:0;line-height:1.05;text-transform:uppercase} .documents-title-row h1{color:var(--theme-text-strong);font-size:26px;font-weight:790;letter-spacing:0;line-height:1.02;margin:0;overflow-wrap:anywhere}.documents-title-row p{color:var(--theme-text-muted);font-size:12.2px;font-weight:460;line-height:1.28;margin:0;overflow-wrap:anywhere} .documents-view-toggle{align-items:center;background:var(--theme-surface-muted);border:1px solid var(--theme-border);border-radius:8px;display:inline-flex;gap:2px;padding:2px}.documents-view-button{align-items:center;background:transparent;border:0;border-radius:7px;color:var(--theme-text-muted);display:inline-grid;height:30px;place-items:center;width:32px}.documents-view-button svg{height:16px;width:16px}.documents-view-button.is-active{background:var(--theme-surface);box-shadow:0 1px 5px rgba(17,24,39,.08);color:var(--theme-text-strong)} .documents-insight-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 10px; } .documents-insight-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 9px rgba(17, 24, 39, 0.024); display: grid; gap: 5px; min-height: 78px; min-width: 0; padding: 10px; } .documents-insight-card:is(button) { appearance: none; color: inherit; cursor: pointer; font: inherit; text-align: left; } .documents-insight-card[aria-pressed="true"] { background: var(--theme-surface-selected); border-color: var(--theme-blue-text); } .documents-insight-label { color: var(--theme-text-muted); font-size: 10.4px; font-weight: 620; line-height: 1.08; } .documents-insight-value { color: var(--theme-text-strong); font-size: 19px; font-weight: 790; line-height: 1.02; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .documents-insight-meta { color: var(--theme-text-muted); font-size: 10.6px; font-weight: 440; line-height: 1.18; overflow-wrap: anywhere; } .documents-insight-card.is-green .documents-insight-value { color: var(--theme-green-strong); } .documents-insight-card.is-red .documents-insight-value { color: var(--theme-red-text); } .documents-insight-card.is-blue .documents-insight-value { color: var(--theme-indigo-text); } .documents-view[hidden], .documents-view [hidden], .documents-company-card[hidden], .documents-month-card[hidden], .documents-shipment-card[hidden], .documents-statement-row[hidden], .documents-document-chip[hidden], .documents-folder-panel[hidden], .documents-folder-tile[hidden] { display: none; } .documents-folder-board, .documents-flat-list, .documents-company-grid, .documents-shipment-list { display: grid; gap: 9px; min-width: 0; } .documents-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .documents-company-card { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 10px rgba(17, 24, 39, 0.026); color: inherit; display: grid; gap: 10px; grid-template-columns: 42px minmax(0, 1fr) 22px; min-height: 76px; min-width: 0; padding: 12px; text-decoration: none; } .documents-company-arrow { color: var(--theme-text-muted); display: inline-grid; place-items: center; } .documents-company-arrow svg { height: 16px; width: 16px; } .documents-folder-browser { display: grid; gap: 10px; min-width: 0; padding: 10px; } .documents-folder-browser.is-dragging { outline: 2px solid rgba(15, 118, 110, 0.34); outline-offset: 3px; } .documents-folder-nav { align-items: center; display: flex; gap: 8px; min-height: 34px; min-width: 0; } .documents-folder-back { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 2px 7px rgba(17, 24, 39, 0.035); color: var(--theme-text-tertiary); display: inline-grid; flex: 0 0 auto; height: 32px; place-items: center; width: 32px; } .documents-folder-back svg { height: 16px; width: 16px; } .documents-folder-location { display: grid; gap: 2px; min-width: 0; } .documents-folder-location span { color: var(--theme-text-tertiary); font-size: 9.8px; font-weight: 720; letter-spacing: 0; line-height: 1; text-transform: uppercase; } .documents-folder-location strong { color: var(--theme-text-strong); font-size: 14.2px; font-weight: 760; line-height: 1.05; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .documents-folder-panels, .documents-folder-panel { display: grid; min-width: 0; } .documents-folder-panel { gap: 7px; } .documents-folder-panel-items { display: grid; gap: 7px; min-width: 0; } .documents-folder-eyebrow { color: var(--theme-text-tertiary); font-size: 10.2px; font-weight: 640; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .documents-folder-tile { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 10px rgba(17, 24, 39, 0.024); display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) max-content; min-height: 54px; min-width: 0; padding: 7px; } .documents-folder-open { align-items: center; background: transparent; border: 0; color: inherit; display: grid; gap: 9px; grid-template-columns: 40px minmax(0, 1fr) 18px; min-height: 40px; min-width: 0; padding: 0; text-align: left; } .documents-folder-open .documents-company-arrow { color: var(--theme-text-muted); } .documents-folder-open:active .documents-folder-icon { transform: scale(0.97); } .documents-folder-tile .documents-row-actions { padding-right: 1px; } .documents-folder-panel[data-documents-panel="root"] .documents-folder-panel-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .documents-root-folder{background:transparent;border:0;box-shadow:none;display:block;min-height:82px;padding:0} .documents-root-folder .documents-folder-open{align-content:center;gap:5px;grid-template-columns:1fr;justify-items:center;min-height:82px;text-align:center;width:100%} .documents-root-folder .documents-folder-icon{background:transparent;color:var(--theme-blue-text);height:42px;width:52px} .documents-root-folder .documents-folder-icon svg{fill:color-mix(in srgb,var(--theme-blue-text) 18%,transparent);height:38px;stroke-width:1.7;width:44px} .documents-root-folder .documents-folder-copy{gap:0;justify-items:center} .documents-root-folder .documents-folder-title{font-size:12.6px;font-weight:740} .documents-root-folder .documents-folder-meta,.documents-root-folder .documents-company-arrow{display:none} .documents-year-group { background: transparent; display: grid; gap: 8px; min-width: 0; } .documents-year-group > summary { align-items: center; cursor: pointer; display: grid; gap: 9px; grid-template-columns: 40px minmax(0, 1fr) max-content; list-style: none; min-height: 46px; padding: 0 1px; } .documents-year-group > summary::-webkit-details-marker { display: none; } .documents-month-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); min-width: 0; } .documents-month-card, .documents-flat-section { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 12px rgba(17, 24, 39, 0.028); display: grid; gap: 10px; min-width: 0; padding: 12px; } .documents-month-head, .documents-folder-row, .documents-statement-row { align-items: center; display: grid; gap: 9px; grid-template-columns: 38px minmax(0, 1fr) max-content max-content; min-width: 0; } .documents-folder-row.is-bank { background: var(--theme-surface-raised); border: 1px solid var(--theme-border); border-radius: 8px; grid-template-columns: 34px minmax(0, 1fr); min-height: 46px; padding: 7px 9px; } .documents-folder-row.is-shipment { border-bottom: 1px solid var(--theme-border-soft); padding-bottom: 9px; } .documents-folder-icon { align-items: center; border-radius: 8px; display: inline-grid; flex: 0 0 auto; height: 38px; place-items: center; width: 38px; } .documents-folder-icon svg { height: 19px; stroke-width: 1.9; width: 19px; } .documents-folder-icon.is-company, .documents-folder-icon.is-year { background: var(--theme-surface-green); color: var(--theme-green-text); } .documents-folder-icon.is-month { background: var(--theme-surface-blue); color: var(--theme-blue-strong); } .documents-folder-icon.is-bank, .documents-folder-icon.is-statement { background: var(--theme-surface-orange); color: #8a5b1d; } .documents-folder-icon.is-shipment { background: var(--theme-surface-orange); color: #ea580c; } .documents-folder-copy { display: grid; gap: 3px; min-width: 0; } .documents-folder-title { color: var(--theme-text-strong); font-size: 13.4px; font-weight: 740; line-height: 1.12; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .documents-folder-meta { color: var(--theme-text-muted); font-size: 11px; font-weight: 455; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .documents-status-pill { align-items: center; border-radius: 999px; display: inline-flex; font-size: 10px; font-weight: 760; justify-content: center; line-height: 1; min-height: 22px; padding: 0 8px; white-space: nowrap; } .documents-status-pill.is-green { background: var(--theme-surface-green); color: var(--theme-green-strong); } .documents-status-pill.is-red { background: var(--theme-surface-red); color: var(--theme-red-text); } .documents-status-pill.is-amber { background: var(--theme-surface-orange-soft); color: var(--theme-orange-text); } .documents-status-pill.is-blue { background: var(--theme-surface-blue); color: var(--theme-indigo-text); } .documents-status-pill.is-slate { background: var(--theme-surface-muted); color: var(--theme-text-muted); } .documents-row-actions { align-items: center; display: inline-flex; gap: 5px; justify-content: flex-end; min-width: 0; } .documents-mini-icon-button { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 7px; color: #4f5b68; display: inline-grid; height: 30px; place-items: center; width: 30px; } .documents-mini-icon-button svg { height: 14px; width: 14px; } .documents-statement-list { display: grid; gap: 6px; min-width: 0; } .documents-statement-row { background: var(--theme-surface-subtle); border: 1px solid var(--theme-border); border-radius: 8px; min-height: 46px; padding: 6px 8px; } .documents-shipment-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; display: grid; gap: 9px; min-width: 0; padding: 10px; } .documents-document-grid { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; } .documents-document-chip { align-items: center; border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-secondary); display: grid; gap: 6px; grid-template-columns: 17px minmax(0, 1fr) auto; min-height: 31px; min-width: 0; padding: 0 8px; text-decoration: none; } .documents-document-chip.is-present { background: var(--theme-surface-green); border-color: var(--theme-border-green); color: #206247; } .documents-document-chip.is-missing { background: var(--theme-surface-soft); color: var(--theme-text-muted); grid-template-columns: 17px minmax(0, 1fr); } .documents-document-check { align-items: center; background: var(--theme-border-control); border-radius: 999px; color: var(--theme-on-accent); display: inline-flex; height: 17px; justify-content: center; width: 17px; } .documents-document-chip.is-present .documents-document-check { background: #16a34a; } .documents-document-check svg { height: 11px; width: 11px; } .documents-document-name { font-size: 10.7px; font-weight: 630; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .documents-document-download { color: #4f8e67; display: inline-grid; place-items: center; } .documents-document-download svg { height: 13px; width: 13px; } .documents-flat-list { gap: 10px; } .documents-flat-head { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; min-width: 0; } .documents-flat-head h2 { color: var(--theme-text-strong); font-size: 14.5px; font-weight: 760; line-height: 1.1; margin: 0; } .documents-flat-head span { color: var(--theme-text-muted); font-size: 11px; font-weight: 560; line-height: 1.1; } .documents-empty-state { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-muted); display: grid; gap: 4px; padding: 18px 14px; text-align: center; } .documents-empty-state[hidden] { display: none; } .documents-empty-state.is-compact { background: var(--theme-surface-subtle); padding: 13px 12px; } .documents-empty-state strong { color: var(--theme-text); font-size: 14px; line-height: 1.15; } .documents-empty-state span { font-size: 11.7px; line-height: 1.28; } .documents-toast { background: rgba(17, 24, 39, 0.94); border-radius: 8px; bottom: calc(env(safe-area-inset-bottom) + 18px); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.22); color: var(--theme-on-accent); font-size: 12px; font-weight: 620; left: 50%; line-height: 1.24; max-width: min(360px, calc(100vw - 28px)); padding: 10px 12px; position: fixed; text-align: center; transform: translateX(-50%); z-index: 120; } .documents-toast[hidden] { display: none; } .company-overview-shell { padding-bottom: 34px; } .company-overview-shell .company-heading-text { font-weight: 600; } .company-command-hero { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 3px 10px rgba(22, 28, 35, 0.026); display: grid; gap: 9px; margin: 9px 0 8px; min-width: 0; overflow: hidden; padding: 12px 13px 13px; position: relative; } .company-command-hero::before { background: #6e94db; content: ""; height: 2px; inset: 0 0 auto; opacity: 0.82; position: absolute; } .company-command-copy { align-content: start; display: grid; gap: 6px; min-width: 0; padding-top: 1px; } .company-command-topline { align-items: center; display: flex; gap: 8px; justify-content: flex-start; min-width: 0; } .company-command-kicker { color: #5d6875; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.05; } .company-command-score { align-items: center; background: var(--theme-surface-green); border: 1px solid var(--theme-border-green); border-radius: 999px; color: var(--theme-green-strong); display: inline-flex; flex: 0 0 auto; gap: 5px; line-height: 1; margin-left: auto; min-height: 22px; padding: 0 8px; } .company-command-score.is-blue { background: var(--theme-surface-blue); border-color: var(--theme-border-blue); color: var(--theme-indigo-text); } .company-command-score.is-amber { background: var(--theme-surface-orange-soft); border-color: var(--theme-border-orange); color: var(--theme-orange-text); } .company-command-score.is-red { background: var(--theme-surface-red); border-color: #efc3c3; color: var(--theme-red-text); } .company-command-score.is-slate { background: var(--theme-surface-soft); border-color: var(--theme-border-subtle); color: var(--theme-text-soft); } .company-command-score strong { font-size: 13.2px; font-weight: 740; letter-spacing: 0; } .company-command-score span { color: var(--theme-text-tertiary); font-size: 9.7px; font-weight: 630; } .company-command-score.is-blue span { color: var(--theme-indigo-text); } .company-command-score.is-amber span { color: #74430e; } .company-command-score.is-red span { color: #7f2c2c; } .company-command-score.is-slate span { color: var(--theme-text-tertiary); } .company-command-hero h1 { color: var(--theme-text); font-size: 17.5px; font-weight: 700; letter-spacing: 0; line-height: 1.08; margin: 0; min-width: 0; overflow-wrap: anywhere; } .company-command-meta { color: var(--theme-text-tertiary); display: grid; font-size: 11.1px; font-weight: 510; gap: 3px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); line-height: 1.17; min-width: 0; } .company-command-meta > span { align-items: baseline; display: flex; gap: 4px; min-width: 0; overflow: hidden; } .company-command-meta strong { color: var(--theme-text-tertiary); flex: 0 0 auto; font-weight: 670; } .company-command-meta > span > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-command-meta > span.is-emphasis strong { color: var(--theme-text-tertiary); font-weight: 690; } .company-command-meta > span.is-wide { grid-column: 1 / -1; } .company-command-meta > span.is-wrap { align-items: flex-start; } .company-command-meta > span.is-wrap > span { line-height: 1.18; overflow: visible; text-overflow: clip; white-space: normal; } .company-status-pill { align-items: center; border: 1px solid var(--theme-border); border-radius: 7px; display: inline-flex; flex: 0 0 auto; font-size: 10.4px; font-weight: 600; line-height: 1; min-height: 21px; padding: 0 8px; white-space: nowrap; } .company-status-pill.is-green { background: var(--theme-surface-green); border-color: var(--theme-border-green); color: var(--theme-green-strong); } .company-status-pill.is-teal { background: var(--theme-surface-green); border-color: var(--theme-border-green); color: var(--theme-green-text); } .company-status-pill.is-blue { background: var(--theme-surface-selected); border-color: var(--theme-border-blue); color: var(--theme-indigo-text); } .company-status-pill.is-indigo { background: var(--theme-surface-purple); border-color: var(--theme-border-purple); color: #5b4aa0; } .company-status-pill.is-amber { background: var(--theme-surface-orange-soft); border-color: var(--theme-border-orange); color: var(--theme-orange-text); } .company-status-pill.is-red { background: var(--theme-surface-red); border-color: #efc3c3; color: var(--theme-red-text); } .company-status-pill.is-slate { background: var(--theme-surface-soft); border-color: var(--theme-border-subtle); color: var(--theme-text-soft); } .company-source-notice { background: var(--theme-surface); border: 1px solid var(--theme-border-subtle); border-radius: 8px; color: var(--theme-text-tertiary); display: grid; font-size: 12px; gap: 4px; line-height: 1.32; margin: 0 0 10px; padding: 10px 11px; } .company-source-notice strong { color: var(--theme-text); font-size: 12.2px; } .company-source-notice.is-partial, .company-source-notice.is-not_configured, .company-source-notice.is-missing_company_number, .company-source-notice.is-not_found { background: var(--theme-surface-yellow); border-color: var(--theme-border-orange); color: #7c5308; } .company-overview-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin: 8px 0; } .company-overview-grid.is-primary { margin-top: 0; } .company-overview-grid.is-secondary { margin-bottom: 18px; } .company-command-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 7px; box-shadow: 0 3px 9px rgba(22, 28, 35, 0.022); color: inherit; display: grid; gap: 10px; grid-template-columns: 52px minmax(0, 1fr) 17px; min-height: 82px; min-width: 0; overflow: hidden; padding: 0 10px 0 0; text-decoration: none; } .company-command-card.is-primary { background: var(--theme-surface); border-color: var(--theme-border-blue); box-shadow: 0 3px 10px rgba(22, 28, 35, 0.026); grid-template-columns: 52px minmax(0, 1fr) 17px; min-height: 90px; padding: 0 10px 0 0; } .company-command-card.is-compact { min-height: 64px; } .company-command-card:active { background: var(--theme-surface-hover); } .company-command-card:focus-visible { outline: 3px solid rgba(79, 124, 207, 0.18); outline-offset: 2px; } .company-card-icon { align-self: stretch; background: var(--theme-surface-muted); border-radius: 7px 0 0 7px; color: var(--theme-text-secondary); display: inline-grid; min-height: 100%; place-items: center; width: 52px; } .company-command-card.is-primary .company-card-icon, .company-command-card.is-compliance .company-card-icon { background: var(--theme-surface-blue); color: var(--theme-indigo-text); } .company-command-card.is-details .company-card-icon { background: var(--theme-surface-muted); color: var(--theme-text-strong-alt); } .company-command-card.is-people .company-card-icon { background: var(--theme-surface-purple); color: var(--theme-purple-text); } .company-command-card.is-contacts .company-card-icon { background: var(--theme-surface-orange); color: #f97316; } .company-command-card.is-filings .company-card-icon { background: var(--theme-surface-muted); color: var(--theme-text-strong-alt); } .company-card-icon svg { display: block; height: 21px; stroke-width: 2.05; width: 21px; } .company-card-main { display: grid; gap: 4px; min-width: 0; padding: 10px 0; } .company-command-card.is-compact .company-card-main { align-content: center; padding: 8px 0; } .company-command-card.is-primary .company-card-main { align-content: center; gap: 3px; padding: 10px 0; } .company-card-head { align-items: center; display: flex; gap: 7px; justify-content: space-between; min-height: 34px; min-width: 0; } .company-command-card.is-compact .company-card-head { min-height: 0; } .company-command-card.is-primary .company-card-head { min-height: 0; } .company-card-title { color: var(--theme-text); font-size: 13.9px; font-weight: 690; line-height: 1.14; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-card-metric { color: var(--theme-text); font-size: 16.2px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; } .company-command-card.is-primary .company-card-title { color: var(--theme-text-tertiary); font-size: 14.2px; font-weight: 710; } .company-command-card.is-primary .company-card-metric { font-size: 16.7px; font-weight: 720; } .company-command-card.is-primary .company-card-body { color: var(--theme-text-tertiary); font-size: 11.8px; font-weight: 540; } .company-command-card.is-primary .company-status-pill { font-size: 10.2px; min-height: 20px; padding: 0 7px; } .company-card-body { color: var(--theme-text-muted); display: -webkit-box; font-size: 11.7px; font-weight: 510; line-height: 1.27; min-width: 0; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .company-command-card.is-details .company-card-body { color: var(--theme-text-secondary); font-weight: 630; } .company-card-facts { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .company-card-fact { align-items: center; background: var(--theme-surface-raised); border: 1px solid var(--theme-border-soft); border-radius: 6px; color: var(--theme-text-tertiary); display: inline-flex; gap: 5px; max-width: 100%; min-height: 25px; padding: 0 7px; } .company-command-card.is-primary .company-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .company-command-card.is-primary .company-card-fact { align-items: flex-start; background: var(--theme-surface); border-color: var(--theme-border-blue); flex-direction: column; gap: 4px; justify-content: center; min-height: 42px; padding: 6px 8px; } .company-card-fact-label { color: var(--theme-text-muted); font-size: 10px; font-weight: 560; line-height: 1; } .company-command-card.is-details .company-card-fact-label { color: var(--theme-text-tertiary); font-weight: 670; } .company-card-fact-value { color: var(--theme-text-secondary); font-size: 11px; font-weight: 620; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-card-fact .company-status-pill { min-height: 18px; padding: 0 6px; } .company-card-arrow { align-self: center; color: var(--theme-text-muted); display: inline-grid; place-items: center; } .company-card-arrow svg { height: 18px; width: 18px; } .company-section-head { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; margin: 12px 0 7px; min-width: 0; } .company-section-head h2 { color: var(--theme-text); font-size: 15px; font-weight: 650; line-height: 1.1; margin: 0; } .company-section-meta { color: var(--theme-text-muted); font-size: 11px; font-weight: 590; line-height: 1.2; text-align: right; } .company-timeline { margin-bottom: 8px; } .company-timeline-list { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 9px; box-shadow: 0 5px 14px rgba(22, 28, 35, 0.035); display: grid; overflow: hidden; } .company-timeline-item { display: grid; gap: 9px; grid-template-columns: 12px minmax(0, 1fr); min-width: 0; padding: 9px 11px; position: relative; } .company-timeline-item + .company-timeline-item { border-top: 1px solid var(--theme-border-soft); } .company-timeline-dot { align-self: start; background: #0f766e; border: 3px solid var(--theme-border-green); border-radius: 999px; height: 12px; margin-top: 3px; width: 12px; } .company-timeline-item.is-green .company-timeline-dot { background: #0f766e; border-color: var(--theme-border-green); } .company-timeline-item.is-blue .company-timeline-dot { background: #2563eb; border-color: var(--theme-border-blue); } .company-timeline-item.is-amber .company-timeline-dot { background: #d97706; border-color: var(--theme-border-orange); } .company-timeline-item.is-red .company-timeline-dot { background: #dc2626; border-color: var(--theme-border-red); } .company-timeline-item.is-slate .company-timeline-dot { background: #64748b; border-color: var(--theme-border); } .company-timeline-copy { display: grid; gap: 3px; min-width: 0; } .company-timeline-kind-row { align-items: center; display: flex; gap: 6px; justify-content: space-between; min-width: 0; } .company-timeline-kind { color: var(--theme-text-muted); font-size: 10px; font-weight: 590; letter-spacing: 0; line-height: 1; text-transform: uppercase; } .company-timeline-kind-row .company-status-pill { min-height: 18px; padding: 0 6px; } .company-timeline-title { color: var(--theme-text); font-size: 12.8px; font-weight: 610; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; } .company-timeline-meta { color: var(--theme-text-muted); font-size: 11px; font-weight: 560; line-height: 1.25; } .company-overview-empty { background: var(--theme-surface-raised); border: 1px dashed var(--theme-border); border-radius: 8px; color: var(--theme-text-muted); font-size: 12px; line-height: 1.35; padding: 11px; } .company-panel-overlay { background: rgba(21, 23, 26, 0.42); inset: 0; position: fixed; z-index: 115; } .company-detail-panel { background: var(--theme-surface-soft); border-left: 1px solid var(--theme-border); box-shadow: -18px 0 36px rgba(22, 28, 35, 0.18); display: flex; flex-direction: column; inset: 0 0 0 auto; max-width: 100%; overflow: hidden; position: fixed; width: min(430px, 92vw); z-index: 116; } .company-detail-panel-head { align-items: center; background: var(--theme-surface); border-bottom: 1px solid var(--theme-border-soft); display: grid; gap: 10px; grid-template-columns: 38px minmax(0, 1fr) 34px; min-height: 62px; padding: 11px 12px; } .company-detail-panel-title { color: var(--theme-text); font-size: 15px; font-weight: 650; line-height: 1.12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-detail-panel-subtitle { color: var(--theme-text-muted); font-size: 11.5px; font-weight: 580; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-detail-panel-close { align-items: center; background: var(--theme-surface-soft); border-radius: 999px; color: var(--theme-text-secondary); display: inline-grid; height: 34px; place-items: center; position: relative; text-decoration: none; width: 34px; } .company-detail-panel-close::before, .company-detail-panel-close::after { background: currentColor; border-radius: 999px; content: ""; height: 2px; position: absolute; width: 12px; } .company-detail-panel-close::before { transform: rotate(45deg); } .company-detail-panel-close::after { transform: rotate(-45deg); } .company-detail-panel-close:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.18); outline-offset: 2px; } .company-detail-panel-body { display: grid; gap: 9px; min-height: 0; overflow: auto; padding: 12px; } .company-panel-list { display: grid; gap: 8px; } .company-panel-item { background: var(--theme-surface); border: 1px solid var(--theme-border-soft); border-radius: 8px; display: grid; gap: 5px; min-width: 0; padding: 10px; } .company-panel-item-head { align-items: center; display: flex; gap: 7px; justify-content: space-between; min-width: 0; } .company-panel-item-head strong { color: var(--theme-text); font-size: 12.8px; font-weight: 610; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; } .company-panel-item-main { color: var(--theme-text-secondary); font-size: 13px; font-weight: 580; line-height: 1.2; overflow-wrap: anywhere; } .company-panel-item-meta { color: var(--theme-text-muted); font-size: 11.3px; line-height: 1.3; overflow-wrap: anywhere; } .company-detail-list { background: var(--theme-surface); border: 1px solid var(--theme-border-subtle); border-radius: 8px; display: grid; overflow: hidden; } .company-detail-row { display: grid; gap: 6px; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.25fr); min-width: 0; padding: 10px 11px; } .company-detail-row + .company-detail-row { border-top: 1px solid var(--theme-border-soft); } .company-detail-row span { color: var(--theme-text-muted); font-size: 11.2px; font-weight: 560; line-height: 1.2; } .company-detail-row strong { color: var(--theme-text); font-size: 12.2px; font-weight: 580; line-height: 1.25; overflow-wrap: anywhere; text-align: right; } .button { -webkit-backdrop-filter: blur(16px) saturate(1.35); appearance: none; backdrop-filter: blur(16px) saturate(1.35); background: var(--glass-action-blue); border: 1px solid var(--glass-action-blue-border); border-radius: 13px; box-shadow: var(--glass-action-blue-shadow); color: var(--theme-on-accent); cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; min-height: 42px; padding: 0 16px; transition: box-shadow .18s ease, filter .18s ease, transform .18s ease; } .button:disabled { cursor: wait; opacity: 0.86; } .button.secondary { background: var(--glass-action-clear); border-color: var(--glass-border); box-shadow: var(--glass-action-clear-shadow); color: var(--theme-text); } .button:active { box-shadow: 0 4px 12px rgba(0, 96, 202, 0.16), inset 0 1px 0 rgba(255,255,255,.34); transform: scale(.985); } .button.link-button { align-items: center; display: inline-grid; justify-items: center; text-decoration: none; } .button.full { width: 100%; margin-top: 12px; } .finexer-consent-shell { align-items: center; display: grid; min-height: 100vh; padding: 22px 14px max(22px, env(safe-area-inset-bottom)); } .finexer-consent-panel { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 18px 42px rgba(24, 33, 45, 0.08); display: grid; gap: 17px; justify-self: center; max-width: 640px; padding: 24px; width: 100%; } .finexer-consent-brand { align-items: center; display: grid; gap: 14px; grid-template-columns: 52px minmax(0, 1fr); min-width: 0; } .finexer-consent-brand .login-logo { height: 52px; margin: 0; width: 52px; } .finexer-consent-brand-copy { display: grid; gap: 6px; min-width: 0; } .finexer-consent-kicker { color: var(--theme-text-muted); font-size: 12px; font-weight: 760; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; } .finexer-consent-panel h1 { font-size: 24px; line-height: 1.1; margin: 0; } .finexer-consent-panel p { color: var(--theme-text-tertiary); font-size: 14px; line-height: 1.48; margin: 0; } .finexer-consent-list { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; } .finexer-consent-list li { align-items: start; color: var(--theme-text-secondary); display: grid; font-size: 13px; gap: 10px; grid-template-columns: 12px minmax(0, 1fr); line-height: 1.38; } .finexer-consent-list li::before { background: #0b72b9; border: 3px solid var(--theme-border-blue); border-radius: 999px; box-sizing: border-box; content: ""; display: block; height: 12px; margin-top: 3px; width: 12px; } .finexer-consent-disclosure { background: var(--theme-surface-blue); border: 1px solid var(--theme-border); border-radius: 8px; color: var(--theme-text-secondary); display: grid; font-size: 12.5px; gap: 7px; line-height: 1.42; padding: 12px; } .finexer-consent-actions { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; } .finexer-consent-actions .button { align-items: center; display: inline-grid; justify-content: center; margin: 0; min-width: 168px; text-decoration: none; } .finexer-consent-actions .button:not(.secondary) { background: var(--glass-action-blue); box-shadow: var(--glass-action-blue-shadow); } .finexer-success-icon { align-items: center; background: var(--theme-surface-blue); border-radius: 999px; color: var(--theme-blue-text); display: inline-grid; font-size: 20px; font-weight: 900; height: 44px; justify-content: center; width: 44px; } .input { width: 100%; min-height: 46px; border: 1px solid var(--theme-border); border-radius: 7px; padding: 0 12px; font: inherit; font-size: 16px; } .company-banking-login-page .input { -webkit-user-select: text; background: var(--theme-surface-subtle); border-color: var(--theme-border); border-radius: 8px; color: var(--theme-text-strong); font-size: 16px; font-weight: 500; min-height: 49px; padding: 0 14px; user-select: text; } .company-banking-login-page .input::placeholder { color: var(--theme-text-muted); font-weight: 460; opacity: 1; } .company-banking-login-page .input:focus { background: var(--theme-surface); border-color: #79d0f3; box-shadow: 0 0 0 3px rgba(26, 182, 238, 0.06); outline: 0; } .field { display: grid; gap: 7px; margin: 16px 0 0; } .company-banking-login-page .field { gap: 14px; margin-top: 0; } .login-form-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; box-shadow: 0 18px 40px rgba(31, 45, 61, 0.045); max-width: 100%; padding: 17px; width: 100%; } .login-field-group { display: grid; gap: 8px; text-align: left; } .login-field-label { color: var(--theme-text-secondary); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.2; } .login-form-note { color: var(--theme-text-muted); font-size: 13px; font-weight: 500; line-height: 1.3; margin: -2px 0 0; text-align: left; } .company-banking-login-page .button.full { align-items: center; background: var(--glass-action-blue); border-radius: 15px; box-shadow: var(--glass-action-blue-shadow); display: inline-flex; font-size: 15.3px; font-weight: 600; gap: 10px; justify-content: center; min-height: 49px; margin-top: 0; transition: box-shadow 0.14s ease, filter 0.14s ease, transform 0.14s ease; } .company-banking-login-page .button.full:focus-visible { outline: 3px solid rgba(11, 114, 185, 0.3); outline-offset: 3px; } .company-banking-login-page .button.full:active { box-shadow: 0 6px 14px rgba(11, 114, 185, 0.2); filter: saturate(1.03); transform: translateY(1px); } .company-banking-login-page .button.full.is-submitting, .company-banking-login-page .button.full:disabled { box-shadow: 0 6px 14px rgba(11, 114, 185, 0.14); cursor: wait; filter: saturate(0.98); opacity: 1; transform: translateY(1px); } .company-banking-login-page .button.full.is-submitting::after { animation: company-banking-spin 0.75s linear infinite; border: 2px solid rgba(255, 255, 255, 0.46); border-radius: 999px; border-top-color: var(--theme-on-accent); content: ""; display: inline-block; height: 16px; width: 16px; } .login-footnote { color: var(--theme-text-muted); font-size: 12px; line-height: 1.35; margin: 8px 0 0; text-align: center; } .login-footnote a { color: var(--theme-blue-text); font-weight: 620; text-decoration: none; } .login-footnote a:focus-visible, .login-footnote a:hover { text-decoration: underline; } .totp-setup-card { align-items: center; background: var(--theme-surface-blue); border: 1px solid var(--theme-border-blue); border-radius: 8px; display: grid; gap: 10px; justify-items: center; padding: 12px; } .totp-setup-qr { background: var(--theme-surface); border: 1px solid var(--theme-border-blue); border-radius: 8px; display: grid; padding: 8px; } .totp-setup-qr img { display: block; height: 164px; width: 164px; } .totp-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 14px; letter-spacing: 0; text-align: center; } .backup-code-list { background: var(--theme-surface-blue); border: 1px solid var(--theme-border-blue); border-radius: 8px; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0; padding: 12px; } .backup-code-list code { background: var(--theme-surface); border: 1px solid var(--theme-border-blue); border-radius: 6px; color: var(--theme-text-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; font-weight: 650; padding: 7px 8px; text-align: center; } .login-loading { color: var(--theme-text-secondary); display: grid; font-size: 12px; gap: 8px; justify-items: center; line-height: 1.35; margin-top: 14px; text-align: center; } .login-panel.is-loading .login-loading { margin-top: 0; } .login-loading[hidden] { display: none; } .loading-spinner { animation: company-banking-spin 0.8s linear infinite; border: 3px solid rgba(26, 182, 238, 0.2); border-radius: 999px; border-top-color: #0b7ed0; display: block; height: 26px; width: 26px; } .company-banking-login-page .alert { background: var(--theme-surface-red); border-color: var(--theme-border-red); border-radius: 8px; color: #a93d31; font-size: 13px; font-weight: 590; line-height: 1.28; margin: 14px 0 0; max-width: 100%; padding: 9px 12px; text-align: center; width: 100%; } @keyframes company-banking-launch-dot { 0%, 80%, 100% { opacity: 0.24; transform: scale(0.86); } 38% { opacity: 1; transform: scale(1); } } @keyframes company-banking-spin { to { transform: rotate(360deg); } } @keyframes company-banking-progress { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } .alert { border: 1px solid #f0c36d; background: var(--theme-surface-yellow); color: #654300; border-radius: 7px; padding: 10px 12px; font-size: 13px; line-height: 1.35; margin: 0 0 12px; } .error { border-color: #f0a4a4; background: var(--theme-surface-red); color: #7f1d1d; } .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 7px; } .transaction-section-title { align-items: center; flex-wrap: wrap; } .transaction-section-heading { align-items: center; display: flex; gap: 7px; min-width: 0; } .transaction-category-filter{position:relative} .transaction-category-filter-button{align-items:center;appearance:none;background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:7px;color:var(--theme-text-tertiary);cursor:pointer;display:inline-flex;font:inherit;font-size:10.8px;font-weight:780;gap:5px;min-height:28px;padding:0 8px} .transaction-category-filter-button::after{border-bottom:1.5px solid currentColor;border-right:1.5px solid currentColor;content:"";height:5px;margin:-3px 1px 0 2px;transform:rotate(45deg);width:5px} .transaction-category-filter-button:hover, .transaction-category-filter-button:focus-visible, .transaction-category-filter-button.is-active { background: var(--theme-surface-selected); border-color: var(--theme-blue-text); color: var(--theme-text-strong); outline: 0; } .transaction-category-filter-button:disabled { cursor: default; opacity: .5; } .transaction-category-filter-count{align-items:center;background:var(--theme-blue-text);border-radius:999px;color:var(--theme-surface);display:inline-flex;font-size:9px;height:17px;justify-content:center;min-width:17px;padding:0 4px} .transaction-category-filter-count[hidden], .transaction-category-filter-menu[hidden], .transaction-category-filter-empty[hidden] { display: none; } .transaction-category-filter-menu{background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:10px;box-shadow:0 14px 34px rgba(20,36,61,.16);left:0;max-height:min(420px,60vh);overflow:hidden;position:absolute;top:calc(100% + 6px);width:min(280px,calc(100vw - 28px));z-index:70} .transaction-time-basis-label{border:0;min-height:0;padding:0} .transaction-time-basis-picker select{inset:0;opacity:0;position:absolute;width:100%} .transaction-category-filter-menu-head{align-items:center;border-bottom:1px solid var(--theme-border-soft);display:flex;justify-content:space-between;min-height:39px;padding:7px 10px} .transaction-category-filter-menu-head strong { color: var(--theme-text-strong); font-size: 11.5px; } .transaction-category-filter-menu-head button{appearance:none;background:transparent;border:0;color:var(--theme-blue-text);cursor:pointer;font:inherit;font-size:10.8px;font-weight:760;padding:5px} .transaction-category-filter-options { display: grid; max-height: min(360px, 52vh); overflow: auto; overscroll-behavior: contain; padding: 5px; } .transaction-category-filter-option { align-items: center; border-radius: 7px; color: var(--theme-text-secondary); cursor: pointer; display: grid; font-size: 11.5px; gap: 8px; grid-template-columns: 3px 18px minmax(0, 1fr) auto; min-height: 35px; padding: 5px 7px 5px 5px; } .transaction-category-filter-option:hover { background: var(--theme-surface-muted); } .transaction-category-filter-rail { align-self: stretch; background: #ec4899; border-radius: 999px; display: block; min-height: 25px; width: 3px; } .transaction-category-filter-rail.is-purple { background: #8b5cf6; }.transaction-category-filter-rail.is-orange { background: #f59e0b; }.transaction-category-filter-rail.is-gray { background: #9aa3ad; }.transaction-category-filter-rail.is-green { background: #19a974; } .transaction-category-filter-option input { accent-color: #14243d; height: 17px; margin: 0; width: 17px; } .transaction-category-filter-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transaction-category-filter-option small { color: var(--theme-text-muted); font-size: 10px; } .transaction-filter-bar { backdrop-filter: blur(18px) saturate(135%); background: color-mix(in srgb,var(--theme-surface) 76%,transparent); border: 1px solid color-mix(in srgb,var(--theme-border) 72%,transparent); border-radius: 14px; box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent),0 5px 18px rgba(20,36,61,.045); display: block; margin: -1px 0 9px; overflow-x: auto; overflow-y: hidden; padding: 3px; scrollbar-width: none; } .transaction-filter-bar::-webkit-scrollbar { display: none; } .transaction-filter-track { display: grid; grid-auto-columns: minmax(68px,1fr); grid-auto-flow: column; min-width: 100%; position: relative; } .transaction-filter-option { align-items: center; background: transparent; border: 0; border-radius: 11px; color: var(--theme-text-tertiary); display: inline-flex; font-size: 11.6px; font-weight: 760; isolation:isolate; justify-content: center; min-height: 34px; min-width: 0; overflow: hidden; padding: 0 8px; position: relative; text-align: center; text-decoration: none; text-overflow: ellipsis; touch-action: manipulation; transition:color .2s ease,transform .14s ease; white-space: nowrap; } .transaction-filter-option::before { background: color-mix(in srgb,var(--theme-surface) 88%,transparent); border: 1px solid color-mix(in srgb,var(--theme-border) 58%,transparent); border-radius: 11px; box-shadow: 0 2px 7px rgba(20,36,61,.11),inset 0 1px 0 color-mix(in srgb,#fff 68%,transparent); content:""; inset:0; opacity:0; pointer-events:none; position:absolute; transform:scale(.9); transition:opacity .2s ease,transform .28s cubic-bezier(.22,1,.36,1),background-color .2s ease,box-shadow .2s ease; z-index:-1; } .transaction-filter-option.active { color: var(--theme-text-strong); } .transaction-filter-option.active::before { opacity:1; transform:scale(1); } .transaction-filter-option:active { transform:scale(.96); } .transaction-filter-option:focus-visible { outline:3px solid color-mix(in srgb,var(--theme-blue-text) 28%,transparent); outline-offset:-3px; } [data-company-transactions-progressive-root] :is(.transaction-group,.progressive-load-button,.transaction-category-filter-empty) { transition: opacity .16s ease, transform .16s ease; } [data-company-transactions-progressive-root].is-filter-transitioning :is(.transaction-group,.progressive-load-button,.transaction-category-filter-empty) { opacity:.46; transform:translateY(2px); } [data-company-transactions-progressive-root][aria-busy="true"] .transaction-filter-bar { cursor:progress; } @media (prefers-reduced-motion: reduce) { .transaction-filter-option,.transaction-filter-option::before { transition:none; } } .transaction-group { overflow: hidden; margin: 0 0 9px; } .transaction-group h2 { padding: 8px 11px; border-bottom: 1px solid var(--theme-border-soft); background: var(--theme-surface-subtle); } .transaction-group summary { align-items: center; background: var(--theme-surface-subtle); cursor: pointer; display: flex; gap: 10px; justify-content: space-between; list-style: none; padding: 8px 11px; } .transaction-group summary::-webkit-details-marker { display: none; } .transaction-group[open] summary { border-bottom: 1px solid var(--theme-border-soft); } .transaction-group-title { font-size: 13.4px; font-weight: 780; } .transaction-group-count { color: var(--theme-text-muted); font-size: 12px; font-weight: 650; margin-left: auto; } .transaction-group-statement-button { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 6px; color: var(--theme-text-muted); cursor: pointer; display: inline-flex; flex: 0 0 24px; height: 24px; justify-content: center; margin: -2px 0; padding: 0; width: 24px; } .transaction-group-statement-button svg { display: block; height: 17px; width: 17px; } .transaction-group-statement-button:hover, .transaction-group-statement-button:focus-visible { background: var(--theme-surface-muted); color: #14243d; outline: 0; } .transaction-group-statement-button[aria-busy="true"] { cursor: wait; opacity: 0.58; } .transaction-group-toggle { border-bottom: 2px solid #68717d; border-right: 2px solid #68717d; flex: 0 0 auto; height: 8px; transform: rotate(45deg); width: 8px; } .transaction-group[open] .transaction-group-toggle { transform: rotate(225deg); } table { width: 100%; border-collapse: collapse; table-layout: fixed; } th, td { border-bottom: 1px solid var(--theme-border-soft); padding: 7px 9px; text-align: left; vertical-align: top; } tr:last-child td { border-bottom: 0; } .transaction-accent { --transaction-accent: #9aa3ad; cursor: pointer; } .transaction-accent-green { --transaction-accent: #19a974; } .transaction-accent-purple { --transaction-accent: #8b5cf6; } .transaction-accent-orange { --transaction-accent: #f59e0b; } .transaction-accent-gray { --transaction-accent: #9aa3ad; } .transaction-accent-pink { --transaction-accent: #ec4899; } .transaction-accent-blue { --transaction-accent: #1687d9; } .transaction-accent.is-editable:focus-visible { background: var(--theme-surface-muted); outline: 0; } .category-settings { display: grid; gap: 10px; } .category-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 12px; display: grid; gap: 8px; padding: 10px; } .category-card-head { align-items: center; display: flex; gap: 8px; } .category-swatch { background: #9aa5b1; border-radius: 999px; flex: 0 0 11px; height: 11px; width: 11px; } .category-swatch.is-pink { background: #ec4899; }.category-swatch.is-purple { background: #8b5cf6; }.category-swatch.is-orange { background: #f59e0b; }.category-swatch.is-blue { background: #1687d9; }.category-swatch.is-gray { background: #9aa5b1; }.category-swatch.is-green { background: #10b981; } .category-controls { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }.category-controls label,.transaction-category-editor label { color: var(--theme-text-muted); display: grid; font-size: 10px; gap: 3px; } .category-matchers { display: flex; flex-wrap: wrap; gap: 5px; }.category-matcher { align-items: center; background: var(--theme-surface-muted); border-radius: 8px; display: inline-flex; gap: 5px; padding: 5px 6px; }.category-matcher small { color: var(--theme-text-muted); }.category-matcher button { background: none; border: 0; color: var(--theme-text-muted); padding: 0 2px; } .category-matcher-add { display: grid; gap: 5px; grid-template-columns: 1.2fr 1fr auto; }.category-matcher-add button,.category-save { background: var(--theme-surface-blue); border: 0; border-radius: 8px; color: var(--theme-blue-text); font-weight: 700; min-height: 34px; padding: 6px 9px; }.category-save { width: 100%; } .category-label-note { align-items: center; background: var(--theme-surface-blue); border-radius: 10px; display: grid; gap: 7px; grid-template-columns: auto auto 1fr; padding: 9px; }.category-label-note span:last-child,.category-default-note { color: var(--theme-text-muted); font-size: 10px; margin: 0; }.category-add-button { width: 100%; } .category-add-button,.transaction-category-editor [data-classification-save] { -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);background:var(--glass-action-blue);border:1px solid var(--glass-action-blue-border);box-shadow:var(--glass-action-blue-shadow); } .classification-rule-toggle { align-items:center!important; background:color-mix(in srgb,var(--theme-blue-text) 9%,var(--theme-surface)); border:1px solid color-mix(in srgb,var(--theme-blue-text) 25%,var(--theme-border)); border-radius:10px; display:grid!important; grid-template-columns:auto 1fr; padding:10px; } .classification-rule-toggle input { height:18px; width:18px; } .classification-rule-toggle span { display:grid; gap:2px; } .classification-rule-toggle strong { color:var(--theme-text-strong); font-size:11px; } .classification-rule-toggle small { color:var(--theme-text-muted); font-size:9px; line-height:1.35; } .transaction-category-editor { inset: 0; position: fixed; z-index: 1500; }.transaction-category-overlay { background: var(--theme-overlay); inset: 0; position: absolute; }.transaction-category-editor section { background: var(--theme-surface); border-radius: 18px 18px 0 0; bottom: 0; color: var(--theme-text); display: grid; gap: 12px; left: 50%; max-width: 520px; padding: 16px; position: absolute; transform: translateX(-50%); width: min(100%,520px); }.transaction-category-editor header { align-items: center; display: flex; justify-content: space-between; }.transaction-category-editor header button { background: none; border: 0; color: var(--theme-text); font-size: 24px; }.rm-toggle { align-items: center!important; background: var(--theme-surface-blue); border-radius: 10px; display: grid!important; grid-template-columns: auto auto 1fr; padding: 10px; }.rm-toggle input { height: 18px; width: 18px; }.rm-toggle span:last-child { display: grid; }.rm-toggle small { color: var(--theme-text-muted); } .transaction-accent td:first-child { box-shadow: inset 4px 0 0 var(--transaction-accent); } th { color: var(--theme-text-muted); font-size: 10.5px; font-weight: 780; text-transform: uppercase; } td { font-size: 12.5px; line-height: 1.23; } .col-time { width: 58px; } .col-amount{width:100px;text-align:right} .when{display:flex;flex-direction:column;gap:2px;line-height:1.12} .when-date{font-weight:630} .when-time{color:var(--theme-text-muted);font-size:10.5px;font-variant-numeric:tabular-nums} .amount{font-weight:600;text-align:right;white-space:nowrap} .amount.out{color:var(--theme-text-strong-alt)} .amount.in{color:#078563} .entity{font-weight:680;overflow-wrap:anywhere} .provider{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:2px;color:var(--theme-text-muted);font-size:10.5px} .status-badge{border-radius:4px;background:var(--theme-surface-muted);color:var(--theme-text-muted);display:inline-flex;align-items:center;min-height:16px;padding:1px 5px 0;font-size:9.8px;font-weight:650;line-height:1.1;text-transform:none} .status-badge.is-rm{background:var(--theme-surface-blue);color:var(--theme-blue-deep)} .status-badge.is-watches{background:var(--theme-surface-orange);color:var(--theme-orange-medium)} .status-badge.is-debtors{background:var(--theme-surface-purple);color:var(--theme-purple-text)} .transaction-vat-label{align-items:center;background:transparent;border:1px solid var(--theme-border);border-radius:4px;color:var(--theme-text-muted);display:inline-flex;font-size:9.3px;font-weight:650;line-height:1;margin-left:5px;min-height:15px;padding:1px 4px 0;vertical-align:middle;white-space:nowrap} html[data-show-vat-labels="false"] .transaction-vat-label{display:none} .transaction-detail-summary,.transaction-detail-summary .entity{display:block} tr[aria-expanded=true] td{padding-bottom:7px} .transaction-detail{border-top:1px solid var(--theme-border-soft);display:grid;gap:10px;grid-template-columns:1.45fr .75fr;margin-top:5px;padding-top:5px} .transaction-detail[hidden] { display: none; } .transaction-detail-item{display:grid;gap:7px;line-height:1;min-width:0} .transaction-detail-edit { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; line-height: 1; padding: 0; text-align: left; } .transaction-detail-edit:focus-visible { outline: 2px solid #0b72b9; outline-offset: 2px; } .transaction-detail-label{color:var(--theme-text-muted);font-size:9.5px;font-weight:720;line-height:1;text-transform:uppercase} .transaction-detail-item strong{color:var(--theme-text-secondary);font-size:11px;font-weight:720;line-height:1} .transaction-detail-item:last-child strong{white-space:nowrap} .empty { padding: 14px; } .logout { color: var(--theme-text-muted); font-size: 12px; text-decoration: none; white-space: nowrap; } @media (max-width: 520px) { .topbar { align-items: flex-start; padding-bottom: 4px; padding-top: calc(env(safe-area-inset-top) + 10px); } .topbar-main, .company-heading-static, .company-overview-link { align-items: flex-start; min-height: 26px; } .company-heading-text { padding-top: 2px; } .menu-button { height: 26px; justify-content: flex-start; padding-top: 2px; } .topbar-sync-button { align-items: flex-start; height: 26px; padding-top: 2px; width: 36px; } .notification-button { align-items: flex-start; height: 26px; padding-top: 2px; } .finexer-consent-shell { align-items: center; min-height: 100dvh; padding: max(64px, calc(env(safe-area-inset-top) + 24px)) 12px max(22px, env(safe-area-inset-bottom)); } .finexer-consent-panel { gap: 14px; padding: 18px; } .finexer-consent-brand { gap: 10px; grid-template-columns: 1fr; justify-items: center; text-align: center; } .finexer-consent-brand .login-logo { height: 46px; width: 46px; } .finexer-consent-brand-copy { justify-items: center; } .finexer-consent-panel h1 { font-size: 21px; } .finexer-consent-actions { grid-template-columns: 1fr; } .finexer-consent-actions .button { width: 100%; } .notification-sheet { max-height: min(76dvh, 520px); } .notification-alert-item { gap: 8px; padding: 8px 9px; } .notification-alert-title { font-size: 12px; gap: 6px; } .notification-alert-body { font-size: 10.8px; } .shipments-page-head { gap: 10px; grid-template-columns: 42px minmax(0, 1fr); padding: 11px 12px; } .shipments-head-icon { height: 42px; width: 42px; } .shipments-head-icon svg { height: 21px; width: 21px; } .shipments-page-head h1 { font-size: 18px; } .shipments-head-meta { font-size: 11px; } .shipments-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shipments-kpi { min-height: 68px; padding: 9px; } .shipments-kpi-value { font-size: 16.8px; } .shipments-tabs { gap: 5px; } .shipments-tab { font-size: 10.2px; min-height: 32px; padding: 0 5px; } .shipment-card { gap: 9px; padding: 11px; } .shipment-card-main { gap: 8px; grid-template-columns: minmax(0, 1fr); } .shipment-title-row { align-items: flex-start; flex-direction: column; gap: 5px; } .shipment-reference { max-width: 100%; white-space: normal; } .shipment-amount-block { align-items: center; display: flex; gap: 8px; justify-content: space-between; min-width: 0; text-align: left; } .shipment-document-grid { grid-template-columns: 1fr; } .documents-search { grid-template-columns: 16px minmax(0, 1fr) 22px; min-height: 30px; padding-left: 8px; } .documents-search input { font-size: 11.8px; } .documents-action-cluster { gap: 5px; } .documents-upload-button { height: 30px; padding: 0 8px; } .documents-upload-button span { display: none; } .documents-icon-button { height: 30px; min-width: 30px; } .documents-title-row { align-items: start; gap: 9px; grid-template-columns: minmax(0, 1fr) max-content; margin-top: 5px; } .documents-title-row h1 { font-size: 22px; } .documents-title-row p { font-size: 11.5px; } .documents-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .documents-insight-card { min-height: 68px; padding: 9px; } .documents-insight-value { font-size: 17px; } .documents-company-grid { grid-template-columns: minmax(0, 1fr); } .documents-company-card { min-height: 68px; padding: 10px; } .documents-folder-browser { gap: 7px; } .documents-folder-nav { gap: 7px; min-height: 31px; } .documents-folder-back { height: 30px; width: 30px; } .documents-folder-location span { font-size: 9.4px; } .documents-folder-location strong { font-size: 13.2px; } .documents-folder-panel, .documents-folder-panel-items { gap: 6px; } .documents-folder-eyebrow { font-size: 9.8px; } .documents-folder-tile { gap: 5px; grid-template-columns: minmax(0, 1fr) max-content; min-height: 50px; padding: 6px; } .documents-folder-open { gap: 7px; grid-template-columns: 34px minmax(0, 1fr) 15px; min-height: 34px; } .documents-folder-tile .documents-row-actions .documents-mini-icon-button { height: 28px; width: 28px; } .documents-year-group > summary { grid-template-columns: 36px minmax(0, 1fr) max-content; min-height: 42px; } .documents-month-card, .documents-flat-section { gap: 9px; padding: 10px; } .documents-month-head { grid-template-columns: 34px minmax(0, 1fr) max-content; } .documents-folder-row, .documents-statement-row { grid-template-columns: 34px minmax(0, 1fr) max-content; } .documents-folder-row.is-shipment { align-items: start; grid-template-columns: 34px minmax(0, 1fr) 30px; } .documents-folder-row.is-shipment .documents-status-pill { grid-column:2 / 4; grid-row:2; justify-self:start; margin-left:0; } .documents-folder-row.is-shipment .documents-row-actions { align-self:start; grid-column:3; grid-row:1; justify-self:end; } .documents-statement-row .documents-status-pill { justify-self: start; } .documents-statement-row .documents-row-actions { grid-column: 3; grid-row: 1 / span 2; } .documents-folder-icon { height: 34px; width: 34px; } .documents-folder-icon svg { height: 17px; width: 17px; } .documents-folder-title { font-size: 12.8px; white-space: normal; } .documents-folder-meta { font-size: 10.6px; white-space: normal; } .documents-document-grid { grid-template-columns: minmax(0, 1fr); } .release-popup-overlay { align-items: center; padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px); } .release-popup { max-width: 420px; width: 100%; } .release-popup-image { max-height: 46dvh; object-fit: contain; } .release-popup-copy { padding: 17px 15px 18px; } .release-popup-title { font-size: 22px; } .release-popup-detail { font-size: 12.5px; } .metrics { padding-top: 8px; } .held-funds-notice { border-color: rgba(241, 210, 138, 0.82); gap: 7px; min-height: 46px; padding: 7px 10px; } .held-funds-warning-icon { height: 22px; width: 22px; } .held-funds-warning-icon svg { height: 20px; width: 20px; } .held-funds-title { font-size: 12.2px; gap: 4px; } .held-funds-detail { font-size: 10.8px; } .held-funds-dismiss { height: 24px; width: 24px; } .metric.has-metric-icon { gap: 7px; padding: 12px 8px; } .all-companies-static-metric .all-companies-metric-label { font-size: 12px; margin-bottom: 6px; } .all-companies-static-metric .balance-spend-icon-trend, .all-companies-static-metric .balance-spend-icon-banknote { height: 34px; width: 34px; } .all-companies-static-metric .balance-spend-icon-trend svg, .all-companies-static-metric .balance-spend-icon-banknote svg { height: 21px; width: 21px; } .total-balance-card.all-companies-balance-card { gap: 10px; padding: 10px 12px; } .all-companies-balance-freshness { font-size: 10.8px; gap: 7px; } .companies-summary { --companies-summary-fixed-width: 126px; --companies-summary-inline-pad: 10px; --companies-summary-row-height: 46px; } .companies-summary-stats-table { min-width: 372px; } .companies-summary-fixed-head, .companies-summary-head-stats { font-size: 10px; line-height: 1; min-height: 34px; } .companies-summary-head-stats, .company-summary-stats-row { display: grid; gap: 6px; grid-template-columns: 84px 76px 116px 32px; } .companies-summary-head-stats span, .company-summary-stat { min-width: 0; overflow: hidden; text-align: right; text-overflow: clip; white-space: nowrap; } .companies-summary-head-full, .company-summary-value-full { display: none; } .companies-summary-head-short, .company-summary-value-compact { display: inline; } .company-summary-fixed-cell, .company-summary-stats-row { min-height: var(--companies-summary-row-height); } .company-summary-fixed-cell { padding: 4px 8px 4px var(--companies-summary-inline-pad); } .company-summary-stats-row { padding: 4px var(--companies-summary-inline-pad) 4px 0; } .company-summary-fixed-name { display: -webkit-box; font-size: 11.5px; line-height: 1.12; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .company-summary-label { display: none; } .company-summary-value { font-size: 11.8px; font-variant-numeric: tabular-nums; line-height: 1.08; overflow: hidden; text-align: right; text-overflow: clip; } .companies-summary-controls { grid-template-columns: minmax(0, 1fr) auto; } .companies-summary-result-count { grid-column: 1 / -1; } .companies-summary[data-company-summary-table] { display: none; } .company-summary-mobile-list { display: grid; gap: 7px; } .company-summary-mobile-card { align-items: center; background: var(--theme-surface); border: 1px solid var(--theme-border-subtle); border-radius: 9px; color: inherit; display: grid; gap: 5px 10px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: 11px 12px; text-decoration: none; } .company-summary-mobile-card:active { background: var(--theme-surface-green); } .company-summary-mobile-main { min-width: 0; } .company-summary-mobile-name { color: var(--theme-text); display: block; font-size: 13px; font-weight: 760; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-summary-mobile-freshness { color: var(--theme-text-muted); display: block; font-size: 10.8px; margin-top: 4px; } .company-summary-mobile-side { align-items: flex-end; display: grid; gap: 6px; justify-items: end; } .company-summary-mobile-balance { color: var(--theme-text); font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .all-transactions-tools { grid-template-columns: minmax(0, 1fr); } .all-transactions-result-count { padding-left: 1px; } .vat-workflow-grid { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .vat-workflow-card { padding: 9px 8px; } .vat-workflow-label { font-size: 10.2px; } .vat-workflow-value { font-size: 19px; } .vat-company-head { display: none; } .vat-company-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 10px; } .vat-company-name { white-space: normal; } .vat-company-period-line { grid-column: 1 / 2; } .vat-company-outstanding { grid-column: 2 / 3; grid-row: 2 / 3; } .vat-company-row .vat-status-pill { justify-self: end; } .vat-period-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; padding: 10px; } .vat-period-title { white-space: normal; } .vat-period-amount { grid-column: 1 / -1; text-align: left; } .vat-metric-status { align-items: flex-start; flex-direction: column; gap: 6px; } .vat-single-stack { gap: 11px; } .vat-current-period-card { gap: 0; grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 13px 14px 14px; } .vat-current-icon { border-radius: 8px; height: 40px; width: 40px; } .vat-current-icon svg { height: 20px; width: 20px; } .vat-period-icon, .vat-upcoming-icon, .vat-tracker-icon { height: 42px; width: 42px; } .vat-period-icon svg, .vat-upcoming-icon svg, .vat-tracker-icon svg { height: 20px; width: 20px; } .vat-current-label { font-size: 11px; } .vat-current-primary { gap: 9px; grid-template-columns: minmax(0, 1fr) max-content; } .vat-current-period-value { font-size: 20.6px; } .vat-current-amount-value { font-size: 20.6px; } .vat-current-meta { font-size: 10.9px; } .vat-readiness-panel, .vat-upcoming-panel, .vat-tracker-panel, .vat-history-panel { gap: 11px; padding: 12px; } .vat-panel-head { align-items: flex-start; flex-direction: column; gap: 4px; } .vat-panel-note { text-align: left; } .vat-readiness-lock-row { align-items: start; grid-template-columns: 34px minmax(0, 1fr); } .vat-readiness-lock-row .vat-status-pill { grid-column: 2 / 3; justify-self: start; } .vat-readiness-panel .vat-lock-icon { height: 34px; width: 34px; } .vat-upcoming-timeline { gap: 10px; grid-template-columns: 1fr; } .vat-upcoming-timeline::before { bottom: 22px; height: auto; left: 20px; right: auto; top: 22px; width: 2px; } .vat-upcoming-item { gap: 10px; grid-template-columns: 42px minmax(0, 1fr); justify-items: start; text-align: left; } .vat-tracker-grid { grid-template-columns: 1fr; } .vat-tracker-stat { grid-template-columns: 42px minmax(0, 1fr); justify-items: start; min-height: 0; padding: 10px 0; text-align: left; } .vat-tracker-stat + .vat-tracker-stat { border-left: 0; border-top: 1px solid var(--theme-border-soft); } .vat-history-panel { gap: 8px; padding: 0; } .vat-history-panel .vat-panel-head { align-items: center; flex-direction: row; padding: 0 1px; } .vat-history-panel .vat-panel-head h2 { font-size: 15.1px; } .vat-history-panel .vat-panel-note { font-size: 11.5px; text-align: right; } .vat-history-table-head, .vat-history-row { gap: 6px; grid-template-columns: minmax(78px, 1.05fr) minmax(68px, 0.78fr) minmax(76px, 0.88fr) minmax(58px, 0.68fr); } .vat-history-table-head { font-size: 9.5px; padding: 7px 8px; } .vat-history-row { align-items: center; min-height: 46px; padding: 8px; } .vat-history-period { white-space: normal; } .vat-history-details { gap: 4px; } .vat-history-detail { font-size: 9.4px; min-height: 0; padding: 0; } .vat-history-status-cell .vat-status-pill { font-size: 9.2px; min-height: 18px; padding: 0 5px; } .vat-history-amount { font-size: 10.6px; text-align: left; } .vat-history-review { font-size: 10px; } .company-command-hero { border-radius: 8px; gap: 8px; padding: 11px 12px 12px; } .company-command-copy { align-content: start; gap: 6px; } .company-command-kicker { font-size: 11.5px; line-height: 1; } .company-command-score { min-height: 21px; padding: 0 7px; } .company-command-score strong { font-size: 12.8px; } .company-command-score span { font-size: 9.4px; } .company-command-hero h1 { font-size: 16.6px; font-weight: 700; line-height: 1.08; } .company-command-meta { font-size: 10.5px; gap: 3px 8px; line-height: 1.14; } .company-command-card { gap: 9px; grid-template-columns: 48px minmax(0, 1fr) 16px; min-height: 80px; padding: 0 9px 0 0; } .company-command-card.is-primary { grid-template-columns: 48px minmax(0, 1fr) 16px; min-height: 86px; padding: 0 9px 0 0; } .company-command-card.is-compact { min-height: 62px; } .company-card-icon { min-height: 100%; width: 48px; } .company-card-icon svg { height: 20px; width: 20px; } .company-card-main { padding: 9px 0; } .company-command-card.is-compact .company-card-main { padding: 8px 0; } .company-command-card.is-primary .company-card-main { padding: 9px 0; } .company-card-title { font-size: 13.9px; } .company-card-metric { font-size: 15.9px; } .company-command-card.is-primary .company-card-metric { font-size: 16.4px; } .company-card-body { font-size: 11.7px; } .company-command-card.is-primary .company-card-facts { display: none; } .company-card-head { align-items: center; gap: 6px; min-height: 34px; } .company-card-title { white-space: normal; } .company-card-fact { max-width: 100%; } .company-section-head { align-items: flex-start; flex-direction: column; gap: 3px; } .company-section-meta { text-align: left; } .company-detail-panel { border-left: 0; border-radius: 18px 18px 0 0; bottom: 0; box-shadow: 0 -18px 36px rgba(22, 28, 35, 0.18); height: min(76dvh, 580px); inset: auto 0 0; width: 100%; } .company-detail-row { grid-template-columns: 1fr; } .company-detail-row strong { text-align: left; } .balance-spend-strip { gap: 7px; margin: 0 0 9px; padding: 0; } .balance-spend-card{border-radius:15px;gap:9px;grid-template-columns:minmax(0,1.45fr) minmax(112px,.9fr);padding:15px 10px 14px} .balance-spend-main { gap: 6px; padding: 0; } .balance-spend-main-content { column-gap: 8px; } .balance-spend-side { border-radius: 13px; column-gap: 7px; grid-template-columns: 34px minmax(0, 1fr); padding: 9px 10px; } .balance-spend-side-copy { align-content: center; gap: 4px; } .balance-spend-side .balance-spend-label { font-size: 11.6px; line-height: 1; margin-bottom: 0; white-space: nowrap; } .balance-spend-label { font-size: 12.7px; gap: 6px; margin-bottom: 6px; } .balance-spend-label { max-width: 100%; white-space: normal; } .balance-spend-value-row { gap: 5px; } .balance-spend-icon { height: 16px; width: 16px; } .balance-spend-icon-wallet { height: 38px; width: 38px; } .balance-spend-icon-wallet svg { height: 21px; width: 21px; } .balance-spend-icon-trend, .balance-spend-icon-banknote { height: 34px; width: 34px; } .balance-spend-icon-trend svg, .balance-spend-icon-banknote svg { height: 22px; width: 22px; } .balance-spend-value { font-size: 19.5px; line-height: 1.03; } .balance-spend-value, .balance-spend-side-value { max-width: 100%; overflow-wrap: anywhere; white-space: normal; } .balance-spend-side-value { font-size: 17.5px; line-height: 1.03; } .balance-spend-meta { font-size: 10.8px; grid-template-columns: minmax(0, 1fr); padding-right: 0; row-gap: 2px; white-space: normal; width: 100%; } .balance-spend-meta > span:first-child { overflow-wrap: anywhere; } .balance-spend-meta.balance-spend-meta-inline { column-gap: 7px; grid-template-columns: max-content max-content; white-space: nowrap; width: fit-content; } .balance-spend-meta.balance-spend-meta-inline > span:first-child { overflow-wrap: normal; } .balance-spend-freshness { justify-self: start; } .balance-spend-progress { gap: 6px; padding: 0; } .balance-spend-progress-track { height: 34px; } .balance-spend-progress-fill { min-width: 0; } .balance-spend-progress-value { font-size: 11.8px; padding: 0; } .balance-spend-progress-remainder { font-size: 10.8px; padding: 0 7px; } .provider-balance-item { min-height: 58px; } .provider-balance-item.has-credit-limit { min-height: 68px; } .provider-balance-value { font-size: 16px; } .target-progress-wrap { gap: 5px; margin-top: 8px; } .target-progress-head { flex-wrap: nowrap; gap: 4px; } .target-progress-value { font-size: 10.5px; } .target-progress-label, .target-progress-remaining { font-size: 11px; font-weight: 600; line-height: 1.15; white-space: nowrap; } .target-progress { height: 16px; max-width: 112px; } .target-progress-fill { min-width: 0; } } @media (max-width: 360px) { .launch-content { width: min(100%, 296px); } .company-banking-login-page .login-panel { width: min(100%, 306px); } .company-banking-login-page .login-panel.is-loading { padding: 28px 18px; } .company-banking-login-page .login-title { font-size: 26px; } .companies-summary { --companies-summary-fixed-width: 116px; --companies-summary-inline-pad: 8px; --companies-summary-row-height: 44px; } .companies-summary-stats-table { min-width: 330px; } .companies-summary-head-stats, .company-summary-stats-row { gap: 5px; grid-template-columns: 78px 68px 104px 30px; } .companies-summary-fixed-head, .companies-summary-head-stats { font-size: 8.8px; } .vat-workflow-grid { grid-template-columns: 1fr; } .vat-readiness-body { grid-template-columns: 30px minmax(0, 1fr); } .vat-lock-icon { height: 30px; width: 30px; } .all-companies-balance-value-row { gap: 6px; } .all-companies-balance-meta { font-size: 10.6px; } .all-companies-static-metric .all-companies-metric-label { font-size: 11.8px; } .company-summary-fixed-name { font-size: 10.5px; } .company-summary-value { font-size: 10.8px; } .launch-title { font-size: 17px; } .launch-subtitle { font-size: 15px; } .topbar { gap: 7px; } .topbar-side { gap: 6px; } .notification-button, .chat-global-button { height: 26px; width: 36px; } .metrics { grid-template-columns: 1fr; } .metric.wide { grid-column: auto; } .total-balance-card { align-items: stretch; grid-template-columns: 1fr; } .balance-spend-strip { gap: 7px; padding: 0; } .balance-spend-card { border-radius: 14px; gap: 8px; grid-template-columns: minmax(0,1.35fr) minmax(110px,.9fr); padding: 14px 9px; } .balance-spend-main { gap: 6px; padding: 0; } .balance-spend-main-content { column-gap: 7px; } .balance-spend-side { border-radius: 13px; column-gap: 6px; grid-template-columns: 32px minmax(0, 1fr); padding: 9px 8px; } .balance-spend-side .balance-spend-label { font-size: 10.8px; } .balance-spend-label { font-size: 12.2px; gap: 5px; margin-bottom: 6px; } .balance-spend-label { max-width: 100%; white-space: normal; } .balance-spend-value-row { gap: 4px; } .balance-spend-icon { height: 15px; width: 15px; } .balance-spend-icon-wallet { height: 36px; width: 36px; } .balance-spend-icon-wallet svg { height: 20px; width: 20px; } .balance-spend-icon-trend { height: 32px; width: 32px; } .balance-spend-icon-trend svg { height: 21px; width: 21px; } .balance-spend-value { font-size: 19.2px; } .balance-spend-value, .balance-spend-side-value { max-width: 100%; overflow-wrap: anywhere; white-space: normal; } .balance-spend-side-value { font-size: 17.1px; } .balance-spend-meta { font-size: 10.2px; grid-template-columns: minmax(0, 1fr); padding-right: 0; row-gap: 2px; white-space: normal; width: 100%; } .balance-spend-meta.balance-spend-meta-inline { column-gap: 6px; grid-template-columns: max-content max-content; white-space: nowrap; width: fit-content; } .balance-spend-freshness { justify-self: start; } .balance-spend-progress-track { height: 34px; } .balance-spend-progress-fill { min-width: 0; } .balance-spend-progress-value { font-size: 11.2px; padding: 0; } .balance-spend-progress-remainder { font-size: 10.1px; padding: 0 6px; } .provider-balance-item { min-height: 56px; } .provider-balance-item.has-credit-limit { min-height: 66px; } .provider-balance-link { padding: 7px 10px; } .provider-balance-value { font-size: 15.4px; } .target-progress-value { font-size: 10px; } .target-progress-label, .target-progress-remaining { font-size: 10px; font-weight: 600; line-height: 1.15; } .target-progress { max-width: 104px; } .button { width: 100%; } th, td { padding-left: 8px; padding-right: 8px; } .col-amount { width: 92px; } } @media (max-height: 720px) { .company-banking-login-page .login-shell { align-items: center; padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); } .company-banking-login-page .login-logo { height: 76px; margin-bottom: 13px; width: 76px; } .company-banking-login-page .login-brand { margin-bottom: 18px; } .company-banking-login-page .login-title { font-size: 25px; line-height: 1.06; max-width: 300px; } .company-banking-login-page .login-kicker { font-size: 13px; margin-top: 8px; } .company-banking-login-page .input, .company-banking-login-page .button.full { min-height: 47px; } } @media (prefers-reduced-motion: reduce) { .launch-dot, .loading-spinner, .pull-refresh-indicator.is-refreshing .pull-refresh-spinner, .topbar-sync-line.is-syncing::before { animation: none; } .launch-dot { opacity: 0.72; transform: none; } .release-popup-overlay, .release-popup { transition: none; } } .deferred-dashboard-section { background: var(--theme-surface); border: 1px solid var(--theme-border-subtle); border-radius: 9px; margin-top: 14px; padding: 18px; } .needs-attention-summary { align-items: center; background: var(--theme-surface-green); border: 1px solid var(--theme-border-green); border-radius: 12px; display: flex; justify-content: space-between; margin-top: 16px; padding: 16px 18px; } .needs-attention-summary.has-issues { background: var(--theme-surface-orange); border-color: var(--theme-border-orange); } .needs-attention-summary h2 { font-size: 18px; margin: 0 0 4px; } .needs-attention-summary p { color: var(--theme-text-muted); font-size: 13px; margin: 0; } .needs-attention-summary strong { align-items: center; background: var(--theme-surface); border: 1px solid currentColor; border-radius: 999px; color: #15803d; display: inline-flex; font-size: 18px; height: 44px; justify-content: center; min-width: 44px; padding: 0 10px; } .needs-attention-summary.has-issues strong { color: var(--theme-orange-strong); } .deferred-dashboard-section .section-title { margin-top: 0; } .deferred-dashboard-copy { margin: 0 0 14px; } .progressive-load-button { background: var(--glass-action-blue); border-radius: 13px; box-shadow: var(--glass-action-blue-shadow); display: block; font-size: 13px; font-weight:600; margin: 12px auto 0; min-height: 44px; width: min(100%, 220px); } .progressive-load-button:hover { filter: saturate(1.08) brightness(1.02); } .pwa-update-banner { align-items: center; background: #172033; border-radius: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); color: var(--theme-on-accent); display: flex; gap: 14px; justify-content: space-between; left: 50%; max-width: calc(100% - 28px); padding: 12px 14px; position: fixed; transform: translateX(-50%); width: 430px; z-index: 10000; } .pwa-update-banner[data-pwa-update-banner] { pointer-events: none; } .pwa-update-banner.is-failed { background: #3b2b0b; } .pwa-update-banner span { line-height: 1.35; } .pwa-update-banner a { background: var(--theme-surface); border-radius: 8px; color: var(--theme-text-strong-alt); font-weight: 700; min-height: 44px; padding: 12px; text-decoration: none; white-space: nowrap; } .login-passkey-divider { align-items: center; color: var(--theme-text-muted); display: flex; font-size: 12px; gap: 10px; margin: 14px 0; } .login-passkey-divider::before, .login-passkey-divider::after { background: var(--theme-border-subtle); content: ""; flex: 1; height: 1px; } .passkey-login-button { background: var(--glass-action-clear); border: 1px solid var(--glass-border); box-shadow: var(--glass-action-clear-shadow); color: var(--theme-text-strong-alt); } .passkey-login-button.is-primary { background: var(--glass-action-blue); border-color: var(--glass-action-blue-border); box-shadow: var(--glass-action-blue-shadow); color: #fff; } .login-passkey-status { color: var(--theme-text-muted); font-size: 12px; line-height: 1.4; margin-top: 10px; min-height: 18px; } .login-recovery-form { margin-top: 6px; } .login-recovery-button { appearance: none; background: transparent; border: 0; color: var(--theme-text-secondary); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; min-height: 44px; padding: 8px 12px; text-decoration: underline; text-decoration-color: var(--theme-border); text-underline-offset: 4px; } .login-recovery-button:focus-visible { border-radius: 8px; outline: 3px solid rgba(11,114,185,.28); outline-offset: 2px; } .security-settings { display: grid; gap: 8px; } .security-settings[hidden] { display: none; } .security-settings h3 { color: var(--theme-text-strong-alt); font-size: 13px; letter-spacing: -0.01em; line-height: 1.25; margin: 6px 0 0; } .security-settings > .account-setting-subtitle { color: var(--theme-text-muted); font-size: 11px; font-weight: 520; line-height: 1.45; margin: -1px 0 1px; overflow: visible; text-overflow: clip; white-space: normal; } .security-expiry-warning { align-items: center; background: var(--theme-surface-purple); border: 1px solid var(--theme-border); border-left: 2px solid #6875f5; border-radius: 9px; color: #475467; display: flex; font-size: 11px; gap: 8px; line-height: 1.4; padding: 9px 10px; } .security-expiry-warning::before { background: #6875f5; border-radius: 999px; content: ""; flex: 0 0 auto; height: 6px; width: 6px; } .security-totp-row, .security-section-head { align-items: center; display: flex; gap: 7px; justify-content: space-between; } .security-totp-row .input { flex: 1; font-size: 14px; min-height: 42px; min-width: 0; } .security-totp-row .input:focus, .security-totp-row .input:focus-visible { border-color: #70acd3; box-shadow: 0 0 0 2px rgba(11, 114, 185, 0.11); outline: 0; } .security-list { display: grid; gap: 4px; } .security-settings .button { background: var(--glass-action-blue); border-radius: 12px; box-shadow: var(--glass-action-blue-shadow); font-size: 11.25px; font-weight: 720; min-height: 40px; padding: 0 12px; position: relative; } .security-settings .button::before { content: ""; inset: -2px 0; position: absolute; } .security-settings .button:hover { filter: saturate(1.08) brightness(1.02); } .security-settings [data-security-key-add] { background: var(--theme-surface-blue); border: 1px solid var(--theme-border); color: #075f9c; min-height: 44px; } .security-settings [data-security-key-add]::before { inset: -4px 0; } .security-settings [data-security-key-add]:hover { background: var(--theme-surface-blue); border-color: #a9cce1; } .security-section-head { border-top: 1px solid var(--theme-border-soft); margin-top: 3px; padding-top: 9px; } .security-section-head h3 { margin: 0; } .security-settings [data-security-revoke-others] { background: var(--theme-surface-red); border: 1px solid var(--theme-border-red); border-radius: 7px; color: var(--theme-pink-text); font-size: 10.75px; min-height: 32px; padding: 0 10px; } .security-settings [data-security-revoke-others]::before { inset: -6px 0; } .security-settings [data-security-revoke-others]:hover { background: var(--theme-surface-red); border-color: var(--theme-border-red); } .security-item { align-items: center; background: var(--theme-surface-subtle); border: 1px solid var(--theme-border); border-radius: 9px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.025); display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; padding: 6px; padding-left: 9px; } .security-item span { display: grid; gap: 2px; min-width: 0; padding: 1px 0; } .security-item strong { font-size: 11.25px; line-height: 1.25; overflow-wrap: anywhere; text-transform: capitalize; } .security-settings .security-item small { color: var(--theme-text-muted); font-size: 10.5px; line-height: 1.3; overflow-wrap: anywhere; } .security-item button { align-self: center; background: var(--theme-surface-red); border: 1px solid var(--theme-border-red); border-radius: 7px; color: #a3113b; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; min-height: 32px; min-width: 62px; padding: 4px 10px; position: relative; white-space: nowrap; } .security-item button::before { content: ""; inset: -6px 0; position: absolute; } .security-item button:hover { background: var(--theme-surface-red); border-color: var(--theme-border-red); } .security-item [data-security-passkey-remove] { background: var(--theme-surface-purple); border-color: var(--theme-border-purple); color: #6e5477; } .security-item [data-security-passkey-remove]:hover { background: var(--theme-surface-purple); border-color: var(--theme-border-purple); } .security-item [data-security-session-action="sign-out"] { background: var(--theme-surface-muted); border-color: var(--theme-border); color: var(--theme-text-strong-alt); } .security-item [data-security-session-action="sign-out"]:hover { background: var(--theme-surface-soft); border-color: var(--theme-border); } .security-item:not(:has(button)) { background: transparent; border: 0; border-bottom: 1px solid var(--theme-border-soft); border-radius: 0; box-shadow: none; min-height: 42px; padding: 6px 2px; } .security-empty { align-items: center; color: var(--theme-text-muted); display: flex; font-size: 10.5px; gap: 7px; line-height: 1.35; margin: 0; min-height: 28px; padding: 2px; } .security-empty::before { background: var(--theme-border-control); border-radius: 999px; content: ""; flex: 0 0 auto; height: 5px; width: 5px; } .security-list + h3 { border-top: 1px solid var(--theme-border-soft); margin-top: 5px; padding-top: 11px; } .company-switch-skeleton{display:none} html.company-switch-loading .company-sheet{transition:none!important;visibility:hidden!important} html.company-switch-loading .company-sheet-overlay{display:none!important} html.company-switch-loading .shell { transform: none; transition: none; } html.company-switch-loading body.drawer-open .shell{transform:translate3d(var(--drawer-shell-translate-x,0px),0,0)} body.company-switch-loading .shell>:not(.topbar):not(.chat-topbar):not(.watch-topbar):not(.company-switch-skeleton){display:none!important} body.company-switch-loading .topbar-side{opacity:.72;pointer-events:auto} body.company-switch-loading .company-switch-skeleton { animation: company-banking-skeleton-enter 180ms ease-out both; display: block; padding: 0; pointer-events: none; } .chat-workspace>.company-switch-skeleton{height:100%;min-height:0;overflow:hidden} .company-switch-skeleton.is-chat .chat-skeleton{height:100%;overflow:hidden}.is-chat .chat-skeleton-list-tools{padding:14px 8px 10px}.is-chat .chat-skeleton-search{height:44px;width:100%}.is-chat .chat-skeleton-list-heading{display:grid;gap:10px;padding:4px 8px 12px}.is-chat .chat-skeleton-heading-copy{display:grid;gap:6px}.is-chat .chat-skeleton-title{height:16px;width:84px}.is-chat .chat-skeleton-count{height:9px;width:70px}.is-chat .chat-skeleton-filters{display:flex;gap:7px}.is-chat .chat-skeleton-filter{height:44px;width:72px}.is-chat .chat-skeleton-room-list{list-style:none;margin:0;padding:4px 0}.is-chat .chat-skeleton-room{align-items:center;display:grid;gap:11px;grid-template-columns:46px minmax(0,1fr) auto;min-height:68px;padding:8px}.is-chat .chat-skeleton-avatar{border-radius:50%;height:46px;width:46px}.is-chat .chat-skeleton-room-copy{display:grid;gap:8px}.is-chat .chat-skeleton-line{height:12px;width:68%}.is-chat .chat-skeleton-line.is-muted{height:9px;width:48%}.is-chat .chat-skeleton-badge{height:18px;width:25px}.is-chat .chat-skeleton-conversation{display:none}.is-watch .watch-loading-skeleton{padding:18px 4px}.is-watch .watch-loading-skeleton>.is-title{height:29px;width:38%}.is-watch .watch-loading-skeleton>.is-copy{height:14px;margin-top:10px;width:58%}.is-watch .watch-loading-skeleton>div{display:grid;gap:12px;margin-top:24px}.is-watch .watch-loading-skeleton div i{height:88px} .company-switch-skeleton-metrics { margin-bottom: 12px; } .company-switch-skeleton-block { background: var(--theme-border-control); border-radius: 7px; display: block; overflow: hidden; position: relative; } .company-switch-skeleton-block::after { animation: company-banking-skeleton-shimmer 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.42) 34%, rgba(255, 255, 255, 0.94) 50%, rgba(255, 255, 255, 0.42) 66%, transparent 100%); content: ""; inset: 0; position: absolute; transform: translateX(-110%); } .company-switch-skeleton .balance-spend-copy, .company-switch-skeleton .balance-spend-side-copy { gap: 7px; width: 100%; } .company-switch-skeleton .is-label { height: 13px; width: 62%; } .company-switch-skeleton .is-balance-value { height: 34px; width: 82%; } .company-switch-skeleton .is-spend-value { height: 30px; width: 42%; } .company-switch-skeleton-meta { display: flex; gap: 14px; } .company-switch-skeleton-meta i { height: 11px; width: 72px; } .company-switch-skeleton .balance-spend-progress-track::before { display: none; } .company-switch-skeleton .is-progress { width: 100%; } .company-switch-skeleton.is-banking .balance-spend-strip{margin:0 0 9px;padding:0} .company-switch-skeleton .is-provider-name { height: 13px; width: 58%; } .company-switch-skeleton .is-provider-value { height: 20px; width: 68%; } .company-switch-skeleton .is-provider-meta { height: 10px; width: 52%; } .company-switch-skeleton-vat .vat-current-head>:last-child,.company-switch-skeleton-vat .vat-panel-head>:last-child{width:56px}.company-switch-skeleton-vat .vat-current-primary>:last-child{justify-self:end;width:72px} .company-switch-skeleton .provider-balance-item { align-content: center; display: grid; gap: 3px; padding: 8px 10px; } .company-switch-skeleton .provider-balance-item > .company-switch-skeleton-block + .company-switch-skeleton-block { margin-top: 4px; } .company-switch-skeleton .provider-balance-item:nth-child(2) .company-switch-skeleton-block::after { animation-delay: 90ms; } .company-switch-skeleton .provider-balance-item:nth-child(3) .company-switch-skeleton-block::after { animation-delay: 180ms; } .company-switch-skeleton-heading i:first-child { height: 17px; width: 84px; } .company-switch-skeleton-heading i:last-child { height: 12px; width: 136px; } .company-switch-skeleton-filter { align-items: center; display: flex; flex: 1 0 0; justify-content: center; min-height: 30px; padding: 0 8px; } .company-switch-skeleton-filter + .company-switch-skeleton-filter { border-left: 1px solid var(--theme-border); } .company-switch-skeleton-filter i { height: 11px; width: 62%; } .company-switch-skeleton-transactions h2 i { height: 15px; width: 62px; } .company-switch-skeleton-transactions th i { height: 9px; width: 60%; } .company-switch-skeleton-transactions th:last-child i { margin-left: auto; } .company-switch-skeleton-transactions td .company-switch-skeleton-block + .company-switch-skeleton-block { margin-top: 4px; } .company-switch-skeleton-transactions .is-date { height: 12px; width: 26px; } .company-switch-skeleton-transactions .is-time { height: 9px; width: 34px; } .company-switch-skeleton-transactions .is-entity { height: 12px; width: min(78%, 180px); } .company-switch-skeleton-transactions .is-provider { height: 9px; width: 48px; } .company-switch-skeleton-transactions .is-amount { height: 13px; margin-left: auto; width: 72px; } .company-switch-skeleton-transactions tbody tr:nth-child(2n) .company-switch-skeleton-block::after { animation-delay: 90ms; } .is-documents .documents-skeleton-tabs{margin:9px 0}.is-documents .documents-skeleton-hero{height:85px;margin:0 0 9px;padding:8px}.is-documents .documents-skeleton-view{height:34px;width:68px}.is-documents .documents-skeleton-tools{display:grid;gap:5px;grid-template-columns:minmax(0,1fr) 106px;height:32px;margin-bottom:6px}.is-documents .documents-action-cluster{display:grid;gap:5px;grid-template-columns:repeat(3,1fr)}.is-documents .documents-skeleton-metrics{gap:5px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:9px}.is-documents .company-switch-skeleton-documents-metric{min-height:46px;padding:5px 6px}.is-documents .documents-skeleton-location{display:grid;gap:3px;margin-bottom:9px;width:110px}.is-documents .documents-skeleton-folders{gap:5px;grid-template-columns:repeat(3,minmax(0,1fr))}.is-documents .documents-skeleton-folder{height:58px;padding:0} @keyframes company-banking-skeleton-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes company-banking-skeleton-shimmer { to { transform: translateX(110%); } } .company-banking-login-page input:not([type="hidden"]), .company-banking-login-page button { min-height: 44px; } @media (pointer: coarse) { button, .button, [role="button"], .menu-button, .notification-button, .chat-global-button, .topbar-connect-bank-link, .company-sheet-close, .notification-sheet-close { min-height: 44px; min-width: 44px; } input, select, textarea { min-height: 44px; } .company-sheet-search input { min-height: 32px; } .company-group-tabs button, .company-sheet-view-button { min-height: 34px; min-width: 30px; } .documents-title-row .documents-view-button { min-height: 30px; min-width: 32px; } .company-switch-skeleton.is-banking .balance-spend-target-edit{height:44px;width:44px} .topbar-side { gap: 0; } .muted, .subvalue, .provider, .when-time, .freshness-badge, .account-setting-subtitle, .company-summary-mobile-freshness, .security-item small { font-size: 12px; } .company-summary-attention { font-size: 10.5px; } } @media (max-width: 520px) { .topbar { align-items: center; padding-bottom: 2px; padding-top: calc(env(safe-area-inset-top) + 4px); } .topbar-main, .company-heading-static, .company-overview-link { align-items: center; min-height: 44px; } .company-heading-text { padding-top: 0; } .menu-button, .topbar-sync-button, .notification-button, .chat-global-button { align-items: center; height: 44px; justify-content: center; padding-top: 0; width: 44px; } .topbar-side { align-items: center; } .all-companies-balance-value-row { gap: 4px; } .all-companies-balance-meta { flex: 1 1 auto; font-size: 9.8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .needs-attention-summary { border-radius: 9px; margin-top: 10px; padding: 10px 12px; } .needs-attention-summary h2 { font-size: 14px; margin-bottom: 2px; } .needs-attention-summary p { font-size: 11.5px; } .needs-attention-summary strong { font-size: 14px; height: 36px; min-width: 36px; padding: 0 8px; } .deferred-dashboard-section { margin-top: 10px; padding: 12px; } .deferred-dashboard-copy { margin-bottom: 10px; } .security-settings { gap: 7px; } .security-settings h3 { font-size: 13px; margin-top: 4px; } .security-expiry-warning { font-size: 11px; padding: 9px 10px; } } @media (prefers-reduced-motion: reduce) { .company-switch-skeleton, .company-switch-skeleton *::after { animation: none !important; } .app-drawer.settings-transition .drawer-settings-menu-surface, .drawer-settings-page-surface, .chat-unread-overlay, .chat-unread-sheet, .chat-unread-toast { transition: none !important; } } /* Keep Simplified Chinese native while enforcing one compact SaaS hierarchy. */ html[lang="zh-CN"] body { font-synthesis: none; } html[lang="zh-CN"] :is(button, input, select, textarea) { font-family: inherit; } html[lang="zh-CN"] :is(h1, h2, h3, .drawer-nav-title, .settings-section-label, .company-heading-text, .balance-spend-label, .transaction-category-filter-button, .transaction-filter-option, th, .entity, .amount) { font-weight: 600; } html[lang="zh-CN"] :is(.balance-spend-meta, .transaction-category-filter-button, .transaction-filter-option, th, .company-sheet-results, .company-sheet-option-meta, .provider, .when-time, .freshness-badge, .sync-status, .notification-alert-body, .account-setting-subtitle, .held-funds-detail, .companies-summary-result-count, .all-transactions-result-count, .security-expiry-warning, .security-settings small, .security-empty) { font-size: 12px; line-height: 1.3; } html[lang="zh-CN"] :is(.vat-dashboard-page, .shipments-dashboard-page, .documents-dashboard-page) :is([class*="-meta"], [class*="-detail"], [class*="-copy"], [class*="-note"], [class*="-subtitle"], .subvalue) { font-size: 12px; line-height: 1.3; } html[lang="zh-CN"] :is(.company-command-hero, .company-command-card, .company-section, .company-detail-panel) :is([class*="-meta"], [class*="-body"], [class*="-detail"], [class*="-subtitle"]) { font-size: 12px; line-height: 1.3; } html[lang="zh-CN"] :is([class$="-pill"], [class$="-badge"], [class$="-kicker"], [class$="-eyebrow"], .transaction-detail-label) { font-size: 11px; font-weight: 600; line-height: 1.15; } html[lang="zh-CN"] :is(.amount, [class$="-amount"], [class$="-amount-value"], [class$="-balance"], [class$="-balance-value"], [class$="-value"]) { font-variant-numeric: tabular-nums; } html[data-theme="dark"] .target-editor-current { background: linear-gradient(135deg, #162434 0%, #13202c 100%); } html[data-theme="dark"] .release-popup-copy { background: linear-gradient(180deg, #17201c 0%, #141d19 100%); } html[data-theme="dark"] .notification-master-card { background: linear-gradient(135deg, #152432, #17222b); } html[data-theme="dark"] .notification-actions { background: linear-gradient(rgba(17, 24, 32, 0), var(--theme-surface) 28%); } html[data-theme="dark"] .balance-spend-progress-remainder { background: rgba(25, 36, 47, .48); color: var(--theme-text-muted); } html[data-theme="dark"] .balance-spend-progress-remainder::before { background: linear-gradient(90deg, rgba(37, 49, 60, 0), rgba(37, 49, 60, 0.58) 48%, rgba(37, 49, 60, 0.86) 72%, #25313c 100%); } html[data-theme="dark"] .company-switch-skeleton-block::after { background: linear-gradient(90deg, transparent 0%, rgba(167, 178, 190, 0.08) 34%, rgba(167, 178, 190, 0.22) 50%, rgba(167, 178, 190, 0.08) 66%, transparent 100%); } html[data-theme="dark"] :is(.drawer-overlay, .company-sheet-overlay, .notification-sheet-overlay, .target-editor-overlay, .transaction-edit-overlay) { background: var(--theme-overlay); } html[data-theme="dark"] :is(.provider-balance-logo, .metric-provider-logo) { filter: invert(1) hue-rotate(180deg) brightness(1.12) contrast(.96); mix-blend-mode: screen; } html[data-theme="dark"] .provider-balance-logo { background: transparent; border-radius: 0; box-sizing: border-box; padding: 0; } html[data-theme="dark"] :is(input, select, textarea) { caret-color: var(--theme-text); } html[data-theme="dark"] .launch-logo-frame { background: transparent; border-radius: 0; box-shadow: none; } html[data-theme="dark"] .launch-logo-mark-light { display: none; } html[data-theme="dark"] .launch-logo-mark-dark { display: block; } html[data-theme="dark"] .drawer-nav-item.is-banking { --drawer-icon-bg: #123629; --drawer-icon-color: #6ee7b7; } html[data-theme="dark"] .drawer-nav-item.is-vat { --drawer-icon-bg: #113431; --drawer-icon-color: #5eead4; } html[data-theme="dark"] .drawer-nav-item.is-shipments { --drawer-icon-bg: #352419; --drawer-icon-color: #fdba74; } html[data-theme="dark"] .drawer-nav-item.is-inventory { --drawer-icon-bg: #292442; --drawer-icon-color: #c4b5fd; } html[data-theme="dark"] .drawer-nav-item.is-documents { --drawer-icon-bg: #202c38; --drawer-icon-color: #e2e8f0; } html[data-theme="dark"] .drawer-nav-item.is-hmrc { --drawer-icon-bg: #351d26; --drawer-icon-color: #fb7185; } html[data-theme="dark"] .drawer-nav-item.is-profit-loss { --drawer-icon-bg: #172d42; --drawer-icon-color: #7dd3fc; } html[data-theme="dark"] .transaction-category-filter-option input { accent-color: var(--theme-blue-text); } html[data-theme="dark"] .provider-balance-freshness-text { background: var(--theme-surface-control); box-shadow: 0 2px 7px #0005; color: var(--theme-text-secondary); } html[data-theme="dark"] .provider-balance-item:is([data-freshness-state="warning"],[data-freshness-state="stale"]) .provider-balance-freshness-text { box-shadow: 0 0 0 2px var(--theme-canvas); } html[data-theme="dark"] :is(.launch-title, .balance-spend-label, .balance-spend-value, .balance-spend-side-value, .target-editor-current-copy strong, .target-editor-current-value, .target-editor-form > label, .release-popup-title, .vat-history-period, .transaction-group-statement-button:hover, .transaction-group-statement-button:focus-visible, .transaction-detail-item strong) { color: var(--theme-text-strong); } html[data-theme="dark"] :is(.target-editor-close, .target-editor-input-wrap > span, .target-editor-auto, .notification-status, .company-summary-attention.is-slate, .vat-status-pill.is-slate, .documents-mini-icon-button, .company-command-kicker, .needs-attention-summary p, .security-expiry-warning) { color: var(--theme-text-muted); } html[data-theme="dark"] :is(.company-sheet-option-icon, .company-sheet-current-pill, .balance-spend-target-edit, .balance-spend-target-empty, .target-editor-current-icon, .vat-status-pill.is-blue, .vat-history-status-cell .vat-status-pill.is-blue, .security-settings [data-security-key-add]) { color: var(--theme-blue-text); } html[data-theme="dark"] :is(.target-editor-status.is-error, .notification-status.is-error, .company-summary-attention.is-red, .vat-status-pill.is-red, .vat-workflow-card.is-red .vat-workflow-value, .vat-history-status-cell .vat-status-pill.is-red, .vat-history-review.is-pink, .company-banking-login-page .alert, .error, .security-item button) { color: var(--theme-red-text); } html[data-theme="dark"] :is(.target-editor-status.is-success, .release-popup-detail, .company-summary-attention.is-green, .vat-status-pill.is-green, .vat-workflow-card.is-green .vat-workflow-value, .vat-current-icon, .vat-history-status-cell .vat-status-pill.is-green, .vat-history-amount-note, .vat-history-review.is-green, .vat-history-row.is-refund .vat-history-amount, .shipment-document-chip.is-present, .documents-document-chip.is-present, .amount.in, .needs-attention-summary strong) { color: var(--theme-green-strong); } html[data-theme="dark"] :is(.transfer-message.is-review, .transfer-message.is-error, .transfer-warning, .company-summary-attention.is-amber, .vat-status-pill.is-amber, .vat-workflow-card.is-amber .vat-workflow-value, .vat-history-status-cell .vat-status-pill.is-amber, .vat-history-row.is-payable .vat-history-amount, .shipments-notice, .shipments-notice-title, .shipments-notice-copy, .documents-folder-icon.is-bank, .documents-folder-icon.is-statement, .company-command-score.is-amber span, .company-source-notice.is-partial, .company-source-notice.is-not_configured, .company-source-notice.is-missing_company_number, .company-source-notice.is-not_found, .alert) { color: var(--theme-orange-medium); } html[data-theme="dark"] :is(.drawer-user-badge.is-purple, .drawer-user-badge.is-pink, .vat-status-pill.is-purple, .vat-history-status-cell .vat-status-pill.is-purple, .company-status-pill.is-indigo, .security-item [data-security-passkey-remove]) { color: var(--theme-purple-text); } .companies-os-native-update{background:#071119fa;color:#f7fbff;display:grid;inset:0;padding:24px;place-items:center;position:fixed;z-index:2147483647} .companies-os-native-update>section{background:#101d27;border:1px solid #27465a;border-radius:28px;padding:30px 24px 24px;text-align:center;width:min(100%,390px)} .companies-os-native-update img{border-radius:22px;height:76px;width:76px} .companies-os-native-update span{color:#56c7ff;display:block;font-weight:800} .companies-os-native-update h1{margin:8px 0 12px} .companies-os-native-update p{color:#b7c8d4;line-height:1.55;margin:0} .companies-os-native-update small{color:#7f98a8;display:block;margin:18px 0} .companies-os-native-update a{-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);background:var(--glass-action-blue);border:1px solid var(--glass-action-blue-border);border-radius:17px;box-shadow:var(--glass-action-blue-shadow);color:#fff;display:block;font-weight:800;padding:16px;text-decoration:none} /* Shared operational-page glass vocabulary. Route bundles keep only layout and branding. */ :where(.company-group-tabs button,.company-sheet-view-button,.company-action-buttons button){-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);background:var(--glass-action-clear);border-color:var(--glass-border);box-shadow:var(--glass-action-clear-shadow);color:var(--theme-text-secondary)} .company-group-tabs [aria-selected="true"]{background:var(--glass-surface-strong);border-color:var(--glass-border);box-shadow:0 4px 12px rgba(31,45,61,.09),inset 0 1px 0 var(--glass-highlight);color:var(--theme-text)} .company-action-buttons button[type="submit"]{background:var(--glass-action-blue);border-color:var(--glass-action-blue-border);box-shadow:var(--glass-action-blue-shadow);color:#fff} :where(.company-overview-shell,.vat-dashboard-shell,.shipments-dashboard-shell,.documents-dashboard-shell,.profit-loss-shell){background:var(--theme-canvas)} :where(.company-command-hero,.company-command-card,.company-section,.company-detail-panel,.vat-panel,.vat-current-period-card,.vat-readiness-card,.vat-history-panel,.shipment-card,.shipments-kpi,.shipments-notice,.documents-insight-card,.documents-folder-browser,.documents-shipment-card,.documents-month-card,.profit-loss-metric,.profit-loss-disclosure){background:var(--glass-surface);border-color:var(--glass-border);border-radius:var(--radius-card);box-shadow:var(--glass-shadow-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} :where(.company-command-card,.company-section,.vat-panel,.shipment-card,.documents-shipment-card,.profit-loss-metric){position:relative} :where(.company-command-card,.company-section,.vat-panel,.shipment-card,.documents-shipment-card,.profit-loss-metric)::after{border:1px solid var(--glass-highlight);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute} :where(.shipments-tabs,.documents-section-tabs,.profit-loss-tabs){background:var(--glass-surface-muted);border-color:var(--glass-border);border-radius:14px;box-shadow:inset 0 1px 0 var(--glass-highlight);gap:3px;padding:3px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} .documents-section-tabs button{align-content:center;display:grid;gap:2px;justify-items:center;line-height:1.05;padding:5px 3px}.documents-section-tabs button strong{font-size:11px;font-weight:740;min-width:0;overflow:hidden;text-overflow:ellipsis}.documents-section-tabs button span{color:var(--theme-text-muted);font-size:9px;font-weight:700;line-height:1} :where(.shipments-tab,.documents-section-tabs button,.profit-loss-tab){border-radius:11px;min-height:40px;position:relative;transition:background-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease} :where(.shipments-tab.is-active,.documents-section-tabs button.is-active,.profit-loss-tab.is-active){background:var(--glass-surface-strong);border-color:var(--glass-border);box-shadow:0 4px 12px rgba(31,45,61,.09),inset 0 1px 0 var(--glass-highlight);color:var(--theme-text)} :where(.shipments-tab,.documents-section-tabs button,.profit-loss-tab):active{transform:scale(.985)} :where(.shipments-tab,.documents-section-tabs button,.profit-loss-tab,.documents-upload-button,.documents-view-button,.shipment-month-toggle,.company-detail-panel-close):focus-visible{outline:3px solid color-mix(in srgb,var(--theme-blue-text) 28%,transparent);outline-offset:2px} :where(.documents-search,.documents-time-basis,.all-transactions-search){background:var(--glass-surface-muted);border-color:var(--glass-border);border-radius:var(--radius-control);box-shadow:inset 0 1px 0 var(--glass-highlight)} :where(.documents-upload-button,.documents-view-button,.shipment-month-toggle){border-radius:var(--radius-control);min-height:var(--control-hit-size)} :where(.company-overview-empty,.shipments-empty-state,.documents-empty-state,.profit-loss-empty-state,.profit-loss-development){background:linear-gradient(145deg,var(--glass-surface-strong),var(--glass-surface-muted));border:1px solid var(--glass-border);border-radius:var(--radius-card);box-shadow:var(--glass-shadow-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} @media(max-width:520px){ :where(.company-overview-shell,.vat-dashboard-shell,.shipments-dashboard-shell,.documents-dashboard-shell,.profit-loss-shell){padding-left:12px;padding-right:12px} :where(.shipments-tab,.documents-section-tabs button,.profit-loss-tab){min-height:44px} } @media(prefers-reduced-motion:reduce){:where(.shipments-tab,.documents-section-tabs button,.profit-loss-tab){transition:none}} @media(prefers-reduced-transparency:reduce){:where(.company-command-hero,.company-command-card,.company-section,.company-detail-panel,.vat-panel,.vat-current-period-card,.vat-readiness-card,.vat-history-panel,.shipment-card,.shipments-kpi,.shipments-notice,.documents-insight-card,.documents-folder-browser,.documents-shipment-card,.documents-month-card,.profit-loss-metric,.profit-loss-disclosure,.shipments-tabs,.documents-section-tabs,.profit-loss-tabs){background:var(--theme-surface);-webkit-backdrop-filter:none;backdrop-filter:none}} /* Native glass system for account, settings, classifications, alerts, and authentication. */ :where(.settings-section-item,.account-setting-row,.notification-sheet,.notification-master-card,.notification-update-item,.notification-alert-item,.category-card,.category-label-note,.transaction-category-editor section,.security-dashboard,.security-item,.security-recovery-card,.security-location-row,.security-admin-shortcut,.login-panel){background:var(--glass-surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} :where(.settings-section-item,.account-setting-row,.notification-update-item,.notification-alert-item,.category-card,.security-dashboard,.security-item,.security-recovery-card,.security-location-row,.security-admin-shortcut){border-radius:var(--radius-card);position:relative} :where(.settings-section-item,.account-setting-row,.category-card,.security-item,.security-recovery-card,.security-location-row,.security-admin-shortcut)::after{border:1px solid var(--glass-highlight);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute} .settings-section-item{border-radius:14px;min-height:64px;padding:10px 12px;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease} .settings-section-item:not(:disabled):active,.account-setting-row:not(.account-setting-row-static):active{transform:scale(.985)} .settings-section-icon,.account-setting-icon{background:var(--glass-surface-muted);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight)} .account-setting-list{gap:8px}.account-setting-row{border:1px solid var(--glass-border);min-height:60px;padding:9px 11px;transition:background-color .18s ease,transform .18s ease}.account-settings .account-input{background:var(--glass-surface-muted);border-color:var(--glass-border);border-radius:var(--radius-control);min-height:44px}.account-settings .account-save-button,.account-logout{border-radius:var(--radius-control);min-height:44px} .notification-sheet{border:1px solid var(--glass-border);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -20px 56px rgba(20,31,45,.18);padding:10px 14px calc(14px + env(safe-area-inset-bottom))}.notification-sheet-close{background:var(--glass-surface-muted);border:1px solid var(--glass-border);height:44px;width:44px}.notification-update-item,.notification-alert-item{border-radius:14px;min-height:60px}.notification-master-card{border:1px solid var(--glass-border);border-radius:var(--radius-card)} .category-settings{gap:12px}.category-card{background:var(--glass-surface);border-color:var(--glass-border);border-radius:var(--radius-card);box-shadow:var(--glass-shadow-soft);padding:12px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.category-controls input,.category-controls select,.category-matcher-add input,.category-matcher-add select{appearance:none;background:var(--glass-surface-muted);border-color:var(--glass-border);border-radius:var(--radius-control);min-height:44px}.category-matcher button{min-height:32px;min-width:32px}.category-matcher-add button,.category-save,.category-add-button{border-radius:var(--radius-control);min-height:44px}.transaction-category-editor section{border:1px solid var(--glass-border);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -20px 58px rgba(20,31,45,.2);padding:18px 16px calc(18px + env(safe-area-inset-bottom))}.transaction-category-editor input,.transaction-category-editor select{min-height:44px}.transaction-category-editor header button{height:44px;min-width:44px} .security-dashboard{border-radius:var(--radius-card)}.security-item,.security-recovery-card,.security-location-row,.security-admin-shortcut{border-radius:14px}.security-settings .button,.security-item .security-key-actions button,.security-admin-person-actions button,.security-admin-item-actions button{min-height:44px}.security-item button{min-height:40px}.security-settings :is(input,select){border-radius:var(--radius-control)}.security-key-dialog-card{background:var(--glass-surface-strong);border-color:var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(30px) saturate(1.45);backdrop-filter:blur(30px) saturate(1.45)}.security-key-dialog :is(input,select){background:var(--glass-surface-muted);border-color:var(--glass-border);border-radius:var(--radius-control);min-height:44px}.security-recovery-slot{background:var(--glass-surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.security-recovery-slot button:focus-visible,.security-recovery-dialog [data-recovery-dialog-close]:focus-visible{outline:3px solid color-mix(in srgb,var(--theme-blue-text) 30%,transparent);outline-offset:2px} .company-banking-login-page .login-panel{background:var(--glass-surface);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--glass-shadow);padding:24px 20px;-webkit-backdrop-filter:blur(30px) saturate(1.46);backdrop-filter:blur(30px) saturate(1.46)}.company-banking-login-page :is(.input,.button){border-radius:14px;min-height:48px}.login-recovery-button{border-radius:12px;text-decoration:none} .airwallex-page :is(.airwallex-nav,.airwallex-account-card,.airwallex-card-item,.airwallex-card-status-filters,.airwallex-dialog form,.airwallex-create-dialog form){background:var(--glass-surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.airwallex-page :is(.airwallex-nav,.airwallex-account-card,.airwallex-card-item){border-radius:var(--radius-card)}.airwallex-page .airwallex-nav{box-shadow:inset 0 1px 0 var(--glass-highlight);padding:3px}.airwallex-page .airwallex-nav a[aria-current="page"]{background:var(--glass-surface-strong);box-shadow:0 4px 14px rgba(31,45,61,.09),inset 0 1px 0 var(--glass-highlight)}.airwallex-page .airwallex-account-currencies button{border-color:var(--glass-border);min-height:44px}.airwallex-page .airwallex-account-currencies button.is-active{background:var(--glass-surface-strong);box-shadow:0 3px 10px rgba(31,45,61,.08)}.airwallex-page :is(.airwallex-card-filters button,.airwallex-card-filter-toolbar summary,.airwallex-card-status-filters button){min-height:44px}.airwallex-page .airwallex-card-status-picker summary{height:44px}.airwallex-page .airwallex-card-status-filters{top:45px}.airwallex-page .airwallex-create-dialog :is(input,select){background:var(--glass-surface-muted);border-color:var(--glass-border);min-height:44px}.airwallex-page :is(a,button,input,summary):focus-visible{outline:3px solid color-mix(in srgb,var(--airwallex-ui) 30%,transparent);outline-offset:2px} .security-admin-settings :is(.security-admin-hero,.security-admin-login-alert,.security-admin-metrics>article,.security-admin-person,.security-admin-baserow-person,.security-admin-dialog>form,.security-admin-form-section,.security-admin-toolbar,.security-admin-tabs){background:var(--glass-surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.security-admin-settings :is(.security-admin-hero,.security-admin-login-alert,.security-admin-person,.security-admin-baserow-person,.security-admin-form-section){border-radius:var(--radius-card)} :where(.settings-section-item,.account-setting-row,.notification-sheet-close,.category-save,.category-add-button,.transaction-category-editor button,.security-settings button,.login-panel button):focus-visible{outline:3px solid color-mix(in srgb,var(--theme-blue-text) 30%,transparent);outline-offset:2px} @media(max-width:360px){.company-banking-login-page .login-panel{padding:20px 16px}.settings-section-item{grid-template-columns:38px minmax(0,1fr) 18px}.category-controls,.category-matcher-add{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){:where(.settings-section-item,.account-setting-row){transition:none}} @media(prefers-reduced-transparency:reduce){.airwallex-page :is(.airwallex-back,.airwallex-nav,.airwallex-account-card,.airwallex-card-item,.airwallex-card-status-filters,.airwallex-dialog form,.airwallex-create-dialog form){background:var(--theme-surface);-webkit-backdrop-filter:none;backdrop-filter:none}} @media(prefers-reduced-transparency:reduce){.security-admin-settings :is(.security-admin-hero,.security-admin-login-alert,.security-admin-metrics>article,.security-admin-person,.security-admin-baserow-person,.security-admin-dialog>form,.security-admin-form-section,.security-admin-toolbar,.security-admin-tabs){background:var(--theme-surface);-webkit-backdrop-filter:none;backdrop-filter:none}:where(.settings-section-item,.account-setting-row,.notification-sheet,.notification-master-card,.notification-update-item,.notification-alert-item,.category-card,.category-label-note,.transaction-category-editor section,.security-dashboard,.security-item,.security-recovery-card,.security-location-row,.security-admin-shortcut,.security-key-dialog-card,.security-recovery-slot,.login-panel){background:var(--theme-surface);-webkit-backdrop-filter:none;backdrop-filter:none}} .drawer-nav-item.is-chat .drawer-icon-tile { color:#0785f8; background:color-mix(in srgb,#0785f8 13%,var(--theme-surface)); }